这也许是一篇索引文章

温馨提示,文章包含大量站内站外链接,建议加入收藏夹/集锦以备不时之需。

本文由原 站内文章【索引】Hexo 博客的写作与装饰 拆分而来。

主题升级

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

1
git pull origin master

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

参考: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),否则可能会有蜀黍来电风险。

image.png

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

1
2
3
4
5
6
7
8
// 旧版本
- 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

// 新版本(Butterfly 5.1 之后的版本使用新版本的instantsearch)
- instantsearch.widgets.poweredBy({
- container: '#algolia-info > .algolia-poweredBy'
- }),
不建议去掉 Power By 标识

为了尊重知识产权,以及纠纷避免,不建议去掉 Power By 标识。根据 Algolia 免费服务特殊条款,如果你使用的是社区版本(免费开源)必须加上 Power By 部件。

(如果你觉得狗命要紧请无视此提醒🐕)

如果你的 Butterfly 版本是 5.1 以后,那么你还可以把 Power By 加回来,只是把标签链接替换为另外的链接,比如中间页链接规避风险(关于中间页详看 站内文章Hexo 博客与 Waline 评论区实现外链跳转中间页)。

首先按照上面代码去掉标签,然后找到代码中的这一行 search.addWidgets(widgets),在其下方添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/************ 自定义 PowerBy ***********/
/*********** https://www.algolia.com/doc/api-reference/widgets/powered-by/js/#connector ***********/
// Create the render function

const renderPoweredBy = (renderOptions, isFirstRender) => {
const { url, widgetParams } = renderOptions;
const target = "https://www.algolia.com/" // 目标跳转地址
const midPage = "https://blog.uuanqin.top/go.html?u=" + btoa(target) // 中间页处理地址(你可以处理成你想要的形式)
const svg = `<svg width="77" height="19" aria-label="Algolia" role="img" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2196.2 500"><defs><style>.cls-1,.cls-2{fill:#003dff;}.cls-2{fill-rule:evenodd;}</style></defs><path d="M1070.38,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z" class="cls-2"></path><rect x="1845.88" y="104.73" width="62.58" height="277.9" rx="5.9" ry="5.9" class="cls-1"></rect><path d="M1851.78,71.38h50.77c3.26,0,5.9-2.64,5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77,7.95c-2.87,.45-4.99,2.92-4.99,5.83v51.62c0,3.26,2.64,5.9,5.9,5.9Z" class="cls-2"></path><path d="M1764.03,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z" class="cls-2"></path><path d="M1631.95,142.72c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78,0-36.15,3.17-51.92,9.85-15.59,6.66-29.29,16.05-40.76,28.31-11.47,12.23-20.38,26.87-26.76,44.03-6.38,17.17-9.24,37.37-9.24,58.36,0,20.99,3.19,36.87,9.55,54.21,6.38,17.32,15.14,32.11,26.45,44.36,11.29,12.23,24.83,21.62,40.6,28.46,15.77,6.83,40.12,10.33,52.4,10.48,12.25,0,36.78-3.82,52.7-10.48,15.92-6.68,29.46-16.23,40.78-28.46,11.29-12.25,20.05-27.04,26.25-44.36,6.22-17.34,9.24-33.22,9.24-54.21,0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43,163.75c-11.47,15.75-27.56,23.7-48.09,23.7-20.55,0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2,0-26.89,5.59-49.14,17.06-64.87,11.45-15.75,27.54-23.52,48.07-23.52,20.55,0,36.63,7.78,48.09,23.52,11.47,15.57,17.36,37.98,17.36,64.87,0,27.19-5.72,45.3-17.19,61.2Z" class="cls-2"></path><path d="M894.42,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z" class="cls-2"></path><path d="M2133.97,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z" class="cls-2"></path><path d="M1314.05,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-11.79,18.34-19.6,39.64-22.11,62.59-.58,5.3-.88,10.68-.88,16.14s.31,11.15,.93,16.59c4.28,38.09,23.14,71.61,50.66,94.52,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47h0c17.99,0,34.61-5.93,48.16-15.97,16.29-11.58,28.88-28.54,34.48-47.75v50.26h-.11v11.08c0,21.84-5.71,38.27-17.34,49.36-11.61,11.08-31.04,16.63-58.25,16.63-11.12,0-28.79-.59-46.6-2.41-2.83-.29-5.46,1.5-6.27,4.22l-12.78,43.11c-1.02,3.46,1.27,7.02,4.83,7.53,21.52,3.08,42.52,4.68,54.65,4.68,48.91,0,85.16-10.75,108.89-32.21,21.48-19.41,33.15-48.89,35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,64.1s.65,139.13,0,143.36c-12.08,9.77-27.11,13.59-43.49,14.7-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-1.32,0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33Z" class="cls-2"></path><path d="M249.83,0C113.3,0,2,110.09,.03,246.16c-2,138.19,110.12,252.7,248.33,253.5,42.68,.25,83.79-10.19,120.3-30.03,3.56-1.93,4.11-6.83,1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48,10.84-53.17,16.38-81.71,16.03-111.68-1.37-201.91-94.29-200.13-205.96,1.76-110.26,92-199.41,202.67-199.41h202.69V407.41l-115-102.18c-3.72-3.31-9.42-2.66-12.42,1.31-18.46,24.44-48.53,39.64-81.93,37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24,39.63-101.52,94-101.52,49.18,0,89.68,37.85,93.91,85.95,.38,4.28,2.31,8.27,5.52,11.12l29.95,26.55c3.4,3.01,8.79,1.17,9.63-3.3,2.16-11.55,2.92-23.58,2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13,58.14-150.27,137.25-2.09,77.1,61.08,143.56,138.19,145.26,32.19,.71,62.03-9.41,86.14-26.95l150.26,133.2c6.44,5.71,16.61,1.14,16.61-7.47V9.48C499.66,4.25,495.42,0,490.18,0H249.83Z" class="cls-1"></path></svg>`
widgetParams.container.innerHTML = `<a href="${midPage}">${svg}</a>`; // 重写标签HTML
};

// Create the custom widget
const customPoweredBy = instantsearch.connectors.connectPoweredBy(
renderPoweredBy
);

// Instantiate the custom widget
search.addWidgets([
customPoweredBy({
container: document.querySelector('#algolia-info > .algolia-poweredBy'),
})
]);
/********** END ***********/

各平台站长管理工具配置

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

优雅改

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

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

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

示例

1
2
3
4
5
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)

其实可以像我这样实践,我觉得这样更方便:

1
2
3
4
5
6
7
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">

当然也可以把图标下载到本地,方法:

image-20230427194929460

image-20230427195048627

其他优雅改

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

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

crowdsimudemo.gif

自定义页脚:站内文章Butterfly 自定义页脚(不修改主题源码)

image.png

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

image.png

Butterfly 问题解决

BtterFly 主题不显示封面?

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

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

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

【过期】仅供参考的条目

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

【过期】自定义滚动条

新版本 Butterfly 好像不起作用了

引入新的 css 文件,文件内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* 滚动条 */
::-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;
}

参考:Hexo 博客之 butterfly 主题优雅魔改系列(持续更新) - antmoe - 博客园 (cnblogs.com)