背景
Lumin Blog 的评论功能此前存在多处不一致的问题：
- music 页面完全独立实现了评论区，未使用主模板
comments.html - movies/books/games 页面虽然引用了主模板，但外层包裹了自定义样式容器，与主模板样式冲突
- 冗余子模板
comments/twikoo.html和comments/waline.html未被任何页面引用 - 评论区 UI 缺少加载状态、错误提示等交互细节
- 不同页面评论区外观不统一（有底色 vs 无底色）
一、评论模板统一
1.1 主模板结构
全站评论区统一使用 layouts/partials/comments.html，支持 6 种评论系统：
| 评论系统 | 容器 ID | 配置键 |
|---|---|---|
| Disqus | disqus_thread | comments.disqus.shortname |
| Gitalk | gitalk-container | comments.gitalk.* |
| Twikoo | tcomment | comments.twikoo.envId |
| Waline | waline | comments.waline.serverURL |
| Artalk | artalk-comments | comments.artalk.server |
| Giscus | giscus-container | comments.giscus.* |
模板根据 site.Params.comments.type 配置值加载对应评论系统。
1.2 页面引用方式
所有页面统一通过以下方式引入评论区：
1{{ partial "comments.html" . }}
共 20+ 个页面模板引用此主模板，包括文章页、关于、留言板、友链、探索、影视、书籍、游戏、便签、旅行、工具等。
1.3 清理的冗余实现
| 文件 | 问题 | 处理 |
|---|---|---|
music/list.html | 独立 Twikoo 初始化 + 自定义评论区 HTML | 改为 partial "comments.html" |
music/list.html | ensureTwikoo() / initComments() 函数 | 删除 |
music/list.html | .music-comments-section 自定义样式 | 删除 |
movies/list.html | .movie-comments-section 自定义样式 | 删除 |
books/list.html | .book-comments-section 自定义样式 | 删除 |
games/list.html | .game-comments-section 自定义样式 | 删除 |
comments/twikoo.html | 未被引用的冗余子模板 | 删除 |
comments/waline.html | 未被引用的冗余子模板 | 删除 |
二、评论区 UI 美化
2.1 标题区域
1.comments-header {
2 display: flex;
3 align-items: center;
4 gap: 10px;
5 padding-bottom: 16px;
6 border-bottom: 1px solid var(--border-light);
7}
8.comments-header::after {
9 /* 底部渐变装饰线 */
10 width: 48px; height: 3px;
11 background: linear-gradient(135deg, #667eea, #764ba2);
12 border-radius: 3px;
13}
- 图标：紫蓝渐变圆角方块（
#667eea → #764ba2），带投影 - 标题文字：
1.1rem粗体，带0.02em字间距 - 新增副标题：
"期待你的想法"，浅色小字
2.2 加载动画
评论区加载时显示双层动画：
- 外环：3px 边框旋转环，顶部边框为紫蓝色
- 中心点：8px 渐变脉冲圆点，缩放 + 透明度变化
- 加载文字：带动态省略号动画（CSS
content+@keyframes）
1@keyframes commentsSpin { to { transform: rotate(360deg); } }
2@keyframes commentsPulse {
3 0%, 100% { transform: scale(1); opacity: 1; }
4 50% { transform: scale(0.6); opacity: 0.4; }
5}
6@keyframes commentsDots {
7 0% { content: ''; }
8 25% { content: '.'; }
9 50% { content: '..'; }
10 75% { content: '...'; }
11}
2.3 错误状态
评论加载失败时显示卡片式错误提示，区分两种状态：
- 错误（红色）：加载失败，提示刷新重试
- 警告（橙色）：评论系统类型未配置或不受支持
错误卡片包含图标、说明文字和配置提示。
2.4 卡片容器适配
评论区容器 .post-comments 自带卡片样式（背景、边框、圆角、阴影），确保在无卡片容器包裹的页面（探索、影视等宽页面）也有统一外观。
对于已有卡片容器包裹的页面（文章页、留言板等），通过 CSS 选择器自动去除重复样式：
1/* 默认带卡片样式 */
2.post-comments {
3 background: var(--bg-card);
4 border: 1px solid var(--border-light);
5 border-radius: 18px;
6 box-shadow: 0 2px 12px rgba(0,0,0,0.04);
7}
8
9/* 已有容器包裹时融入父容器 */
10.single-post > .post-comments,
11.list-page:not(.explore-page) > .post-comments {
12 background: transparent;
13 border: none;
14 box-shadow: none;
15 padding: 0;
16}
暗色模式适配：
1[data-theme="dark"] .post-comments {
2 background: rgba(30, 41, 59, 0.7);
3 border-color: rgba(71, 85, 105, 0.3);
4 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
5}
留言评论
期待你的想法评论加载中