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' # 網站網址

      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
# 配置自己的網址，每個人配置不一樣，請勿直接複製
https://waline.cirry.cn:66666 {

    reverse_proxy localhost:9015

}

配置主題#

在_config.maupassant.yml中，修改如下內容即可：

waline: ## See: https://waline.js.org/  
  enable: true ## If you want to use Waline comment system, please set the value to true.  
  serverURL: https://waline.cirry.cn:66666 ## Your server url, e.g. https://your-domain.vercel.app  
  pageSize: 10 ## The desired number of comments shown in each page.

至此，評論功能已經完全自搭在自己的伺服器上了，清除快取，重新運行後，樣式如下：

開啟側邊欄最近評論功能#

雖然在_config.maupassant.yml中的配置項裡，有開啟最近評論功能，但是配置完成後並沒有顯示樣式。

widgets: ## Seven widgets in sidebar provided: search, info, category, tag, recent_posts, recent_comments and links.  
  - 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 ## If you want to use Waline comment system, please set the value to true.  
  serverURL: https://************ ## Your server url, e.g. https://your-domain.vercel.app  
  pageSize: 20 ## The desired number of comments shown in each page.  
  wordLimit: 500 ## Limit input word count, 0 means no limit  
  requiredMeta: ['nick','mail'] ## required user information e.g. ['nick','mail','link']  
  count: 6 ## The number of recent comments,default. 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/目錄下，創建 js 文件recent-comments.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提供的獲取最近評論接口，在這裡查看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 也有統計閱讀次數的功能，前面已經使用了不蒜子，這裡就不重複講，如果後期不蒜子不好用，可能會切換到這個上。

本文需要的一些知識比較多，如果有不明白的，可以留言，我可以針對性的寫個詳細的文章。

頁面關閉評論功能#

如果你在類似關於我或者歷史這樣的頁面中，不希望有評論功能，在對應的文檔中的front matter中設置comments: false即可。