摘要生成中...

AI 摘要

Hunyuan-lite

这是一篇索引文章

主题升级

主题文件夹拉取最新分支即可。注意查看更新日志以调整主题配置文件。

1	git pull origin master

如果有魔改的自己注意合并一下。关于本站的主题魔改的代码管理说明，详见我的 GitHub 仓库：

请更新官方公开发表的版本

请按照主题官方文档对公开发表的稳定版本进行更新，并留意破坏性更新内容。
请不要直接拉取 GitHub 中的改动进行更新，即使是 main 分支中的更新，因为你无法确定当前版本是否是稳定版本。

参考：Butterfly 安裝文檔(一) 快速開始 | Butterfly

评论系统的部署/定制

Waline 部署：站内文章Hexo Btterfly 引入 Waline 评论系统以及常见问题解决

Waline 定制：站内文章【索引】定制自己的 Waline 评论系统

Algolia 搜索服务

Butterfly 文档： Butterfly 安裝文檔(四) 主題配置-2 | Butterfly

Hexo-algoliasearch 仓库：LouisBarranqueiro/hexo-algoliasearch: A plugin to index posts of your Hexo blog on Algolia (github.com)

教训

使用 Algolia 搜索默认主题时，注意搜索界面不要有跳转到外国网站的链接（比如 Power By 的 logo），否则可能会有蜀黍来电风险。

去除或修改超链接的教程详看：站内文章Hexo-Butterfly 主题中对 Algolia 搜索框 Power By 的定制。

各平台站长管理工具配置

hexo-butterfly-数据统计相关引入 - 腾讯云开发者社区-腾讯云 (tencent.com)

优雅改

我定义的优雅改是指仅在主题配置文件 inject 处添加自定义 css 和 js 文件，不修改主题源码。

Hexo 博客添加自定义 css 和 js 文件方法

打开主题配置文件（butterfly.yml）
定位搜索 inject
其中 head 是用来引入 css 的。bottom 是用来引入 js 的。（有时候也没有那么严格区分）

示例

inject:
  head:
    - <link rel="stylesheet" href="your css">
  bottom:
    - <script src="your js"></script>

参考：Hexo 博客添加自定义 css 和 js 文件 | Leonus

使用 iconfont 图标库

使用之前首先阅读官方说明：Butterfly 安裝文檔(六) 進階教程 | Butterfly

然后参考这篇文章：Hexo 博客之优雅使用阿里 iconfont 图标 | 小康博客 (antmoe.com)

其实可以像我这样实践，我觉得这样更方便：

inject:
  head:
    # iconfont
    # 放iconfont自己项目的链接，注意，每次iconfont中的项目更新后，连接就会不一样
    - <link rel="stylesheet" href="//at.alicdn.com/t/c/yourcsslink.css">
    # 放自己额外定义的css
    - <link rel="stylesheet" href="/css/iconfont_custom.css">

当然也可以把图标下载到本地，方法：

其他优雅改

以下文章均已收录至 Butterfly 主题美化教程

自定义侧边栏：站内文章Butterfly 不改动主题源码实现自定义侧边栏

自定义页脚：站内文章Butterfly 自定义页脚（不修改主题源码）

夜间模式更改网站图标：站内文章Butterfly 夜间模式变换顶部网站图标

Butterfly 问题解决

BtterFly 主题不显示封面？

确保主题配置文件中 cover 的相关配置已经配置正确。

配置好了但某些文章不显示默认封面？

如果某些文章没有显示默认封面，试试在 Front-matter 加上 description 字段。

魔改

由于站点功能拓展，部分情况下需要修改主题源代码。此部分文章将涉及对主题源代码的修改。

详看：站内文章打开潘多拉宝盒三步走：参考-学习-魔改。

【过期】仅供参考的条目

以下条目将不再维护，仅供历史参考。

【过期】自定义滚动条

新版本 Butterfly 好像不起作用了

引入新的 css 文件，文件内容为：

/* 滚动条 */
::-webkit-scrollbar {
	width: 15px;        /* 滚动条的宽度 */
	height: 8px;
}

::-webkit-scrollbar-track {
	background-color: rgba(73, 177, 245, 0.2);
	border-radius: 2em;
}

::-webkit-scrollbar-thumb {
	background-color: #49b1f5;
	background-image: -webkit-linear-gradient(
	  45deg,
	  rgba(255, 255, 255, 0.4) 25%,
	  transparent 25%,
	  transparent 50%,
	  rgba(255, 255, 255, 0.4) 50%,
	  rgba(255, 255, 255, 0.4) 75%,
	  transparent 75%,
	  transparent
	);
	border-radius: 2em;
}

::-webkit-scrollbar-corner {
	background-color: transparent;
}

::-moz-selection {
	color: #fff;
	background-color: #49b1f5;
}