hexo-theme-anzhiyu 主题配置 giscus 评论系统

参考了 hexo-theme-solitude 的 提交，给 hexo-theme-anzhiyu 添加了 giscus 评论系统的支持，在此记录一下修改过程

源码引入 hexo-theme-anzhiyu

之前是使用 npm 的方式来安装 anzhiyu 主题，为了修改主题源文件，要改成使用源码引入的方式：

1
2
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
npm install hexo-renderer-pug hexo-renderer-stylus --save

修改源码文件

修改文件 themes/anzhiyu/layout/includes/third-party/comments/js.pug ：

1
2
3
4
5
6
7
8
9
10
11
12
each name in theme.comments.use
  case name
    when 'Valine'
      !=partial('includes/third-party/comments/valine', {}, {cache: true})
    when 'Twikoo'
      !=partial('includes/third-party/comments/twikoo', {}, {cache: true})
    when 'Waline'
      !=partial('includes/third-party/comments/waline', {}, {cache: true})
    when 'Artalk'
      !=partial('includes/third-party/comments/artalk', {}, {cache: true})
+   when 'Giscus'
+     !=partial('includes/third-party/comments/giscus', {}, {cache: true})

修改文件 themes/anzhiyu/layout/includes/third-party/comments/index.pug ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...

  .comment-wrap
    each name in theme.comments.use
      div
        case name
          when 'Valine'
            #vcomment.vcomment
          when 'Twikoo'
            #twikoo-wrap
          when 'Waline'
            #waline-wrap
          when 'Artalk'
            #artalk-wrap
+         when 'Giscus'
+           #giscus-wrap

.comment-barrage

新增文件 themes/anzhiyu/layout/includes/third-party/comments/giscus.pug ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
- const { repo, repo_id, category_id, theme:themes, option } = theme.giscus
- const giscusUrl = 'https://giscus.app/client.js'
- const giscusOriginUrl = new URL(giscusUrl).origin
- const { use, lazyload } = theme.comments

script.
  (()=>{
    const getGiscusTheme = theme => {
      return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}'
    }

    const loadGiscus = () => {
      const config = Object.assign({
        src: '!{giscusUrl}',
        'data-repo': '!{repo}',
        'data-repo-id': '!{repo_id}',
        'data-category-id': '!{category_id}',
        'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
        'data-reactions-enabled': '1',
        crossorigin: 'anonymous',
        async: true
      },!{JSON.stringify(option)})

      const ele = document.createElement('script')
      for (let key in config) {
        ele.setAttribute(key, config[key])
      }
      document.getElementById('giscus-wrap').appendChild(ele)
    }

    const changeGiscusTheme = theme => {
      const sendMessage = message => {
        const iframe = document.querySelector('iframe.giscus-frame')
        if (!iframe) return
        iframe.contentWindow.postMessage({ giscus: message }, '!{giscusOriginUrl}')
      }

      sendMessage({
        setConfig: {
          theme: getGiscusTheme(theme)
        }
      });
    }

    anzhiyu.addGlobalFn('themeChange', changeGiscusTheme, 'giscus')

    if ('!{use[0]}' === 'Giscus' || !!{lazyload}) {
      if (!{lazyload}) anzhiyu.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
      else loadGiscus()
    } else {
      window.loadOtherComment = loadGiscus
    }
  })()

_config.anzhiyu.yml 中新增以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Valine/Waline/Twikoo/Artalk
  use: Giscus # Twikoo/Waline
  ...

# Giscus
# https://giscus.app/
giscus:
  repo: # GitHub repository name
  repo_id: # GitHub repository id
  category_id: # GitHub repository category id
  theme:
    light: light
    dark: dark
  option: # options
    data-lang: zh-CN
    data-mapping:
    data-category:
    data-input-position:

在 giscus 使用的仓库的主干分支上 （main / master）添加一个 giscus.json 文件，配置默认的评论排序以最新优先，配置详情见 giscus/ADVANCED-USAGE.md at main · giscus/giscus (github.com)：

1
2
3
{
  "defaultCommentOrder": "newest"
}

目前已经给官方提交上述修改的 PR ，不想自己修改的可以等待官方更新版本