说说页面使用示例

💬 说说页面功能简介

Demius 主题的说说页面功能为您提供了一个动态内容展示平台。通过集成 Moments API，您可以自动从说说站点获取并展示日常动态、想法、吐槽等内容，支持图片、音乐、视频、标签、位置等多种媒体类型，采用精美的瀑布流布局展示。

主要特性

🔄 自动同步：集成 Moments API，自动获取说说数据
🖼️ 多媒体支持：支持图片、音乐、视频等多种媒体类型
📍 丰富信息：支持标签、位置、时间等元信息展示
🌊 瀑布流布局：精美的瀑布流卡片布局，视觉效果佳
💾 本地缓存：30分钟本地缓存，减少API请求
⚡ PJAX 兼容：支持无刷新切换页面
🎵 音乐播放：集成 APlayer 和 MetingJS，支持在线音乐播放
📱 响应式设计：完美适配各种设备尺寸
🌙 暗色模式：自动适配明暗主题
💬 评论系统：集成 Artalk 评论系统

🚀 快速开始

1. 创建说说页面

在 content/ 目录下创建 shuoshuo.md 文件：

---
title: "日常哔哔，键盘侠的日常吐槽"
date: 2025-10-18T18:00:00+08:00
type: "shuoshuo"
layout: "shuoshuo"
comments: true
---

欢迎来到我的说说页面！这里记录了我的日常动态、想法和吐槽。

⚠️ 重要提示：

不要设置 slug 字段，否则 URL 路径会改变
slug 字段会导致页面 URL 变成 /b43qv75p/ 而不是 /shuoshuo/
如果菜单配置指向 /shuoshuo/，但页面实际在 /b43qv75p/，会导致 404 错误

2. 配置导航菜单

在 hugo.toml 文件中添加说说页面到导航菜单：

[[menu.main]]
  name = "说说"
  url = "/shuoshuo/"
  weight = 3
  parent = "life"  # 指定父级菜单为"生活"
  [menu.main.params]
    icon = "/img/icons/shuoshuo.svg"

3. 配置 Moments API（可选）

如果您有自己的 Moments 站点，可以修改 API 地址：

编辑 themes/demius/assets/js/_shuoshuo.js：

const url = 'https://mm.demius.tech/api/memo/list';  // 修改为您的API地址

4. 访问说说页面

构建网站后，访问 /shuoshuo 路径即可查看说说页面。

📝 配置详解

页面 Front Matter

说说页面使用以下 Front Matter 配置：

字段	类型	必填	说明
`title`	string	✅	页面标题（如：“日常哔哔，键盘侠的日常吐槽”）
`date`	string	✅	页面创建日期（格式：YYYY-MM-DDTHH:mm:ss+08:00）
`type`	string	✅	页面类型：`shuoshuo`
`layout`	string	✅	页面布局：`shuoshuo`
`comments`	boolean	❌	是否启用评论（默认 true）
`slug`	string	❌	不要设置此字段，否则 URL 路径会改变

Moments API 配置

说说页面通过 Moments API 获取数据，默认配置如下：

配置项	说明
API 地址	`https://mm.demius.tech/api/memo/list`
请求方式	POST
请求参数	`{"size": 30}`
缓存时间	30 分钟

📊 数据格式说明

API 响应格式

说说页面期望的 API 响应格式：

{
  "code": 0,
  "data": {
    "list": [
      {
        "id": 1,
        "content": "说说内容",
        "createdAt": "2025-10-26T10:30:00Z",
        "imgs": "图片1URL,图片2URL",
        "tags": "标签1,标签2",
        "location": "陕西西安",
        "user": {
          "nickname": "昵称",
          "avatarUrl": "头像URL"
        },
        "ext": {
          "music": {
            "id": "歌曲ID",
            "server": "netease",
            "type": "song",
            "api": "https://api.example.com"
          },
          "video": {
            "value": "视频URL或ID",
            "type": "url"  // 或 "bilibili", "youtube"
          }
        }
      }
    ]
  }
}

字段说明

字段	类型	必填	说明
`code`	number	✅	响应码，0 表示成功
`data.list`	array	✅	说说列表
`content`	string	✅	说说内容（支持 Markdown）
`createdAt`	string	✅	创建时间（ISO 8601 格式）
`imgs`	string	❌	图片 URL，逗号分隔
`tags`	string	❌	标签，逗号分隔
`location`	string	❌	位置信息
`user.nickname`	string	✅	用户昵称
`user.avatarUrl`	string	✅	用户头像 URL
`ext.music`	object	❌	音乐信息（可选）
`ext.video`	object	❌	视频信息（可选）

💡 内容格式化

Markdown 链接

支持 Markdown 链接格式：

[链接文字](https://example.com)

会被渲染为：

<a href="https://example.com">@链接文字</a>

任务列表

支持任务列表：

- [ ] 未完成任务
- [x] 已完成任务

会被渲染为：

⚪ 未完成任务
⚫ 已完成任务

换行

文本中的换行符 \n 会被转换为 <br> 标签。

🖼️ 图片展示

图片处理

多图支持：自动解析逗号分隔的图片 URL
瀑布流布局：使用瀑布流算法展示
Fancybox：点击图片可放大查看
响应式：自适应不同屏幕尺寸

图片格式

imgs: "https://example.com/1.jpg,https://example.com/2.jpg"

图片会自动排列成瀑布流布局，支持点击放大查看。

🎵 音乐播放

MetingJS 集成

说说支持嵌入音乐播放器，使用 MetingJS：

ext: {
  music: {
    id: "1234567",
    server: "netease",  // 支持: netease, tencent, kugou, xiami, baidu
    type: "song",       // 支持: song, playlist, album, search, artist
    api: "https://api.example.com"
  }
}

音乐播放器资源

已自动引入：

APlayer CSS: https://fastly.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css
APlayer JS: https://fastly.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js
MetingJS: https://fastly.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js

支持的平台

网易云音乐 (netease)
QQ 音乐 (tencent)
酷狗音乐 (kugou)
虾米音乐 (xiami)
百度音乐 (baidu)

🎬 视频播放

支持的视频类型

说说页面支持多种视频格式：

1. 普通视频 URL

ext: {
  video: {
    value: "https://example.com/video.mp4",
    type: "url"
  }
}

2. Bilibili 视频

ext: {
  video: {
    value: "BVxxxxxxxx",  // B站视频ID
    type: "bilibili"
  }
}

3. YouTube 视频

ext: {
  video: {
    value: "dQw4w9WgXcQ",  // YouTube视频ID
    type: "youtube"
  }
}

🌊 瀑布流布局

布局特性

自动排列：根据内容高度自动排列
响应式：自适应不同屏幕宽度
平滑动画：内容加载时的平滑过渡
无限滚动：支持加载更多内容（需 API 支持）

布局算法

说说页面使用原生 JavaScript 实现的瀑布流算法：

自动计算每列的高度
将新元素放置在最短的列
支持窗口大小改变时重新布局

💾 缓存机制

缓存策略

缓存位置：localStorage
缓存时间：30 分钟
缓存键名：talksCache
时间戳键名：talksCacheTime

工作流程

用户访问说说页
    ↓
检查 localStorage 缓存
    ↓
缓存存在且未过期？
    ├─ 是 → 使用缓存数据渲染
    └─ 否 → 发起 API 请求
            ↓
        获取数据
            ↓
        保存到 localStorage
            ↓
        渲染数据

清除缓存

在浏览器控制台执行：

localStorage.removeItem('talksCache');
localStorage.removeItem('talksCacheTime');

或者等待 30 分钟自动过期。

修改缓存时间

编辑 themes/demius/assets/js/_shuoshuo.js：

const cacheDuration = 30 * 60 * 1000;  // 修改为所需时间（毫秒）

例如，改为 5 分钟：

const cacheDuration = 5 * 60 * 1000;  // 5分钟

⚡ PJAX 支持

PJAX 兼容

说说功能完全支持 PJAX 无刷新切换：

首次加载：页面加载时自动初始化
PJAX 切换：切换到说说页时自动重新加载数据
缓存机制：30 分钟内使用本地缓存，无需重复请求

实现细节

文件：themes/demius/assets/js/_shuoshuo.js

// 导出到全局供PJAX使用
window.renderTalks = renderTalks;

文件：themes/demius/assets/js/_simple-pjax.js

// 重新初始化说说页面
if (window.renderTalks) {
  window.renderTalks();
}

🌐 跨域配置

服务端 CORS 配置

您的 Moments 站点需要配置 CORS：

Nginx 配置示例：

add_header Access-Control-Allow-Origin "https://blog.demius.tech";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type";

Node.js + Express 配置：

app.use(cors({
  origin: 'https://blog.demius.tech',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type']
}));

测试跨域

在浏览器控制台测试：

fetch('https://mm.demius.tech/api/memo/list', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ size: 30 })
})
.then(res => res.json())
.then(data => console.log(data));

💡 使用示例

示例 1：基础配置

---
title: "日常哔哔，键盘侠的日常吐槽"
date: 2025-10-18T18:00:00+08:00
type: "shuoshuo"
layout: "shuoshuo"
comments: true
---

欢迎来到我的说说页面！

效果： 创建基本的说说页面，自动从 API 获取数据

示例 2：修改显示数量

编辑 themes/demius/assets/js/_shuoshuo.js：

body: JSON.stringify({
    size: 50  // 修改为显示50条
})

效果： 显示最近 50 条说说（需 API 支持）

示例 3：修改缓存时间

编辑 themes/demius/assets/js/_shuoshuo.js：

const cacheDuration = 5 * 60 * 1000;  // 改为5分钟

效果： 缓存时间缩短为 5 分钟，数据更新更及时

示例 4：禁用缓存

编辑 themes/demius/assets/js/_shuoshuo.js：

const cacheDuration = 0;  // 设置为0禁用缓存

效果： 每次访问都重新请求 API（不推荐，会增加服务器压力）

🎨 样式特性

说说卡片

圆角卡片：现代化的卡片设计
阴影效果：轻微的阴影提升层次感
头像展示：用户头像和昵称展示
时间显示：相对时间格式（如：2 小时前）
标签位置：标签和位置信息展示
评论链接：点击跳转到评论区

图片展示

瀑布流布局：多图片自动排列
懒加载：图片懒加载提升性能
灯箱效果：点击图片放大查看
响应式：自适应不同屏幕尺寸

音乐播放器

迷你播放器：嵌入式的音乐播放器
多种平台：支持多个音乐平台
自动播放：支持自动播放（需浏览器支持）

📱 响应式支持

说说页面完全支持响应式设计：

桌面端 (>768px)：多列瀑布流布局
平板端 (481-768px)：两列瀑布流布局
手机端 (<480px)：单列垂直布局

🌙 暗色模式

说说页面自动适配明暗主题：

亮色模式：清新的卡片样式，浅色背景
暗色模式：优雅的深色背景，减少夜间阅读疲劳

🔧 自定义配置

修改 API 地址

编辑 themes/demius/assets/js/_shuoshuo.js：

const url = 'https://your-api.com/api/memo/list';  // 修改为您的API地址

修改显示数量

编辑 themes/demius/assets/js/_shuoshuo.js：

body: JSON.stringify({
    size: 50  // 修改为所需数量
})

自定义样式

编辑 themes/demius/assets/css/_shuoshuo.css：

主要类名：

.talk_item - 说说项容器
.talk_meta - 说说元信息
.talk_content - 说说内容
.talk_bottom - 说说底部
.zone_imgbox - 图片容器

❓ 常见问题

Q: 说说页面空白，没有数据？

A: 检查以下几点：

API 是否可访问

curl -X POST https://mm.demius.tech/api/memo/list \
  -H "Content-Type: application/json" \
  -d '{"size":30}'

跨域是否配置正确
- 打开浏览器控制台
- 查看 Network 标签
- 检查 API 请求是否有 CORS 错误
数据格式是否正确
- 检查 API 返回的 code 是否为 0
- 检查 data.list 是否是数组

Q: 控制台报错 “Failed to load resource”？

A: 这个错误通常与说说 API 无关，是其他资源加载失败：

可能是网络问题
检查是否是图片或其他资源加载失败

Q: PJAX 切换后说说不显示？

A: ✅ 已修复！现在 PJAX 切换时会自动重新加载说说。

如果仍有问题：

清除浏览器缓存
清除 localStorage 缓存
重新构建 Hugo

Q: 说说数据更新后页面没变化？

A: 由于 30 分钟缓存机制：

方法 1：清除缓存

localStorage.removeItem('talksCache');
localStorage.removeItem('talksCacheTime');

方法 2：等待 30 分钟自动刷新

方法 3：修改缓存时间（_shuoshuo.js）：

const cacheDuration = 5 * 60 * 1000;  // 改为5分钟

Q: 图片不显示？

A: 检查：

图片 URL 是否正确
图片服务器是否允许跨域
图片 URL 是否需要认证
建议使用图床服务

Q: 如何自定义说说样式？

A: 编辑 themes/demius/assets/css/_shuoshuo.css

主要类名：

.talk_item - 说说项容器
.talk_meta - 说说元信息
.talk_content - 说说内容
.talk_bottom - 说说底部
.zone_imgbox - 图片容器

Q: 如何修改显示数量？

A: 编辑 themes/demius/assets/js/_shuoshuo.js：

body: JSON.stringify({
    size: 50  // 修改为所需数量
})

Q: 如何禁用缓存？

A: 编辑 themes/demius/assets/js/_shuoshuo.js：

const cacheDuration = 0;  // 设置为0禁用缓存

或者删除缓存相关代码，直接调用 API。

Q: 页面显示 404？

A: 检查：

是否设置了 slug 字段
- 如果设置了 slug: "xxx"，页面 URL 会变成 /xxx/ 而不是 /shuoshuo/
- 解决方案：移除 slug 字段
菜单配置是否正确
- 确保 hugo.toml 中的菜单 url 与页面实际路径一致
页面文件位置
- 确保 content/shuoshuo.md 文件存在
- 确保 Front Matter 配置正确

Q: 音乐播放器不显示？

A: 检查：

音乐配置是否正确
- 检查 ext.music 对象是否存在
- 检查 server、type、id 是否正确
音乐平台支持
- 确保使用的音乐平台（netease、tencent 等）在支持列表中
网络连接
- 确保可以访问音乐 API 服务器

Q: 视频不播放？

A: 检查：

视频类型
- 确保 ext.video.type 正确（url、bilibili、youtube）
视频 URL/ID
- 确保 ext.video.value 是正确的视频 URL 或 ID
跨域问题
- 视频服务器需要配置 CORS（如果是自己的服务器）

🔗 相关文档

📊 技术说明

数据来源

说说页面的数据来源于 Moments API：

API 地址：https://mm.demius.tech/api/memo/list（可自定义）
请求方式：POST
请求参数：{"size": 30}
响应格式：JSON

功能特性

✅ Moments API 集成
✅ 自动获取说说数据
✅ 瀑布流布局
✅ 图片、音乐、视频支持
✅ 标签、位置信息展示
✅ Markdown 内容支持
✅ 本地缓存机制（30 分钟）
✅ PJAX 无刷新切换
✅ 响应式设计
✅ 暗色模式
✅ 评论系统集成

依赖库

APlayer - 音乐播放器
MetingJS - 音乐 API 解析
Fancybox - 图片灯箱效果（如果主题已集成）
原生 JavaScript - 瀑布流布局

文件结构

themes/demius/
├── layouts/
│   └── shuoshuo.html          # 说说页面模板
├── assets/
│   ├── css/
│   │   └── _shuoshuo.css      # 说说页面样式
│   └── js/
│       ├── _shuoshuo.js       # 说说页面逻辑
│       └── _simple-pjax.js    # PJAX支持
└── content/
    └── shuoshuo.md            # 说说页面内容

希望这个说说页面功能能够帮助您更好地展示日常动态和想法！💬