kukualのblog

这篇文章详细介绍了如何通过Butterfly主题的魔改，提升文章页面的用户体验。从目录设置、版权声明到打赏功能和相关文章推荐，作者展示了如何通过配置文件的调整，让文章页面更加丰富和实用。同时，文章还探讨了代码块的美化、标题前缀图标以及分享系统的配置，帮助读者打造出一个既美观又功能强大的文章页面。无论你是技术博主还是创意写作者，这篇文章都将为你提供实用的美化技巧。

本文指导用户通过插件hexo-butterfly-categories-card改造分类页面。安装插件后，新建CSS文件并修改插件的JavaScript与Pug模板，实现瀑布流式分类卡片布局。卡片支持背景图动态缩放、悬停文字平移特效，并适配移动端响应式设计。配置文件定义分类卡片的列数、行数、封面图及描述信息，最终生成高交互性的分类导航页。修改后的分类页面以视觉化的卡片形式展示分类名称、文章数量及简介，大幅提升内容呈现的层次感与吸引力。

本文聚焦页脚与右下角功能按钮的深度定制。页脚部分通过注入HTML和CSS代码，实现居中布局的社交图标链接，搭配动态悬浮效果与渐变背景，并添加访问量统计脚本（支持本地存储模拟增长）。右下角按钮设置涵盖繁简转换、阅读模式、暗黑模式等功能开关，允许调整按钮顺序与显示逻辑。配置文件详细说明了按钮位置、自动切换暗黑模式的时间规则，以及滚动百分比显示等细节。最终效果使页脚兼具美观与实用性，右下角按钮提升用户操作便捷性。

本文重点改造侧边栏模块与全局页面背景。侧边栏新增毛玻璃效果卡片，包括作者信息、公告栏、分类/标签云等，通过CSS注入渐变背景与动画，适配暗黑模式。公告栏使用HTML自定义样式，突出关键内容。全局页面（如文章、分类、归档）添加半透明渐变背景，结合backdrop-filter实现模糊效果，增强视觉层次。导航栏同步优化为渐变悬浮样式。最终，侧边栏与页面背景形成统一的轻拟物风格，提升整体设计的质感与沉浸感。

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

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