hexo-next & giscus 评论测试

发表于 分类于 阅读次数： 本文字数： 1.6k 阅读时长 ≈ 3 分钟

本文介绍了在Hexo框架的Next主题中添加Giscus评论系统的具体步骤。

hexo版本：7.3.0

next版本：8.22.0

版本查看

hexo：在博客根目录下启动命令行，输入hexo --version

next：在主题文件夹.\themes\next下打开文件package.json,查看字段version

一、Github配置

  1. 你的仓库是公开的（public），否则访客将无法查看 discussion。
  2. giscus app 已安装，否则访客将无法评论和回应。
  3. 已在你的仓库中启用Discussions 功能。

1. 公开Github仓库

参考GIthub文档：设置仓库可见性 - GitHub Docs

  1. 打开博客所在Github仓库（Repositories）https://github.com/用户名/用户名.github.io)
  2. 在设置界面(Settings)的General下页面
  3. 拉到最下面的Danger Zone部分（红色框）
  1. 将Change repository visibility设置为public（公开）

2. 安装giscus app

点击链接安装：GitHub Apps - giscus

3. 启用Discussions 功能

参考：Enabling or disabling GitHub Discussions for a repository - GitHub Docs

  1. 导航到Github仓库主页，点击Settings（设置）

  2. 找到Features部分，选择Discussions

二、Giscus配置

1. 注册Giscus并获取配置

  1. 访问Giscus的官方网站

  2. 配置Giscus相关设置，配置完后在启用giscus处自动生成配置代码

    <script src="https://giscus.app/client.js"
            data-repo="[在此输入仓库]"
            data-repo-id="[在此输入仓库 ID]"
            data-category="[在此输入分类名]"
            data-category-id="[在此输入分类 ID]"
            data-mapping="pathname"
            data-strict="0"
            data-reactions-enabled="1"
            data-emit-metadata="0"
            data-input-position="bottom"
            data-theme="preferred_color_scheme"
            data-lang="zh-CN"
            crossorigin="anonymous"
            async>
    </script>

三、Hexo-next配置

1. 安装hexo-next-giscus插件

在hexo博客根目录打开命令行，执行以下命令，安装插件

npm install hexo-next-giscus --save

2. 编辑Next主题配置文件

  1. 在hexo根目录下，打开主题配置文件.\themes\next\_config.yml

  2. 添加以下代码：

giscus:
  enable: true
  repo: 在此输入仓库名
  repo_id: 在此输入仓库 ID
  category: 在此输入分类名
  category_id: 在此输入分类 ID
  mapping: title
  reactions_enabled: 1
  emit_metadata: 0
  input_position: bottom
  lang: zh-CN
  loading: lazy
  crossorigin: anonymous
  1. 按照Giscus生成的配置文件，填入对应的参数，注意去掉引号""和data-

注意直接在配置文件末尾加入上述代码，而不是在comments:后面添加

四、实现效果