在折腾部落格时踩到的一些坑和美化记录

前言

由于jsd在国内的持续拉跨（至于是什么原因相信大家都有所耳闻），导致大量的个人博客网站遇到了资源加载失败的情况。虽然网上也有很多的补救教程，如反向代理、镜像网站等等，但都不是什么稳定的方案。

好在新版butterfly主题已经支持将cdn切换回本地，虽然访问速度可能会有所差别，但总比不能访问要好得多。

下面我就给大家整理一下在升级过程中遇到的一些问题以及主题的一些美化教程。

以下内容基于 butterfly4.2.2、hexo6.2.0

遇到的问题

升级失败

首先参照官方文档的升级方法，在主题目录下运行git pull，如果不出意外的话，就直接升级成功了。

显然，我是在升级的时候出现了错误，不然也不会来水这篇文章。

先说一下问题：在参照官方文档升级后在本地预览时显示的butterfly版本号仍然为旧版本，并不是最新的4.2.2 版本。

本地无法预览

在升级失败后，我便尝试删掉主题文件，再重新安装，这样造成的后就是连在本地预览也失败，显示的错误也看不懂。经过了一番折腾，便索性从头再来 。

修复过程

安装淘宝npm镜像

由于各种原因，导致npm默认源在国内下载速度很慢，这里我们可以将npm的源设置成淘宝镜像，访问速度会大大提升

1
npm config set registry registry.npmmirror.com

Hexo安装

首先肯定是安装Hexo ，其实安装方法并不难，百度一搜就有一大堆，这里也不再做过多的演示。

安装好hexo后，就是要安装主题了。

butterfly官方文档提供了三种安装主题的方法，因为我之前是采用的Git安装，所以这次还是照旧。

主题安装好后，打开Hexo根目录下的_config.yml，将主题修改为butterfly

到这里你就可以尝试一键三连了 hexo cl && hexo g && hexo s

如果打开网站后显示...pug错误，则还需要安装pug以及stylus的渲染器

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

安装后再次一键三连，就能预览博客最初的模样了。

美化教程

其实绝大部分美化内容你都能在官方文档看到，这里只展示部分文档里没有的

渐变透明背景

效果预览

配置教程

由于涉及到css样式，所以我们需要新建个css文件，文件名随意

将以下代码复制到css文件里

1
2
3
4
5
6
7
8
9
10
11
#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
    background: var(--light_bg_color)
}

#aside-content .card-widget {
    background: var(--light_bg_color)
}

#web_bg {
    background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1))
}

为了避免因主题升级原因导致文件丢失，我们需要将文件存放在根目录\source\css（css目录是自己创建的）里

接着打开主题配置文件，找到inject>head配置项，将刚刚创建的文件进行引入

1
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

页脚透明渐变背景

效果预览

配置教程

当你对主题背景进行了修改后，你会发现页脚的纯蓝色背景与五彩斑斓的主题颜色不是很搭配，需要对其进行美化

只需要在刚刚创建的css文件里加入以下代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#footer {
    background: rgba(255,255,255,.15);
    color: #000;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    backdrop-filter: saturate(100%) blur(5px)
}

#footer::before {
    background: rgba(255,255,255,.15)
}

#footer #footer-wrap {
    color: var(--font-color)
}

#footer #footer-wrap a {
    color: var(--font-color)
}

标签外挂

效果预览

配置教程

官方提供了两种使用方法，这里提供比较简单的npm插件安装

安装插件：

1
npm install hexo-butterfly-tag-plugins-plus --save

由于hexo自带的markdown渲染插件hexo-renderer-marked与外挂标签语法的兼容性较差，建议将其替换成hexo-renderer-kramed

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

随后，打开根目录下的_config.yml配置文件，将以下内容添加进去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
  enable: true # 开关
  priority: 5 #过滤器优先权
  issues: false #issues标签依赖注入开关
  link:
    placeholder: /img/link.png #link_card标签默认的图标图片
  CDN:
    anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
    jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
    issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
    iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
    carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
    tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css

配置好后，你就可以在butterfly的任何地方使用标签外挂了，更多的内容请访问Akilar的基于Butterfly的外挂标签引入

自定义右键菜单

效果预览

配置教程

本博客右键菜单魔改内容根据DoraKika和张洪Heo两位大佬的教程进行修改，有兴趣的可以参考原作者的教程。

首先我们需要先新建个文件rightmenu.pug
...butterfly/layout/includes/dorakika/rightmenu.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#rightMenu
	.rightMenu-group.rightMenu-small
		a.rightMenu-item(href="javascript:window.history.back();")
			i.fa-solid.fa-arrow-left
		a.rightMenu-item(href="javascript:window.history.forward();")
			i.fa-solid.fa-arrow-right
		a.rightMenu-item(href="javascript:window.location.reload();")
			i.fa-solid.fa-arrow-rotate-right
		a.rightMenu-item(href="javascript:rmf.scrollToTop();")
			i.fa-solid.fa-arrow-up
	.rightMenu-group.rightMenu-line.hide#menu-text
		a.rightMenu-item(href="javascript:rmf.copySelect();")
			i.fa-solid.fa-copy
			span='复制内容'
	.rightMenu-group.rightMenu-line
		a.rightMenu-item(href="javascript:rmf.switchDarkMode();")
			i.fa-solid.fa-moon
			span='昼夜切换'
		a.rightMenu-item(href="javascript:rmf.switchReadMode();")
			i.fa-solid.fa-earth-asia
			span='阅读模式'

然后将pug文件引入（由于pug文件有严格的格式要求，请注意缩进）
themes/butterfly/layout/includes/layout.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
  body
    ...

    else
      include ./404.pug

    include ./rightside.pug
    !=partial('includes/third-party/search/index', {}, {cache: true})
+    !=partial('includes/dorakika/rightmenu',{}, {cache:true})
    include ./additional-js.pug

现在，已经将结构插入了，接下来要将css样式和触发脚本引入。
首先新建rightMenu.css和rightMenu.js文件，为了避免主题升级带来的麻烦，推荐将文件放到
根目录/source/images/cdn

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
/* rightMenu */
#rightMenu{
	display: none;
	position: fixed;
	width: 160px;
	height: fit-content;
	top: 10%;
	left: 10%;
	background-color: var(--card-bg);
	border: 1px solid var(--card-bg);
	border-radius: 12px;
	box-shadow: var(--card-box-shadow);
	z-index: 100;
}

#rightMenu:hover {
	border: 1px solid var(--pseudo-hover);
}

#rightMenu .rightMenu-group{
	padding: 7px 6px;
}
#rightMenu .rightMenu-group:not(:nth-last-child(1)){
	border-bottom: 1px dashed var(--dark-grey);
}
#rightMenu .rightMenu-group.rightMenu-small{
	display: flex;
	justify-content: space-between;
}
#rightMenu .rightMenu-group .rightMenu-item{
	height: 30px;
	line-height: 30px;
	border-radius: 8px;
	transition: 0.3s;
	color: var(--font-color);
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item{
	display: flex;
	height: 40px;
	line-height: 40px;
	padding: 0 8px;
	margin: 3px 0;
}
#rightMenu .rightMenu-group .rightMenu-item:hover{
	background-color: var(--pseudo-hover);
	color: var(--white);
}
#rightMenu .rightMenu-group .rightMenu-item i{
	display: inline-block;
	text-align: center;
	line-height: 30px;
	width: 30px;
	height: 30px;
	padding: 0 5px;
}
#rightMenu .rightMenu-group .rightMenu-item span{
	line-height: 30px;
}

#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item *{
	height: 40px;
	line-height: 40px;
}
.rightMenu-group.hide{
	display: none;
}
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
let rmf = {};
rmf.showRightMenu = function(isTrue, x=0, y=0){
    let $rightMenu = $('#rightMenu');
    $rightMenu.css('top',x+'px').css('left',y+'px');

    if(isTrue){
        $rightMenu.show();
    }else{
        $rightMenu.hide();
    }
}
rmf.switchDarkMode = function(){
    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)
};
rmf.switchReadMode = function(){
    const $body = document.body
    $body.classList.add('read-mode')
    const newEle = document.createElement('button')
    newEle.type = 'button'
    newEle.className = 'fas fa-sign-out-alt exit-readmode'
    $body.appendChild(newEle)

    function clickFn () {
        $body.classList.remove('read-mode')
        newEle.remove()
        newEle.removeEventListener('click', clickFn)
    }

    newEle.addEventListener('click', clickFn)
}

//复制选中文字
rmf.copySelect = function(){
    document.execCommand('Copy',false,null);
    btf.snackbarShow(GLOBAL_CONFIG.copy.success);
    //这里可以写点东西提示一下 已复制
}

//回到顶部
rmf.scrollToTop = function(){
    btf.scrollToDest(0, 500);
}

// 右键菜单事件
if(! (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
    window.oncontextmenu = function(event){
        $('.rightMenu-group.hide').hide();
        //如果有文字选中，则显示 文字选中相关的菜单项
        if(document.getSelection().toString()){
            $('#menu-text').show();
        }

        let pageX = event.clientX + 10;
        let pageY = event.clientY;
        let rmWidth = $('#rightMenu').width();
        let rmHeight = $('#rightMenu').height();
        if(pageX + rmWidth > window.innerWidth){
            pageX -= rmWidth+10;
        }
        if(pageY + rmHeight > window.innerHeight){
            pageY -= pageY + rmHeight - window.innerHeight;
        }



        rmf.showRightMenu(true, pageY, pageX);
        return false;
    };

    window.addEventListener('click',function(){rmf.showRightMenu(false);});
}

然后在_config.yml的inject中引入这两个文件。因为js中还引用了jQuery，所以也需要将其引入

1
- <script src="https://npm.elemecdn.com/jquery@3.2.1/dist/jquery.min.js"></script>

阅读量和评论数增加过渡动画

效果预览

配置教程

此处以twikoo_visitors阅读量举例，其他几个同理
在post-info.pug第78行 下面增加一行代码，注意缩进

1
2
3
4
5
when 'Twikoo'
  if theme.twikoo.visitor
    +pvBlock('','','')
      span#twikoo_visitors
+       i.fas.fa-regular.fa-spinner.fa-spin

大佬们