# 更新：推薦轉用 ShokaX，原生支援 Waline

雖然已經吹過很多次了不過還是要再吹一下

# 先有 Shoka 後有天！

# 前情提要

Shoka 本身是一個很完美的 Hexo 主題，MiniValine 也是一個足夠使用的評論系統，不過，常説 Valine 防君子不防小人，這個評論系統的弊端出於安全問題的欠妥，其可定製和功能也稍顯不足。

大約在撰寫本文幾天前，也就是 2022 年 3 月 3 日，本 Blog 遭到大量灌水式評論轟炸。臨時開通了 Akismet 仍然無法避免在 LeanCloud 容器休眠期間的空窗期防禦、以及大量評論的寫入佔用數據庫。

似乎解決這種問題的唯一方法是啓用登錄評論 or 審核評論。

期間也嘗試過 Valine-Admin，但，你懂的，這在機器面前實在無能為力。

# 嗚嗚怎麼辦

一個很顯然的解決方式出現了：更換評論系統。

但是但是，Shoka 唯一支持的評論系統就是 MiniValine，怎麼辦呢？

實際上，在 Shoka 主題的 Pull requests 中已經有前輩開發了 Gitalk 的支持。

所以，只需要 Gitalk 的可以去試試啦。

對於我來説 Gitalk 還是有些缺點的，我還是選擇 Waline～

強大的安全性（內容校驗、防灌水、保護敏感數據等）以及登陸支持，使 Waline 成為了完善本 Blog 的最優選。

那麼，開始吧！

# Vercel 部署

這裏默認你已經有 MiniValine 的基礎，設置了 LeanCloud 數據庫。

首先需要在 Vercel 上進行服務端的部署，這個步驟的具體在 Waline 的官網已經介紹得很詳細了，只要填入相同的 APP ID, APP KEY, Master Key 就能使用你的 LeanCloud 數據庫，Waline 評論的數據結構與 MiniValine 幾乎相同，所以並不需要繁複的遷移。

依隨官網的教程部署完成後，你應該會得到一條以 .vercel.app 為結尾的 URL，記下它吧。

記得訪問 serverURL/ui/register 註冊，第一個註冊的人會被設定為管理員。

總之記下一條 URL，然後我們來到 Hexo 的修改。

# Shoka 引入

# 修改主題的_config.yml

首先把你原先的的 Valine 配置給註釋掉 or 刪掉，怎麼樣都行。

在下面添加 Waline 的配置，這裏分享一下我的配置：

waline:

  serverURL: https://xxxxxxx.vercel.app/    # 填入剛剛得到的後端 URL（必填）

  visitor: true   # 文章訪問量統計

  lang: zh-CN     # 語言，默認 zh-CN

  login: enable   # 登錄模式狀態，默認值 enable，force 可以強制登錄

  wordLimit: 0    # 評論字數限制，0 為不限制，默認值為 0

  pageSize: 10    # 評論列表分頁，數字為條數，默認值 10

  highlight: true # 代碼高亮，默認 true

  meta: ['nick', 'mail', 'link'] # 評論者相關屬性，默認 ['nick', 'mail', 'link']

  requiredMeta: ['nick', 'mail'] #設置評論者屬性必填項，默認 []（即匿名）

  placeholder: '捧ぐる祈りの光~★' # 評論框佔位提示符，默認 ' 歡迎評論'

  copyright: false # 是否顯示頁腳版權信息

  emoji: [

    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',

    'https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs',

    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',

  ] # 自定義表情包

在 vendors 下加入 Waline 官方提供的 CDN 引入方式：

vendors:

  js:

    waline: npm/@waline/client/dist/Waline.min.js

# 修改 comment.njk

找到 layout/_macro/comment.njk，

改成這樣。

# 修改 layout.njk

找到 layout/_partials/layout.njk，

在 111 行改成這樣。

# 修改 script.js

找到 scripts/generaters/script.js，

在每一個 valine 代碼下添加相同的 waline 代碼：

js: {

      valine: theme.vendors.js.valine,

      waline: theme.vendors.js.waline,

      chart: theme.vendors.js.chart,

      copy_tex: theme.vendors.js.copy_tex,

      fancybox: theme.vendors.js.fancybox

    },

    css: {

      valine: theme.css + "/comment.css",

      waline: theme.css + "/comment.css",

      katex: theme.vendors.css.katex,

      mermaid: theme.css + "/mermaid.css",

      fancybox: theme.vendors.css.fancybox

    },

    loader: theme.loader,

    search : null,

    valine: theme.valine,

    waline: theme.waline,

# 修改 pjax.js

找到 source/js/_app/pjax.js，

在找到 valine 的那串，並在下面添加：

if(CONFIG.waline.serverURL) {

    vendorJs('waline', function() {

      var options = Object.assign({}, CONFIG.waline);

      options = Object.assign(options, LOCAL.waline||{});

      options.el = '#comments';

      options.pathname = LOCAL.path;

      options.pjax = pjax;

      options.lazyload = lazyload;

      new Waline(options);

      setTimeout(function(){

        positionInit(1);

        postFancybox('.waline-container');

      }, 1000);

    }, window.Waline);

  }

其實這個我也不太確定，不過反正跑得起來

# 試運行

接下來就是最常規的～

hexo clean

Validating config

Deleted database.

Deleted public folder.

hexo s -g

Validating config

Start processing

Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

# 修改樣式

成功跑起來了嗎～

我猜猜，在成功的喜悦過後，你的第一反應是：

怎麼那麼醜！！

是的，Waline 的默認樣式和 Shoka 搭配起來就是很醜啦 ww

黑暗模式下更是慘不忍睹！千萬別去看。

這份醜已經達到必須去修正的地步了，

那麼，再做一點小小的工作～

# 修改 comment.styl

找到 source/css/comment.styl，新增：

@import "_common/components/third-party/waline";

目的是在生成 comments.css 時引入 waline 自定義樣式。

# 增加自定義 Waline 樣式文件

在 source/css/_common/components/third-party/ 下，新增 waline.styl 文件。

關於 waline 可以自定義的樣式，在官網已經全面地提供了可用的 CSS 變量，

如果你一股腦複製粘貼，會發現樣式無法生效，原因是 Waline 注入的樣式在你 CSS 的後面，意味着優先級較高。

為了覆蓋注入的樣式，你需要在自定義的樣式後面添加！important，以獲得最高的優先級讓樣式生效～

下面本人的樣式以供參考：

# 日間模式

/* 日間模式 */

:root {

  /* 字體大小 */

  --waline-font-size: 16px;

  /* 常規顏色 */

  --waline-white: #fff;

  --waline-light-grey: #999;

  --waline-dark-grey: #666;

  /* 主題色 */

  --waline-theme-color: var(--primary-color) !important; /* 主題顏色 */

  --waline-active-color: #ff5c75 !important;

  /* 布局顏色 */

  --waline-text-color: #444;

  --waline-bgcolor: #fff;

  --waline-bgcolor-light: #f8f8f8;

  --waline-bgcolor-hover: #f0f0f0;

  --waline-border-color: #ddd;

  --waline-disable-bgcolor: #f8f8f8;

  --waline-disable-color: #bbb;

  --waline-code-bgcolor: #282c34;

  /* 特殊顏色 */

  --waline-bq-color: #f0f0f0;

  /* 頭像 */

  --waline-avatar-size: 3.5rem;

  --waline-mobile-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);

  /* 徽章 */

  --waline-badge-color: var(--primary-color) !important;

  --waline-badge-font-size: 0.775em;

  /* 信息 */

  --waline-info-bgcolor: #f8f8f8;

  --waline-info-color: #999;

  --waline-info-font-size: 0.625em;

  /* 渲染選擇 */

  --waline-border: 1px solid var(--waline-border-color);

  --waline-avatar-radius: 50%;

  --waline-box-shadow: none;

}

# 夜間模式

自帶的夜間模式搭配 Shoka 主題不但很醜，而且好像沒有辦法跟隨主題進行切換，所以需要進行額外的配置以適配 Shoka 主題，即使用 [data-theme="dark"] 代碼。這裏我也分享改好的代碼：

/* 夜間模式 */

:root[data-theme="dark"] {

  --waline-theme-color: var(--primary-color) !important; /* 主題顏色 */

  --waline-white: #ddd !important; /* 按鍵字體顏色 */

  --waline-active-color: #ff6680 !important;

  --waline-light-grey: #666 !important;

  --waline-dark-grey: rgba(140, 74, 85, 0.6) !important; /*ID 顏色 */

  --waline-badge-color: rgba(140, 74, 85, 0.6) !important;

  /* 佈局顏色 */

  --waline-text-color: #ccc !important;

  --waline-bgcolor: #424242 !important;

  --waline-bgcolor-light: #515151 !important;/* 行內代碼塊顏色 */

  --waline-border-color: #9B9C9C !important;

  --waline-disable-bgcolor: #444;

  --waline-disable-color: #272727;

  /* 特殊顏色 */

  --waline-bq-color:  #9B9C9C; /*quote*/

  /* 其他顏色 */

  --waline-info-bgcolor: rgba(140, 74, 85, 0.6);

  --waline-info-color: #aaa;

}

以及，因為我自定義過自己的 Blog 的顏色搭配，這裏的代碼是適應本 Blog 的，如有需要請自行改成你自己的顏色搭配～

# 輸入框的文字大小

.v input, .v textarea {

  font-size: 0.85em !important

}

# 完成了

運行看看吧！

如果有問題歡迎在下面進行留言～