Hugo博客搭建教程（四）：评论系统与社交功能

前面几篇把博客的基本框架搭好了，这篇主要是添加一些交互功能，比如评论系统、社交链接什么的。

配置Giscus评论系统

什么是Giscus？

Giscus是基于GitHub Discussions的评论系统，特点：

🆓 完全免费
🔒 数据安全，存储在GitHub
🌙 支持深色/浅色主题
🚀 加载速度快
💬 支持回复和表情反应

创建GitHub仓库

登录GitHub：访问 https://github.com
创建新仓库：
- 点击右上角的 “+” 按钮
- 选择 “New repository”
- 仓库名称：yimi-blog (或你喜欢的名称)
- 设置为 Public (公开)
- 勾选 “Add a README file”
- 点击 “Create repository”
💡 仓库创建：GitHub的创建仓库页面包含仓库名称输入框、公开/私有选择、README文件选项等。确保选择"Public"并勾选"Add a README file"。

启用Discussions功能

进入仓库设置：
- 在你的仓库页面，点击 “Settings” 标签
- 向下滚动找到 “Features” 部分
- 勾选 “Discussions” 选项
💡 功能启用：在仓库设置页面的"Features"部分，找到"Discussions"选项并勾选。这会为仓库启用讨论功能，用于存储评论数据。
创建讨论分类：
- 点击仓库的 “Discussions” 标签
- GitHub会自动创建默认分类
- 建议创建一个 “Announcements” 分类用于评论

配置Giscus

访问Giscus配置页面：https://giscus.app/zh-CN
填写仓库信息：
- 仓库：你的用户名/yimi-blog
- 页面 ↔️ discussion 映射关系：选择 “pathname”
- Discussion 分类：选择 “Announcements”
💡 配置页面：Giscus官网提供了一个配置向导，输入仓库信息后会自动生成配置代码。页面会实时显示预览效果和配置参数。

获取配置代码：页面会生成类似这样的配置信息：

data-repo="你的用户名/yimi-blog"
data-repo-id="R_kgDOxxxxxxx"
data-category="Announcements"
data-category-id="DIC_kwDOxxxxxxx"

添加评论配置

编辑hugo.toml：在 [params] 部分添加：

# 评论系统配置
comments = true

# Giscus 评论系统配置
[params.giscus]
  repo = "你的用户名/yimi-blog"
  repoId = "R_kgDOxxxxxxx"
  category = "Announcements"
  categoryId = "DIC_kwDOxxxxxxx"
  mapping = "pathname"
  strict = "0"
  reactionsEnabled = "1"
  emitMetadata = "0"
  inputPosition = "bottom"
  theme = "preferred_color_scheme"
  lang = "zh-CN"
  loading = "lazy"

⚠️ 注意：替换为你从Giscus获取的实际配置值

💡 配置文件：在hugo.toml文件的[params]部分添加上述配置。注意保持正确的缩进格式，并确保所有引号和括号匹配。

创建评论模板

创建自定义评论模板：创建文件 layouts\partials\comments.html：

{{- if and site.Params.comments (not .Params.disableComments) }}
{{- if site.Params.giscus }}
<div id="giscus-comments" class="comments">
    <script src="https://giscus.app/client.js"
        data-repo="{{ site.Params.giscus.repo }}"
        data-repo-id="{{ site.Params.giscus.repoId }}"
        data-category="{{ site.Params.giscus.category }}"
        data-category-id="{{ site.Params.giscus.categoryId }}"
        data-mapping="{{ site.Params.giscus.mapping | default "pathname" }}"
        data-strict="{{ site.Params.giscus.strict | default "0" }}"
        data-reactions-enabled="{{ site.Params.giscus.reactionsEnabled | default "1" }}"
        data-emit-metadata="{{ site.Params.giscus.emitMetadata | default "0" }}"
        data-input-position="{{ site.Params.giscus.inputPosition | default "bottom" }}"
        data-theme="{{ site.Params.giscus.theme | default "preferred_color_scheme" }}"
        data-lang="{{ site.Params.giscus.lang | default "en" }}"
        data-loading="{{ site.Params.giscus.loading | default "lazy" }}"
        crossorigin="anonymous"
        async>
    </script>
</div>
{{- end }}
{{- end }}

💡 模板文件：在layouts/partials目录下创建comments.html文件，复制上述HTML代码。这个模板会在文章页面底部自动加载Giscus评论系统。

🔗 第二步：完善社交链接配置

扩展社交链接

在hugo.toml中添加更多社交链接：

# 社交链接
[[params.socialIcons]]
  name = "email"
  url = "mailto:hdxiaoke@126.com"

[[params.socialIcons]]
  name = "qq"
  url = "https://qm.qq.com/cgi-bin/qm/qr?k=726049236"

[[params.socialIcons]]
  name = "github"
  url = "https://github.com/你的用户名"

[[params.socialIcons]]
  name = "rss"
  url = "/index.xml"

[[params.socialIcons]]
  name = "telegram"
  url = "https://t.me/你的用户名"

创建首页信息卡片

创建自定义首页信息模板：创建文件 layouts\partials\home_info.html：

{{- with site.Params.homeInfoParams }}
<article class="first-entry home-info">
    <div class="home-info-content">
        <header class="entry-header">
            <h1>{{ .Title | markdownify }}</h1>
        </header>
        <div class="entry-content">
            {{ .Content | markdownify }}
        </div>
        <footer class="entry-footer">
            {{ partial "social_icons.html" (dict "align" site.Params.homeInfoParams.AlignSocialIconsTo) }}
        </footer>
    </div>
    <div class="home-info-image">
        <img src="{{ .imageUrl | relURL }}" alt="Home Banner" />
    </div>
</article>
{{- end -}}

💡 首页效果：配置完成后，首页会显示个人信息卡片，包含欢迎文字、个人介绍，底部有邮箱、QQ、GitHub等社交图标链接。

📱 第三步：创建联系页面

创建联系页面

创建联系页面文件：
```
hugo new contact.md
```

编辑联系页面内容：

+++
title = "联系我"
date = 2025-01-05T00:00:00+08:00
draft = false
showToc = false
+++

## 📬 联系方式

很高兴能与你交流！你可以通过以下方式联系我：

### 📧 邮箱
- **主邮箱**：hdxiaoke@126.com
- 我通常会在24小时内回复邮件

### 💬 即时通讯
- **QQ群**：726049236
- 欢迎加入群聊，一起讨论技术和生活

### 🌐 社交媒体
- **GitHub**：[@你的用户名](https://github.com/你的用户名)
- **Telegram**：[@你的用户名](https://t.me/你的用户名)

### 📝 留言板
如果你有任何问题、建议或想法，也可以在下方留言：

---

## 🤝 合作交流

我很乐意与大家交流以下话题：
- 💻 技术学习和职业发展
- 📚 读书心得和知识分享
- 🔧 工具推荐和使用技巧
- 🌱 生活感悟和个人成长

### 📋 友链申请

如果你也有个人博客，欢迎申请友链交换：
- 网站内容积极向上
- 定期更新维护
- 可以正常访问

**申请格式**：

网站名称：你的网站名称网站地址：https://你的域名.com 网站描述：简短的网站介绍网站图标：图标链接（可选）


期待与你的交流！

添加到菜单：在hugo.toml中添加：

[[menu.main]]
  identifier = "contact"
  name = "联系"
  url = "/contact/"
  weight = 55

🎨 第四步：优化用户体验

添加页脚信息

创建自定义页脚：创建文件 layouts\partials\footer.html：

{{- if not (.Param "hideFooter") }}
<footer class="footer">
    {{- if site.Copyright }}
    <span>{{ site.Copyright | markdownify }}</span>
    {{- else }}
    <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
    {{- end }}
    {{- with site.Params.footer.text }}
        {{- print " · "}}
        {{ . | markdownify }}
    {{- end }}

    <span>
        {{- print " · "}}
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
{{- end }}

在配置中添加页脚文本：

# 页脚配置
[params.footer]
  text = "欢迎交流学习 | 持续更新中"

测试评论功能

重启服务器：
```
hugo server
```
测试评论：
- 访问任意文章页面
- 滚动到页面底部
- 应该看到Giscus评论框
- 使用GitHub账号登录测试评论功能
💡 评论测试：在文章页面底部会出现Giscus评论框，显示"Sign in with GitHub"按钮。点击登录后可以发表评论，评论会同步到GitHub Discussions中。

✅ 功能测试清单

确认以下功能都正常工作：

Giscus评论系统正常加载
可以使用GitHub账号登录评论
社交图标链接正确
联系页面内容完整
页脚信息显示正常
各个页面导航正常

小结

到这里，评论系统和社交链接都配置好了。Giscus评论系统基于GitHub Discussions，比较稳定，而且不需要额外的服务器。社交链接也添加了，方便读者联系。

下一篇会讲页脚的个性化定制和一些高级配置。

关于运营，简单说几点：

评论管理：

定期在GitHub仓库的Discussions中查看评论
及时回复读者的问题和建议
设置合适的评论规则，保持友好氛围

社交互动：

定期更新社交媒体状态
与读者保持良好互动
在社交媒体分享新文章

上一篇：Hugo博客搭建教程（三）：内容完善与页面配置 下一篇：Hugo博客搭建教程（五）：页脚优化与个性化定制

配置Giscus评论系统#

什么是Giscus？#

创建GitHub仓库#

启用Discussions功能#

配置Giscus#

添加评论配置#

创建评论模板#

🔗 第二步：完善社交链接配置#

扩展社交链接#

创建首页信息卡片#

📱 第三步：创建联系页面#

创建联系页面#

🎨 第四步：优化用户体验#

添加页脚信息#

测试评论功能#

✅ 功能测试清单#

小结#