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

# サンプル

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/25fb7497-8a62-2488-5b56-170457099c6e.png)

https://hexo-valine-comment-sample.netlify.com/2018/07/03/hello-world/
サンプルのサイトなので好きにコメントしてみてください。


# Valineとは

<img src="https://raw.githubusercontent.com/xCss/Valine/master/src/assets/valine.png" width="50%">

[xCss/Valine: A fast, simple & powerful comment system.](https://github.com/xCss/Valine)

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

## 機能 翻訳

- 絵文字😉
- 高速
- 最初から安全
- サーバーサイトの構築不要
- 完全なマークダウン記法をサポート
- シンプルで軽量（gzipで15kB未満）

詳しくは[ドキュメント](https://valine.js.org/en/)をどうぞ。


# LeanCloudとは

[LeanCloud](https://leancloud.cn/)

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

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

BaaSといえば日本では[Milkcocoa](https://mlkcca.com/)、最近では[Firebase](https://firebase.google.com/?hl=ja)などが有名ですね。
自分でサーバーサイドのことを考えなくてもいい感じになるのが便利です。
 

# LeanCloudを使ってみる

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

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

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

## アカウント作成

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/17bdb0e1-358f-285a-85a9-c5fad614ebf1.png)

入力欄の上から

- ユーザーID
- メールアドレス
- 電話番号
- パスワード

です。

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

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/7c323db0-8c18-13b1-e25c-2d90a7639a3e.png)

ダッシュボードに入るとこの様になっていると思います。
アラートは上が __メールアドレスを認証してないよ__
下が __電話番号を認証してないよ__ というものです。どちらも認証しておきましょう。

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/c161ea73-4727-c20d-1d71-864e3844ea0c.png)

上がアプリの名前、下のラジオボタンが開発版か製品版かを選ぶものです。
正式版はお金がかかるみたいなのでとりあえず開発版を選びましょう。

> ### 開発版と製品版の違い

> https://leancloud.cn/pricing/

> 開発版はリクエストが1日あたり30,000まで、転送量がは500MBまでとなっています。
> 最初に貼ったサンプルのサイトは公開して1時間程度で80リクエストされていました。まだデータが少ないのでGoogle Analyticsのデータとともに無料で使えるものなのか探ってみたいと思います。


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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/bfa11e32-6cc8-4800-37f9-2a39f7915913.png)

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

> ### 安全のために

> MasterKeyは最高権威のキーです。流出したら出来るだけ早く`重置`ボタンを押してリセットしてください。
> AppKeyはクライアントで使用するキーです。そのためクライアントからのすべてのリクエストを信頼すべきではありません。AppKeyは常に流出していると考えてください。
> 悪意のあるリクエストから守るには、AppKeyを暗号化するのではなく、ACL（Access Control List）を設定するべきです。詳細は、[データとセキュリティ](https://leancloud.cn/docs/data_security.html)を参照してください。

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/d84b1b89-0d24-eff3-7d87-a82c191b49b2.png)

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


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



# Hexoで使ってみる

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

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

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


## テーマを対応させる

もともとHexoにはコメント機能はないのでテーマをValineに対応させる必要があります。
といっても有名なテーマはだいたいすでに対応されているので最新版にするだけで使うことが出来ます。

[Used in Hexo | Valine](https://valine.js.org/en/hexo.html)

自分の使いたいテーマが入っているか見てみましょう。今回はデフォルトの`hexo-theme-landscape`を使います。
このテーマもVanileに対応済みですが`hexo init`した状態ではテーマが古いので対応していません。`clone`してきましょう。

Commit: [theme update to latest · eai04191/hexo-valine-comment-sample@2ea46b6](https://github.com/eai04191/hexo-valine-comment-sample/commit/2ea46b61e8cfad58238a98193a12ec87f739fe6c)

## キーを設定する

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

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

Commit: [set valine config · eai04191/hexo-valine-comment-sample@ccee3c6](https://github.com/eai04191/hexo-valine-comment-sample/commit/ccee3c6139f50061d1317a56ed102d4c5465fd62)
Commit: [enable valine · eai04191/hexo-valine-comment-sample@67c290e](https://github.com/eai04191/hexo-valine-comment-sample/commit/67c290e0130bb11d93891d4bbb60bce28366d95e)


## 見てみる

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/01c84bac-723a-4e0d-92c5-7dbf954bbc66.png)

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

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

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


## 日本語化する

Valineはv1.1.8-beta9+から多言語をサポートしています。
[Multilingual support | Valine](https://valine.js.org/en/i18n.html)

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

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

Commit: [add japanese locale · eai04191/hexo-valine-comment-sample@8bca7e1](https://github.com/eai04191/hexo-valine-comment-sample/commit/8bca7e10027acd16bc2545d6db99db745f37bc25)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/32924/e47fa6bc-2058-f3cb-e2fe-94b73b90ea79.png)

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