zishu's blog

zishu's blog

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

hugoのCusdisの使用方法は?

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

Cusdis は Disqus の代替として位置づけられているため、Disqus からのインポートやメール通知などの機能もサポートしています。

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

通常、Cusdis は静的なブログにおけるサードパーティのコメントシステムとして使用されますが、公式ドキュメントでは 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>

。。。

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