Hexoのコメント機能をDisqusに変更

記事別のコメントを撤去しました。
代わりに、forumを使用してください。

環境

Hexo 3.8.0
hexo-theme-pinghsu 1.4.1
Disqus バージョン不明

Disqusへ変更

色々ありまして、Disqusに乗り換えました。
Valineは軽いのはいいんだけど、返信メール関係が面倒なのと、コメント保存するサーバが中国なので日本で使うにはやや適していなく、また、日本で使用しているサイトが全然見つからない。
という訳で、日本で使われているDisqusに変えようと思います。

Disqus

特徴

各種SNSアカウントでのログイン
ゲストコメントを設定可能
スパムフィルタ
ブラックリストやホワイトリスト
ページやコメントに評価用のLikeボタン
画像やビデオが貼れる
コメント通知

SNSでログインしても、アカウントを作るためにパスワードを入力してログインすることになります。
結局パスワードが必要になってしまうので、SNSログインはお手軽ではない感じです。

ゲストコメントはメールアドレスが必要なので、スパムは減ると思うがコメントも減ってしまう気がする。
また、ゲストコメントに対しては、管理者が承認しないと表示されない模様。
前から殆どコメントされることが無いから大丈夫だ!

表示が若干遅い点と、Chrome > F12で警告表示が出ることでしょうかね。
表示には問題ないのですが気になる。
それと、個人的に困るのは、海外サイトをChromeのブラウザ翻訳で読むことがあるのですが、Disqusのコメント欄は翻訳されないのが地味に痛い。

料金プラン

Disqus Plans and Pricing

個人サイトなら無料のBasicで大丈夫だと思います。

アカウント取得

Disqus > Get Startedでアカウント作成。
SNSからログインしてもパスワードが必要になりあまり意味がないので、普通にアカウントを作りました。
ただし、SNSでログインしてコメントするなら、ありだとは思います。

Disqus Admin設定

ログイン > Admin > Settings > 設定したサイト名

General

Configure Disqus for Your Site

Website Name > fewlight

Website URL > https://fewlight.net/

Discovery
Enable recommendations for your site サイトのおすすめを有効にする
off

Category > Tech 適当なのが無かった

Community

Community & Comments Configuration

Default Sort
Best First > Newest First

Guest Commenting
Allow guest to comment > on

Reactions

Configure and enable Reactions

評価用のLikeボタン表示
非表示にするには、サイトで一度表示して無効にしないとできない > Maybe later

Enable Reactions on your site > Turn Reactions off > Turn reactions off > Yes, turn Reactions off

Advanced

Deeply integrate Disqus with your community.

Tracking
Enable anonymous cookie targeting for your site’s visitors.
サイトの訪問者に対して匿名Cookieターゲティングを有効にします。
off

Affiliate links
Automatically append merchant codes to product links on your site.
サイトの商品リンクにマーチャントコードを自動的に追加します。
off

Trusted Domains

信頼されたドメイン

Trusted Domains > fewlight.net

Disqus 個人設定

ログイン > 右上のアイコン > Settings

Account

Connected Accounts

Twitter > connect

Twitterと連携することで、Twitterでログインしてコメントするのが少し楽になり、管理者サイトなら管理者扱いとしてコメントできる。
ただし、これを選ぶなら、最初からTwitterアカウントでアカウントを取ればよかった気もしなくもない。

Profile

Avatar
Choose a method > Twitter
Twitterを連携していると表示される

Website > https://fewlight.net/

Email Notifications

Digests
Receive Disqus Digest emails > off

Hexoテーマ設定

このテーマはDisqus非対応なので、対応させないといけない。

C:/tools/hexo/_config.yml 追加

1 2	# disqus disqus_shortname: ショートネーム名

shortnameは、Disqusログイン > General > Configure Disqus for Your Site > Shortnameに表示されています。

C:/tools/hexo/themes/pinghsu/layout/_partial/footer.ejs </body>の前に追加

<% if (theme.disqus_shortname){ %>
    <script type="text/javascript">
        var disqus_shortname = '<%= config.disqus_shortname %>';
        var disqus_config = function () {
            this.page.url = '<%= config.url %>/<%= page.path %>';
            this.page.identifier = '/<%= page.path %>';
            this.language = 'ja';
        };
        (function(){
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src =  '//a.disquscdn.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        }());
    </script>
<% } %>

Disqusの言語設定で日本語が表示されない場合の対処法 - ブロギングライフ
this.language = 'ja';で、一部分以外が日本語になります

C:/tools/hexo/themes/pinghsu/layout/post.ejs 最終行の前に追加

<% if(theme.disqus_shortname){ %>
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
<% } %>

表示確認

後は、hexo sで表示確認して、CSSで調整をすればいいと思います。

まとめ

日本でも見かけるコメント機能なので、使い方に困る方は少ないと思われます。
後は、ブログにコメント機能はいらないという意見もありますが、連絡手段としておいておきたいと思います。

ただし、Disqusのアカウントを持っていない方はコメントするハードルが高いですね。
ゲストコメントがあるとはいえ、Valineの方がハードル低くて有利だなと思う。悩む。
なんか、いい感じのコメント機能ないですかね?

コメントテストどうぞ。

追記

2019-05-19
Disqus 個人設定 Email Notificationsを追加

2019-07-07
Hexoテーマ設定 footer.ejsのgo.disqus.com部分をa.disquscdn.comへ変更

2020-07-13
記事別のコメントを撤去