Hexoにコメント機能のValineを追加

Disqusへ変更しました

環境

Hexo 3.8.0
hexo-theme-pinghsu 1.4.1
Valine 1.3.6

Valineについて

Introduction | Valine
軽量でシンプルなコメントシステムです。
少し前から導入していました。

Valine

特徴

軽くて高速
Markdownが使える
Gravatar対応
絵文字対応

ここらへんがウリだと思いますが、とにかく軽いのは助かります。
いつコメントを貰えるのか分からないのに、重いと困りますから。

料金プラン

价格 - LeanCloud

開発版は無料で使用できますが、リクエスト数が1日あたり30,000までなどとなっているので、アクセス数が多くなければいけそうな予感。

使用するには

Valineを使ってHexoにコメント機能を追加してみる - Qiita

LeanCloudを使用するのでアカウントを取る必要がありますが、中国サイトなので言語の壁が大変です。
Chromeのブラウザ翻訳でも一部が翻訳できていないということがよく起こるので、またGoogle翻訳したり面倒ですね。

とりあえず、アカウントを取りましたが、上記のサイトに詳しく載っているのでそちらでどうぞ。
電話番号を入力するところがあります。

LeanCloud 設定

ログイン後 > 右上ユーザーアイコン > 账号设置

アプリ作成

创建应用 > +押す

新应用名称 > valine

选择应用的计价方案 > 开发版開発版

右下のボタン

アプリのキー取得

valine クリック > 应用 Key

使用するドメインを指定

安全中心 > Web 安全域名

https://fewlight.net/

保存

Valineのメール通知

βテスト中らしい

Valine 评论系统中的邮件提醒设置 · xCss/Valine Wiki · GitHub

どの記事にコメントされたか分からないので、記事の直接リンクもできず、できるのはサイトトップへのリンクぐらい。

Leancloudログイン > valine > 设置 > 邮件模板 > 用于重置密码的邮件主题

内容

<p>Hi, {{username}}</p>
<p>
您请求重设应用 {{appname}} 的密码。点击下列链接来重设您的帐号密码（链接在 48 小时内有效）：
</p>
<p>
<a href="{{link}}" target="_blank">{{link}}</a>
</p>
<p><a href="你的网址首页链接" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

下記へ

<p>こんにちは、{{username}} </p>
<p>
{{appname}}へのコメントに新しい返信がありました。
</p>
<p> <a href="https://fewlight.net/" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">サイトトップを表示</a></p>

保存

コメント表示ですが、使用しているテーマが対応していて、スマホ以外の狭い横幅でないのならフッターで表示されるようになっています。
全部表示されるわけではないので、条件付きかもしれませんが。
後、コメントにリンクが飛ぶのではなくて、コメントがある記事にリンクが飛びます。

フッターは、テーマやコピーライトぐらいのすっきりした表示が好きなのですが、分かりやすさ重視で表示することにしました。

Hexoテーマ設定

C:/tools/hexo/themes/pinghsu/_config.yml 130行目

valine:
  enable: true # 是否启用
  appId: # 应用AppID
  appKey: # 应用AppKey
  placeholder: Your commnet here. Be cool. # 输入框默认显示文本
  pageSize: 10 # 每页评论数量
  avatar: mp # 头像类型
  visitor: true # 文章阅读量统计

下記へ

valine:
  enable: true # 是否启用
  appId: 取得した値 # 应用AppID
  appKey: 取得した値 # 应用AppKey
  placeholder: Your commnet here. # 输入框默认显示文本
  pageSize: 10 # 每页评论数量
  avatar: mp # 头像类型
  visitor: false # 文章阅读量统计
  notify: true # Eメール通知
  verify: true # 確認コード
  lang: en # 言語設定

appIdとappKeyは、取得した値を入力。
visitorはサイトトップで日付の代わりに表示されてしまうのでfalse
notifyはメール通知。
verifyは、コメント投稿するときに計算式を表示して答えが合っているか確認するもの。
langは英語で。参考サイトに記載されている日本語設定をすると、残念ながらEmojiとPreviewがundefinedと表示されてしまう。

C:/tools/hexo/themes/pinghsu/layout/_partial/footer.ejs 238行目

<script>
    new Valine({
        el: '#vcomments',
        appId: '<%= theme.valine.appId %>',
        appKey: '<%= theme.valine.appKey %>',
        placeholder: '<%= theme.valine.placeholder %>' || 'Your commnet here. Be cool.',
        avatar: '<%= theme.valine.avatar %>' || 'mp',
        pageSize: <%= theme.valine.pageSize %> || 10,
        visitor: <%= theme.valine.visitor %>,
    })
</script>

下記へ

<script>
    new Valine({
        el: '#vcomments',
        appId: '<%= theme.valine.appId %>',
        appKey: '<%= theme.valine.appKey %>',
        placeholder: '<%= theme.valine.placeholder %>' || 'Your commnet here. Be cool.',
        avatar: '<%= theme.valine.avatar %>' || 'mp',
        pageSize: <%= theme.valine.pageSize %> || 10,
        visitor: <%= theme.valine.visitor %>,
        notify: <%= theme.valine.notify %>,
        verify: <%= theme.valine.verify %>,
        lang: '<%= theme.valine.lang %>',
    })
</script>

表示確認

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

個別記事リンク付きのメール通知

他のテーマで参考になりそうなものを。

大変そうで難しそうでよく分からないということでやっていません。
ここまでやるなら、他のコメントシステムでいいような気もします。

まとめ

最近はコメントを外しているサイトも多いですが、無いよりかはあったほうがいいと思っています。
いざというときの連絡手段にもなりますしね。
メール通知の仕様が少し残念ですね。設定できそうとはいえ、どうしようか。

ちなみに、Disqusも試しましたが、表示が少し遅い気がします。
ログイン必須だと、そもそもコメントしない方が多いのではないかなと。

気になった方はコメントを試してみてください。

追記

2019-05-10

Valineのメール通知を追加
個別記事リンク付きのメール通知を追加

2019-05-16

コメント機能をDisqusへ変更