🍊 高端果味博客卡片系统使用指南

概述

你的博客已经升级为高端的果味卡片设计系统！这个新系统包含：

✨ 响应式卡片网格布局 - 自适应桌面和移动设备
🎨 果味主题颜色系统 - 包含8种水果色彩
📸 封面图支持 - 每张卡片都可以有自己的封面图
🎯 高级交互效果 - 悬停动画、渐变、阴影等
🌙 完整深色模式支持

如何为文章添加封面图

1. 编辑你的博客文章

在文章的 Front Matter 中添加 cover_image 字段：

---
layout: post
title: "文章标题"
date: 2024-01-01 12:00 +0800
tags: [tag1, tag2]
toc: true
excerpt: "文章摘要"
cover_image: /img/covers/blog1.jpg
---

2. 添加封面图文件

将你的封面图放在 /img/covers/ 目录下，格式可以是：

.jpg / .jpeg - 推荐，文件大小较小
.png - 如需透明背景
.webp - 现代格式，最佳性能

推荐尺寸：1200×400px 或 16:9 宽高比

3. 使用替代方案

如果没有提供 cover_image，系统会自动使用默认水果主题渐变：

📱 自动应用颜色：多个卡片会轮流使用不同的水果颜色
🎨 渐变效果：内置的水果色渐变确保美观
✅ 无需担心 - 即使没有图片也能看起来高端

水果色彩系统

系统内置了8种精心设计的果味颜色：

颜色	十六进制	用途	说明
🥭 芒果黄	`#ffd700`	主色调	温暖、活力
🍑 桃子色	`#ffb347`	次主色	柔和、温暖
🍊 橙子色	`#ff9500`	强调色	亮眼、明快
🍓 草莓红	`#ff6b9d`	标签色	热情、精力
🍒 樱桃红	`#e63946`	深红	沉稳、优雅
🌊 西瓜红	`#ff1744`	重点	大胆、活力
🥝 猕猴桃绿	`#7cb342`	辅助	生机、平衡
🫐 蓝莓蓝	`#42a5f5`	补充	清爽、现代

卡片样式特性

📱 响应式设计

🖥️ 桌面 (>768px)    : 自动 3+ 列网格
📱 平板 (480-768px) : 自动 1-2 列网格  
📱 手机 (<480px)    : 单列布局

✨ 交互效果

卡片会在悬停时触发：

向上浮起 (12px) - 视觉上浮
阴影增强 - 深度感
封面图放大 (1.08x) - 动态感
标题渐变色 - 颜色动画
日期高亮 - 强调信息

🎨 标签设计

标签会自动根据位置着色：

第1个标签 → 🥭 芒果黄
第2个标签 → 🍓 草莓红
第3个标签 → 🍊 橙子色
第4+ 标签 → 🥝 猕猴桃绿

高级定制

修改颜色主题

编辑 _sass/_variables.scss，修改这些变量：

--fruit-mango: #ffd700;
--fruit-peach: #ffb347;
--fruit-orange: #ff9500;
/* ... 等等 */

修改卡片尺寸

编辑 _sass/_post-card.scss：

/* 修改卡片最小宽度 */
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

/* 修改封面高度 */
height: 200px; /* 改为其他值 */

/* 修改间距 */
gap: var(--space-6); /* 改为其他值 */

修改悬停效果

编辑 .post-card:hover 段落：

&:hover {
  transform: translateY(-12px);  /* 改变上浮距离 */
  /* ... 等等 */
}

文件结构

blog/
├── blog.html                          # 主博客页面（已更新）
├── _sass/
│   ├── _variables.scss               # 颜色变量（已更新）
│   ├── _post-card.scss               # 卡片样式（已重新设计）
│   └── ...
├── _posts/
│   ├── 2024-03-29-blog1.md          # 文章示例（已添加cover_image）
│   └── ...
└── img/
    └── covers/                       # 封面图目录（需创建）
        ├── blog1.jpg
        ├── blog2.jpg
        └── ...

浏览器兼容性

✅ Chrome/Edge 90+ ✅ Firefox 88+ ✅ Safari 14+ ✅ iOS Safari 14+ ✅ Android Chrome 90+

性能优化建议

优化图片：使用工具压缩 JPG/PNG
- 推荐工具：TinyPNG、ImageOptim
- 目标大小：每张 <100KB
使用 WebP 格式：更小的文件大小
- 可提升 25-35% 的性能
懒加载：如博客量很大，考虑添加图片懒加载

示例 Front Matter

---
layout: post
title: "精彩的技术文章"
date: 2024-03-29 10:00 +0800
tags: [技术, 前端, 设计]
toc: true
excerpt: "这是一篇关于如何构建高性能网站的精彩文章。"
cover_image: /img/covers/blog-tech.jpg
---

故障排除

封面图不显示？

✅ 检查路径是否正确 (/img/covers/filename.jpg)
✅ 确保图片文件存在
✅ 检查文件大小不要太大
✅ 检查文件格式是否支持
✅ 清除浏览器缓存后重试

卡片样式不生效？

✅ 运行 bundle exec jekyll serve 重新构建
✅ 检查浏览器开发者工具的 CSS
✅ 确保没有其他 CSS 规则覆盖样式
✅ 清除 .jekyll-cache 目录后重建

获取帮助

如果需要进一步定制，可以修改：

_sass/_post-card.scss - 卡片样式
_sass/_variables.scss - 颜色和间距
blog.html - 布局结构

祝你的博客焕然一新！ 🌟🍊🍓🥭