主题升级

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

1	git pull origin master

如果有魔改的自己注意合并一下。

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

评论系统的部署/定制

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

Waline 定制：【索引】定制自己的 Waline 评论系统

搜索

来自站长受到的教训

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

为了尊重知识产权，以及纠纷避免，不建议去掉 Power By 标识。但目前我暂时找不到只去掉链接的方法。

可以在 themes/butterfly/source/js/search/algolia.js 中去掉 Algolia 搜索 Power By 标签：

// 旧版本
- search.addWidgets([configure, searchBox, hits, stats, powerBy, pagination]) // add the widgets to the instantsearch instance
+ search.addWidgets([configure, searchBox, hits, stats, pagination]) // add the widgets to the instantsearch instance

// 新版本
- instantsearch.widgets.poweredBy({  
- container: '#algolia-info > .algolia-poweredBy'  
- }),

各平台站长管理工具配置

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;
}