zishu's blog

zishu's blog

一个热爱生活的博主。https://zishu.me

hugo はどのように Cusdis を使用しますか?

Cusdis は、インターフェースがすっきりしていてプライバシーを重視した軽量(約 5kb gzip)コメントシステムで、React、Vue、または他のブログシステムと簡単に統合でき、すべてのコメントを管理するためのバックエンドも提供しています。

Cusdis は Disqus の代替品を自称しているため、Disqus からのワンクリックインポートやメール通知などの機能もサポートしています。

公式サイト: https://cusdis.com/

彼は通常、静的ブログ用のサードパーティコメントシステムとして使用されますが、公式ドキュメントには hugo での使用方法が記載されておらず、私も何度もエラーが出てようやく理解しました。

1. ローカルデプロイ#

指示に従ってアカウントを登録し、次に Add website をクリックしてリポジトリを作成します。

それに入ったら、setting をクリックします。

image

Embed Code では数行のコードといくつかの API が提供されるので、それをコピーします。

image

data-app-id は登録時に自動生成されるもので、秘密にしておく必要があります。人によって異なります。

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="xxxxxxxxx"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

これらのコードをローカルテーマの comments.html ファイルにコピーします(コメントのモジュールです。各テーマによって異なる場合があるので注意してください)。

この時点で hugo server を実行すると、基本的にエラーが出るでしょう。{{ PAGE_ID }} などの内容を変更していないためです。これは hugo 公式が提供するパラメータではないので、以下の形式に従って id、url、title を書き換えれば大丈夫です。

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="c1d43485-e8a7-4895-972e-247eddaf242d"
  data-page-id="{{ .RelPermalink }}"
  data-page-url="{{ .RelPermalink }}"
  data-page-title="{{ .Title }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

保存して再度 hugo server を実行すれば大丈夫です。

こうすることで、コメント情報を受け取った際に、審査リストでどの投稿からのものであるかが明確に表示されます。通常、多くのブログはこの機能を提供しています。

2. メール通知#

必須のコメント機能に加えて、Cusdis は非常に迅速なメール通知機能も提供しており、キーをバインドする必要はなく、自分のメールアドレスを直接入力するだけで済みます。

まず、この Email Notification にチェックを入れ、次に下の Advanced Notification Settings(高度な通知設定)をクリックします。

image

設定に入ることができ、自分のメールアドレスを入力します。

image

3. 日本語化#

デフォルトのコメントと通知メッセージはすべて英語で、私たちにはあまり親切ではありません。ここでは、Cusdis を導入した後に、以下のコードを追加することで良い解決策を提供します。

<script>
  window.CUSDIS_LOCALE = {
    "powered_by": "コメントは Cusdis によって提供されています",
    "post_comment": "送信",
    "loading": "読み込み中",
    "email": "メールアドレス(任意)",
    "nickname": "ニックネーム",
    "reply_placeholder": "返信内容...",
    "reply_btn": "返信",
    "sending": "送信中...",
    "mod_badge": "管理者",
    "content_is_required": "内容は必須です",
    "nickname_is_required": "ニックネームは必須です",
    "comment_has_been_sent": "コメントが送信されました。管理者の承認後に表示されます"
  }
</script>

。。。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。