Menu

Polly's Blog

为 Zola 博客集成 Giscus 评论系统：基于 GitHub Discussions 的互动方案

简介

本文将详细介绍如何在 Zola 博客中集成 Giscus 评论系统。Giscus 是一个现代化的评论系统，基于 GitHub Discussions，能够为你的博客提供无缝的用户互动体验。

前提条件

  • 一个基于 Zola 的博客系统。
  • 两个 GitHub 仓库：
    • www.polly.com（私有）：包含 Zola 源代码。
    • polly2014.github.io（公开）：托管编译后的 public 文件夹。
  • 在 polly2014.github.io 仓库中启用了 GitHub Discussions。

集成步骤

第一步：配置 Giscus

  1. 访问 Giscus 并进行以下配置：

    • 仓库：选择 Polly2014/polly2014.github.io。
    • 讨论分类：创建或选择一个分类（例如 "Announcements"）。
    • 映射方式：选择 pathname，将讨论与博客页面进行映射。
    • 主题：选择 "light" 或其他与你博客匹配的主题。
    • 语言：设置为 zh-CN（中文）。
    • 懒加载：启用以优化性能。

  2. 复制生成的嵌入代码。

第二步：更新博客模板

  1. 打开 templates 文件夹中的 blog.html 模板文件。
  2. 添加以下代码：
<div class="giscus"></div>
<link rel="stylesheet" href="/static/css/style_new.css">
<script src="https://giscus.app/client.js"
        data-repo="Polly2014/polly2014.github.io"
        data-repo-id="R_kgDOL45duA"
        data-category="Announcements"
        data-category-id="DIC_kwDOL45duM4CnjaK"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="light"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

第三步：自定义样式

  1. 打开 static/css 文件夹中的 style_new.css 文件。
  2. 添加以下样式以确保 Giscus 与博客主题一致：
.giscus {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
    color: #333;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.giscus-frame {
    border: none;
    width: 100%;
}

第四步：测试与部署

  1. 使用 Zola 编译你的博客。
  2. 将更新后的 public 文件夹推送到 polly2014.github.io 仓库。
  3. 访问你的博客，验证 Giscus 评论系统是否正常工作。

评论系统对比分析

除了 Giscus，以下是其他常见评论系统的对比：

评论系统特点优点缺点
Giscus基于 GitHub Discussions，支持 Markdown 和多语言。免费、无广告、与 GitHub 集成。需要 GitHub 账号，适合技术博客。
Disqus流行的第三方评论系统，支持社交登录。易于集成，功能丰富。免费版有广告，隐私性较差。
Commento开源评论系统，可自托管。无广告，隐私性好。自托管需要服务器资源。
Remark42开源自托管，支持匿名评论和社交登录。无广告，支持多种登录方式。自托管需要维护，功能较简单。
Utterances基于 GitHub Issues，轻量化。免费、无广告、与 GitHub 集成。需要 GitHub 账号，功能较简单。

效果

Blog Comment

总结

通过本文的步骤，即可轻松在 Zola 博客中集成 Giscus 评论系统，并为用户提供现代化的互动体验。根据你的需求，也可以选择其他评论系统。

欢迎在评论区分享你的想法或提出问题！

留言与讨论