💬 留言板功能简介

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),需要:

  1. 下载 Artalk 文件到 static/lib/artalk/ 目录
  2. hugo.toml 中设置 useLocal = true

使用 CDN

如果你想使用 CDN 加载 Artalk:

  1. hugo.toml 中设置 useLocal = false
  2. 配置 cdn 数组,添加你喜欢的 CDN 源
  3. 设置 cdnIndex 指定默认使用的 CDN

💡 使用技巧

1. 内容组织

  • 使用清晰的标题层级(H2、H3、H4)
  • 使用列表展示要点
  • 使用引用块突出重要信息
  • 添加常见问题解答(FAQ)

2. Markdown 格式

  • 代码:使用反引号 `代码`
  • 代码块:使用三个反引号 代码块
  • 链接:使用 [链接文字](URL)
  • 图片:使用 ![图片描述](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: messagelayout: 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 评论系统

希望这个留言板功能能够帮助您更好地与访客互动交流!💬