装备页面使用示例

🎯 装备页面功能简介

Demius 主题的装备页面功能为您提供了一个优雅的装备展示和管理方案。通过分组管理和精美的卡片布局，您可以轻松地展示和推荐您使用的数码产品、办公外设、生活用品等各种装备，并支持多平台购买链接，方便访客购买。

主要特性

📦 分组展示：支持多个装备分组，灵活组织
🖼️ 图片展示：大图展示装备外观，支持响应式布局
📝 详细信息：装备名称、描述、价格等信息展示
🛒 购买链接：支持多个电商平台购买链接，方便访客购买
🎨 精美卡片：现代化的卡片设计，视觉效果佳
💰 价格标签：价格标签显示在图片上，一目了然
📱 响应式设计：完美适配各种设备尺寸
🌙 暗色模式：自动适配明暗主题
💬 评论系统：集成 Artalk 评论系统
📋 数据管理：通过 YAML 文件管理数据

🚀 快速开始

1. 创建装备页面

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

---
title: "装备"
date: 2025-10-23T12:00:00+08:00
type: "gear"
layout: "gear"
comments: true
---

这里展示我日常使用和推荐的各类装备，包括数码产品、办公外设等。

2. 配置装备数据

在项目根目录的 data/ 文件夹下创建 gear.yaml 文件：

groups:
  - name: "数码装备"
    description: "日常使用的数码产品"
    items:
      - name: "iPhone 15 Pro Max"
        image: "https://example.com/iphone.jpg"
        description: "A17 Pro 芯片，钛金属设计"
        price: "¥9999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/xxx"
            icon: "🛒"

3. 配置导航菜单（可选）

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

[[menu.main]]
  name = "装备"
  url = "/gear/"
  weight = 2
  parent = "life"  # 指定父级菜单为"生活"

4. 访问装备页面

构建网站后，访问 /gear 路径即可查看装备页面。

📝 配置详解

页面 Front Matter

装备页面使用以下 Front Matter 配置：

字段	类型	必填	说明
`title`	string	✅	页面标题（如：“装备”）
`date`	string	✅	页面创建日期（格式：YYYY-MM-DDTHH:mm:ss+08:00）
`type`	string	✅	页面类型：`gear`
`layout`	string	✅	页面布局：`gear`
`comments`	boolean	❌	是否启用评论（默认启用）

数据结构

装备页面的数据结构如下：

groups:                          # 装备分组列表（必填）
  - name: "分组名称"              # 分组标题（必填）
    description: "分组描述"       # 分组简介（可选）
    items:                       # 该分组的装备列表（必填）
      - name: "装备名称"          # 装备名称（必填）
        image: "图片URL"          # 装备图片 URL（必填）
        description: "装备描述"   # 装备详细介绍（可选）
        price: "价格"            # 装备价格（可选）
        links:                   # 购买链接列表（可选）
          - platform: "平台名"   # 链接平台（必填）
            url: "链接地址"      # 跳转 URL（必填）
            icon: "图标"         # emoji 或文字图标（可选）

分组结构

每个分组包含以下字段：

字段	类型	必填	说明
`name`	string	✅	分组名称（如：数码装备、外设装备、生活用品）
`description`	string	❌	分组描述（可选）
`items`	array	✅	装备列表

装备数据结构

每个装备包含以下字段：

字段	类型	必填	说明
`name`	string	✅	装备名称
`image`	string	✅	装备图片 URL
`description`	string	❌	装备描述
`price`	string	❌	装备价格（格式自由，如："¥9999"、"$999"）
`links`	array	❌	购买链接列表

购买链接数据结构

每个购买链接包含以下字段：

字段	类型	必填	说明
`platform`	string	✅	平台名称（如：京东、淘宝、天猫、Apple 官网）
`url`	string	✅	跳转链接 URL
`icon`	string	❌	图标（emoji 或文字，如："🛒"、"🛍️"、"🍎"）

💡 使用示例

示例 1：基础配置

# data/gear.yaml
groups:
  - name: "数码装备"
    description: "日常使用的数码产品"
    items:
      - name: "iPhone 15 Pro Max"
        image: "https://example.com/iphone.jpg"
        description: "A17 Pro 芯片，钛金属设计，超强性能"
        price: "¥9999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example1"
            icon: "🛒"

示例 2：多个购买链接

groups:
  - name: "数码装备"
    description: "日常使用的数码产品"
    items:
      - name: "iPhone 15 Pro Max"
        image: "https://example.com/iphone.jpg"
        description: "A17 Pro 芯片，钛金属设计"
        price: "¥9999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example1"
            icon: "🛒"
          - platform: "淘宝"
            url: "https://item.taobao.com/example1"
            icon: "🛍️"
          - platform: "天猫"
            url: "https://detail.tmall.com/example1"
            icon: "🐱"

示例 3：多个分组

groups:
  # 第一组：数码装备
  - name: "数码装备"
    description: "日常使用的数码产品"
    items:
      - name: "iPhone 15 Pro Max"
        image: "https://example.com/iphone.jpg"
        description: "A17 Pro 芯片，钛金属设计"
        price: "¥9999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example1"
            icon: "🛒"
      
      - name: "MacBook Pro 14"
        image: "https://example.com/macbook.jpg"
        description: "M3 Pro 芯片，14.2 英寸 Liquid Retina XDR 显示屏"
        price: "¥15999"
        links:
          - platform: "Apple 官网"
            url: "https://www.apple.com.cn/macbook-pro"
            icon: "🍎"
          - platform: "京东"
            url: "https://item.jd.com/example2"
            icon: "🛒"

  # 第二组：外设装备
  - name: "外设装备"
    description: "提升工作效率的外设产品"
    items:
      - name: "罗技 MX Master 3S"
        image: "https://example.com/mouse.jpg"
        description: "人体工学设计，8K DPI 传感器，静音按键"
        price: "¥799"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example3"
            icon: "🛒"
          - platform: "天猫"
            url: "https://detail.tmall.com/example3"
            icon: "🐱"
      
      - name: "HHKB Professional Hybrid Type-S"
        image: "https://example.com/keyboard.jpg"
        description: "静电容键盘，蓝牙+有线双模，静音版"
        price: "¥2499"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example4"
            icon: "🛒"

示例 4：无价格装备

groups:
  - name: "收藏品"
    description: "珍贵的收藏装备"
    items:
      - name: "限量版机械键盘"
        image: "https://example.com/keyboard.jpg"
        description: "珍贵的收藏品，不对外出售"
        # 不填写 price，则不显示价格标签
        links:
          - platform: "官网"
            url: "https://example.com"
            icon: "🔗"

示例 5：无购买链接

groups:
  - name: "旧设备"
    description: "已经停产的设备"
    items:
      - name: "iPod Classic"
        image: "https://example.com/ipod.jpg"
        description: "经典音乐播放器，已停产"
        price: "¥999"
        # 不填写 links，则不显示购买链接按钮

示例 6：完整配置示例

# data/gear.yaml
# ===================================================================
#   装备页面数据配置
#   说明：此文件用于配置装备页面展示的装备信息
# ===================================================================

groups:
  # 数码装备分组
  - name: "数码装备"
    description: "日常使用的数码产品"
    items:
      - name: "iPhone 15 Pro Max"
        image: "https://example.com/iphone.jpg"
        description: "A17 Pro 芯片，钛金属设计，超强性能，续航优秀"
        price: "¥9999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example1"
            icon: "🛒"
          - platform: "淘宝"
            url: "https://item.taobao.com/example1"
            icon: "🛍️"
          - platform: "天猫"
            url: "https://detail.tmall.com/example1"
            icon: "🐱"
      
      - name: "MacBook Pro 14"
        image: "https://example.com/macbook.jpg"
        description: "M3 Pro 芯片，14.2 英寸 Liquid Retina XDR 显示屏，专业级性能"
        price: "¥15999"
        links:
          - platform: "Apple 官网"
            url: "https://www.apple.com.cn/macbook-pro"
            icon: "🍎"
          - platform: "京东"
            url: "https://item.jd.com/example2"
            icon: "🛒"
      
      - name: "iPad Pro 12.9"
        image: "https://example.com/ipad.jpg"
        description: "M2 芯片，12.9 英寸 Liquid Retina XDR 显示屏，生产力工具"
        price: "¥8999"
        links:
          - platform: "Apple 官网"
            url: "https://www.apple.com.cn/ipad-pro"
            icon: "🍎"
          - platform: "京东"
            url: "https://item.jd.com/example3"
            icon: "🛒"

  # 外设装备分组
  - name: "外设装备"
    description: "提升工作效率的外设产品"
    items:
      - name: "罗技 MX Master 3S"
        image: "https://example.com/mouse.jpg"
        description: "人体工学设计，8K DPI 传感器，静音按键，多设备切换"
        price: "¥799"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example4"
            icon: "🛒"
          - platform: "天猫"
            url: "https://detail.tmall.com/example4"
            icon: "🐱"
      
      - name: "HHKB Professional Hybrid Type-S"
        image: "https://example.com/keyboard.jpg"
        description: "静电容键盘，蓝牙+有线双模，静音版，程序员最爱"
        price: "¥2499"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example5"
            icon: "🛒"
      
      - name: "戴尔 UltraSharp U2720Q"
        image: "https://example.com/monitor.jpg"
        description: "27 英寸 4K 显示器，99% sRGB 色域，USB-C 连接"
        price: "¥3999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example6"
            icon: "🛒"
          - platform: "天猫"
            url: "https://detail.tmall.com/example6"
            icon: "🐱"

🎨 样式特性

卡片布局

网格布局：桌面端 3 列网格，平板和手机端单列布局
卡片样式：圆角卡片，带阴影效果
图片展示：图片占据卡片上部，高度 200px（桌面端）
价格标签：价格标签显示在图片右上角

价格标签

位置：图片右上角
样式：半透明背景，白色文字
显示：如果设置了 price 字段，自动显示

购买链接按钮

布局：链接按钮横向排列在卡片底部
样式：渐变色按钮，不同平台使用不同颜色
图标：支持 emoji 图标或文字
渐变色：5 种渐变背景色循环使用

📱 响应式支持

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

桌面端 (>768px)：3 列网格布局，卡片间距 1.5rem，图片高度 200px
平板端 (481-768px)：单列布局，卡片间距 1.2rem，图片高度 180px
手机端 (<480px)：单列布局，卡片间距 1rem，图片高度 160px

🌙 暗色模式

装备页面自动适配明暗主题：

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

💡 使用技巧

1. 分组组织

按类型分类：数码装备、外设装备、生活用品、办公用品等
按用途分类：工作设备、娱乐设备、学习工具、健身器材等
按场景分类：桌面设置、移动装备、户外装备等

2. 图片优化

尺寸建议：推荐 300×200px（3:2 比例），最小 200×133px
格式选择：
- JPG（压缩到 < 100KB）
- WebP（更小体积，推荐）
- PNG（透明背景）
图片内容：
- ✅ 产品正面清晰图
- ✅ 白底或纯色背景
- ❌ 避免过多文字
- ❌ 避免过度 PS
图片来源：
- 官方网站产品页面
- 电商平台商品图
- 自行拍摄（高质量相机，充足光线，简洁背景）
- 图床托管（使用 CDN 加速，稳定可靠）

3. 内容撰写

名称：
- 简洁明确
- 包含品牌和型号
- 建议 3-20 字
描述：
- 突出特点和优势
- 简明扼要
- 建议 10-50 字
价格：
- 准确标注
- 及时更新
- 可加币种（如："¥9999"、"$999"、"€999"）

4. 购买链接管理

平台选择：优先选择稳定可靠的平台
链接格式：确保 URL 包含 http:// 或 https://
定期检查：定期检查链接有效性
图标选择：使用 emoji 图标可以增加视觉识别度

5. 常用平台图标

# 电商平台
- platform: "京东"
  icon: "🛒"

- platform: "淘宝"
  icon: "🛍️"

- platform: "天猫"
  icon: "🐱"

- platform: "拼多多"
  icon: "🎁"

# 品牌官网
- platform: "Apple 官网"
  icon: "🍎"

- platform: "官网"
  icon: "🔗"

# 其他平台
- platform: "Amazon"
  icon: "📦"

- platform: "闲鱼"
  icon: "🐟"

🔧 自定义配置

修改页面内容

编辑 content/gear.md 文件，可以添加页面介绍文字：

---
title: "装备"
date: 2025-10-23T12:00:00+08:00
type: "gear"
layout: "gear"
comments: true
---

## 📦 我的装备清单

这里展示我日常使用和推荐的各类装备，包括数码产品、办公外设等。

### 装备选择原则

- 💡 **实用为主**：选择真正好用的装备
- 💰 **性价比**：追求最佳性价比
- 🎨 **颜值**：注重外观和设计
- 🔧 **耐用性**：选择质量可靠的产品

可以在这里添加更多的介绍文字，支持 Markdown 格式。

添加评论功能

在页面 Front Matter 中设置 comments: true 即可启用评论功能（需要配置评论系统）。

📋 完整配置示例

# data/gear.yaml
# ===================================================================
#   装备页面数据配置
#   说明：此文件用于配置装备页面展示的装备信息
# ===================================================================

groups:
  # 数码装备分组
  - name: "数码装备"
    description: "日常使用的数码产品"
    items:
      - name: "iPhone 15 Pro Max"
        image: "https://example.com/iphone.jpg"
        description: "A17 Pro 芯片，钛金属设计，超强性能，续航优秀"
        price: "¥9999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example1"
            icon: "🛒"
          - platform: "淘宝"
            url: "https://item.taobao.com/example1"
            icon: "🛍️"
          - platform: "天猫"
            url: "https://detail.tmall.com/example1"
            icon: "🐱"
      
      - name: "MacBook Pro 14"
        image: "https://example.com/macbook.jpg"
        description: "M3 Pro 芯片，14.2 英寸 Liquid Retina XDR 显示屏，专业级性能"
        price: "¥15999"
        links:
          - platform: "Apple 官网"
            url: "https://www.apple.com.cn/macbook-pro"
            icon: "🍎"
          - platform: "京东"
            url: "https://item.jd.com/example2"
            icon: "🛒"

  # 外设装备分组
  - name: "外设装备"
    description: "提升工作效率的外设产品"
    items:
      - name: "罗技 MX Master 3S"
        image: "https://example.com/mouse.jpg"
        description: "人体工学设计，8K DPI 传感器，静音按键，多设备切换"
        price: "¥799"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example3"
            icon: "🛒"
          - platform: "天猫"
            url: "https://detail.tmall.com/example3"
            icon: "🐱"
      
      - name: "HHKB Professional Hybrid Type-S"
        image: "https://example.com/keyboard.jpg"
        description: "静电容键盘，蓝牙+有线双模，静音版，程序员最爱"
        price: "¥2499"
        links:
          - platform: "京东"
            url: "https://item.jd.com/example4"
            icon: "🛒"

❓ 常见问题

Q: 装备页面不显示？

A: 检查以下几点：

✅ content/gear.md 文件存在
✅ data/gear.yaml 文件存在
✅ YAML 格式正确（注意缩进）
✅ 导航菜单配置正确（如果需要在导航中显示）

Q: 装备数据不显示？

A: 检查以下几点：

✅ groups 数组格式正确
✅ 每个分组包含 name 和 items 字段
✅ 每个装备包含 name 和 image 字段（必填）
✅ YAML 缩进正确（使用 2 个空格）

Q: 图片不显示？

A: 检查以下几点：

✅ 图片 URL 正确（包含 http:// 或 https://）
✅ 图片链接未失效
✅ 图片可以正常访问（无跨域限制）
✅ 图片路径正确（相对路径需要放在 static/img/ 目录）

Q: 如何隐藏价格？

A: 不填写 price 字段即可。如果装备没有价格或不想显示价格，只需删除或注释掉 price 字段。

Q: 如何隐藏购买链接？

A: 不填写 links 字段即可。如果装备没有购买链接或不想显示购买链接，只需删除或注释掉 links 字段。

Q: 购买链接打不开？

A: 检查以下几点：

✅ URL 包含 http:// 或 https://
✅ URL 格式正确
✅ 链接未失效
✅ 链接可以正常访问

Q: 如何添加新装备？

A: 在对应分组的 items 数组下添加新的装备对象：

groups:
  - name: "数码装备"
    items:
      # ... 现有装备 ...
      
      # 新增装备
      - name: "新装备"
        image: "https://example.com/new-item.jpg"
        description: "新装备描述"
        price: "¥999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/new-item"
            icon: "🛒"

Q: 如何添加新分组？

A: 在 groups 数组下添加新的分组对象：

groups:
  # ... 现有分组 ...
  
  # 新分组
  - name: "新分组名称"
    description: "分组描述"
    items:
      - name: "装备1"
        image: "https://example.com/item1.jpg"
        description: "描述"
        price: "¥999"
        links:
          - platform: "京东"
            url: "https://item.jd.com/item1"
            icon: "🛒"

Q: 装备顺序如何调整？

A: 装备按照 YAML 文件中的顺序显示。调整顺序只需在文件中移动对应的装备对象位置。

Q: 分组顺序如何调整？

A: 分组按照 YAML 文件中的顺序显示。调整顺序只需在文件中移动对应的分组对象位置。

Q: 可以添加本地图片吗？

A: 可以！将图片放在 static/img/ 目录下，然后使用相对路径：

- name: "装备名称"
  image: "/img/equipment/item.jpg"  # 相对路径

🔗 相关文档

📦 技术说明

数据来源

装备页面的数据来源于手动编辑的 YAML 文件（data/gear.yaml），支持灵活的分组和装备管理。

功能特性

✅ 分组管理：支持多个分组，灵活组织
✅ 图片展示：响应式图片，自动适配
✅ 价格标签：可选的价格标签显示
✅ 购买链接：多平台购买链接支持
✅ 响应式设计：完美适配各种设备
✅ 暗色模式：自动适配明暗主题
✅ 评论系统：集成 Artalk 评论系统
✅ PJAX 兼容：支持无刷新切换页面