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項即可。