为 Chirpy 添加 Waline 评论系统

其实这种技术博客的评论系统用 giscus 就已经很好了。我之前用 Hexo 做静态博客时用过 Waline 的前身 Valine。当时觉得这个评论系统界面很好，但是强制依赖使用 Leancloud 的设计让我很不爽。正好现在 Waline 做得功能比较丰富了，再来试试。

Waline 部署

根据官方教程，Vercel 一键部署就行。关键在于挑什么数据库。

可以按照 Waline 官网建议选择喜欢的数据库。

我希望能把数据都钻在自己手里。正好 VPS 还有一些内存可用，没必要额外破费，干脆在机器上部署一个 MySQL 好了。

version: '3.8'

services:
  mysql:
    image: mysql:8.0   # Use the latest version or specify a version like 5.7
    container_name: mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: xxxxxxxxxxx   # Replace with your MySQL root password
      MYSQL_DATABASE: waline        # Replace with your default database name
      MYSQL_USER: waline                     # Replace with your custom username
      MYSQL_PASSWORD: xxxxxxxxxxx             # Replace with your custom user password
    ports:
      - "3306:3306"   # Expose MySQL on port 3306
    volumes:
      - mysql_data:/var/lib/mysql   # Mount a volume to persist the database
      - ./initdb:/docker-entrypoint-initdb.d/   # Mount your SQL file for initialization

volumes:
  mysql_data:
    driver: local

需要弄一个初始化 SQL 文件 init.sql 放在 ./initdb 里。

Chirpy 客户端

在配置文件里模仿已有内容添加一些新评论系统的内容：

comments:
  # Global switch for the post-comment system. Keeping it empty means disabled.
  provider: waline # [disqus | utterances | giscus | waline]
  # The provider options are as follows:
  disqus:
    shortname:  # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
  # utterances settings › https://utteranc.es/
  utterances:
    repo: # <gh-username>/<repo>
    issue_term: # < url | pathname | title | ...>
  # Giscus options › https://giscus.app
  giscus:
    repo:  # <gh-username>/<repo>
    repo_id: 
    category: 
    category_id: 
    mapping: # optional, default to 'pathname'
    strict: # optional, default to '0'
    input_position: # optional, default to 'bottom'
    lang: en # optional, default to the value of `site.lang`
    reactions_enabled: # optional, default to the value of `1`
  waline:
    server_url: 
    lang: en

在 _includes/comments 下新建文件 waline.html：（这里还可以进一步优化对明暗主题的适应，我就懒得操作了）

<div id="waline" style="max-width: 800px; margin: 0 auto"></div>
<script type="module">
      import { init } from 'https://cdn.jsdelivr.net/npm/@waline/[email protected]/dist/waline.js';

      const waline = init({
        el: '#waline',
        serverURL: '{{ site.comments.waline.server_url }}',
        lang: '{{ site.active_lang | default: site.comments.waline.lang }}',
      });
</script>

在 _includes/head.html 下提供 CSS，放在大概这个位置就对：

 
<!-- Bootstrap -->
  {% unless jekyll.environment == 'production' %}
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  />
  {% endunless %}

  <!-- waline -->
  {% if site.comments.provider == 'waline' %}
    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@waline/[email protected]/dist/waline.min.css"
/>
  {% endif %}

  <!-- Theme style -->
  <link
    rel="stylesheet"
    href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}"
  />

结语

本机测试成功。Waline 功能还是挺全面的，甚至还能给你的用户群提供账号系统设置评论等级之类。

不过想了想，这个博客还是用 giscus 吧，管理起来更省心。这次搞这个主要是练练手。以后可能会把这个评论系统用在其它目标群体是非 GitHub 用户的静态网站里。这么多复杂的功能，更适合娱乐性强一些的网站。