Hugo × Cusdis コメント機能のカスタマイズと自動高さ調整

2025-02-11

※注意:以下は生成AIにて作成した記事になります。実際に行った手順は記載のとおりですが、一部実際と異なる可能性があることをご理解ください

🚀 Hugo × Cusdis コメント機能のカスタマイズと高さ調整の改善

こんにちは！今回は、Hugo を使った静的サイトに Cusdis を導入し、以下の点をカスタマイズして使いやすくしました。

✅ Cusdis の UI を日本語化
✅ iframe の高さを自動調整し、スクロール不要に
✅ Azure での安定動作を考慮し、元の高さ調整方法に戻す

1. Cusdis の導入と基本設定

Hugo のカスタムコメント機能として、Disqus の代替となる Cusdis を選びました。以下の手順で導入しました。

📌 Hugo に Cusdis を組み込む

  1. layouts/partials/comments.html を作成 し、以下のコードを追加。
  2. Cusdis の App ID を取得し、ページに埋め込む。
  3. 日本語の UI 設定 を追加。
<div id="cusdis_thread"
    data-host="https://cusdis.com"
    data-app-id="あなたのApp ID"
    data-page-id="{{ .Permalink }}"
    data-page-url="{{ .Permalink }}"
    data-page-title="{{ .Title }}"
    data-lang="ja">  <!-- ✅ 言語を日本語に設定 -->
</div>

<!-- Cusdis の UI 日本語化 -->
<script>
  window.CUSDIS_LOCALE = {
    powered_by: "コメント powered by Cusdis",
    post_comment: "コメントを投稿",
    loading: "読み込み中...",
    email: "メールアドレス（任意）",
    name: "名前",
    reply: "返信",
    reply_placeholder: "ここに返信を入力...",
    comment_placeholder: "コメントを入力...",
    comment_count: "{count} 件のコメント",
    comments: "コメント一覧"
  };
</script>

<!-- Cusdis のスクリプト -->
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

これでコメントフォームが日本語化され、Hugo に組み込まれました！

2. iframe の高さ自動調整を実装

デフォルトの Cusdis は縦幅が短く、スクロールしないと Comment ボタンが見えない問題が発生しました。

そのため、iframe の高さをコンテンツの長さに応じて自動調整 するスクリプトを追加！

<script>
  window.addEventListener('load', function () {
      let iframe = document.querySelector("#cusdis_thread iframe");
      if (iframe) {
          let observer = new MutationObserver(() => {
              let scrollHeight = iframe.contentWindow.document.body.scrollHeight;
              iframe.style.height = scrollHeight + "px";
          });
          observer.observe(iframe.contentWindow.document.body, { childList: true, subtree: true });
      }
  });
</script>

💡 このスクリプトのポイント

  • MutationObserver を使って、iframe 内の変更を監視し、高さを更新。

🚀 結果：コメント欄の高さが動的に変わるようになり、スクロール不要で使いやすくなった！ 🎉

3. カスタムドメイン設定後の Hugo 側の変更

Azure Static Web Apps にカスタムドメインを追加した後、Hugo 側の baseURL を変更しました。

📌 config.yaml に設定を追加

baseURL: "https://your-custom-domain.com/"

🔖 まとめ：Hugo × Cusdis の最適化

  1. Cusdis の UI を日本語化
  2. iframe の高さを自動調整し、スクロール不要に
  3. Azure での安定動作を考慮し、従来の方法に戻す
  4. カスタムドメイン適用後、Hugo の baseURL を更新

📌 次のステップ

  • ブログ記事を AI で自動投稿する仕組みを構築
  • Cusdis のコメントデータを収集してランキング機能を作成
  • Azure Functions を活用し、ブログの自動更新を実装

🚀 Hugo + Cusdis のカスタマイズをさらに進めて、より快適なブログ体験を目指します！ 💡