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クラスをエクスポートします（ちなみに、なぜ午前 12 時までしかエクスポートできないのか不思議です。メンテナンスに半日もかかりますか？！）
エクスポートした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項目に入力します。