💬 留言板功能简介
Demius 主题的留言板功能为您提供了一个优雅的访客留言和交流平台。通过集成 Artalk 评论系统,您可以轻松地让访客留下他们的想法、建议或问题,并与他们进行互动交流。
主要特性
- 💬 留言功能:访客可以轻松留言,填写昵称和邮箱即可
- 🎨 Markdown 支持:支持 Markdown 语法,让留言更丰富
- 😊 表情支持:可以使用 emoji 表情和表情包
- 💬 回复功能:可以回复其他人的留言,支持多级回复
- 📧 邮件通知:收到回复时会邮件通知(如果开启)
- 🔄 实时更新:留言实时显示,无需刷新页面
- 🎨 主题适配:自动适配明暗主题,提供流畅体验
- 📱 响应式设计:完美适配各种设备
- 🌙 暗色模式:自动适配明暗主题
- 📋 内容管理:通过 Markdown 文件管理页面内容
🚀 快速开始
1. 创建留言板页面
在 content/ 目录下创建 message.md 文件:
---
title: "留言板"
slug: message
date: 2025-10-28T18:00:00+08:00
type: message
layout: message
description: "欢迎在这里留言,分享你的想法和建议"
---
## 💬 欢迎留言
欢迎来到留言板!在这里你可以:
- 📝 **自由留言**:分享你的想法、建议或问题
- 💡 **技术交流**:讨论技术话题,共同学习进步
- 🤝 **交个朋友**:认识志同道合的朋友
- 📣 **反馈建议**:对网站有什么建议都可以告诉我
## 📋 留言须知
1. **友善交流**:请保持友善和尊重,营造良好的交流氛围
2. **相关内容**:欢迎与技术、学习、生活相关的话题
3. **禁止内容**:
- ❌ 广告、推广、垃圾信息
- ❌ 不文明、攻击性言论
- ❌ 违法违规内容
## 🎨 留言板功能
- ✅ **Markdown 支持**:支持 Markdown 语法,让留言更丰富
- ✅ **表情支持**:可以使用 emoji 表情 😊
- ✅ **回复功能**:可以回复其他人的留言
- ✅ **邮件通知**:收到回复时会邮件通知(如果开启)
- ✅ **实时更新**:留言实时显示
2. 配置评论系统
在 hugo.toml 文件中配置 Artalk 评论系统:
# Artalk 配置(https://artalk.js.org)
[params.comment]
enable = true # 是否启用评论系统
[params.comment.artalk]
server = "https://site.demius.tech" # Artalk 后端地址
site = "demius" # 站点名称(与 Artalk 后台一致)
placeholder = "说点什么吧~" # 输入框提示语
darkMode = true # 是否启用暗色模式适配
locale = "zh-CN" # 语言
gravatar = "mp" # Gravatar 头像源
pageSize = 10 # 每页评论数
emoticons = true # 是否启用表情包
heightLimit = 500 # 评论区最大高度(px)
# 资源加载配置
useLocal = true # true=使用本地文件 false=使用下方指定的CDN
# CDN 配置(当 useLocal = false 时生效)
cdn = [
{ name = "jsDelivr", css = "https://cdn.jsdelivr.net/npm/artalk@2.9.1/dist/Artalk.css", js = "https://cdn.jsdelivr.net/npm/artalk@2.9.1/dist/Artalk.js" },
{ name = "unpkg", css = "https://unpkg.com/artalk@2.9.1/dist/Artalk.css", js = "https://unpkg.com/artalk@2.9.1/dist/Artalk.js" },
{ name = "elemecdn", css = "https://npm.elemecdn.com/artalk@2.9.1/dist/Artalk.css", js = "https://npm.elemecdn.com/artalk@2.9.1/dist/Artalk.js" }
]
cdnIndex = 1 # 默认使用第 1 个 CDN
3. 配置导航菜单(可选)
在 hugo.toml 文件中添加留言板到导航菜单:
[[menu.main]]
name = "留言"
url = "/message/"
weight = 5
4. 访问留言板
构建网站后,访问 /message 路径即可查看留言板。
📝 配置详解
页面 Front Matter
留言板页面使用以下 Front Matter 配置:
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
title |
string | ✅ | 页面标题(如:“留言板”) |
slug |
string | ❌ | 页面 URL 路径(如:“message”) |
date |
string | ✅ | 页面创建日期(格式:YYYY-MM-DDTHH:mm:ss+08:00) |
type |
string | ✅ | 页面类型:message |
layout |
string | ✅ | 页面布局:message |
description |
string | ❌ | 页面描述(可选) |
comments |
boolean | ❌ | 是否启用评论(默认启用) |
Artalk 配置说明
| 配置项 | 类型 | 说明 |
|---|---|---|
server |
string | Artalk 后端服务器地址(需要部署 Artalk 服务) |
site |
string | 站点名称(需要在 Artalk 后台配置) |
placeholder |
string | 输入框提示语 |
darkMode |
boolean | 是否启用暗色模式适配 |
locale |
string | 语言设置(如:“zh-CN”、“en-US”) |
gravatar |
string | Gravatar 头像源(如:“mp”、“identicon”、“monsterid”) |
pageSize |
number | 每页显示的评论数量 |
emoticons |
boolean | 是否启用表情包 |
heightLimit |
number | 评论区最大高度(像素) |
useLocal |
boolean | 是否使用本地 Artalk 文件(true=使用本地,false=使用 CDN) |
cdn |
array | CDN 配置列表(当 useLocal = false 时生效) |
cdnIndex |
number | 默认使用的 CDN 索引 |
💡 使用示例
示例 1:基础留言板页面
---
title: "留言板"
slug: message
date: 2025-10-28T18:00:00+08:00
type: message
layout: message
description: "欢迎在这里留言,分享你的想法和建议"
---
## 💬 欢迎留言
欢迎来到留言板!在这里你可以:
- 📝 **自由留言**:分享你的想法、建议或问题
- 💡 **技术交流**:讨论技术话题,共同学习进步
- 🤝 **交个朋友**:认识志同道合的朋友
- 📣 **反馈建议**:对网站有什么建议都可以告诉我
期待你的留言!👇
示例 2:详细的留言须知
---
title: "留言板"
slug: message
date: 2025-10-28T18:00:00+08:00
type: message
layout: message
description: "欢迎在这里留言,分享你的想法和建议"
---
## 💬 欢迎留言
欢迎来到留言板!在这里你可以:
- 📝 **自由留言**:分享你的想法、建议或问题
- 💡 **技术交流**:讨论技术话题,共同学习进步
- 🤝 **交个朋友**:认识志同道合的朋友
- 📣 **反馈建议**:对网站有什么建议都可以告诉我
## 📋 留言须知
1. **友善交流**:请保持友善和尊重,营造良好的交流氛围
2. **相关内容**:欢迎与技术、学习、生活相关的话题
3. **禁止内容**:
- ❌ 广告、推广、垃圾信息
- ❌ 不文明、攻击性言论
- ❌ 违法违规内容
## 🎨 留言板功能
- ✅ **Markdown 支持**:支持 Markdown 语法,让留言更丰富
- ✅ **表情支持**:可以使用 emoji 表情 😊
- ✅ **回复功能**:可以回复其他人的留言
- ✅ **邮件通知**:收到回复时会邮件通知(如果开启)
- ✅ **实时更新**:留言实时显示
## 💭 常见问题
### Q: 留言需要注册账号吗?
A: 不需要!填写昵称和邮箱即可留言,非常简单。
### Q: 留言会被公开吗?
A: 是的,所有留言都是公开的,请注意保护个人隐私。
### Q: 留言可以删除吗?
A: 可以!如果需要删除自己的留言,请联系我。
### Q: 支持什么格式?
A: 支持 Markdown 语法,可以使用链接、图片、代码等格式。
## 📮 其他联系方式
如果你不想公开留言,也可以通过以下方式联系我:
- 📧 **邮箱**:your-email@example.com
## 🎉 开始留言吧!
期待你的留言!👇
示例 3:技术交流留言板
---
title: "技术交流"
slug: tech-discussion
date: 2025-10-28T18:00:00+08:00
type: message
layout: message
description: "欢迎在这里讨论技术话题,共同学习进步"
---
## 💡 技术交流
欢迎来到技术交流留言板!这里是大家讨论技术话题、分享学习心得、解决技术问题的平台。
### 讨论范围
- 🚀 **前端技术**:HTML、CSS、JavaScript、React、Vue 等
- 🔧 **后端技术**:Node.js、Python、Java、Go 等
- 📱 **移动开发**:iOS、Android、React Native 等
- 🌐 **Web 开发**:网站搭建、SEO、性能优化等
- 🔒 **安全技术**:网络安全、数据加密等
- 📊 **数据库**:MySQL、PostgreSQL、MongoDB 等
- ☁️ **云服务**:AWS、Azure、阿里云等
### 交流规则
1. **尊重他人**:请尊重不同的观点和经验
2. **分享知识**:欢迎分享你的学习和实践经验
3. **提问技巧**:提问时请提供足够的信息,包括:
- 遇到的问题
- 尝试过的解决方案
- 相关代码或错误信息
4. **代码格式**:分享代码时请使用代码块格式
期待大家的技术交流!👇
🎨 样式特性
页面布局
- 居中布局:页面内容最大宽度 900px,居中显示
- 标题样式:标题居中,字体大小 2.5rem
- 描述文字:页面描述文字,字体大小 1.1rem
内容区域
- 卡片样式:内容区域使用卡片样式,带圆角和阴影
- Markdown 支持:完整支持 Markdown 语法,包括:
- 标题(H1-H6)
- 段落
- 列表(有序、无序)
- 代码块
- 引用块
- 表格
- 链接
- 图片
评论区
- 卡片样式:评论区使用独立的卡片样式
- 自动适配:自动适配明暗主题
- 高度限制:评论区最大高度可配置(默认 500px)
响应式设计
- 桌面端:最大宽度 900px,居中显示
- 平板端:自动调整内边距
- 手机端:字体大小和内边距自动调整
📱 响应式支持
留言板页面完全支持响应式设计:
- 桌面端:最大宽度 900px,居中显示
- 平板端:自动调整内边距和字体大小
- 手机端:优化触摸体验,字体大小和内边距自动调整
🌙 暗色模式
留言板页面自动适配明暗主题:
- 亮色模式:清新的卡片样式
- 暗色模式:优雅的深色背景,减少夜间阅读疲劳
评论系统(Artalk)也会自动适配明暗主题。
🔧 自定义配置
修改页面内容
编辑 content/message.md 文件,可以添加页面介绍文字:
---
title: "留言板"
slug: message
date: 2025-10-28T18:00:00+08:00
type: message
layout: message
description: "欢迎在这里留言,分享你的想法和建议"
---
## 💬 欢迎留言
这里是你的留言板介绍内容,支持 Markdown 格式。
### 可以添加标题
段落文字内容。
#### 子标题
- 列表项 1
- 列表项 2
- 列表项 3
**粗体文字** 和 *斜体文字*
> 引用块内容
```代码块
代码内容
期待你的留言!👇
### 自定义 Artalk 配置
在 `hugo.toml` 中自定义 Artalk 配置:
```toml
[params.comment.artalk]
server = "https://your-artalk-server.com" # 你的 Artalk 服务器地址
site = "your-site-name" # 你的站点名称
placeholder = "说点什么吧~" # 自定义提示语
darkMode = true # 暗色模式适配
locale = "zh-CN" # 语言设置
gravatar = "mp" # Gravatar 头像源
pageSize = 15 # 每页评论数
emoticons = true # 启用表情包
heightLimit = 600 # 评论区最大高度
使用本地 Artalk 文件
如果你想使用本地的 Artalk 文件(而不是 CDN),需要:
- 下载 Artalk 文件到
static/lib/artalk/目录 - 在
hugo.toml中设置useLocal = true
使用 CDN
如果你想使用 CDN 加载 Artalk:
- 在
hugo.toml中设置useLocal = false - 配置
cdn数组,添加你喜欢的 CDN 源 - 设置
cdnIndex指定默认使用的 CDN
💡 使用技巧
1. 内容组织
- 使用清晰的标题层级(H2、H3、H4)
- 使用列表展示要点
- 使用引用块突出重要信息
- 添加常见问题解答(FAQ)
2. Markdown 格式
- 代码:使用反引号
`代码` - 代码块:使用三个反引号
代码块 - 链接:使用
[链接文字](URL) - 图片:使用
 - 列表:使用
-或*创建无序列表,使用数字创建有序列表
3. 留言管理
- 定期查看和回复留言
- 设置留言审核规则(在 Artalk 后台配置)
- 及时处理不当留言
4. Artalk 部署
- 本地部署:在自己的服务器上部署 Artalk 后端
- 官方服务:使用 Artalk 官方提供的服务
- Docker 部署:使用 Docker 快速部署 Artalk
5. 邮件通知
- 在 Artalk 后台配置邮件服务
- 开启邮件通知功能
- 设置通知规则和模板
📋 完整示例
---
title: "留言板"
slug: message
date: 2025-10-28T18:00:00+08:00
type: message
layout: message
description: "欢迎在这里留言,分享你的想法和建议"
---
## 💬 欢迎留言
欢迎来到留言板!在这里你可以:
- 📝 **自由留言**:分享你的想法、建议或问题
- 💡 **技术交流**:讨论技术话题,共同学习进步
- 🤝 **交个朋友**:认识志同道合的朋友
- 📣 **反馈建议**:对网站有什么建议都可以告诉我
## 📋 留言须知
1. **友善交流**:请保持友善和尊重,营造良好的交流氛围
2. **相关内容**:欢迎与技术、学习、生活相关的话题
3. **禁止内容**:
- ❌ 广告、推广、垃圾信息
- ❌ 不文明、攻击性言论
- ❌ 违法违规内容
## 🎨 留言板功能
- ✅ **Markdown 支持**:支持 Markdown 语法,让留言更丰富
- ✅ **表情支持**:可以使用 emoji 表情 😊
- ✅ **回复功能**:可以回复其他人的留言
- ✅ **邮件通知**:收到回复时会邮件通知(如果开启)
- ✅ **实时更新**:留言实时显示
## 💭 常见问题
### Q: 留言需要注册账号吗?
A: 不需要!填写昵称和邮箱即可留言,非常简单。
### Q: 留言会被公开吗?
A: 是的,所有留言都是公开的,请注意保护个人隐私。
### Q: 留言可以删除吗?
A: 可以!如果需要删除自己的留言,请联系我。
### Q: 支持什么格式?
A: 支持 Markdown 语法,可以使用链接、图片、代码等格式。
## 📮 其他联系方式
如果你不想公开留言,也可以通过以下方式联系我:
- 📧 **邮箱**:your-email@example.com
## 🎉 开始留言吧!
期待你的留言!👇
❓ 常见问题
Q: 如何创建留言板页面?
A: 在 content/ 目录下创建 message.md 文件,设置 type: message 和 layout: message。
Q: 如何配置 Artalk 评论系统?
A: 在 hugo.toml 文件中配置 [params.comment.artalk] 节,设置服务器地址和站点名称。
Q: 如何部署 Artalk 后端?
A: 可以参考 Artalk 官方文档:https://artalk.js.org/guide/deploy.html
Q: 可以使用其他评论系统吗?
A: 目前主题支持 Artalk 评论系统。如果需要其他评论系统,需要修改布局模板。
Q: 留言板内容支持 Markdown 吗?
A: 支持!留言板页面内容完全支持 Markdown 语法,包括标题、列表、代码块、表格等。
Q: 如何自定义留言板样式?
A: 可以修改 themes/demius/layouts/message/message.html 文件中的样式部分。
Q: 评论系统如何适配暗色模式?
A: 评论系统会自动检测页面主题,并自动切换到对应的明暗模式。
Q: 如何禁用留言板评论功能?
A: 在 hugo.toml 中设置 [params.comment] enable = false。
Q: 留言板页面是否支持 PJAX?
A: 支持!留言板页面完全支持 PJAX 无刷新切换。
Q: 如何添加留言板到导航菜单?
A: 在 hugo.toml 中添加 [[menu.main]] 配置,设置 url = "/message/"。
🔗 相关文档
💬 技术说明
数据来源
留言板页面内容来源于 Markdown 文件(content/message.md),评论数据存储在 Artalk 后端数据库中。
评论系统
留言板使用 Artalk 评论系统,具有以下特点:
- ✅ 自托管,数据完全掌控
- ✅ 支持多站点
- ✅ 支持邮件通知
- ✅ 支持表情包
- ✅ 支持 Markdown
- ✅ 支持暗色模式
- ✅ 支持 PJAX
功能特性
- ✅ Markdown 支持:完整支持 Markdown 语法
- ✅ 响应式设计:完美适配各种设备
- ✅ 暗色模式:自动适配明暗主题
- ✅ PJAX 兼容:支持无刷新切换
- ✅ 评论系统:集成 Artalk 评论系统
希望这个留言板功能能够帮助您更好地与访客互动交流!💬