愿望清单页面使用示例

✨ 愿望清单功能简介

Demius 主题的愿望清单功能为您提供了一个优雅的目标管理和展示方案。通过分类管理，您可以轻松组织和展示您的梦想、目标和愿望，激励自己不断前进。

主要特性

🎯 分类管理：支持创建多个愿望分类
📊 状态追踪：三种状态（待实现、进行中、已完成）
🏷️ 优先级标记：支持高、中、低三个优先级
📈 进度展示：进行中的愿望可显示完成进度
🖼️ 图片展示：每个愿望支持封面图片
💰 价格显示：支持显示价格信息
🔗 外部链接：支持添加详情链接
✅ 完成记录：已完成愿望可记录完成日期
📱 响应式设计：完美适配各种设备
🌙 暗色模式：自动适配明暗主题

🚀 快速开始

1. 创建愿望清单页面

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

---
title: "愿望清单"
date: 2025-10-29T17:00:00+08:00
type: "wishlist"
layout: "wishlist"
comments: true
---

这里记录着我的梦想和目标，每一个愿望都是前进的动力 ✨

2. 配置愿望清单数据

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

categories:
  - name: "数码产品"
    icon: "💻"
    wishes:
      - name: "MacBook Pro 16寸"
        description: "用于开发和创作的高性能笔记本"
        image: "https://example.com/macbook.jpg"
        price: "¥19,999"
        priority: "high"
        status: "pending"
        link: "https://www.apple.com.cn/macbook-pro/"

3. 访问愿望清单

构建网站后，访问 /wishlist 路径即可查看您的愿望清单。

📝 配置详解

分类结构

每个分类包含以下字段：

字段	类型	必填	说明
`name`	string	✅	分类名称
`icon`	string	❌	分类图标（emoji）
`wishes`	array	✅	愿望列表

愿望数据结构

每个愿望包含以下字段：

字段	类型	必填	说明
`name`	string	✅	愿望名称
`description`	string	❌	愿望描述
`image`	string	❌	封面图片 URL
`price`	string	❌	价格信息
`priority`	string	❌	优先级（high/medium/low）
`status`	string	✅	状态（pending/in-progress/completed）
`progress`	number	❌	进度百分比（0-100，仅 status=“in-progress” 时有效）
`completedDate`	string	❌	完成日期（仅 status=“completed” 时有效）
`link`	string	❌	外部链接 URL

状态说明

pending：待实现（显示 ⭐ 待实现徽章）
in-progress：进行中（显示 ⏳ 进行中徽章，支持进度条）
completed：已完成（显示 ✓ 已完成徽章，支持完成日期）

优先级说明

high：高优先级（红色标记）
medium：中优先级（黄色标记）
low：低优先级（绿色标记）

💡 使用示例

示例 1：基础愿望清单

categories:
  - name: "数码产品"
    icon: "💻"
    wishes:
      - name: "MacBook Pro 16寸"
        description: "用于开发和创作的高性能笔记本"
        image: "https://example.com/macbook.jpg"
        price: "¥19,999"
        priority: "high"
        status: "pending"
        link: "https://www.apple.com.cn/macbook-pro/"
        
      - name: "iPad Pro 12.9"
        description: "便携的绘图和笔记工具"
        image: "https://example.com/ipad.jpg"
        price: "¥9,999"
        priority: "medium"
        status: "in-progress"
        link: "https://www.apple.com.cn/ipad-pro/"
        progress: 65
        
      - name: "AirPods Pro 2"
        description: "降噪耳机，用于专注工作"
        image: "https://example.com/airpods.jpg"
        price: "¥1,899"
        priority: "low"
        status: "completed"
        link: "https://www.apple.com.cn/airpods-pro/"
        completedDate: "2024-10-15"

示例 2：旅行目的地

categories:
  - name: "旅行目的地"
    icon: "✈️"
    wishes:
      - name: "日本京都"
        description: "体验传统日式文化"
        image: "https://example.com/kyoto.jpg"
        price: "¥8,000"
        priority: "high"
        status: "pending"
        
      - name: "新西兰南岛"
        description: "探索壮丽的自然风光"
        image: "https://example.com/newzealand.jpg"
        price: "¥15,000"
        priority: "medium"
        status: "pending"
        
      - name: "冰岛极光"
        description: "欣赏北极光奇观"
        image: "https://example.com/iceland.jpg"
        price: "¥20,000"
        priority: "high"
        status: "in-progress"
        progress: 30

示例 3：技能提升

categories:
  - name: "技能提升"
    icon: "📚"
    wishes:
      - name: "学习Go语言"
        description: "掌握后端开发新技能"
        image: "https://example.com/golang.jpg"
        priority: "high"
        status: "in-progress"
        progress: 45
        
      - name: "UI/UX设计课程"
        description: "提升产品设计能力"
        image: "https://example.com/uiux.jpg"
        priority: "medium"
        status: "pending"
        
      - name: "考取驾照"
        description: "获得驾驶资格"
        image: "https://example.com/driver-license.jpg"
        priority: "low"
        status: "completed"
        completedDate: "2023-08-20"

示例 4：生活愿望

categories:
  - name: "生活愿望"
    icon: "🌟"
    wishes:
      - name: "养一只猫"
        description: "领养一只可爱的小猫陪伴"
        image: "https://example.com/cat.jpg"
        priority: "high"
        status: "pending"
        
      - name: "学会做饭"
        description: "掌握10道拿手菜"
        image: "https://example.com/cooking.jpg"
        priority: "medium"
        status: "in-progress"
        progress: 30
        
      - name: "读完100本书"
        description: "扩展知识面和视野"
        image: "https://example.com/books.jpg"
        priority: "medium"
        status: "in-progress"
        progress: 72

🎨 样式特性

状态徽章

待实现：⭐ 蓝色徽章
进行中：⏳ 橙色徽章（支持进度条）
已完成：✓ 绿色徽章（显示完成日期）

优先级标记

高优先级：红色背景标记
中优先级：黄色背景标记
低优先级：绿色背景标记

进度条

进行中的愿望可以显示进度条：

- name: "学习Go语言"
  status: "in-progress"
  progress: 45  # 显示45%的进度条

卡片布局

网格布局，响应式适配
支持图片、标题、描述、价格等信息展示
支持外部链接跳转

📱 响应式支持

愿望清单页面完全支持响应式设计：

桌面端：多列网格布局（3-4列）
平板端：2列网格布局
手机端：单列布局，优化触摸体验

🌙 暗色模式

愿望清单页面自动适配明暗主题：

亮色模式：清新的卡片样式
暗色模式：优雅的深色背景

💡 使用技巧

1. 图片优化

使用合适的图片尺寸（建议 300x200 或更大）
使用懒加载（loading="lazy"）提升性能
提供备用图片（错误时显示默认图片）

2. 状态管理

定期更新愿望状态
进行中的愿望更新进度
完成的愿望记录完成日期

3. 分类组织

按主题分类（数码、旅行、技能等）
使用图标标识分类
合理设置优先级

4. 外部链接

添加相关产品的购买链接
添加学习资源的链接
添加更多信息的链接

🔧 自定义配置

修改页面内容

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

---
title: "愿望清单"
date: 2025-10-29T17:00:00+08:00
type: "wishlist"
layout: "wishlist"
comments: true
---

这里记录着我的梦想和目标，每一个愿望都是前进的动力 ✨

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

添加评论功能

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

📋 完整示例

# data/wishlist.yaml

categories:
  # 数码产品分类
  - name: "数码产品"
    icon: "💻"
    wishes:
      - name: "MacBook Pro 16寸"
        description: "用于开发和创作的高性能笔记本"
        image: "https://example.com/macbook.jpg"
        price: "¥19,999"
        priority: "high"
        status: "pending"
        link: "https://www.apple.com.cn/macbook-pro/"
        
      - name: "iPad Pro 12.9"
        description: "便携的绘图和笔记工具"
        image: "https://example.com/ipad.jpg"
        price: "¥9,999"
        priority: "medium"
        status: "in-progress"
        link: "https://www.apple.com.cn/ipad-pro/"
        progress: 65
        
      - name: "AirPods Pro 2"
        description: "降噪耳机，用于专注工作"
        image: "https://example.com/airpods.jpg"
        price: "¥1,899"
        priority: "low"
        status: "completed"
        link: "https://www.apple.com.cn/airpods-pro/"
        completedDate: "2024-10-15"

  # 旅行目的地分类
  - name: "旅行目的地"
    icon: "✈️"
    wishes:
      - name: "日本京都"
        description: "体验传统日式文化"
        image: "https://example.com/kyoto.jpg"
        price: "¥8,000"
        priority: "high"
        status: "pending"
        
      - name: "新西兰南岛"
        description: "探索壮丽的自然风光"
        image: "https://example.com/newzealand.jpg"
        price: "¥15,000"
        priority: "medium"
        status: "pending"

  # 技能提升分类
  - name: "技能提升"
    icon: "📚"
    wishes:
      - name: "学习Go语言"
        description: "掌握后端开发新技能"
        image: "https://example.com/golang.jpg"
        priority: "high"
        status: "in-progress"
        progress: 45
        
      - name: "UI/UX设计课程"
        description: "提升产品设计能力"
        image: "https://example.com/uiux.jpg"
        priority: "medium"
        status: "pending"
        
      - name: "考取驾照"
        description: "获得驾驶资格"
        image: "https://example.com/driver-license.jpg"
        priority: "low"
        status: "completed"
        completedDate: "2023-08-20"

  # 生活愿望分类
  - name: "生活愿望"
    icon: "🌟"
    wishes:
      - name: "养一只猫"
        description: "领养一只可爱的小猫陪伴"
        image: "https://example.com/cat.jpg"
        priority: "high"
        status: "pending"
        
      - name: "学会做饭"
        description: "掌握10道拿手菜"
        image: "https://example.com/cooking.jpg"
        priority: "medium"
        status: "in-progress"
        progress: 30
        
      - name: "读完100本书"
        description: "扩展知识面和视野"
        image: "https://example.com/books.jpg"
        priority: "medium"
        status: "in-progress"
        progress: 72

❓ 常见问题

Q: 如何添加新的分类？

A: 在 data/wishlist.yaml 文件中的 categories 数组下添加新的分类对象。

Q: 如何更新愿望状态？

A: 修改 status 字段为 pending、in-progress 或 completed。

Q: 进度条如何显示？

A: 当 status 为 in-progress 时，设置 progress 字段（0-100 的数值）即可显示进度条。

Q: 如何记录完成日期？

A: 当 status 为 completed 时，设置 completedDate 字段（格式：YYYY-MM-DD）即可显示完成日期。

Q: 图片无法显示怎么办？

A: 检查图片 URL 是否正确，主题会自动处理图片加载失败的情况，显示默认图片。

Q: 如何添加外部链接？

A: 在愿望对象中添加 link 字段，设置外部链接 URL，点击"查看详情 →“按钮即可跳转。

🔗 相关文档

希望这个愿望清单功能能够帮助您更好地管理目标和梦想！✨