Posted at

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

More than 1 year has passed since last update.


サンプル

image.png

https://hexo-valine-comment-sample.netlify.com/2018/07/03/hello-world/

サンプルのサイトなので好きにコメントしてみてください。


Valineとは

xCss/Valine: A fast, simple & powerful comment system.

2017年8月7日に生まれた新しめのコメントシステムで、シンプルで効率的、LeanCloudを利用することでバックエンドの手間なく構築できるのがウリのようです。


機能 翻訳


  • 絵文字😉

  • 高速

  • 最初から安全

  • サーバーサイトの構築不要

  • 完全なマークダウン記法をサポート

  • シンプルで軽量(gzipで15kB未満)

詳しくはドキュメントをどうぞ。


LeanCloudとは

LeanCloud


领先的 BaaS 提供商,为移动开发提供强有力的后端支持


モバイルアプリ向きの強力なバックエンドを提供するBaaS といったところでしょうか。

BaaSといえば日本ではMilkcocoa、最近ではFirebaseなどが有名ですね。

自分でサーバーサイドのことを考えなくてもいい感じになるのが便利です。


LeanCloudを使ってみる

Valineは今の所LeanCloudだけをサポートしているのでLeanCloudのアカウントを持っている必要があります。

登録にはメールアドレスと電話番号が必要です。

あとダッシュボード含めサイトがすべて中国語なのでちょっとめんどくさいです。


アカウント作成

https://leancloud.cn/dashboard/login.html#/signup

image.png

入力欄の上から


  • ユーザーID

  • メールアドレス

  • 電話番号

  • パスワード

です。

これは外国のサービスに電話番号を登録するとき全般に言えることですが、電話番号が09012345678だった場合、最初の0は消して登録します。つまり+819012345678のようになります。

あと私はGitHubで認証して登録しましたが、結局電話番号とメールアドレスが必要だったので特に意味はありません。

登録は出来ましたか?出来ましたね。

image.png

ダッシュボードに入るとこの様になっていると思います。

アラートは上が メールアドレスを認証してないよ

下が 電話番号を認証してないよ というものです。どちらも認証しておきましょう。

メールアドレスはいつもどおりメール内のリンクから、電話番号はアラートの中にあるリンクから進んで取得みたいなボタンを押したら番号が届くので入力して送信したら終わりです。普通ですね。

認証が済んだらアプリを作ってみます。ダッシュボードの创建应用を押してください。

image.png

上がアプリの名前、下のラジオボタンが開発版か製品版かを選ぶものです。

正式版はお金がかかるみたいなのでとりあえず開発版を選びましょう。


開発版と製品版の違い

https://leancloud.cn/pricing/

開発版はリクエストが1日あたり30,000まで、転送量がは500MBまでとなっています。

最初に貼ったサンプルのサイトは公開して1時間程度で80リクエストされていました。まだデータが少ないのでGoogle Analyticsのデータとともに無料で使えるものなのか探ってみたいと思います。


さて、アプリが出来たら早速キーを取得しましょう。

image.png

设置 -> 应用 Key より取得できます。


安全のために

MasterKeyは最高権威のキーです。流出したら出来るだけ早く重置ボタンを押してリセットしてください。

AppKeyはクライアントで使用するキーです。そのためクライアントからのすべてのリクエストを信頼すべきではありません。AppKeyは常に流出していると考えてください。

悪意のあるリクエストから守るには、AppKeyを暗号化するのではなく、ACL(Access Control List)を設定するべきです。詳細は、データとセキュリティを参照してください。


ということなので使うドメインを設定しておきましょう。

image.png

应用 Keyの1つ下安全中心より設定できます。

これでLeanCloud側の準備は完了です。


Hexoで使ってみる

今回のコードはすべてGitHubに公開しているので、Hexoがわかる人なら見ればすぐ分かると思います。

https://github.com/eai04191/hexo-valine-comment-sample

今回はHexo initで作成した状態からValineでのコメント機能を実装してみます。


テーマを対応させる

もともとHexoにはコメント機能はないのでテーマをValineに対応させる必要があります。

といっても有名なテーマはだいたいすでに対応されているので最新版にするだけで使うことが出来ます。

Used in Hexo | Valine

自分の使いたいテーマが入っているか見てみましょう。今回はデフォルトのhexo-theme-landscapeを使います。

このテーマもVanileに対応済みですがhexo initした状態ではテーマが古いので対応していません。cloneしてきましょう。

Commit: theme update to latest · eai04191/hexo-valine-comment-sample@2ea46b6


キーを設定する

次に先ほどLeanCloudから取得したキーを設定します。

対応テーマなら_config.ymlに設定項目があるはずなのでそれっぽいところに入れます。

Commit: set valine config · eai04191/hexo-valine-comment-sample@ccee3c6

Commit: enable valine · eai04191/hexo-valine-comment-sample@67c290e


見てみる

これでもう終わりです。hexo serverしてみましょう。

image.png

0 Comments を押すと記事の下にコメントフォームが追加されます。

ただしエラーが出ていると思います。先ほどセキュリティの設定で、サイトのドメイン以外からはAPIにアクセスできないように設定したためです。

このままpushして公開すればエラーもなく、コメントも出来ます。


日本語化する

Valineはv1.1.8-beta9+から多言語をサポートしています。

Multilingual support | Valine

せっかくなので日本語にしてみましょう。

変更点はコミットを見てください。

Commit: add japanese locale · eai04191/hexo-valine-comment-sample@8bca7e1

image.png

日本語にできました。EmojiとPreviewのところは出来ないようです。