Matery主题添加Artitalk

前言

先上链接，这是我的说说界面：闲言碎语

有时候啊，hexo想发说说/微语总是有点麻烦，这时候Artitalk出现了。

安装Artitalk

Matery主题没有自带Artitalk集成，所以要自己安装。

先生成一个说说的页面：

1
hexo new page "shuoshuo"

然后在blog/source/下面出现了shuoshuo这个文件夹，里面有一个index.md文件。

打开这个文件，现在里面是这样的：

1
2
3
4
5
---
title: shuoshuo
date: 2020-06-05 11:15:37
type: shuoshuo
\-\-\-

把Front-Matery改成这样：

1
2
3
4
5
---
title: 闲言
date: 2020-06-05 11:15:37
type: "shuoshuo"
\-\-\-

当然title你可以自定义哦

之前真的很头疼，Artitalk和Valine不能同时使用，因为两者的后台都是基于LeanCloud的，所以不能一起使用。我也曾因此放弃过搭建说说。

我也试过在Front-Matter里添加comments: 'false'，但是这个方法仅适用于Butterfly主题，Matery主题没有这个配置。

但是前几天看到Artitalk官方的文档说解决了这个问题，我就再次尝试了。

和Valine一样，打开LeanCloud之后创建应用，之后我借用一下Artitalk.js的官方文档。

  1. 绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建class，命名为shuoshuo。

  2. 在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。

  3. 回到结构化数据中，点击class下的shuoshuo。找到权限，在Class访问权限中将add_fields以及create权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将delete和update也设置为跟它们一样的权限。

  4. 点击class下的_User添加列，列名称为img，默认值填上你这个账号想要用的头像url，这一项不进行配置，说说头像会显示为默认头像——Artitalk的logo。

  5. 在最菜单栏中找到设置->应用keys，记下来AppID和AppKey，一会会用。

  6. 最后将_User中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。

  7. 因为leancloud功能的限制。若想同时使用valine和artitalk，请在class中添加名为Comment的class。不推荐在存储valine的应用中新建名为shuoshuo的class，可能会出现神奇的bug。

之后在shuoshuo的index.md里添加如下代码：

1
2
3
4
5
6
7
8
9
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
    <script>
    var appID=""; <!--这里填写刚刚获取的appID-->
    var appKEY=""; <!--这里填写刚刚获取的appKEY-->
    </script>
    <div id="artitalk_main"></div>
    <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
</body>

如果出现特殊情况，我这里不一一解释/*其实我也不懂emmmm*/。最好是查看Artitalk.js的官方文档==>传送门

还有哈，有一些自定义功能可以到Artitalk.js的官方文档里查看，在这里==>传送门

但是Artitalk仍然不能使用。

更新Valine

Artitalk的大佬说了，Valine里面的av-min.js干扰了Artitalk。而v1.4.x版的Valine可以不需要av-min.js。于是我得把Valine升级一下。

由于Valine是集成在Matery主题里的，所以升级可折腾死我了。

到Github上找到Valine：传送门

复制https的Git地址，到GitHub代下载服务快速下载//真的没有打广告

然后解压，在dist文件夹里找到Valine.min.js，复制并替换blog\themes\matery\source\libs\valine里面的Valine.min.js

并删除av-min.js，然后hexo cl&&hexo g&&hexo s。查看的地址是 [https://{you blog’s site}/shuoshuo](https://{you blog’s site}/shuoshuo)

以下是我的效果图，但是我觉得这个样子很难看，这些画红框框的地方我不喜欢。

更不能忍受的是，最下面的文章跳转吧我的appID和appKey给泄露了。不但不美观，还有点危险。

优化说说界面

我再想了一下，由于我没有给shuoshuo定义页面，所以它就按照post的样式来了。

在Front-Matter里加上这个一行：

1
layout: "shuoshuo"

然后在主题文件夹下找到\matery\layout\，在里面新建一个shuoshuo.ejs文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<%- partial('_partial/bg-cover') %>

<main class="content">

    <div id="aboutme" class="container about-container">
        <div class="card">
        <div class="card">
     <div class="card-content">
         <div class="card-content article-card-content">
             <div class="title center-align" data-aos="zoom-in-up">
                 <i class="fa fa-comment"></i>&nbsp;&nbsp;<%- __('闲言碎语') %>
              </div>
                 <div id="articleContent" data-aos="fade-up">
                     <%- page.content %>
                 </div>
           </div>
           <div class="card">

            <% if (theme.gitalk && theme.gitalk.enable) { %>
            <%- partial('_partial/gitalk') %>
            <% } %>

            <% if (theme.gitment.enable) { %>
            <%- partial('_partial/gitment') %>
            <% } %>

            <% if (theme.disqus.enable) { %>
            <%- partial('_partial/disqus') %>
            <% } %>

            <% if (theme.livere && theme.livere.enable) { %>
            <%- partial('_partial/livere') %>
            <% } %>

            <% if (theme.valine && theme.valine.enable) { %>
            <%- partial('_partial/valine') %>
            <% } %>

        </div>
      </div>
</div>

    </div>
</main>

这个代码是我从about.ejs里面复制来的，经过删减和添加，可能效果还是不怎么样，但是毕竟算是我捣鼓出来的emmm。有不合理之处请赐教。

最后可以hexo cl&&hexo g&&hexo s看看，并试着hexo d了。

且慢！！！

我忘了一个很重要的事，要在主题文件的_config.yml里添加这么一行：

1
2
3
说说:
  url: /shuoshuo
  icon: fa fa-comment

这样才能在顶部菜单栏里看到这个页面。