本文基于butterfly主题3.6.0版本修改。

部分修改无法使用纯cssJavaScript实现,需要修改原主题的源码。如果后续需要升级原主题,请重新修改一遍。

有些修改就算能用JavaScript实现,也严重影响加载速度,所以还不如修改原主题的源码。

为避免修改地方过多,可将自定义的css样式和js脚本分别放置在同一文件中。

/themes/butterfly/source/css/_global目录下新建自己的styl样式文件,取名sunchaser.stylindex.styl中已自动引入。

/themes/butterfly/source/js目录下新建自己的js脚本文件,取名sunchaser.js,然后在_config.butterfly.yml中进行inject引入。

配置项:

1
2
3
inject:
bottom:
- <script src="/js/sunchaser.js"></script>

去掉首页的全屏图片

首页的全屏图片和subtitle,看似很美,却无实际作用。个人觉得作为博客站,打开的第一屏应该展现的是优质的文章。

3.6.0版本之前,原主题没有关闭首页全屏图片的配置项。该功能为3.6.0版本新增。

版本号小于3.6.0

打开/themes/butterfly/layout/includes/header/index.pug文件找到以下代码:

1
- var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'

修改为以下内容:

1
- var isHomeClass = is_home() ? '' : 'not-index-bg'

再在此文件中找到以下代码并全部注释掉。

1
2
3
4
5
6
7
8
9
//#site-info
// h1#site-title=site_title
// #site-subtitle
// span#subtitle
// if(theme.social)
// #site_social_icons
// !=fragment_cache('social', function(){return partial('includes/header/social')})
//#scroll-down
// i.fas.fa-angle-down.scroll-down-effects

版本号等于3.6.0

自带了配置项disable_top_img,设置为true时无首页全屏大图。

但会发现导航栏的背景颜色变成了白色且带一点透明,文字变成了黑色。这点看上去并不是很美观。所以这里可以将背景颜色修改为透明色,文字修改为白色。

sunchaser.styl样式文件中添加以下样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#page-header
&.not-top-img
#nav
background: transparent !important
box-shadow: none !important
a
color: #ffffff !important

#page-header
&.nav-visible
#nav
background: rgba(255, 255, 255, .8) !important
a
color: var(--font-color) !important

if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
[data-theme='dark']
#page-header
&.not-top-img > #nav
background: transparent !important
box-shadow: none !important
&.nav-visible > #nav
background: alpha(#121212, .8) !important

关掉首页全屏大图后,会发现整个博客呈现白色背景,如果觉得不够美观,可在_config.butterfly.yml配置文件中将背景修改为图片:

1
background: url(https://cdn.jsdelivr.net/gh/sunchaser-lilu/sunchaser-cdn@master/lilu.org.cn/index_1.png)

导航栏居左,搜索按钮居右,且加上浅色和深色模式转化的icon

打开/themes/butterfly/layout/includes/header/nav.pug文件,修改为以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
nav#nav
span#blog_name
a#site-name(href=url_for('/')) #[=config.title]
span#menus
!=fragment_cache('menus', function(){return partial('includes/header/menu_item')})
#toggle-menu
a.site-page
i.fas.fa-bars.fa-fw
if theme.darkmode.enable && theme.darkmode.button
div.button.mode-button#darkmode(type="button" title=_p('rightside.night_mode_title'))
a.site-page.social-icon
i.fas.fa-adjust.fa-fw
if (theme.algolia_search.enable || theme.local_search.enable)
#search-button
a.site-page.social-icon.search
i.fas.fa-search.fa-fw
span=' ' + _p('search')

sunchaser.styl样式文件中添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#nav
#search-button,.mode-button
float: right
&.hide-menu
#toggle-menu
float: right

.mode-button
display: inline
padding: 0 0 0 .4rem

// icon上的a标签不允许选中
a
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: none !important
}

sunchaser.js文件中,添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.getElementById('darkmode').addEventListener('click', function (e) {
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
if (nowMode === 'light') {
activateDarkMode();
saveToLocal.set('theme', 'dark', 2);
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night);
} else {
activateLightMode();
saveToLocal.set('theme', 'light', 2);
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day);
}
// handle some cases
typeof utterancesTheme === 'function' && utterancesTheme();
typeof FB === 'object' && window.loadFBComment();
window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200);
});

浏览器滚动条美化

sunchaser.styl文件中添加以下样式:

1
2
3
4
5
6
7
8
9
10
*::-webkit-scrollbar-thumb
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: var(--btn-bg)

优化右侧固定widget在向上滚动过程中被导航栏遮住的情况

此问题在3.6.0版本已经被修复,低版本可按以下方式修改。

打开/themes/butterfly/source/css/_layout/aside.styl文件中,找到以下内容:

1
2
3
4
5
.sticky_layout
+minWidth900()
position: sticky
position: -webkit-sticky
top: 20px

top: 20px修改为top: 80px

sunchaser.styl样式文件中添加以下内容:

1
2
3
4
#aside-content
.sticky_layout
+minWidth900()
top: 80px !important

侧边栏加入微信公众号图片widget

参考:https://butterfly.js.org/posts/ea33ab97/

鼠标放在搜一搜图片上时微小放大特效。在sunchaser.styl样式文件中添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
.aside-img
object-fit: cover
width: 100%
height: 100%
max-width: 100%
border-radius: 7px
padding: 0
transition: all .6s

&:hover
box-shadow: none
border-radius: 7px
transform: scale(1.1)

在文章详情页底部添加文章结束语和公众号

/themes/butterfly/layout/includes/post目录下添加两个文件post-end.pugpost-end-wechat.pug,内容分别为:

post-end.pug

1
2
3
4
5
div
div(style='text-align:center;color: #ccc;font-size:14px;font-family: cursive;')
| -------------&#x6709;&#x8FC7;&#x7275;&#x6302;
i(style='margin:0 7px;').fa.fa-umbrella
| &#x4E86;&#x65E0;&#x7275;&#x6302;-------------

post-end-wechat.pug

1
2
3
4
#post-end-wechat
center
img#wechat-qrcode(src=`${theme.post_end.wechat.cdn_qrcode}` onerror=`onerror=null;src='${theme.post_end.wechat.local_default_qrcode}'`,alt='打工这件小事')
div=theme.post_end.wechat.description

修改/themes/butterfly/layout/post.pug文件,在include includes/post/post-copyright.pug这一行的上方缩进对齐位置添加以下内容:

1
2
3
4
if theme.post_end.enable
include includes/post/post-end.pug
if theme.post_end.wechat.enable
include includes/post/post-end-wechat.pug

_config.butterfly.yml配置文件中添加以下配置项:

1
2
3
4
5
6
7
post_end:
enable: true
wechat:
enable: true
cdn_qrcode: https://i.loli.net/2020/02/15/SDRF87I6ohlyVk1.jpg
local_default_qrcode: /assets/images/weixin/wechat-gzh.png
description: 欢迎关注微信公众号【打工这件小事】~

sunchaser.styl样式文件中添加以下内容:

1
2
3
4
5
6
7
8
9
10
#post-end-wechat
text-align: center
display: inline-block
line-height: 36px
width: 100%
margin: 0 auto

#wechat-qrcode
width: 200px
max-width: 100%

footer底部作者名字前添加跳动的红心

修改/themes/butterfly/layout/includes/footer.pug文件。

1
2
3
4
if theme.footer.owner.since && theme.footer.owner.since != nowYear
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear}&nbsp;<i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heart"></i> By ${config.author}`
else
.copyright!= `&copy;${nowYear}&nbsp;<i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heart"></i> By ${config.author}`

添加RSS插件生成atom.xml

在博客根目录下输入以下命令:

1
npm install hexo-generator-feed --save

在博客配置文件_config.yml中添加以下代码:

1
2
3
4
5
6
7
8
# RSS订阅
plugin:
- hexo-generator-feed
# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

在主题的配置文件_config.butterfly.yml中的social属性下添加rssicon配置:

1
2
social:
fa fa-rss: /atom.xml

生成百度sitemap

hexo博客根目录下分别执行以下命令安装插件:

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

修改博客根目录下_config.yml文件中的url属性为站点自定义域名(不支持github.io

sitemap提交

配置百度主动推送

hexo博客根目录下执行以下命令安装插件:

1
npm install hexo-baidu-url-submit --save

在博客根目录下_config.yml文件中添加以下内容:

1
2
3
4
5
baidu_url_submit:
count: 100 # 提交最新的一个链接
host: lilu.org.cn # 在百度站长平台中注册的域名
token: eNsEfgMEdafegvn # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里

修改deploy属性,有两个type时前面要加-

1
2
3
4
5
deploy:
- type: git
repo: https://github.com/sunchaser-lilu/sunchaser-lilu.github.io.git
branch: master
- type: baidu_url_submitter

添加PDF插件

此插件可在单页面中全屏打开PDF,效果与打开本地磁盘的PDF文件类似。

hexo博客根目录下执行以下命令安装插件:

1
npm install hexo-pdf-plugin@0.0.1-beta --save

使用示例:

1
2
3
4
5
6
7
---
layout: false
title: PDF
date: 2021-01-29 16:00:00
---

{% pdf https://cdn.jsdelivr.net/gh/sunchaser-lilu/sunchaser-cdn@master/pdf/the-road-to-code-improvement-from-code-farmers-to-craftsmen.pdf %}