hexo(4) コメント機能のインストール

2022-11-17 更新#

今日はブログのコメント機能が突然無効になっていることに気付き、バージョン更新の問題だとわかりました。以前は常に最新の waline コードを引用していましたが、今は固定バージョンの waline コードを導入することにしました。

themes/maupassant/layout/_partial/comments.pugファイルで以下のコードを修正します：

この行のコード：

script(src='//unpkg.com/@waline/client@v2/dist/waline.js')

を以下のように置き換えます：

script(src='//unpkg.com/@waline/[email protected]/dist/waline.js')

前提#

Docker 環境を持つサーバー
docker-compose、postgres、caddy を使用できること

ここでは docker + waline + postgres + caddy を使用してコメントシステムを自分でデプロイします。詳細はwaline 公式サイトを参照してください。

postgres データベースの設定#

ヒント：データベースがない場合は、システムに付属の sqlite データベースを使用してデプロイすることもできます。

まず、公式の多データベースサービスサポート文書で postgres データベースのサポートを確認し、テーブルとテーブル構造を事前に作成する必要があります。

https://github.com/walinejs/waline/blob/main/assets/waline.pgsqlで、内容を直接 postgres コマンドラインにコピーして実行すれば成功します。ここでは pgAdmin（postgres の管理ツール）を使用しています。

公式サイトが開けない場合は、以下の内容を直接データベースのコマンドラインにコピーしてエンターを押してください。

CREATE SEQUENCE wl_comment_seq;

CREATE TABLE wl_comment (
  id int check (id > 0) NOT NULL DEFAULT NEXTVAL ('wl_comment_seq'),
  user_id int DEFAULT NULL,
  comment text,
  insertedAt timestamp(0) without time zone NOT NULL DEFAULT CURRENT_TIMESTAMP,
  ip varchar(100) DEFAULT '',
  link varchar(255) DEFAULT NULL,
  mail varchar(255) DEFAULT NULL,
  nick varchar(255) DEFAULT NULL,
  pid int DEFAULT NULL,
  rid int DEFAULT NULL,
  sticky boolean DEFAULT NULL,
  status varchar(50) NOT NULL DEFAULT '',
  "like" int DEFAULT NULL,
  ua text,
  url varchar(255) DEFAULT NULL,
  createdAt timestamp(0) without time zone NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt timestamp(0) without time zone NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
) ;


CREATE SEQUENCE wl_counter_seq;

CREATE TABLE wl_counter (
  id int check (id > 0) NOT NULL DEFAULT NEXTVAL ('wl_counter_seq'),
  time int DEFAULT NULL,
  url varchar(255) NOT NULL DEFAULT '',
  createdAt timestamp(0) without time zone NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt timestamp(0) without time zone NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
) ;


CREATE SEQUENCE wl_users_seq;

CREATE TABLE wl_users (
  id int check (id > 0) NOT NULL DEFAULT NEXTVAL ('wl_users_seq'),
  display_name varchar(255) NOT NULL DEFAULT '',
  email varchar(255) NOT NULL DEFAULT '',
  password varchar(255) NOT NULL DEFAULT '',
  type varchar(50) NOT NULL DEFAULT '',
  label varchar(255) DEFAULT NULL,
  url varchar(255) DEFAULT NULL,
  avatar varchar(255) DEFAULT NULL,
  github varchar(255) DEFAULT NULL,
  twitter varchar(255) DEFAULT NULL,
  facebook varchar(255) DEFAULT NULL,
  google varchar(255) DEFAULT NULL,
  weibo varchar(255) DEFAULT NULL,
  qq varchar(255) DEFAULT NULL,
  "2fa" varchar(32) DEFAULT NULL,
  createdAt timestamp(0) without time zone NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt timestamp(0) without time zone NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
) ;

具体的なテーブル作成の流れは以下の通りです：

docker で waline をデプロイ#

適切な場所にdocker-compose.ymlファイルを新規作成し、内容は以下の通りです：

# docker-compose.yml

version: '3'  

services:

  waline:

    container_name: waline

    image: lizheming/waline:latest

    restart: unless-stopped

    ports:

      - 9015:8360 # 前の9015のポート番号は任意に変更可能で、他のアプリケーションと衝突しないようにしてください

    environment:

      TZ: 'Asia/Shanghai'

      SITE_NAME: "菜小牛のブログ"

      SITE_URL: 'https://cirry.cn' # ウェブサイトのURL

      SECURE_DOMAINS: 'cirry.cn' # ドメイン名

      AUTHOR_EMAIL: '[email protected]' # メールアドレス
 
      PG_HOST: ******.cirry.fun # データベースのアドレス、あなたのデータベースのアドレスを記入してください

      PG_PORT: 5432 # データベースのポート、postgresのデフォルトポートは5432です

      PG_DB: hexo # データベース名

      PG_USER: ****** # データベースユーザー、あなたのユーザー名を記入してください

      PG_PASSWORD: ****** # データベースパスワード、あなたのパスワードを記入してください

Caddy の設定#

構築したポート 9015 の waline サービスを caddy でリバースプロキシし、SSL 暗号化を追加します。

# Caddyfile
# 自分のウェブサイトのURLを設定してください。各自異なるため、直接コピーしないでください
https://waline.cirry.cn:66666 {

    reverse_proxy localhost:9015

}

テーマの設定#

_config.maupassant.ymlで以下の内容を修正するだけです：

waline: ## See: https://waline.js.org/  
  enable: true ## Walineコメントシステムを使用する場合は、値をtrueに設定してください。  
  serverURL: https://waline.cirry.cn:66666 ## あなたのサーバーのURL、例：https://your-domain.vercel.app  
  pageSize: 10 ## 各ページに表示されるコメントの数。

これで、コメント機能は完全に自分のサーバー上に構築されました。キャッシュをクリアし、再実行すると、スタイルは以下のようになります：

サイドバーの最近のコメント機能を有効にする#

_config.maupassant.ymlの設定項目に最近のコメント機能を有効にする設定がありますが、設定後にスタイルが表示されませんでした。

widgets: ## サイドバーに提供される7つのウィジェット：検索、情報、カテゴリ、タグ、最近の投稿、最近のコメント、リンク。  
  - search  
  - info  
  - category  
  - tag  
  - recent_posts  
  - recent_comments  # 最近のコメント機能をマウント
  - links

themes/maupassant/layout/_widget/recent_comments.pugでは、テーマがデフォルトでdisqusの最近のコメント機能のみを設定していることがわかります。次に、自分たちのwaline最近のコメント機能を作成します。

if theme.disqus.enable == true  
  .widget  
    .widget-title  
      i.fa.fa-comment-o= ' ' + __('recent_comments')  
    script(type='text/javascript', src='//' + theme.disqus.shortname + '.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=1&avatar_size=32&excerpt_length=20&hide_mods=1')

第一歩として、_config.maupassant.ymlに新しい設定項目を追加します：

waline: ## See: https://waline.js.org/  
  enable: true ## Walineコメントシステムを使用する場合は、値をtrueに設定してください。  
  serverURL: https://************ ## あなたのサーバーのURL、例：https://your-domain.vercel.app  
  pageSize: 20 ## 各ページに表示されるコメントの数。  
  wordLimit: 500 ## 入力単語数の制限、0は制限なし  
  requiredMeta: ['nick','mail'] ## 必要なユーザー情報、例：['nick','mail','link']  
  count: 6 ## 最近のコメントの数、デフォルトは10

第二歩：themes/maupassant/layout/_widget/recent_comments.pugの内容を以下のように修正します：

if theme.disqus.enable == true  
  .widget  
    .widget-title  
      i.fa.fa-comment-o= ' ' + __('recent_comments')  
    script(type='text/javascript', src='//' + theme.disqus.shortname + '.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=1&avatar_size=32&excerpt_length=20&hide_mods=1')  
  
if theme.waline.enable == true  
  .widget  
    .widget-title  
      i.fa.fa-comment-o= ' ' + __('recent_comments')  
    #widget-waline-list  
    script(type='text/javascript', id="recent-comment", serverURL=theme.waline.serverURL, count=theme.waline.count , src=url_for(theme.js) + '/recent-comments.js' + '?v=' + theme.version, async)

第三歩：ここではリクエストを送信する必要があるため、themes/maupassant/source/js/ディレクトリにrecent-comments.jsという js ファイルを作成します。

recent-comments.jsの内容は以下の通りです：

!function () {  
  let serverURL = document.getElementById("recent-comment").getAttribute("serverURL")  
  let count = document.getElementById("recent-comment").getAttribute("count")  
  if (!count) {  
    count = 10  
  }  
  
  //時間をフォーマット  
  function format( date ) {  
    return new Date(date).toLocaleString()  
  }  
  
  // コメントを処理  
  function dealComment( commentStr ) {  
    let re = /<a[^>]*href=['"]([^\\"]*)['"][^>]*>(.*?)<\/a>/g;  
    let arr = [];  
    while (re.exec(commentStr) != null) {  
      arr.push(RegExp.$1); //もしRegExp.$1なら、マッチしたのはhrefの属性です！  
      arr.push(RegExp.$2)  
    }  
    if (arr.length > 0) { // マッチした返信があることを示します  
      commentStr = commentStr.replace(/<a[^>](.*?)<\/a>/, arr[1])  
      return {  
        href: arr[0],  
        author: arr[1],  
        str: commentStr  
      }  
    }  
    return ''  
  }  
  
  $.ajax({  
    url: serverURL + '/comment?type=recent',  
    dataType: 'json',  
    data: {  
      count  
    },  
    success: function ( response ) {  
      let comments = '<ul>'  
      response.forEach(( comment, index ) => {  
        comments += '<li>' + (index + 1) + '、 ' + format(comment.insertedAt)  
        if (comment.pid) {  
          let {href, author, str} = dealComment(comment.comment)  
          comments += '<div class="waline-comment-content"><a style="display: block" href=' + window.location.origin + comment.url + href + '>'+ str + '</a></div>'  
        } else {  
          comments += '<div class="waline-comment-content"><a style="display: block" href=' + window.location.origin + comment.url + '#' + comment.objectId + '>' + comment.comment + '</a></div>'  
        }  
        comments += '<div class="waline-comment-content-author">' + '--' + comment.nick + '</div></li>'  
      })  
      comments += '</ul>'  
      $('#widget-waline-list').append(comments)  
    },  
  })  
}()

ここではwalineが提供する最近のコメントを取得する API を使用しています。詳細はwaline 提供の APIを参照してください。

第四歩：スタイルを調整

このステップは、コメントに emoji が入力された場合に、emoji が大きく表示されることに対処します。themes/maupassant/source/css/style.scssでスタイルを特定し、具体的な位置は以下の通りです：

#sidebar --> .widget --> ul --> liの下に以下のコードを追加するだけです。

.wl-emoji{  
  width: 16px;  
}

最後に、themes/maupassant/source/css/style.scssの末尾に以下のスタイルを追加します：

/* recent-comments waline style*/  
.waline-comment-content {  
    padding: 6px;
    background-color: #f8f8f8;
    border-radius: 6px;
    overflow: auto;
  
    p {  
        margin: 0;  
        display : -webkit-box;  
        overflow: hidden;  
        -webkit-box-orient: vertical;  
        -webkit-line-clamp: 2; /*ここで何行表示するかを設定し、省略記号を表示できます。最初の行や他の行を設定できます*/  
    }  
}  
  
.waline-comment-content-author {  
    text-align: end;  
    margin-bottom: 6px;  
}

文字数制限と匿名の無効化を有効にする#

themes/maupassant/layout/_partial/comments.pugでwaline.initメソッドを見つけ、そのメソッド内に設定項目を追加するだけです。

Waline.init({  
  el: '#waline',  
  comment: true,  
  serverURL: '#{theme.waline.serverURL}',  
  pageSize: '#{theme.waline.pageSize}',  
  wordLimit: 300,  
  requiredMeta:['nick', 'mail'],
})

ヒント：waline には自動的にスパムフィルタリング機能がありますが、訪問者の入力を制限するのが良いでしょう。悪意のある操作を防ぐためです。

メール通知を有効にする#

ここでは直接QQEmailをメールサービスプロバイダーとして使用します。

docker-compose.ymlのenvironmentに以下のメールサービスプロバイダーの設定情報を追加します：

SMTP_HOST: "smtp.qq.com"

SMTP_PORT: 465

SMTP_USER: "あなたのqqメール"

SMTP_PASS: "qqメール提供の認証コード"

SMTP_SECURE: "true"

ヒント：qq メールの認証コードはqqメールにログイン後 --> 設定 --> アカウント --> 認証コードを生成で取得できます。

waline には閲覧回数を統計する機能もありますが、前に不蒜子を使用しているため、ここでは繰り返しません。後で不蒜子が使えなくなった場合は、これに切り替える可能性があります。

この記事には多くの知識が必要ですので、わからないことがあればコメントしてください。具体的に詳細な記事を書くことができます。

ページでコメント機能を無効にする#

About MeやHistoryのようなページでコメント機能を希望しない場合は、対応するドキュメントのfront matterでcomments: falseと設定すればよいです。