个人博客搭建-完善

发表于 | 分类于 | 阅读次数: |
字数统计: 3.9k | 阅读时长 19 分钟

前言:
给博客增加一些更高级的功能，例如分页、站内搜索、评论…

细节完善

分页

(1) 插件安装(按需安装)

1
2
3
npm install --save hexo-generator-index     # 首页分页配置
# npm install --save hexo-generator-archive # 归档分页配置
# npm install --save hexo-generator-tag     # 标签分页配置

(2) 站点配置文件：

1
2
3
4
5
6
7
8
9
10
11
index_generator:
  path: ''
  per_page: 5
  order_by: -date

#archive_generator:
#  per_page: 20
#  yearly: true
#  monthly: true
#tag_generator:
#  per_page: 10

(3) 清缓存hexo clean，重新生成hexo g，启动服务hexo s，查看效果

文章相关

详情请参考：https://tianbozhang.coding.me/personal-blog-custom.html

分页

(1) 插件安装(按需安装)

1
2
3
npm install --save hexo-generator-index     # 首页分页配置
# npm install --save hexo-generator-archive # 归档分页配置
# npm install --save hexo-generator-tag     # 标签分页配置

(2) 站点配置文件：

1
2
3
4
5
6
7
8
9
10
11
index_generator:
  path: ''
  per_page: 5
  order_by: -date

#archive_generator:
#  per_page: 20
#  yearly: true
#  monthly: true
#tag_generator:
#  per_page: 10

(3) 清缓存hexo clean，重新生成hexo g，启动服务hexo s，查看效果

博文置顶

(1) 修改hexo-generator-index插件
将node_modules/hexo-generator-index/lib/generator.js文件替换为：generator.js
(2)
在文章Front-matter中添加top值，数值越大文章越靠前，如：

1
2
3
4
5
6
7
8
---
title: Naruto 图集
categories: [图片]
tags: [picture,naruto]
date: 2016-09-02 14:36:04
keywords: picture,naruto
top: 10
---

头像圆形旋转

介绍一下实现头像圆形，鼠标经过旋转或者一直让旋转效果，主要是修改hexo目录下\themes\next\source\css\_common\components\sidebar\sidebar-author.styl文件
(1) 头像圆形修改
修改sidebar-author.styl文件中.site-author-imageCSS 样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /*头像圆形*/
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
}

(2) 鼠标经过旋转修改
修改sidebar-author.styl文件，添加 CSS 样式img:hover如下代码：

1
2
3
4
5
6
img:hover {
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

修改sidebar-author.styl文件中.site-author-imageCSS 样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
}

(3) 鼠标经过旋转修改
修改sidebar-author.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
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

修改sidebar-author.styl文件中.site-author-imageCSS 样式如下：

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
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画：animation:动画名称 动画播放时长单位秒或微秒
    动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
  -webkit-animation: play 3s linear infinite;
  -moz-animation: play 3s linear infinite;
  animation: play 3s linear infinite;

  /* 鼠标经过头像旋转360度
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;*/
}

鼠标经过停止头像旋转：修改sidebar-author.styl文件，添加 CSS 样式img:hover如下代码：

1
2
3
4
5
6
7
8
9
10
img:hover {
  /* 鼠标经过停止头像旋转 */
  -webkit-animation-play-state:paused;
  animation-play-state:paused;

  /* 鼠标经过头像旋转360度
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);*/
}

页面点击小红心

(1) 在/themes/next/source/js/src下新建文件clicklove.js，接着把该链接下的代码拷贝粘贴到clicklove.js文件中。
代码如下：

1
2
// 页面点击爱心效果
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

(2) 在\themes\next\layout\_layout.swig文件末尾添加：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

(3) 清缓存hexo clean，重新生成hexo g，启动服务hexo s检验效果

动态title崩溃欺骗

(1) \themes\next\source\js\src，新建custom-title.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--崩溃欺骗-->
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
	if (document.hidden) {
	   $('[rel="icon"]').attr('href', "/img/TEP.ico");
	   document.title = ' 页面崩溃啦 ~ ！';
	   clearTimeout(titleTime);
	}
	else {
	   $('[rel="icon"]').attr('href', "/favicon.ico");
	   document.title = ' 噫又好了~ ' + OriginTitile;
	   titleTime = setTimeout(function () {
	   document.title = OriginTitile;}, 2000);
	}
});

(2) 更改\themes\next\layout_layout.swig,在文件末尾添加：

1
2
<!--动态title崩溃欺骗,卖萌专用-->
<script type="text/javascript" src="/js/src/custom-title.js"></script>

(3) 清缓存hexo clean，重新生成hexo g，启动服务hexo s检验效果

High一下

(1) header位置更改themes\next\layout_custom\header.swig,在文件末尾添加：
sidebar位置更改themes\next\layout_custom\sidebar.swig
(2) 添加以下内容：

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<li> <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() {
	function c() {
		var e = document.createElement("link");
		e.setAttribute("type", "text/css");
		e.setAttribute("rel", "stylesheet");
		e.setAttribute("href", f);
		e.setAttribute("class", l);
		document.body.appendChild(e)
	}
 
	function h() {
		var e = document.getElementsByClassName(l);
		for (var t = 0; t < e.length; t++) {
			document.body.removeChild(e[t])
		}
	}
 
	function p() {
		var e = document.createElement("div");
		e.setAttribute("class", a);
		document.body.appendChild(e);
		setTimeout(function() {
			document.body.removeChild(e)
		}, 100)
	}
 
	function d(e) {
		return {
			height : e.offsetHeight,
			width : e.offsetWidth
		}
	}
 
	function v(i) {
		var s = d(i);
		return s.height > e && s.height < n && s.width > t && s.width < r
	}
 
	function m(e) {
		var t = e;
		var n = 0;
		while (!!t) {
			n += t.offsetTop;
			t = t.offsetParent
		}
		return n
	}
 
	function g() {
		var e = document.documentElement;
		if (!!window.innerWidth) {
			return window.innerHeight
		} else if (e && !isNaN(e.clientHeight)) {
			return e.clientHeight
		}
		return 0
	}
 
	function y() {
		if (window.pageYOffset) {
			return window.pageYOffset
		}
		return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
	}
 
	function E(e) {
		var t = m(e);
		return t >= w && t <= b + w
	}
 
	function S() {
		var e = document.createElement("audio");
		e.setAttribute("class", l);
		e.src = i;
		e.loop = false;
		e.addEventListener("canplay", function() {
			setTimeout(function() {
				x(k)
			}, 500);
			setTimeout(function() {
				N();
				p();
				for (var e = 0; e < O.length; e++) {
					T(O[e])
				}
			}, 15500)
		}, true);
		e.addEventListener("ended", function() {
			N();
			h()
		}, true);
		e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
		document.body.appendChild(e);
		e.play()
	}
 
	function x(e) {
		e.className += " " + s + " " + o
	}
 
	function T(e) {
		e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
	}
 
	function N() {
		var e = document.getElementsByClassName(s);
		var t = new RegExp("\\b" + s + "\\b");
		for (var n = 0; n < e.length; ) {
			e[n].className = e[n].className.replace(t, "")
		}
	}
 
	var e = 30;
	var t = 30;
	var n = 350;
	var r = 350;
	var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
	var s = "mw-harlem_shake_me";
	var o = "im_first";
	var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
	var a = "mw-strobe_light";
	var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
	var l = "mw_added_css";
	var b = g();
	var w = y();
	var C = document.getElementsByTagName("*");
	var k = null;
	for (var L = 0; L < C.length; L++) {
		var A = C[L];
		if (v(A)) {
			if (E(A)) {
				k = A;
				break
			}
		}
	}
	if (A === null) {
		console.warn("Could not find a node of the right size. Please try a different page.");
		return
	}
	c();
	S();
	var O = [];
	for (var L = 0; L < C.length; L++) {
		var A = C[L];
		if (v(A)) {
			O.push(A)
		}
	}
})()    '>High一下</a> </li>

(3) 代码块的内容不需要再做任何修改,清缓存hexo clean，重新生成hexo g，启动服务hexo s查看效果

底部增加运行时间

(1) 修改themes/next/layout/_partials/footer.swig，增加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 在网页底部添加网站运行时间 -->
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("07/21/2018 00:00:00");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "Run for "+dnum+" Days ";
        document.getElementById("times").innerHTML = hnum + " Hours " + mnum + " m " + snum + " s";
    }
setInterval("createtime()",250);
</script>

(2) 运行效果：
底部增加运行时间

当前所在菜单下划线显示

(1) 打开themes\next\layout\ _partials目录下的header.swig文件
(2) 在底部添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
	window.onload = function(){
		var path = 'https://malizhi.cn'; //这里要改成你博客的地址
		var localhostItem = String(window.location).split(path)[1];
		var LiNode = document.querySelectorAll('#menu > li > a')
		
		for(var i = 0; i< LiNode.length;i++){
			var item = String(LiNode[i].href).split(path)[1];
			if(item == localhostItem && item != undefined){
				LiNode[i].setAttribute('style','border-bottom:1px solid black');
			}
		}
	};

</script>

(3) hexo clean && hexo g && hexo s后完成效果：
当前所在菜单下划线显示

底部跳动图标实现

(1) 在next\layout_partials下的footer.swig文件中，在你所需要调动的图标所对应的span中增加对应的ID
(2) 在主题的css文件next\source\css\_variables\custom.styl ，增加以下代码即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//底部爱心小图标跳动
keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}

//图标所对应的span中的ID
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 113);
}

(3) hexo clean && hexo g && hexo s后完成效果：
底部跳动图标实现

第三方服务集成

站内搜索

NexT 支持集成 Swiftype、 微搜索、Local Search 和 Algolia。在这里我使用的是Local Search，下面将介绍如何使用:
(1) 添加百度/谷歌/本地 自定义站点内容搜索，安装hexo-generator-searchdb，在站点的根目录下执行以下命令：

1
npm install hexo-generator-searchdb --save

(2) 编辑站点配置文件_config.yml，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

(3) 编辑主题配置文件_config.yml，启用本地搜索功能：

1
2
3
# Local search
local_search:
  enable: true

注：其他搜索方式请查看站内搜索

(4) 清缓存hexo clean，重新生成hexo g，启动服务hexo s，效果如下：
站内搜索

数据统计分析

NexT 支持集成 不蒜子统计、百度统计等多种数据统计方式。此处使用不蒜子统计，下面将介绍如何使用:

此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后

(1) 全局配置：编辑主题配置文件_config.yml中的busuanzi_count的配置项。
当enable: true时，代表开启全局开关。
若 site_uv 、site_pv 、 page_pv 的值均为 false 时，不蒜子仅作记录而不会在页面上显示
(2) 站点UV配置：当site_uv: true时，代表在页面底部显示站点的UV值。site_uv_header和site_uv_footer为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的font-awesome。如下：

1
2
3
4
# 效果：本站访客数12345人次
site_uv: true
site_uv_header: <i class="fa fa-user"></i> 本站访客数
site_uv_footer: 人次

(3) 站点PV配置：当site_pv: true时，代表在页面底部显示站点的PV值。site_pv_header和site_pv_footer为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的font-awesome。如下：

1
2
3
4
# 效果：本站总访问量12345次
site_pv: true
site_pv_header: <i class="fa fa-eye"></i> 本站总访问量
site_pv_footer: 次

注：其他统计方式请查看数据统计分析

(4) 清缓存hexo clean，重新生成hexo g，启动服务hexo s，效果如下：
数据统计分析

(5) 不蒜子统计不生效，浏览器控制台报错
原因：由于 busuanzi(不蒜子) 的域名更新，导致了使用 Hexo Next 主题时统计数据失效
解决方法：

  • 到 hexo 的 themes 文件夹下, 打开\themes\next\layout_third-party\analytics\busuanzi-counter.swig文件
  • 将src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"修改为src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"

内容分享服务

NexT 支持集成 jiathis、baidushare 和 AddThis内容分享服务。在这里我使用的是baidushare，下面将介绍如何使用:
(1) 编辑站点配置文件_config.yml，新增以下内容到任意位置：

1
baidushare: true #百度分享功能

(2) 编辑主题配置文件_config.yml，设置其展现方式：

1
2
baidushare: 
  type: button #百度分享展示的方式button|slide

注：其他内容分享方式请查看内容分享服务

(4) 清缓存hexo clean，重新生成hexo g，启动服务hexo s，效果如下：
内容分享服务

文章阅读次数统计

(1) 在LeanCloud进行对应的配置
详细配置参考文章：配置LeanCloud
(2) 注Class名称必须为Counter

Gitment评论

(1) Gitment评论搭建参考：https://sjq597.github.io/2018/05/18/Hexo-使用Gitment评论功能/
(2) 踩过的坑：

  • Error: Validation Failed
    原因：issue的Label有长度限制,对于中文博客来说,中文标题很容易就超过长度限制
    方案：修改themes/next/layout/_third-party/comments/gitment.swig中的id部分如下:

    1
    2
    3
    4
    var gitment = new {{CommentsClass}}({
         id: '{{ page.date }}',
         owner: '{{ theme.gitment.github_user }}',
         repo: '{{ theme.gitment.github_repo }}',

  • object ProgressEvent
    原因：作者的default.css和gitment.browser.js域名用的别人的，现在过期了
    方案：修改themes/next/layout/_third-party/comments/gitment.swig中对应部分如下:

    1
    2
    3
    4
    <!-- <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css"> -->
    <!-- <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/default.css">
    <script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/gitment.browser.js"></script>

注释部分是原来的地址，过期了的，下面的是引用的其他有效地址
(3) 汉化：
修改themes/next/layout/_third-party/comments/gitment.swig中对应部分如下:

1
2
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>

(4) 清缓存hexo clean，重新生成hexo g，部署hexo d，然后访问username.github.io查看效果
(5) 每篇文章都需要登录GitHub账号然后点击初始化

来必力评论

(1) 登陆来必力获取你的livere_uid

没有账号需要注册一个
注册完点击安装，然后填上博客的相应信息，如图data-uid就是所需要的livere_uid
来必力配置
(2) 编辑主题配置文件， 编辑livere_uid字段，设置如下:

1
livere_uid: #your livere_uid

参考

(1) https://cloud.tencent.com/developer/article/1482021
(2) https://tianbozhang.coding.me/personal-blog-custom.html
(3) https://ehlxr.me/categories/Hexo/
(4) https://malizhi.cn/nextTutorial/#more

—— 感谢您的阅读 ( ﾟ∀ﾟ) 有什么疑问可以在下方留言哦 ——
坚持原创技术分享，您的支持将鼓励我继续创作！