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

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

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

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

在/themes/butterfly/source/css/_global目录下新建自己的styl样式文件，取名sunchaser.styl，index.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.pug和post-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属性下添加rss的icon配置：

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