artitalkの使用と美化

Artitalk は、leancloud を使用してリアルタイムに投稿を行うための JavaScript です。私のブログのトップにある「投稿」をクリックすると、artitalk のインターフェースが表示されます。

この記事では、artitalk 2.4.xを pjax ウェブサイトで使用する方法とカスタマイズのプロセスを記録します。

pjax ウェブサイトでの artitalk の使用#

artitalk はリロード関数を提供していないため、現在の解決策は主に 2 つあります。

このページでさまざまな手段を使用してリロードを行う方法：
- 公式ドキュメントの方法で、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 ファイルを再読み込みする

ここでは、2 番目の方法について説明します。この prを参考にして、ページをリロードする際に元のwindow.AVオブジェクトを削除し、その後 artitalk.js を再読み込みする必要があります。

データの移行#

valine もwindow.AVを使用してサービスを提供しているため、artitalk の問題を解決するために上記の方法を使用すると、artitalk は valine のwindow.AVを自身のものに置き換えます。そのため、まず artitalk と valine が同じ LeanCloud アプリを使用していることを確認する必要があります。

artitalk の公式ドキュメントによると：

LeanCloud の制限により、valine と artitalk を同時に使用する場合は、classにCommentという名前のクラスを追加してください。valineのアプリ内にshuoshuoという名前のクラスを新しく作成することはお勧めしません。不思議なバグが発生する可能性があります。

したがって、valine のデータを artitalk に移行する必要があります（すでに同じアプリを使用している場合は、この手順をスキップできます）：

artitalk で使用している LeanCloud アプリでCommentクラスを作成します。アクセス数の機能を使用している場合は、Counterクラスも作成する必要があります。
元の valine アプリのCommentとCounterクラスをエクスポートします（ちなみに、なぜ正午までにしかエクスポートできないのか不思議です。メンテナンスに半日もかかりますか？！）
エクスポートしたCommentとCounterクラスを artitalk で使用しているアプリにインポートします。
valine の使用している ID と Key を artitalk と同じものに変更します。

具体的な実装手順#

この手順は私自身が試行錯誤して見つけたもので、多少手間がかかるかもしれません。

この記事のページ全体をリロードする方法を参考にすると、artitalk をウェブサイトに組み込み、data-pjax属性を追加し、data-pjax属性を持つ js ファイルを pjax でページを切り替えるたびにリロードすることができます。

ただし、artitalk をすべてのページで実行するわけではなく、artitalk ページにいる場合にのみ実行する必要があります。そのため、artitalk のソースコードを手動で変更して再構築する必要があります。具体的な手順は次のとおりです。

Artitalk リポジトリをクローンして指定の commit に切り替える#

バージョン履歴を確認した結果、1df35c9が最後のテストに合格した 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ディレクトリに配置します。次の行をフッターに追加します。

<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 をリロードすると、コメントの数は正しく表示されますが、内容が表示されないというバグが発生します。

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 セレクタを多く使用しているため、優先順位が高くなり、カスタムスタイルは適用されません。

解決策は 3 つあります。

カスタムスタイルにも ID セレクタを追加し、カスタムスタイルがデフォルトスタイルの後に配置されるようにします。

優先順位が複数の CSS 宣言で優先順位が等しい場合、CSS の最後の宣言が要素に適用されます。
カスタムスタイルの各プロパティに!importantを追加します。

!importantルールをスタイル宣言に使用すると、その宣言は他の宣言を上書きします。
cssurl項目を指定する

artitalk の設定項目ドキュメントによると、cssurl項目を指定すると、デフォルトのスタイルは読み込まれず、cssurlで指定された css ファイルが使用されます。

リポジトリのmain.cssをコピーし、指定されたエントリをカスタムスタイルに変更し、変更後の css ファイルをウェブサイトにアップロードし、アップロード後に取得した直リンクアドレスをcssurl項目に入力します。