Dapalm 博客美化指南

🎨 已应用的美化效果

1️⃣ 视觉效果

效果	说明
Banner 动画	首页 Banner 渐显动画
打字机效果	副标题打字机动画
文章卡片悬停	鼠标悬停上浮 + 阴影
阅读进度条	渐变色进度条
图片懒加载	懒加载 + 渐显效果
代码块美化	圆角 + 阴影
表格美化	渐变表头
引用块美化	渐变背景
标签云动画	悬停放大变色
导航栏下划线	悬停动画下划线

2️⃣ 交互效果

效果	说明
鼠标点击爱心	点击出现彩色爱心特效
代码复制提示	点击代码块自动复制 + Toast 提示
平滑滚动	锚点链接平滑滚动
Toast 通知	优雅的顶部通知提示
滚动条美化	渐变滚动条

3️⃣ 动画效果

效果	说明
文章列表渐入	文章列表依次渐入
图片悬停放大	图片悬停微放大 + 阴影
标题装饰	鼠标悬停显示 # 标记
返回顶部动画	悬停放大 + 阴影

4️⃣ 其他美化

项目	说明
文章封面	所有文章添加随机封面
关于页面	个人介绍页面
友链页面	友情链接页面
页脚优化	渐变背景

---

📁 文件结构

/var/www/dapalm/blog/
├── source/
│   ├── css/
│   │   └── custom.css        # 自定义样式
│   ├── js/
│   │   └── custom.js          # 自定义脚本
│   ├── about/
│   │   └── index.md           # 关于页面
│   ├── friends/
│   │   └── index.md           # 友链页面
│   └── _posts/                # 文章目录
├── _config.yml                # 主配置
└── _config.fluid.yml          # 主题配置

---

🛠️ 自定义美化

修改颜色主题

编辑 _config.fluid.yml：

color:
  primary: "#0066CC"    # 主题色
  secondary: "#4A4A4A"  # 次要色
  success: "#67C23A"    # 成功色
  warning: "#E6A23C"    # 警告色
  danger: "#F56C6C"     # 危险色

添加自定义样式

编辑 source/css/custom.css，添加你的样式。

添加自定义脚本

编辑 source/js/custom.js，添加交互效果。

---

🔄 更新博客

cd /var/www/dapalm/blog
hexo clean && hexo generate

---

📝 添加新文章

cd /var/www/dapalm/blog
hexo new "文章标题"

# 编辑文章
nano source/_posts/文章标题.md

# 记得添加封面
---
title: 文章标题
cover: https://picsum.photos/800/400?random=X
---

---

🎯 后续可添加

• 评论系统（Giscus/Waline）
• 统计分析（百度/Google）
• RSS 订阅
• 站点地图
• PWA 支持
• 暗黑模式
• 更多动画效果

---

访问地址： https://dapalm.com

---

持续美化中…