Hexoにコメント欄を追加(Disqus)

こんにちは。今回はHexoで生成したWEBサイトにコメント欄を追加する手法について解説します。他の説明記事がどれも間違っていて(恐らくバージョンの問題)だいぶハマったのでまとめておきます。

1. Disqusとは

  • Disqus
    • コメント機能を拡張するサービス
    • 様々なPlatformに対してプラグインを提供
      • HexoのthemeはDisqusの活用を前提としたものが多く、簡単に導入可能です
      • ※ themeに対して設定する為、選定後の対処をお勧めします
    • 無料で利用を開始可能です

2. 導入手順

2.1. Disqusに登録

  • DisqusのSignupを実施

    • Twitter, FB, Googleアカウントの何れかを利用可能です
    • 私はGoogleアカウントを利用しました
    • 認証後にSignupを押下
  • “I want to install Disqus on my install”を選択

  • Create a new Site

    • 以下の欄を入力
      • Website Name
      • Category
    • CreateSiteを選択
  • 以下の順に選択

    • “Got it. Let’s get started!”
    • “I don’t see my platform listed, install manually with Universal Code”
  • 以上でDisqusのサイト用ページが作成されました

2.2. Disqus設定

  • 以下が設定ページです
  • Installation

    • Comment機能非対応のthemeの場合はこちらのスクリプトをサイトに貼り付けましょう
      • Hexoデフォルトのlandscapeであれば必要
        • 該当のejsとプレフィックスにつくファイルを編集してください
        • ファイル所在(landscapeの例)
          1
          Your-blog\theme\Your-Theme\layout\_partial
    • 本サイトに採用しているicarusであれば、この工程はスルーしてOK
  • “Configure”を押下

  • URLを入力

  • “Complete Setup”を押下

  • 上部のSettingタブを選択

  • 左のリストのGeneralを選択

    • “shortname”の値を控える
      • 後でhexoに設定します
    • 各項目に入力して”Save”を押下
  • 以上でDisqus側の設置は完了です
    • 細かく設定可能なので

2.3. Hexoに設定

  • shortnameをtheme側の_config.ymlに記述

    • 元の状態
      1
      2
      3
      comment:
      # Name of the comment plugin
      type:
  • 改修

    • typeにdisqusを設定
    • shortnameにdisqusで定義された値を設定
      1
      2
      3
      comment:
      type: disqus
      shortname: <from_disqus>
  • Comment機能があるthemeの場合は以上でOK(icarus等)

    • 以下のディレクトリがあるかで判断してください
      • Your-Blog\themes\Your-Theme\layout\comment

Trouble Shooting

  • ※Comment機能がないthemeの場合(デフォルトのLandscape等)の対応も載せておきます

      1. Hexo側の設定ファイルの改修も必要です
        • Your-Blog/_config.yml
          1
          2
          # disqus
          disqus_shortname: https-j-xaas-github-io
      1. Disqus/Setting/Installationで表示されるScriptを該当するejsファイルにコピペしてください
        • ejsファイルとは?
          • Tour-Blog/theme/Your-Theme/layoutの配下にあります
          • 例えばheader.ejsはHexoで各記事をgenerateする際に共通の設定を与えてくれるファイルです
          • つまり、headerに共通して与えたいスクリプトがあれば、ここにコピペするだけでOKです
  • ※旧バージョンの場合

    • 他の記事はどれも以下のように設定するよう書かれていましたがエラーになります
      1
      2
      3
      comment:
      disqus: [shortname]
      duoshuo: [shortname]
    • comment機能の設定ファイルを探して確認
      • 以下にありました
        • j-blog\themes\icarus\layout\comment\disqus.ejs
      • ”comment.shortname”とあることから、設定ファイルのcommentのshortnameの値を参照していることが分かります
        • themeによって特殊な設定が必要なケースも予想されるため、同じように確認してみてください
          1
          2
          3
          4
          5
          6
          (function() {
          var d = document, s = d.createElement('script');
          s.src = '//' + '<%= get_config('comment.shortname') %>' + '.disqus.com/embed.js';
          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
          })();

3. 利用テスト

3.1. Localでチェック

  • 画面への反映をチェックしましょう
    1
    hexo server
  • 記事の下部にコメント欄を確認できます
    • 仕様はDisqusのSettingで細かく変更可能です
comment_example
  • コメントの投稿は本番環境でないとエラーになります

  • generate

    1
    hexo generate
  • 本番環境へデプロイ

3.2. 投稿

  • WEBから実際にコメントを投稿してみましょう
  • ”ログイン”よりGoogleアカウントでログイン
    • Disqusのアカウント登録に利用したアカウントを用いれば、管理者のコメントとして認識されます
comment_example
  • コメントを投稿してみましょう
    • 投稿者名の横に”管理者”が表示されます
      • Googleアカウントが実名なので、Twitterで登録しておけばよかったかも…
comment_example

3.3. アカウント登録

  • 記事の訪問者をイメージして、Twitterアカウントで試してみます
    • 事前に管理者アカウントから”ログアウト”しておきます
  • 投稿欄の下のTwitterマークを選択
    • 認証画面に飛びます
  • アカウント設定

    • 各入力項目を埋めて”Sign Up”を押下
      Disqus_Twitter認証画面
  • すると、以下のように規約が表示されます

disqus_allert
  • 設定したアドレスに以下のmailが届きます
    • 青字を押下
disqus_mail
  • 認証が完了しました
email_verified
  • WEB上でログイン
  • コメントを投稿
    • アイコン画像はTwitterのものがそのまま反映されるようです
twitter_comment
  • 以上でDisqusの解説は終了です。手軽なので是非導入してみましょう。
@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×