使用Hexo搭建博客之优化篇

简介

  • HexoA fast, simple & powerful blog framework,即一个快速、简单且强大的博客框架
  • Hexo的简单之处在于你可以用30分钟,甚至更短的时间就可以生成一个属于你自己的博客。
  • Hexo的强大之处在于你对博客界面细节的调整,有可能用上1天的时间。
  • 在优化篇中,我着重介绍如何优化博客及个性化博客。

主题配置文件

  • 使用Hexo搭建博客之基础篇中已经讲解了_data目录的作用,接下来就具体讲解一下NexT主题的配置文件。
  • 由于可定制化的配置项甚多,故此只介绍部分配置项:
1
vim source/_data/next.yml
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
# Hexo's Version: 3.7.1
# NexT's Version: 6.3.0

# 是否覆盖NexT主题的默认配置:
## false: 合并默认配置,无需包含所有的配置项
## true: 覆盖默认配置, 必须包含所有的配置项
override: true

# 启用缓存文件生成, 在NexT(v6.0.0)中引入
cache:
enable: true

# 重新定义自定义配置文件的路径, 若已经注释, 使用默认的自定义文件路径, 在NexT(v6.0.2)中引入
custom_file_path:
# Default path: source/css/_custom/custom.styl
styles: source/_data/styles.styl
# Default path: source/css/_variables/custom.styl
variables: source/_data/variables.styl

# 自定义站点图标, 默认路径指向themes/next/source/images/, 可自定义为hexo-site/source/images/目录
favicon:
small: images/favicon.png
medium: images/favicon.png
apple_touch_icon: images/favicon.png
safari_pinned_tab: images/favicon.svg

# 是否启用RSS链接图标:
false: 不启用
rss: /atom.xml

# 配置站点页脚信息
footer:
## 指定站点的起始年, 若未定义, 则为当前年份
since: 2017

## 配置年份与版权信息(copyright)之间的图标
icon:
### 可选值为FontAwesome字体图标中的名称
name: heartbeat
### 设置图标为动态的
animated: true
### 使用Hex代码改变图标颜色
color: "#808080"
## 版权信息
copyright: YuXiao

## 是否显示Hexo链接
powered:
enable: false
### 是否显示版本号
version: false
## 是否显示主题链接
theme:
enable: false
### 是否显示版本号
version: false

# 启用canonical, 规范链接, 有利于SEO优化, 必须设置了hexo-site/_config.yml文件中的url才能设置为true
canonical: true

# 更改站点的标题层次结构, 有利于SEO优化
seo: true

# 是否添加副标题到索引页面
index_with_subtitle: true

# 配置导航栏, 格式为: Key: LINK || ICO
## Key: 导航项的名称, 会根据此菜单的名称去对应的翻译语言中去找
## LINK: 导航项的链接, 即跳转的页面
## ICO: 导航项的图标, 即FontAwesome字体图标的名称
menu:
home: / || home
archives: /archives/ || archive
tags: /tags/ || tags
about: /about/ || user
messages: /messages/ || comments

# 导航栏的相关配置
menu_settings:
## 是否启用导航栏的图标
icons: true
badges: false

# 设置主题样式, 目前Next支持4种主题样式
scheme: Mist

# 侧边栏中是否显示博文/标签的统计个数
site_state: true

# 配置社交链接, 格式为: Key: LINK || ICO
## Key: 社交链接的名称
## LINK: 社交链接的链接, 即跳转的页面
## ICO: 社交链接的图标, 即FontAwesome字体图标的名称
social:
GitHub: https://github.com/YuXiaoCoder || github
QQ: http://wpa.qq.com/msgrd?v=3&uin=1026840746&site=qq&menu=yes || qq

# 社交链接的图标配置
social_icons:
## 是否启用社交链接的图标
enable: true
## 是否仅显示图标
icons_only: false
transition: false
## 是否对链接加密, 如需加密按要求重新设置LINK的值
exturl: false

# 设置友情链接
links_icon: link
links_title: 友情链接
links_layout: block
links:
Xiao's Blog: https://www.xiaocoder.com

# 侧边栏头像
avatar:
## 头像地址
url: /images/favicon.png
## 是否为圆形, 设置为false, 则为方形
rounded: true
## 设置头像的不透明度, 值为[0, 1]
opacity: 0.7
## 光标移至头像, 头像是否旋转
rotated: true

# 配置侧边栏
sidebar:
## 侧边栏的位置, 仅主题样式(Pisces | Gemini)可设置为right, 其他主题样式仅能是left
position: left

## 侧边栏显示的时机, 仅主题样式(Muse | Mist)可设置, 在文章打开时自动显示
display: hide

## 侧边栏偏离导航栏的像素, 仅主题样式(Pisces | Gemini)可设置
offset: 12

## 在侧边栏中回到导航栏, 仅主题样式(Pisces | Gemini)可设置
b2t: false

## 显示百分比标签
scrollpercent: true

## 在窄视图上显示侧边栏, 仅主题样式(Muse | Mist)可设置
onmobile: true

# 自动将页面滚动至<!-- more -->标签之下
scroll_to_more: true

# 自动在cookie中保存文章滚动的位置
save_scroll: true

# 自动摘录文章中的描述
excerpt_description: true

# 文章的元数据
post_meta:
## 标题
item_text: true
## 创建时间
created_at: true
## 更新时间
updated_at:
enabled: true
another_day: true
categories: true

# 统计文章字数
## 需要插件: npm install --no-optional --save hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275

# 配置代码块
codeblock:
## 代码块的边框, 默认为1
border_radius: 1
## 是否添加复制按钮
copy_button:
enable: true
### 是否显示复制结果
show_result: true

# 打赏信息
## 打赏信息的文字
reward_comment: 有你就有世界,感谢有你,昕!
## 微信二维码
wechatpay: /images/wechat-reward-image.png
## 支付宝二维码
alipay: /images/alipay-reward-image.png

# 在文章上声明许可信息
post_copyright:
enable: true
license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

# 减少在较窄设备上填充/边距缩进
mobile_layout_economy: true

# 自定义代码块主题
highlight_theme: night eighties

# 在归档页面启用祝贺信息
cheers_enabled: false

# 汉化支持
## 依赖项: https://github.com/theme-next/theme-next-han
han: true

# 启用自动推送百度, 有利于SEO优化
baidu_push: true

# 本地搜索
## 依赖项: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
trigger: auto
top_n_per_article: 1
unescape: true

# 页面书签支持
## 依赖项: https://github.com/theme-next/theme-next-bookmark
bookmark:
enable: true
save: auto

# 图片预览功能
## 依赖项: https://github.com/theme-next/theme-next-fancybox3q
fancybox: true

# 资源懒加载, 在NexT(v6.0.0)中引入
## 依赖项: https://github.com/theme-next/theme-next-jquery-lazyload
lazyload: true

# 页面加载时, 顶部的进度条
## 依赖项: https://github.com/theme-next/theme-next-pace
pace: true
pace_theme: pace-theme-bounce

# Canvas动画
## 依赖项: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: true

# 自定义Script地址
vendors:
## 书签支持, 使用CDN加速
bookmark: https://cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@latest/bookmark.min.js

其他配置项

为网页标题添加崩溃欺骗搞怪特效

  • 创建JS文件:
1
vim themes/next/source/js/src/crash_cheat.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/images/favicon.png");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/images/favicon.png");
document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
  • 在布局layout文件中引用JS文件:
1
vim themes/next/layout/_layout.swig
1
2
3
<body>
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>
</body>

为博客添加点击爱心效果

  • 创建JS文件:
1
vim themes/next/source/js/src/click_love.js
1
!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);q
  • 在布局layout文件中引用JS文件:
1
vim themes/next/layout/_layout.swig
1
2
3
<body>
<script type="text/javascript" src="/js/src/click_love.js"></script>
</body>

为博客添加点击爆炸效果

  • 创建JS文件:
1
vim themes/next/source/js/src/fireworks.js
1
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
  • 在布局layout文件中引用JS文件:
1
vim themes/next/layout/_layout.swig
1
2
3
<body>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
</body>

为站点添加RSS

  • 安装所依赖的插件:
1
npm install --no-optional --save hexo-generator-feed
  • 配置source/_data/next.yml文件:
1
vim source/_data/next.yml
1
rss: /atom.xml

配置文章底部标签

  • 文章底部默认是# 标签名, 此处修改为FontAwesome字体图标:
1
vim themes/next/layout/_macro/post.swig
1
2
3
4
5
6
7
8
9
<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"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}
</footer>

添加自定义样式文件

  • _data目录添加自定义样式文件:
1
vim source/_data/styles.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
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
// Custom styles.

// 首页文章阴影样式
.post {
margin-top: 50px;
margin-bottom: 50px;
padding: 25px;
-webkit-box-shadow: 0 0 14px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 14px rgba(202, 203, 204, .5);
}

// 侧栏按钮样式
.sidebar-toggle {
background: #649ab6;
}
.back-to-top {
background: #649ab6;
}

// 首页阅读全文样式
.post-button {
margin-top: 30px;
text-align: center;
}
.post-button .btn {
color: #fff;
font-size: 15px;
background: #686868;
border-radius: 16px;
line-height: 2;
margin: 0 4px 8px 4px;
padding: 0 20px;
}
.post-button a{
border-bottom: 1px solid #666;
}
.post-button a:hover {
color: #7784ba;
}

// 文章目录样式
.post-toc .nav .active>a {
color: #4f7e96;
}

.post-toc ol a:hover {
color: #7784ba;
}

.sidebar-nav .sidebar-nav-active:hover {
color: #37596c;
}

// 文章标题
a {
border-bottom: none;
}

.post-nav {
border-top: 1px solid #58B2DC;
}

.posts-expand .post-tags {
text-align: center;
}

.posts-expand .post-tags a {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
font-family: 'Comic Sans MS', sans-serif;
transition: 0.2s ease-out;
}

.posts-expand .post-tags a:hover {
background-color: #58B2DC;
color: #f5f5f5;
}

.posts-expand .post-title:hover {
border-left: #7DB9DE 20px solid;
padding-left: 15px;
cursor: pointer;
transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;
}

// 文章中图片居中
.post-body img {
margin: 0 auto;
}

// 鼠标样式
* {
cursor: url("http://olxczlg18.bkt.clouddn.com/Aero_arrow.cur"),auto!important;
}

:active {
cursor: url("http://olxczlg18.bkt.clouddn.com/Aero_Working.cur"),auto!important
}

// 页脚居中显示
.footer-inner, .post-spread {
text-align: center;
}
  • 配置NexT主题使用此样式文件:
1
vim source/_data/next.yml
1
2
3
custom_file_path:
# Default path: source/css/_custom/custom.styl
styles: source/_data/styles.styl

添加自定义变量文件

  • _data目录添加自定义变量文件:
1
vim source/_data/variables.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 修改成你期望的宽度
$content-desktop = 800px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 1000px

// 链接颜色
$link-blue = #6495ED

// 鼠标悬停后颜色
$link-hover-blue = #0477AB

// 用``围出的代码块字体颜色
$code-foreground = #DD0055

// 用``围出的代码块背景颜色
$code-background = #EEE

// Global link color.
$link-color = $link-blue
$link-hover-color = $link-hover-blue
$link-decoration-color = $gray-lighter
$link-decoration-hover-color = $link-hover-blue
  • 配置NexT主题使用此样式文件:
1
vim source/_data/next.yml
1
2
3
custom_file_path:
# Default path: source/css/_variables/custom.styl
variables: source/_data/variables.styl

站点底部添加访客量和访问量

  • 由于NexT主题已集成了不蒜子统计,其他主题请参照官网指导
1
vim source/_data/next.yml
1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: false
post_views_icon: eye

为每篇文章添加阅读次数

  • 虽然不蒜子也可以统计单篇博文的阅读量,但是有两个缺点:

    • 无法在首页查看博文的阅读量。
    • 无法管理相关博文的阅读量。
  • 故在此,使用LeanCloud来扩展此功能,此处需要注册并创建数据库,数据库名称为Counter

  • 注册LeanCloud,允许使用Github绑定登录,创建数据库:
1
登录账号 ---> 进入控制台 ---> 创建新应用 ---> 点击存储 ---> 新建 Class ---> Counter
  • 获取应用的IDKey
1
登录账号 ---> 进入控制台 ---> 点击应用 ---> 点击设置 ---> 应用 Key ---> 记录 ID 和 Key
  • 由于NexT主题已集成,直接修改配置文件即可:
1
vim source/_data/next.yml
1
2
3
4
5
6
leancloud_visitors:
enable: true
app_id: <<app_id>>
app_key: <<app_key>>
security: false
betterPerformance: true
  • 在本地预览时,无法显示阅读次数,部署到服务器即可正常显示了。

为博客添加Valine极简评论

  • 此处依旧是使用LeanCloud来扩展此功能,需要应用的IDKey
1
登录账号 ---> 进入控制台 ---> 点击应用 ---> 点击设置 ---> 应用 Key ---> 记录 ID 和 Key
  • 由于NexT主题已集成Valine,直接修改配置文件即可:
1
vim source/_data/next.yml
1
2
3
4
5
6
7
8
9
10
valine:
enable: true
appid: <<app_id>>
appkey: <<app_key>>
notify: false
verify: false
placeholder: 'ヾノ≧∀≦)o来啊,快活啊!'
avatar: retro # gravatar style
guest_info: nick,mail,link
pageSize: 10

在站点右上角添加GitHub

  • 由于NexT主题已集成此功能,直接修改配置文件即可:
1
vim source/_data/next.yml
1
github_banner: https://github.com/YuXiaoCoder || Follow me on GitHub

SEO优化

  • 在这个搜索引擎至上的年代,更好的被搜索引擎收录成为必不可少的一步。

生成SiteMap文件

  • 安装所依赖的插件:
1
2
npm install --no-optional --save hexo-generator-sitemap
npm install --no-optional --save hexo-generator-baidu-sitemap
  • 一个用于生成传统的SiteMap文件,一个用于生成百度专有的SiteMap文件。

  • 配置_config.yml文件:

1
2
3
4
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
  • 重启生成静态文件,即可发现SiteMap文件已经生成了,本站的站点地图https://www.xiaocoder.com/sitemap.xml

百度站长平台

1
用户中心 ---> 站点管理 ---> 添加网站(已备案) ---> 验证站点 ---> 管理站点 ---> 自动/手动提交SiteMap文件

Google站长平台

对象存储

使用七牛云的对象存储

  • 使用七牛云的对象存储,可以将一些较大的图片或歌曲放入其中,获取外链,在使用MD写博客是插入其中,大大加快资源的加载速度。
  • 注册七牛云,按如下步骤操作:
1
对象存储 ---> 新建存储空间 ---> 内容管理 ---> 上传文件 ---> 复制外链 ---> 插入MD文件

使用青云的对象存储

  • 使用青云的对象存储,可以将一些较大的图片或歌曲放入其中,获取外链,在使用MD写博客是插入其中,大大加快资源的加载速度。
  • 支持Https站点,避免如使用七牛云外链后,页面提示引用链接也应该为Https协议的警告。
  • 注册青云,按如下步骤操作:
1
存储 ---> 对象存储 ---> 新建 Bucket ---> 上传文件 ---> 复制外链 ---> 插入MD文件
  • 此处,青云的访问控制比较严格,复制的外链拥有时限,取消时限的操作步骤:
1
存储 ---> 对象存储 ---> Bucket ---> 设置 ---> 访问控制 ---> 添加用户 ---> 所有用户与可读 ---> 重新复制外链 ---> 插入MD文件

为博客页面插入音频/视频

  • 建议将音频/视频上传到对象存储中,加快资源的加载速度,提升用户体验。

音频

1
npm install --no-optional --save hexo-tag-aplayer
  • MD的文章中插入如下代码即可,若想禁用自动播放,请去掉autoplay标签:
1
{% aplayer "{{音频名称}}" "{{音频作者}}" "{{音频链接}}" "{{音频缩略图}}" "autoplay" %}

视频

1
npm install --no-optional --save hexo-tag-dplayer
  • MD的文章中插入如下代码即可,若想禁用自动播放,请去掉autoplay标签:
1
{% dplayer "url={{视频链接}}" "pic={{视频缩略图}}" "theme=#FADFA3" "autoplay=false" %}

添加robots.txt

  • robots.txt是一种存放于网站根目录下的ASCII编码的文本文件,它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的,哪些是禁止爬取的。
  • robots.txt存放在站点目录下的source文件中,网站生成后在网站的根目录(站点目录public/)下。
1
vim source/robots.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
User-agent: *
Allow: /
Allow: /archives/
Allow: /tags/
Allow: /about/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://www.xiaocoder.com/sitemap.xml
Sitemap: https://www.xiaocoder.com/baidusitemap.xml

有你就有世界,感谢有你,昕!
0%