kukualのblog

这篇教程详细讲解了如何为Butterfly主题博客添加唯美的樱花飘落动态效果。通过三步即可实现：首先预览樱花纷飞的视觉盛宴，随后在指定目录创建sakura.js文件并植入精心编写的粒子动画代码，最后修改主题配置文件引入特效脚本。代码采用Canvas实现花瓣飘动算法，支持自适应窗口尺寸和交互控制，包含花瓣生成逻辑、运动轨迹函数及画面渲染机制。教程附带完整代码和配置示例，即使前端新手也能轻松为博客增添春日氛围，让静态页面瞬间焕发生机，打造沉浸式的浏览体验。

实现沉浸式光标特效，包含月光主体、拖尾粒子、点击爆炸动画。通过cursor.js定义动态效果逻辑（角度追踪、悬停涟漪），custom.css添加渐变光晕与多状态图标（链接/输入框/禁用）。代码注释清晰，支持移动端自动降级。最终在_config.butterfly.yml注入资源，为博客增添独特的视觉反馈与趣味性。

教程分三部分：1）导航栏标题与Logo配置；2）菜单居中改造（修改Pug模板与CSS样式）；3）本地搜索功能集成与界面美化。通过代码片段展示如何添加分类/标签/留言板页面，并安装hexo-generator-search插件。亮点是二次元风格的搜索框魔改，包含动态高亮关键词、滚动条特效、移动端适配，大幅提升交互体验。

聚焦视觉层初级定制，通过修改_config.butterfly.yml实现深紫色系主题配色，调整页面最大宽度为70%。详细说明各类图片配置（头像、背景、封面、404页），并关闭页头/页脚的半透明遮罩效果。提供完整的YAML代码段和Stylus样式示例，适合用户快速统一博客视觉风格，提升页面简洁度与加载性能。

作为魔改系列的开篇，指导用户完成Butterfly主题的基础配置：包括主题安装、配置文件迁移（_config.butterfly.yml）、图片目录创建。同时列出后续12篇教程的目录，涵盖颜色、导航栏、动态背景、页面美化等主题，形成完整的定制路线图。强调通过分离配置文件避免版本冲突，为后续高阶修改奠定基础。

全面解析Butterfly主题的模块化目录结构，从根目录的配置文件（_config.yml、plugins.yml）到核心功能模块（布局文件、样式脚本、静态资源）逐一说明。重点标注了layout/下的Pug模板组件（如头部、侧边栏、评论系统）、source/中的CSS/JS定制入口，以及scripts/的事件处理逻辑。适合开发者深度定制主题时快速定位文件，理解各模块的依赖关系与修改影响。