这几天busuanzi又抽风导致我的站点频繁卡死，于是在伟大的互联网上我找到了Vercount这个平替方案，之前换域名导致busuanzi的访问量丢失，没想到Vercount竟然可以编辑访问量，这下访问量也回来了，真是太好了！然而，一颗折腾的心一旦被激起涟漪就不会再静止，我又花了一天时间把Hexo升级到8.1.2版本，把Butterfly升级到5.5.5版本，虽然外观看起来没什么变化，但是底层一定是优化了的！技术人的事就是这么朴实无华。整个升级过程不算顺利，主要原因是唐志远大大的博客停更了，我这个站点很多魔改方案都是看他的文章做的，不过幸运的是唐大大的文章在网上被到处转载，找到原文还是很简单，那么我也来转载一下牢唐当年的高质量文章吧！

不过在那之前，先让我用一首《念牢唐》来纪念一下唐大大：

  你坐在电脑前，把技术说的简单

  一把键盘一双手，敲出我心里的慌

  你总把文写清晰，像夏天的一把冰糖

  不绕弯不撞墙，把博客给我摆在前方

  那时候我害怕，怕Hexo难装

  你一句别嫌，我就敢去搭建

  唐志远老师，我还记得你

  一句一句，把我拉进Hexo里

  唐志远老师，我还记得你

  那些Hexo的Bug，你替我修理


前言


这一篇内容在搭建完 hexo 框架的基础上进行博客的魔改，这是我自己的记录，你可以直接看我推荐大佬的博客，然后进行魔改，这篇文章不常更，还望周知！！！

推荐大佬博客，根据自己的需求进行魔改：糖果屋


butterfly 魔改


  • 看到这里相信大家已经搭建好了属于自己的博客，本来想这先出优化博客的教程，但是我觉得通过上篇的教程，网页还是有很多不足的地方，本篇教程继续带领大家，完成博客的美化，搭好框架，打造一个属于自己免费的炫酷博客。

  • 还是那句话，魔改的尽头是默认，哈哈，我只挑我觉得不足的地方，争取教会大家方法，大家也可以根据自己的喜好，查询官方文档，设置自己的博客。

  • 官方文档链接：https://butterfly.js.org/posts/4aa8abbe/

  • 如果你没有 pug 以及 stylus 的渲染器，请下载安装

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

主页的美化


  • 我发现每次进来这个部分的背景颜色都不一样，有的时候随机匹配出来的很丑，于是乎我就开始看代码，查官方文档的帮助文档，将这部分内容做了修改，觉得没有影响的可以忽略这部分的内容。

  • 我设置了主题配置文件以下内容：

    • 方式一：删除掉后面的值，我觉得更美观些

    • 方式二：将背景改成透明,或者引用别人的 css 文件，推荐的大佬博客里面都有，这里不在赘述


生成文章唯一链接


  • Hexo 的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的 URL 链接就会包含中文，复制后的 URL 路径就是把中文变成了一大堆字符串编码，如果你在其他地方用这边文章的 url 链接，偶然你又修改了改文章的标题，那这个 URL 链接就会失效。为了给每一篇文章来上一个属于自己的链接，利用 hexo-abbrlink 插件 ,来解决这个问题。

  • 参考 github 官方： hexo-abbrlink 按照此教程配置完之后如下：

  • 记得修改每篇文章 abbrlink 的值

1、安装插件，在博客根目录下打开终端，运行以下指令：

1
npm install hexo-abbrlink --save

2、插件安装成功后，在根目录 的配置文件 _config.yml 找到 permalink：

1
2
3
4
5
6
7
permalink: :year/:month/:day/:title/

#修改为
permalink: post/:abbrlink.html # post为自定义前缀
abbrlink:
        alg: crc32   #算法： crc16(default) and crc32
        rep: hex     #进制： dec(default) and hex

打字效果


修改主题配置文件 _config.butterfly.yml 的 activate_power_mode 即可

1
2
3
4
5
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

网站副标题


可设置主页中展示的网站副标题或者自己喜欢的座右铭修改主题配置文件 _config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Site
title: Hexo
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  # source: 3
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 我双手合十的愿望里永远有你。
    - 穿越人海，只为与你相拥。
    - 手握日月摘 ♥ 陈。

文章置顶


PS：要实现这个功能的方法很多，有一个就可以了

方式一：

Hexo 本身并没有内置文章置顶功能，因此需要自行安装。

1
2
3
4
5
6

# 先卸载
npm uninstall --save hexo-generator-index

# 再安装
npm install --save hexo-generator-index-pin-top

就需要在文章的头部信息栏加入一个 header 属性：

1
2
3
4
title: 谢谢你来看我的博客
date: 2020-01-31 17:09:13
top: true
header: false

方式二：

  • 在你的 .md 的文件属性栏添加 sticky 属性，值越大文章越靠前


代码高亮主题


Butterfly 支持 6 种代码高亮样式：

  • darker

  • pale night

  • light

  • ocean

  • mac

  • mac light

修改主题配置文件 _config.butterfly.yml

1
highlight_theme: mac light

这个自行选择


运行时间


网页已运行时间

修改主题配置文件 _config.butterfly.yml

1
2
3
4
5
6
runtimeshow:
  enable: true
  publish_date: 6/7/2018 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

代码复制

主题支持代码复制功能

修改 主题配置文件

1
highlight_copy: true

侧边栏时钟


1、安装插件，在博客根目录 [Blog] 下打开终端，运行以下指令：

1
npm install hexo-butterfly-clock --save

2、添加配置信息，以下为写法示例在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# electric_clock
# see https://akilar.top/posts/4e39cf4a/
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://npm.elemecdn.com/hexo-butterfly-clock/lib/loading.gif #加载动画自定义
  clock_css: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.css
  clock_js: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.js
  ip_api: https://pv.sohu.com/cityjson?ie=utf-8

字数统计


要为 Butterfly 配上字数统计特性, 你需要如下几个步骤:

  1. 打开 hexo 工作目录

  2. npm install hexo-wordcount —save or yarn add hexo-wordcount

  3. 修改主题配置文件 _config.butterfly.yml

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

公告 2 个小人


在 node_modules\hexo-theme-butterfly\layout\includes\widget\card_announcement.pug 下添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.xpand(style='height:200px;')
  canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople1.js')
script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/zdog.dist.js')
script#rendered-js(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople.js')
style.
  .card-widget.card-announcement {
  margin: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  }
  canvas {
  display: block;
  margin: 0 auto;
  cursor: move;
  }

添加个性化板娘

以下整理了很多类别，选择自己喜好的怕动手就第一种，现在都很成熟，放心大胆的引用，我使用的就是第一种，但每种都试过了，才写出来,可以参考一下推荐的大佬博客的看板娘。

不怕动手建议选择大神魔改版本，可以根据自己的喜好进行配置，修改！！！

  • 第一种：最简单引用方式在Butterfly/_config.yml中inject添加，复制的时候注意一下格式

1
2
3
4
5
inject:
   head:
     - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
   bottom:
    - <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

  • 第二种：Hexo 插件版看板娘（不能换装）

在 Hexo 根目录[Blogroot]下打开终端，输入以下指令安装必要插件。

1
npm install --save hexo-helper-live2d

打开站点配置文件[Blog]\config.yml搜索 live2d,按照如下注释内容指示进行操作。如果没有搜到 live2d 的配置项，就直接把以下内容复制到最底部

完成后保存修改，在 Hexo 根目录下运行指令

之所以必须要使用 hexo clean 是因为我们需要清空缓存重新生成静态页面，不然看板娘没被加入生成的静态页面里，是不会出现的。


更换看板娘


同样是在 Hexo 根目录[Blog]下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是 live2d-widget-model-koharu，一个Q版小正太。其他的模型也可以在模型预览里查看以供选择。

输入指令

然后在站点配置文件里找到配置项修改为期望的模型。

之后按部就班的运行就能在网站上查看效果了。


卸载看板娘


这个是第二种方式安装看板娘的卸载方法，其它方式很简单就不说了

卸载插件和卸载模型的指令都是通过 npm 进行操作的。在博客根目录[Blog]打开终端，输入：

1
2
npm uninstall hexo-helper-live2d #卸载看板娘插件
npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称

卸载后为了保证配置项不出错，记得把[Blog]_config.yml里的配置项给注释或者删除掉。


页脚跳动的♥


编辑博客根目录node_modules\hexo-theme-butterfly\layout\includes\footer.pug文件，修改以下内容

1
2
3
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
将上面代码改为下面的
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i>  ${config.author}`

编辑butterfly.yml文件

在inject->head下面添加如下内容：

1
- <link rel="stylesheet" href="/css/heartbeat.css">

然后在blog/themes/butterfly/source/css/下新建一个hearbeat.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
#heartbeat {
    color: red;
    animation: iconAnimate 1.33s ease-in-out infinite
}

@-moz-keyframes iconAnimate {

    0%,
    100% {
        transform: scale(1)
    }

    10%,
    30% {
        transform: scale(.9)
    }

    20%,
    40%,
    60%,
    80% {
        transform: scale(1.1)
    }

    50%,
    70% {
        transform: scale(1.1)
    }
}

@-webkit-keyframes iconAnimate {

    0%,
    100% {
        transform: scale(1)
    }

    10%,
    30% {
        transform: scale(.9)
    }

    20%,
    40%,
    60%,
    80% {
        transform: scale(1.1)
    }

    50%,
    70% {
        transform: scale(1.1)
    }
}

@-o-keyframes iconAnimate {

    0%,
    100% {
        transform: scale(1)
    }

    10%,
    30% {
        transform: scale(.9)
    }

    20%,
    40%,
    60%,
    80% {
        transform: scale(1.1)
    }

    50%,
    70% {
        transform: scale(1.1)
    }
}

@keyframes iconAnimate {

    0%,
    100% {
        transform: scale(1)
    }

    10%,
    30% {
        transform: scale(.9)
    }

    20%,
    40%,
    60%,
    80% {
        transform: scale(1.1)
    }

    50%,
    70% {
        transform: scale(1.1)
    }
}

Butterfly 加载动画修改


添加配置文件，在目录node_modules\hexo-theme-butterfly\layout\includes\loading\loaded.ejs下添加 loaded.ejs 文件，代码如下

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<% if (theme.preloader.enable) { %>
<div id='loader'>
    <% if(theme.preloader.layout == 'gear' ) {%>
    <div class="outer_box">
    <div class='loader_overlay'></div>
    <div class='loader_cogs'>
        <div class='loader_cogs__top'>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_hole'></div>
        </div>
        <div class='loader_cogs__left'>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_hole'></div>
        </div>
        <div class='loader_cogs__bottom'>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_hole'></div>
        </div>
        <p style="text-align:center">&nbsp;&nbsp;&nbsp;loading...</p>
    </div>
    </div>
  <% } else if(theme.preloader.layout == 'spinner-box') { %>
    <div class="loading-left-bg"></div>
    <div class="loading-right-bg"></div>
    <div class="spinner-box">
        <div class="configure-border-1">
            <div class="configure-core"></div>
        </div>
        <div class="configure-border-2">
            <div class="configure-core"></div>
        </div>
        <div class="loading-word">加载中...</div>
    </div>
  <% } %>
</div>

<script>
  var endLoading = function () {
    document.body.style.overflow = 'auto';
    document.getElementById('loader').classList.add("loading");
  }
  window.addEventListener('load',endLoading);
</script>
<% } %>

引入样式文件


引入 spinner-boxbutterfly，在主题配置文件 inject 处 heard 处引入以下代码

1
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >

gear 风格样式文件引入

1
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >

找到 node_modules\hexo-theme-butterfly\layout\includes\layout.pug ,将如下代码替换

1
2
3
4
5
6
7
if theme.preloader
      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
      
替换为如下代码：

if theme.preloader
      !=partial('includes/loading/loaded.ejs', {}, {cache:theme.fragment_cache})

最后主题配置文件下的preloader.enable设为true


浏览器标题恶搞


在node_modules\hexo-theme-butterfly\source\js\crash_cheat.js文件夹下添加crash_cheat.js文件 填入以下内容：（记得修改你喜好的标题）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/joke.ico");
         document.title = '看不见我🙈~看不见我🙈~';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = ' ( ๑•̀ㅂ•́) ✧被发现了～';
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

在 node_modules\hexo-theme-butterfly\layout\includes\layout.pug 中添加以下代码来引入

1
script(type='text/javascript', src='/js/crash_cheat.js')

在inject: -> bottom: 引入以下文件

1
- <script src="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script>

自定义文章封面


首先：找到主题配置文件 cover ，文章主题的修改在 cover 下，如果不想麻烦可以选择统一的封面，把默认的修改成自己喜欢的图片地址即可

写文章的时候在 cover 后面输入你想要的封面图片的 url，在 top_img 后面加上你想要的顶部图片的 url


背景渐变


在 css——>style.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
#web_bg {
  background: -webkit-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
}

引入阿里矢量图标库


推荐阅读大佬的文章阿里矢量图标库_糖果屋教程


添加标签云


使用命令进行安装插件

1
npm install hexo-tag-cloud --save

打开 node_modules\hexo-theme-butterfly\layout\includes\widget\card_tags.pug 文件，用下面内容将其替换掉，最好把之前的文件备份一下,防止后悔

1
2
3
4
5
6
7
8
9
10
11
12
if site.tags.length
  .card-widget.card-tags
    .card-content
      .item-headline
        i.fa.fa-tags(aria-hidden="true")
        span= _p('aside.card_tags')
        script(type="text/javascript" charset="utf-8" src="/js/tagcloud.js")
        script(type="text/javascript" charset="utf-8" src="/js/tagcanvas.js")
        #myCanvasContainer.widget.tagcloud(align='center')
          canvas#resCanvas(width='200', height='200', style='width=100%')
            != tagcloud()
          != tagcloud({min_font: 16, max_font: 24, amount: 50, color: true, start_color: '#999', end_color: '#99a9bf'})

普通标签备份

1
2
3
4
5
6
7
8
9
10
11
12
if theme.aside.card_tags.enable
  if site.tags.length
    .card-widget.card-tags
      .item-headline
        i.fas.fa-tags
        span= _p('aside.card_tags')

      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
      if theme.aside.card_tags.color
        .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.15, maxfontsize: 1.45, limit: tagLimit, unit: 'em'})
      else
        .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})

twikoo 评论块气泡风格魔改美化


糖果屋教程：https://akilar.top/posts/d99b5f01/


引入音乐播放器


https://akilar.top/posts/3afa069a/


手机端 fixed 定位侧栏布局魔改方案


https://akilar.top/posts/451ac5f8/


给博客添加自定义的通知悬浮窗


https://kmar.top/posts/de06ec72/

文章页相关推荐

山岳博文https://kmar.top/posts/3bc89eb/


hexo-swiper 文章轮播图插件


https://zfe.space/post/hexo-swiper.html

在 Front-matter 添加以下参数即可，index 数字越大越靠前展示。

1
2
3
swiper_index: 8
swiper_desc: 简单好用的 hexo 博客文章置顶插件！
swiper_cover: /images/letter/p.png

若你安装了插件功能都有了，但是点击无法跳转可能是你的 pjax 的地址设置不对，在主题配置文件，找到 CDN——->pjax 设置 pjax 的地址

更换为如下地址：

https://cdn.staticfile.org/pjax/0.2.8/pjax.min.js


butterfly 主题文章双栏布局插件


https://zfe.space/post/hexo-butterfly-article-double-row.html


hexo-magnet 插件 1.0


https://zfe.space/post/hexo-magnet.html