跳至主要內容

数据配置指南

2026/9/13大约 8 分钟

数据配置指南

本指南介绍如何修改友链、相册、装备等页面的数据，以及关于页面的配置方法。

📋 目录

友链页面数据配置

配置文件位置

  • 数据文件：data/links.yaml
  • 页面文件：content/links.md（仅包含Front Matter，内容由数据文件提供）

配置方法

编辑 data/links.yaml：

groups:
  # 第一个分组
  - name: "技术博客"
    links:
      - name: "博客名称"
        url: "https://example.com"
        avatar: "https://example.com/avatar.png"
        description: "博客简介"
        tags: ["技术", "编程"]
      
      - name: "另一个博客"
        url: "https://example2.com"
        avatar: "https://example2.com/avatar.png"
        description: "博客简介2"
        tags: ["前端", "设计"]
  
  # 第二个分组
  - name: "个人网站"
    links:
      - name: "个人站名称"
        url: "https://example3.com"
        avatar: "https://example3.com/avatar.png"
        description: "个人站简介"
        tags: ["生活"]

字段说明

字段必填说明
name✅分组名称
links✅该分组下的友链列表
name (链接)✅友链名称
url✅友链地址
avatar✅友链头像图片URL
description✅友链简介
tags❌友链标签（可选）

示例效果

groups:
  - name: "技术博客"
    links:
      - name: "字·兮·书"
        url: "https://blog.demius.tech"
        avatar: "https://mpimg.cn/view.php/e1537df85c3b0d4754589a9fcd48757b.png"
        description: "技术分享与生活记录"
        tags: ["Hugo", "前端"]

相册页面数据配置

配置文件位置

  • 数据文件：data/gallery.yaml
  • 页面文件：content/gallery.md（仅包含Front Matter）

配置方法

编辑 data/gallery.yaml：

groups:
  # 第一个相册组
  - name: "旅行足迹"
    description: "记录旅行中的美好瞬间"
    featured: true           # 精选相册，会置顶显示
    cover: "封面图片URL"      # 相册封面图片
    photos:
      - url: "照片1的URL"
        title: "照片标题"
        description: "照片描述"
        date: "2024-01-01"
      
      - url: "照片2的URL"
        title: "另一张照片"
        description: "照片描述2"
        date: "2024-01-02"
  
  # 第二个相册组
  - name: "日常生活"
    description: "记录生活中的点点滴滴"
    featured: false
    cover: "封面图片URL"
    photos:
      - url: "照片3的URL"
        title: "生活照片"
        description: "日常瞬间"
        date: "2024-02-01"

字段说明

字段必填说明
name✅相册组名称
description✅相册组描述
featured❌是否精选（true=置顶显示）
cover✅相册封面图片URL
photos✅照片列表
url (照片)✅照片图片URL
title✅照片标题
description❌照片描述（可选）
date❌照片日期（可选）

使用说明

  1. 添加新相册组：在 groups 数组中添加新的相册组
  2. 添加照片：在相应相册组的 photos 数组中添加照片
  3. 封面图片：每个相册组需要设置 cover 作为封面
  4. 精选置顶：设置 featured: true 可将相册组置顶显示

装备页面数据配置

配置文件位置

  • 数据文件：data/gear.yaml
  • 页面文件：content/gear.md（可包含简介内容）

配置方法

编辑 data/gear.yaml：

groups:
  # 第一个装备分组
  - name: "数码装备"
    description: "日常使用的数码产品"
    items:
      - name: "iPhone 15 Pro Max"
        image: "产品图片URL"
        description: "产品详细介绍"
        price: "¥9999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/..."
            icon: "🛒"
          - platform: "淘宝"
            url: "https://item.taobao.com/..."
            icon: "🛍️"
      
      - name: "MacBook Pro 14"
        image: "产品图片URL"
        description: "M3 Pro 芯片"
        price: "¥15999"
        links:
          - platform: "Apple 官网"
            url: "https://www.apple.com.cn/..."
            icon: "🍎"
  
  # 第二个装备分组
  - name: "外设装备"
    description: "提升工作效率的外设产品"
    items:
      - name: "罗技 MX Master 3S"
        image: "产品图片URL"
        description: "人体工学设计鼠标"
        price: "¥799"
        links:
          - platform: "京东"
            url: "https://item.jd.com/..."
            icon: "🛒"

字段说明

字段必填说明
name✅分组名称
description✅分组描述
items✅装备列表
name (装备)✅装备名称
image✅装备图片URL
description (装备)✅装备详细介绍
price✅装备价格
links✅购买链接列表
platform✅平台名称（京东、淘宝等）
url (链接)✅购买链接地址
icon✅平台图标（Emoji或图片URL）

使用说明

  1. 添加装备分组：在 groups 数组中添加新分组
  2. 添加装备：在对应分组的 items 数组中添加装备
  3. 购买链接：可为每个装备添加多个购买平台链接
  4. 图标选择：可使用Emoji（如 🛒）或图片URL

说说页面配置

配置文件位置

  • 页面文件：content/shuoshuo.md
  • 数据来源：需要自己在Markdown中添加内容

⚠️ 重要问题说明

如果点击"说说"菜单显示 Page Not Found，是因为 slug 配置问题。

问题原因

content/shuoshuo.md 中的配置：

---
title: "日常哔哔，键盘侠的日常吐槽"
slug: b43qv75p              # ← 这会导致URL变成 /b43qv75p/ 而不是 /shuoshuo/
date: 2025-10-18T18:00:00+08:00
type: "shuoshuo"
layout: "shuoshuo"
comments: true
---

而 hugo.toml 中的菜单配置：

[[menu.main]]
  name = "说说"
  url = "/shuoshuo/"        # ← 菜单指向 /shuoshuo/，但页面实际在 /b43qv75p/

结果：点击"说说"菜单会显示404。

解决方案

移除 slug 字段（✅ 已修复）：

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

这里是说说内容，可以发布日常动态、想法、吐槽等...

编辑说说内容

直接在 content/shuoshuo.md 的 Front Matter 后添加内容：

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

## 2025年10月

### 10月26日

今天优化了博客的PJAX切换效果，终于达到了Butterfly主题的丝滑程度！🎉

### 10月25日

学习了Hugo的数据文件用法，原来可以用YAML配置友链和相册数据。

---

## 2025年9月

### 9月15日

开始使用Hugo搭建新博客，准备从Hexo迁移过来。

使用建议

  1. 按时间倒序排列：最新的说说放在最上面
  2. 使用Markdown格式：支持标题、列表、链接、图片等
  3. 添加分割线：用 --- 分隔不同时期的说说
  4. Emoji支持：可以使用Emoji增加趣味性 😊

关于页面配置

⚠️ 重要问题说明

如果修改 content/about.md 后导航栏的"关于"页面没有变化，是因为 slug 配置问题。

问题原因

content/about.md 中的配置：

---
title: "关于"
slug: 2d1i7zxn              # ← 这会导致URL变成 /2d1i7zxn/ 而不是 /about/
date: 2025-10-25T20:00:00+08:00
type: "page"
layout: "single"
comments: true
---

而 hugo.toml 中的菜单配置：

[[menu.main]]
  name = "关于"
  url = "/about/"           # ← 菜单指向 /about/，但页面实际在 /2d1i7zxn/
  weight = 8

结果：点击"关于"菜单会显示404，因为 /about/ 不存在。

解决方案

方案1：移除 slug（推荐）

修改 content/about.md，移除 slug 字段：

---
title: "关于"
date: 2025-10-25T20:00:00+08:00
type: "page"
layout: "single"
comments: true
---

## 关于本站

这里是您的关于页面内容...

效果：页面URL会自动变成 /about/，与菜单匹配。

方案2：修改菜单URL

如果要保留 slug，需要修改 hugo.toml 中的菜单URL：

[[menu.main]]
  name = "关于"
  url = "/2d1i7zxn/"        # 改为与slug一致
  weight = 8

推荐使用方案1，更简洁易懂。

编辑关于页面内容

修改 content/about.md：

---
title: "关于"
date: 2025-10-25T20:00:00+08:00
type: "page"
layout: "single"
comments: true
---

## 关于本站

欢迎来到我的个人博客！

### 关于我

这里是关于我的介绍...

### 联系方式

- Email: your@email.com
- GitHub: https://github.com/yourusername

### 本站信息

- 主题：Demius
- 生成器：Hugo
- 托管：GitHub Pages

---

感谢您的访问！

重新构建

修改后需要重新构建：

hugo --cleanDestinationDir
hugo server

常见问题

Q1: 修改 YAML 文件后页面没有变化？

A: 需要重新构建Hugo：

hugo --cleanDestinationDir
hugo server

或者停止服务器后重新启动。

Q2: 友链头像不显示？

A: 检查：

  1. 图片URL是否正确
  2. 图片是否可访问（跨域问题）
  3. 建议使用图床服务存储图片

Q3: 相册图片加载慢？

A: 建议：

  1. 使用图片压缩工具优化图片大小
  2. 使用CDN加速图片加载
  3. 图片尺寸建议：800x600 或 1200x800

Q4: 装备页面购买链接无效？

A: 确保：

  1. URL完整且正确
  2. 链接未过期
  3. 使用实际的购买页面链接

Q5: 关于页面修改后看不到变化？

A: 检查：

  1. 是否移除了 slug 字段
  2. 菜单URL是否与页面URL一致
  3. 是否重新构建了Hugo
  4. 浏览器缓存（尝试强制刷新 Ctrl+F5）

Q6: 如何批量添加友链？

A: 直接编辑 data/links.yaml，复制粘贴链接块：

- name: "友链名称"
  url: "https://..."
  avatar: "https://..."
  description: "简介"
  tags: ["标签"]

Q7: 相册照片顺序如何控制？

A: 照片在 photos 数组中的顺序就是显示顺序，调整数组顺序即可。

Q8: 装备价格显示格式？

A: price 字段支持任意文本：

  • "¥9999"
  • "$1299"
  • "约 ¥8000"
  • "待补充"

📝 数据文件汇总

页面数据文件位置页面文件位置URL
友链data/links.yamlcontent/links.md/links/
相册data/gallery.yamlcontent/gallery.md/gallery/
装备data/gear.yamlcontent/gear.md/gear/
说说无（直接编辑Markdown）content/shuoshuo.md/shuoshuo/
关于无（直接编辑Markdown）content/about.md/about/

🎯 修改步骤总结

1. 修改友链

# 1. 编辑数据文件
编辑 data/links.yaml

# 2. 重新构建
hugo --cleanDestinationDir
hugo server

2. 修改相册

# 1. 编辑数据文件
编辑 data/gallery.yaml

# 2. 重新构建
hugo --cleanDestinationDir
hugo server

3. 修改装备

# 1. 编辑数据文件
编辑 data/gear.yaml

# 2. 可选：编辑页面简介
编辑 content/gear.md（Front Matter后的内容）

# 3. 重新构建
hugo --cleanDestinationDir
hugo server

4. 修改说说页

# 1. 移除slug字段（如果有）
编辑 content/shuoshuo.md
删除 slug: xxx 这一行

# 2. 编辑内容
在 Front Matter 后添加/修改Markdown内容

# 3. 重新构建
hugo --cleanDestinationDir
hugo server

5. 修改关于页

# 1. 移除slug字段（如果有）
编辑 content/about.md
删除 slug: xxx 这一行

# 2. 编辑内容
在 Front Matter 后添加/修改Markdown内容

# 3. 重新构建
hugo --cleanDestinationDir
hugo server

✅ 最佳实践

  1. 图片管理

    • 使用图床服务（如：路过图床、SM.MS等）
    • 图片命名规范：使用英文和数字
    • 定期备份图片

  2. 数据格式

    • YAML缩进使用2个空格
    • 字符串包含特殊字符时使用引号
    • 保持格式一致性

  3. 版本管理

    • 修改前备份原文件
    • 使用Git管理配置文件
    • 记录重要修改

  4. 性能优化

    • 图片压缩后再上传
    • 避免单个相册照片过多（建议<50张）
    • 友链数量适中（建议<100个）

修改完成后记得重新构建Hugo！ 🎉

最近更新: