artitalk的使用及美化

Artitalk 是一款通过 leancloud 实现的可实时发布说说的 js。点击我博客顶部的 “说说”，看到的即为 artitalk 界面。

本文主要记录artitalk 2.4.x在 pjax 网站的使用方法及美化过程。

在 pjax 网站使用 artitalk#

因为 artitalk 并没有提供重载函数，因此目前的解决办法主要有两种：

在该页面通过各种手段进行一次刷新，例如：
- 官方文档中的方法，自动在 artitalk 界面刷新
```
$(document).ready(function () {
    if(location.href.indexOf("#reloaded")==-1){
        location.href=location.href+"#reloaded";
        location.reload();
    }
})
```
- 对于 volantis 主题，将 artitalk 页面的window.location.pathname加入到主题配置的 pjax 黑名单
手动清除 artitalk 初始化的AV对象并重新加载 js 文件

此处我们讨论的是第二种方法。参照该 pr的思路，我们需要在页面重载的时候删除掉原本的window.AV对象，接着重新加载 artitalk.js。

数据迁移#

因为 valine 同样依赖window.AV提供服务。使用上述方法解决 artitalk 问题的代价是：** 在加载 artitalk 界面过程中，artitalk 将 valine 的window.AV替换成了自己的。** 所以首先我们需要确保 artitalk 和 valine 使用的是相同的 LeanCloud 应用。

按照 artitalk 官方文档的说法：

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

所以我们需要将 valine 的数据迁移到 artitalk 中（如果本来用的就是相同的应用可以跳过该步骤）：

在 artitalk 使用的 LeanCloud 应用中新建Comment class，如果有使用访问量功能的话还需要新建Counter class
将原来 valine 应用中的Comment和Counter class 导出（吐槽一句：为什么只能在中午十二点前导出啊！维护用得着整整半天吗？！）
将导出的Comment和Counter class 导入到 artitalk 使用的应用中
将配置文件中 valine 使用的 ID 和 Key 改成和 artitalk 相同的。

具体的实现过程#

这一步是我自己摸索出来的，可能有些繁琐。

参考该文章里重载整个 js 文件的实现思路，我们可以将 artitalk 引入到网站并加上data-pjax属性，并在每次 pjax 切换页面时对带有data-pjax属性的 js 文件进行重载。

但问题是，我们并不应该让 artitalk 在每个页面都执行，只有位于 artitalk 页面时才有执行的必要，因此我们需要手动修改artitalk源码并重新构建，具体流程是：

克隆 Artitalk 仓库并切换到指定 commit#

查看版本历史后发现1df35c9似乎是最后通过测试的 commit，因此我们使用该次 commit。

git clone https://github.com/ArtitalkJS/Artitalk
cd Artitalk
git checkout 1df35c9

加入对当前所处页面的判断#

我们需要加入对当前页面的判断，只有当前页是 artitalk 页时才需要执行脚本。以我的博客为例，artitalk 页面的window.location.pathname为/personal-space/，我做的操作是：

为src/main.js套一个判断

if (window.location.pathname==='/personal-space/'){
    // 文件原本内容
}

为av.min.js套一个判断

if (window.location.pathname==='/personal-space/'){
    if (window.AV!==undefined){
        delete window.AV
    }
    // 文件原本内容
}

安装依赖并构建#

# for yarn
yarn 
yarn gulp
# for npm
npm install
npm run gulp

在网站中引入构建好的文件#

把dist/artitalk.min.js放入博客的source/js目录。将这行加到 footer 里：

<script data-pjax src='/js/artitalk.min.js'></script>

修改`pjax:complete`函数#

// 这是Valine的重载函数
VA: function () {
    if (!valine) {
        var valine = new Valine()
        valine.init({
            el: '#vcomments',
            appId: mashiro_option.v_appId,
            appKey: mashiro_option.v_appKey,
            path: window.location.pathname,
            placeholder: '你是我一生只会遇见一次的惊喜 ...',
            visitor: true
        })
    }
}
// pjax:complete内
pjax(...,...,{...}).on('pjax:complete',function (){
    // 重载artitalk
    $("script[data-pjax], .pjax-reload script").each(function () {
        $(this).parent().append($(this).remove());
    });
    // 再重载valine
    VA()
})

这一步要注意顺序，实测如果先重载 valine 再重载 artitalk，会出现 valine 能正确显示评论条数却不能显示内容的 bug。

加入 artitalk 页面#

万事具备，最后只需要在 artitalk 对应的 md 文件内写入：

---
title: 标题
comments: false
---
<div id="artitalk_main"></div>
<script>
    var appID="你的ID";
    var appKEY="你的Key";
    // 各种配置项请参考artitalk官方文档
</script>

artitalk 美化（自定义样式）#

简单需求#

如果只是想换个背景色，我们可以通过简单指定配置项的color1/color2/color3来生效。例如我的博客，使用的配置是：

var color1='#d9d9f3';
var color2='#ceefe4';
var color3='black';

复杂需求#

对于更复杂的美化需求，这篇文章给出了多个自定义样式。然而，但实际使用中会发现文中的自定义方法不能生效。

我们来看一下 artitalk 添加的默认样式：

#artitalk_main .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
    ......
}

再来看看自定义的样式：

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
    ......
}

根据css优先级的规则：

内联 > ID 选择器 > 类选择器 > 标签选择器。

在其他部分相同的情况下，artitalk 的默认样式多使用了一个 ID 选择器，在优先级上是高于我们的自定义样式的，因此我们的自定义样式无法成功应用。

解决方法有三种：

为自定义样式同样加上 ID 选择器，并保证自定义样式位于默认样式后。

当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
为自定义样式中的每个属性加上!important。

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。
指定cssurl项

根据artitalk 配置项文档，当我们指定cssurl项时，默认样式将不会被加载，转而使用位于cssurl的 css 文件。

我们可以将仓库中的main.css拷贝出来，把指定的条目换成我们的自定义样式，并将修改后的 css 文件上传到某个网站，最后把上传后得到的直链地址填到cssurl项即可。