本文基于 butterfly 主题 4.5.1 版本。

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

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

在 themes/butterfly/source/css/_global 目录下新建自己的 styl 样式文件，命名 llnancy.styl，themes/butterfly/source/css/index.styl 中已进行导入。

禁用首页全屏图片后的导航栏样式调整

配置项 disable_top_img 设置为 true 时无首页全屏大图。这时会发现导航栏的背景颜色变成了白色且带一点透明，文字变成了黑色。这点看上去并不是很美观。所以可以将背景颜色修改为透明色，文字修改为白色。

在 llnancy.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
25
26
27
// =======================导航栏设置透明色开始=======================
#page-header
  &.not-top-img
    #nav
      background: transparent !important
      box-shadow: none !important
      a
        color: #ffffff !important
      .child
        color: var(--font-color) !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.lilu.org.cn/blog/index.png)

浏览器滚动条美化

在llnancy.styl文件中添加以下样式：

1
2
3
4
5
6
7
8
9
10
// =======================浏览器滚动条美化开始=======================
*::-webkit-scrollbar
  width: 5px
*::-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: 1.4em

*::-webkit-scrollbar-corner
  background-color: transparent
// =======================浏览器滚动条美化结束=======================

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

在 source/_data 文件夹下创建 widget.yml 文件，内容如下：

1
2
3
4
5
6
7
top:
  - class_name:
    id_name: w-chat
    name: 微信公众号
    icon: fab fa-weixin
    order: -1
    html: '<img class="aside-img" style="width: 100%;height: 100%;max-width: 100%;border-radius: 7px;padding: 0" src="https://cdn.lilu.org.cn/wx-search.png">'

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

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

在 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(style=`text-align: center;display: inline-block;line-height: 36px;width: 100%;margin: 0 auto;`)
  center
    img#wechat-qrcode(style=`width: 200px;max-width: 100%;` 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
8
# 自定义配置
post_end:
  enable: true
  wechat:
    enable: true
    cdn_qrcode: https://cdn.lilu.org.cn/wxgzh.jpeg
    local_default_qrcode: /assets/images/weixin/wechat-gzh.png
    description: 欢迎关注微信公众号【打工这件小事】～

修改 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: 100

在主题的配置文件 _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/llnancy/llnancy.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/llnancy/sunchaser-cdn@master/pdf/the-road-to-code-improvement-from-code-farmers-to-craftsmen.pdf %}

添加 NProgress 进度条

在主题配置文件中修改 inject 配置项插入对应 css 和 js

1
2
3
4
5
6
7
8
9
10
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel='stylesheet' href='https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/nprogress/0.2.0/nprogress.min.css'/>
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <script src='https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/nprogress/0.2.0/nprogress.min.js'></script>
    # - <script src="xxxx"></script>

NProgress 配置：

1
2
3
4
5
6
7
8
9
// =====================NProgress进度条相关开始=====================
#nprogress
  .bar
    height: 0.2em !important
    background: #8b42ff !important
  .spinner-icon
    border-top-color: #ffffff !important;
    border-left-color: #ffffff !important;
// =====================NProgress进度条相关结束=====================

在 themes/butterfly/layout/includes/third-party/pjax.pug 文件中使用 nprogress：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.addEventListener('pjax:send', function () {
  NProgress.start();
  
  ...
}

document.addEventListener('pjax:complete', function () {
  ...
  
  NProgress.done();
}

document.addEventListener('pjax:error', (e) => {
  NProgress.done();
  
  ...
}

另外还可以在监听 DOMContentLoaded 事件中使用，效果是加载 DOM 也会触发进度条，修改 themes/butterfly/source/js/main.js：

1
2
3
4
5
6
7
8
9
document.addEventListener('DOMContentLoaded', function () {
  NProgress.start()
  
  // ...
})

window.addEventListener('load', function (event) {
  NProgress.done()
});

更多

请体验本站：打工这件小事