gh_mirrors/mz/mzlogin.github.io模板扩展教程：添加评论系统与访问统计

【免费下载链接】mzlogin.github.io Jekyll Themes / GitHub Pages 博客模板 / A template repository for Jekyll based blog 项目地址: https://gitcode.com/gh_mirrors/mz/mzlogin.github.io

GitHub Pages博客模板（gh_mirrors/mz/mzlogin.github.io）是一个基于Jekyll的高效博客框架，本文将详细介绍如何为该模板添加评论系统与访问统计功能，帮助新手用户快速提升博客互动性和数据追踪能力。

准备工作：模板基础结构

在开始扩展前，建议先通过以下命令克隆项目到本地：

git clone https://gitcode.com/gh_mirrors/mz/mzlogin.github.io

该模板采用模块化设计，核心功能通过_includes目录下的组件实现。评论系统主要通过_includes/comments.html文件配置，访问统计则由_includes/visit-stat.html控制，所有功能开关集中在_config.yml文件中。

图1：模板默认首页效果，包含导航栏、文章列表和侧边栏模块

一、添加多平台评论系统

模板内置了Disqus、Gitalk、Giscus等6种评论系统，通过简单配置即可启用。以下是详细步骤：

1.1 选择评论系统

打开配置文件_config.yml，找到comments_provider配置项，可设置为以下值之一：

• disqus: 国际流行评论系统
• gitalk: GitHub Issues驱动的评论工具
• giscus: 基于GitHub Discussions的轻量评论系统（推荐）

# _config.yml
comments_provider: giscus  # 选择giscus作为评论系统

1.2 配置Giscus评论系统（推荐）

1. 访问Giscus官网生成配置参数
2. 在_config.yml中填写以下信息：

giscus:
  repo: your-username/your-repo  # 存储评论的仓库
  repo-id: MDEwOlJlcG9zaXRvcnkxxxxxxxxxx  # 仓库ID
  category: Announcements  # 讨论分类
  category-id: DIC_kwDOBxxxxxxxxx  # 分类ID

3. 评论组件会自动嵌入到所有文章页面，对应模板文件路径：_includes/comments.html

1.3 其他评论系统配置

• Gitalk配置：需在GitHub创建OAuth应用，获取clientID和clientSecret
• Disqus配置：注册Disqus账号并获取username
• Utterances配置：仅需指定存储评论的GitHub仓库

二、集成访问统计功能

模板使用不蒜子（Busuanzi）统计工具实现访问量统计，启用步骤如下：

2.1 启用统计功能

编辑_config.yml，将busuanzi.enabled设置为true：

components:
  busuanzi:
    enabled: true  # 启用不蒜子统计
    start_date: 2023-01-01  # 统计起始日期

2.2 统计数据展示位置

统计代码位于_includes/visit-stat.html，默认显示在页面底部，包含：

• 本站总访问量
• 本站访客数
• 本页访问量

如需修改显示样式，可编辑该文件调整HTML结构和CSS样式。

三、高级自定义

3.1 评论系统懒加载

为提升页面加载速度，可启用评论系统懒加载功能：

lazy_load_disqus: true  # 延迟加载Disqus评论

设置后，评论区将显示"Show Comments"按钮，点击后才加载评论内容。

3.2 统计数据样式调整

通过修改_includes/visit-stat.html文件，可自定义统计数据的显示格式：

<!-- 自定义统计显示格式 -->
<span id="busuanzi_container_page_pv">
  本文阅读量<span id="busuanzi_value_page_pv"></span>次
</span>

四、功能验证

完成配置后，通过以下命令本地预览效果：

bundle install  # 安装依赖
bundle exec jekyll serve  # 启动本地服务器

访问http://localhost:4000，检查：

1. 文章底部是否显示评论框
2. 页面底部是否显示访问统计数据
3. 不同页面间统计数据是否正常累计

总结

通过本文介绍的方法，只需简单修改配置文件，即可为GitHub Pages博客模板添加强大的评论系统和访问统计功能。模板的模块化设计使得扩展非常灵活，无论是新手还是有经验的用户都能快速上手。

所有配置文件路径汇总：

• 主配置：_config.yml
• 评论组件：_includes/comments.html
• 统计组件：_includes/visit-stat.html
• 布局模板：_layouts/post.html（评论区嵌入位置）

【免费下载链接】mzlogin.github.io Jekyll Themes / GitHub Pages 博客模板 / A template repository for Jekyll based blog 项目地址: https://gitcode.com/gh_mirrors/mz/mzlogin.github.io