个人博客，自定义修改

发表于 | 阅读次数:
字数统计: 16k | 阅读时长约 0:16 分钟

前言：

静态网站建立之后我们需要对其做些细节修改

此博文包括文章、整站的一些细节修改，并增加一些统计功能

站点细节

大部分内容都能从官网找到，这里做个备忘录

头像设置

参考Next官网

主题配置文件

按描述路径放置图片，图片格式不重要，但必须为有效图片

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/avatar.jpg

此logo为页面在浏览器标签上显示图片

命名为.ico或.png文件
存放于sources\images\路径

  • 主题配置：
1
2
3
4
5
favicon:

  small: /images/favicon-16x16.ico

  medium: /images/favicon-32x32.png

设置阅读全文

参考官网)

分页

插件安装

1
2
3
npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

站点配置文件

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

archive_generator:
per_page: 20
yearly: true
monthly: true

tag_generator:
per_page: 10

社会化链接

这里只需要替换自己想要的图标名称即可

  • 主题配置
    social标签，打开或添加对应项，替换链接

文本的居中引用

以下三种任选其一，直接在md文件插入

1
2
3
1. <blockquote class="blockquote-center">blah blah blah</blockquote>
2. {% centerquote %}blah blah blah{% endcenterquote %}
3. {% cq %} blah blah blah {% endcq %}

背景动画

  • 默认的无需插件安装 ：
    canvas_nest 与three_waves 二选一

隐藏强力驱动

直接修改配置文件

1
2
3
4
footer:
  powered: false
  theme:
  enable: false

网页底部图标

图标名称

主题配置：footer: icon： xxx
修改themes\next\layout_partials\footer.swig

footer.icon关键字

图标放大：

1
2
3
4
5
6
#原图：
<i class="fa fa-{{ theme.footer.icon }}"></i>
#1倍：
<i class="fa fa-{{ theme.footer.icon }} fa-lg"></i>
#2倍：
<i class="fa fa-{{ theme.footer.icon }} fa-2x"></i>

文章相关

文章版权声明

  • 主题配置
1
2
post_copyright:
	enable: true
  • 站点配置

url:http://yoururl.com #添加自己的url

最终会生成当前文章的完整url

文章底部添加’The End’

\themes\next\layout_macro\post.swig
post-body div
post.content

关键字 结束后

添加

1
<div style="text-align:center;color: #ccc;font-size:14px;">—— The End ——</div>

如下：

1
2
3
4
5
6
7
8
9
10
11
12
<div class="post-body...>
#省略
{% if post.type === 'picture' %}
<a href="{{ url_for(post.path) }}">{{ post.content }}</a>
{% else %}
{{ post.content }}
<div style="text-align:center;color: #ccc;font-size:18px;">—— The End ——</div>
#省略
{{ post.content }}
<div style="text-align:center;color: #ccc;font-size:18px;">—— The End ——</div>
{% endif  %}
</div>

添加位置不对容易出现 在首页

文章底部标签‘#’修改

\themes\next\layout_macro\post.swig

post-tags关键字：

1
2
3
4
5
6
7
8
<footer class="post-footer">
      {% if post.tags and post.tags.length and not is_index %}
        <div class="post-tags">
          {% for tag in post.tags %}
            <a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>
          {% endfor %}
        </div>
      {% endif %}

rel="tag">#
替换为：

1
rel="tag"><i class="fa fa-tag"> </i>

文章小图标

主题配置 定义：
post #控制文章图标显示
icon: false

需要处理图标的找到对应图标，添加类似下面的代码来控制图标的显示：

<% if theme.xxx.icon %>
<% endif %>

xxx为当前元素标识
修改文件：\themes\next\layout_macro\post.swig
找到 icon字符串

字数统计与阅读时间图标

post_wordcount 关键字

1
2
3
4
5
6
7
8
9
{% raw %}
  {% if theme.post_wordcount.wordcount %}
     #省略
     <span class="post-meta-item-icon"> #这个是图标
        <i class="fa fa-file-word-o"></i>
     </span>
     #省略
   {% endif %}
{% endraw %}

改为：

1
2
3
4
5
6
7
8
9
10
{% raw %}
{% if theme.post_wordcount.wordcount %}
  #省略
  {% if theme.post_wordcount.icon %}#新增图标控制
	 <span class="post-meta-item-icon">#这个是图标
		<i class="fa fa-file-word-o"></i>
	 </span>
  {% endif %}
  #省略
{% endraw %}

min2read 关键字

1
2
3
4
5
6
7
8
{% raw %}
{% if theme.post_wordcount.min2read %}
   <span class="post-meta-item-icon"> #这个是图标
   <i class="fa fa-clock-o"></i>
    </span>
   	#省略
{% endif %}
{% endraw %}

改为：

1
2
3
4
5
6
7
8
9
{% raw %}
{% if theme.post_wordcount.min2read %}
	{% if theme.post_wordcount.icon %}#新增图标控制
	  <span class="post-meta-item-icon">
	  <i class="fa fa-clock-o"></i>
	</span>
{% endif %}
#省略
{% endraw %}

发表、更新等时间图标

created_at

1
2
3
4
5
6
7
8
9
{% raw %}
 <span class="post-time">
   {% if theme.post_meta.created_at %}
    <span class="post-meta-item-icon">
       <i class="fa fa-calendar-o"></i>
    </span>
   #省略
{% endif %}
{% endraw %}

改为：

1
2
3
4
5
6
7
8
9
10
11
12
{% raw %}
{% if theme.post_meta.created_at %}
  {% if theme.post_meta.icon %}#新增图标控制

    <span class="post-meta-item-icon">
        <i class="fa fa-calendar-o"></i>
    </span>

 {% endif %}
 #省略
{% endif %}
{% endraw %}

updated_at

1
2
3
4
5
6
7
8
{% raw %}
{% if theme.post_meta.updated_at %}
 <span class="post-meta-item-icon">#图标
    <i class="fa fa-calendar-check-o"></i>
 </span>
     #省略
{% endif %}
{% endraw %}

改为：

1
2
3
4
5
6
7
8
9
10
{% raw %}
 {% if theme.post_meta.updated_at %}
	{% if theme.post_meta.icon %}#新增图标控制
        <span class="post-meta-item-icon">
        <i class="fa fa-calendar-check-o"></i>
       </span>
	{% endif %}
	#省略
{% endif %}
{% endraw %}

文章评论计数图标

disqus.count关键字 ，主题配置设置为flase，最简单

或者按上述方法添加代码

1
2
3
4
5
6
7
8
9
10
11
{% raw %}
{% elseif theme.disqus.enable and theme.disqus.count %}
  <span class="post-comments-count">

{% if theme.disqus.icon %}#新增图标控制
    <span class="post-meta-divider">|</span>
     <span class="post-meta-item-icon">
     <i class="fa fa-comment-o"></i>
     </span>
{% endif %}
{% endraw %}

阅读时长

min2read 关键字

  • 增加时间单位

语言文件

\themes\next\languagues\zh-Hans

增加 min2read_unit: 分钟

  • 增加下面代码，去除多余符号
1
<span class="post-meta-item-text">{{ __('post.min2read_unit') }}</span>

post文件修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% raw %}
{% if theme.post_wordcount.min2read %}
#省略
<span class="post-meta-item-text">{{ ('post.min2read_unit') }}</span>
{% if theme.post_wordcount.item_text %}

 <span class="post-meta-item-text">{{ __('post.min2read') }} &asymp;   </span>#待去除符号
{% endif %}

 <span title="{{ __('post.min2read') }}">{{ min2read(post.content) }}
 </span>
   #待加入新代码
{% endif %}
{% endraw %}

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% raw %}
{% if theme.post_wordcount.min2read %}
#省略
{% if theme.post_wordcount.item_text %}
   <span class="post-meta-item-text">{{ __('post.min2read') }}</span>#去除符号
 {% endif %}
  <span title="{{ __('post.min2read') }}">
    {{ min2read(post.content) }}
  </span>

<span class="post-meta-item-text">{{ __('post.min2read_unit') }}</span>#新加入的代码

{% endif %}
{% endraw %}

上述几处修改效果：

相关统计

文章字数与阅读时长

  • 安装 wordcount 插件

    npm install hexo-wordcount --save

  • 主题配置

1
2
3
4
5
6
7
post_wordcount:
  item_text: true #整体
  wordcount: true # 字数
  min2read: true # 时间
  totalcount: false #阅读统计
  separated_meta: true #分割元素控制
  icon: false #新增项，控制图标显示

文章阅读次数

我们这里可以使用 LeanCloud

需要提供 LeanCloud 的 App ID 及 App Key

功能启用

  1. 注册

  • 『设置』菜单 进入 『应用 Key』 页面

  • 拿到app_id及app_key。注意保密

  • 为保证安全 ，进入 『安全中心』 页面 把域名添加到 『Web 安全域名』 内

  1. 主题配置
1
2
3
4
leancloud_visitors
  enable: true
  app_id: xxxxxxxxxxxxxxxxxxxxxxxxxx
  app_key: xxxxxxxxxxxxxxxxxxxxxxxxxx

此时， 大部分步骤已经完成，但是 阅读次数后面 啥也没有是什么鬼？
继续看

  1. 官网配置

LeanCloud 官网需要我们增加一些内容，才能正常使用 阅读次数统计功能

一图胜千言

注 Class 名称必须为 Counter ，权限以保证安全为主

最终，观察一下你的网站，是不是阅读次数上出现了 0 ？

为 0 是因为 统计初始化时，还没有数据

扩展：自定义修改文字展现

比如我想修改『阅读数』为 『热度』

themes\next\layout_macro\post.swig 文件

1
2
3
<span class="leancloud-visitors-count"></span>
/span>
#待新增符号

新增符号：

1
2
 <span class="leancloud-visitors-count"></span>
<span>℃</>#新增符号

zh_Hans.yml

visitors: 热度 #原词修改为“热度”

站点访问

推荐使用高版本，毕竟相对来说配置简单
不蒜子统计uv 与pv：
主题配置文件

修改:

1
2
busuanzi_count:
 enable :true

以下配置：true 为开启，false 为关闭 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
# count values only if the other configs are false
  enable: true
# custom uv span for the whole site  全站访问人数
  site_uv: true
  site_uv_header: <i class="fa fa-user">访问人数</i>
  site_uv_footer: 人
# custom pv span for the whole site 全站访问次数
 site_pv: true
  site_pv_header: <i class="fa fa-eye">访问次数</i>
  site_pv_footer: 次
# custom pv span for one page only 每篇文章访问次数
  page_pv: false
  page_pv_header: <i class="fa fa-file-o">本文总阅读量</i>
  page_pv_footer: 次

去除图标：
删除即可

上述几处效果：

其他及一些好玩的

Frok Me On GitHub

  • 选定代码GitHub Ribbons
  • 添加
    themes\next\layout_layout.swig，添加到body内

标红处替换为你自己的github地址

头像旋转

效果参考

方案参考： next\source\css\main.styl

为方便主题更新，代码改动比较大的原则上尽量使用自定义文件导入的方式。

优化实现方案：

  1. 自定义css 文件命名为custom-sidebar.styl

    完整路径：themes\next\source\css_custom\custom-sidebar.styl

  2. 引入自定义css，原文件主体代码不改动

    themes\next\source\css_common\components\sidebar\sidebar-author.styl 模板末尾

@import "../../../_custom/custom-sidebar";

再加个放大效果
custom-sidebar.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
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
.site-author-image {


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

 /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1;

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

img:hover {
/* 鼠标经过停止头像旋转
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

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

/* 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);
  }
}
.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

页面自定义样式

参考

添加到themes\next\source\css_custom.styl

footer与文章内容间距

根据：source\css_common\outline\outline.styl

1
2
3
// Main Section
// --------------------------------------------------
.main { padding-bottom: $footer-height + $gap-between-main-and-footer; }

修改：

\themes\next\source\css_variables\custom.styl样式文件

$gap-between-main-and-footer = 40px

\themes\next\source\css_custom\custom.styl

添加代码：

1
2
3
4
5
//页脚
.footer{
 margin-top: 20px;
 margin-bottom: 10px;
}

设置动态title崩溃欺骗

\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);
	}
});

更改 \themes\next\layout_layout.swig 。在 </body 之前添加：

1
2
<!--卖萌-->
<script type="text/javascript" src="/js/src/custom/custom-title.js"></script>

High一下

注意：主题升级文件路径有变化，代码不变
来源：zipperary，感谢大神

修改原则：减少源码修改，尽量使用自定义文件方式

header位置可添加到themes\next\layout_custom\header.swig

sidebar位置可添加到themes\next\layout_custom\sidebar.swig

源码：

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>
完结撒花