kukualのblog

本文介绍了Butterfly主题的多项实用功能配置。首先，通过安装hexo-wordcount插件实现文章字数统计与阅读时长显示，支持在文章页和侧边栏展示数据。其次，优化复制功能，支持添加版权信息并设置字数阈值。文章元数据部分允许自定义首页和文章页的日期类型（创建/更新时间）、分类标签样式及显示位置。全局字体设置详细说明了如何调整字体大小、代码字体及在线字体的引入，确保页面视觉统一。最后，通过配置社交媒体链接，使用FontAwesome图标库添加GitHub、CSDN、小红书等平台链接，并自定义图标颜色，增强博客的交互性与品牌感。

本文围绕首页视觉优化展开。调整顶部背景图高度与标题位置，增强首屏冲击力。启用副标题打字机效果，支持第三方API动态文案或自定义静态语录，提升个性化表达。首页文章布局改为瀑布流模式（封面图在上），并配置智能摘要截取逻辑，优化内容浏览效率。此外，通过hexo-butterfly-swiper插件添加置顶文章轮播功能，支持按日期或更新时间排序。最终实现兼具动态效果与信息密度的首页设计，兼顾美观性与用户体验。

这篇教程详细讲解了如何为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样式示例，适合用户快速统一博客视觉风格，提升页面简洁度与加载性能。