使用Github搭建Hexo技术博客--增强教程

本文将讲解 Hexo博客的常用插件、站点 SEO 等内容!

使用Github搭建Hexo技术博客

主题优化

主题配置介绍

我这里只讲自己在使用的 yelle 主题,你可以参考下,可能还有一些改动我后续会自己在慢慢改,但是大体基本也就这样了。

从中我们也可以看出,对于主题来讲,大部分可以配置的地方其实都是在这里的,所以对于主题的使用者来讲,懂这里很重要。

  • 基本上主题的配置文件都是有内容改,但是下面这几点我觉得特别重要:
  • duoshuo,如果你是打算采用多说评论系统的话,你需要设置这里,但是我个人对多说没好印象
  • youyan,有言也是国内实用比较多的评论系统之一,个人感觉相对比较稳定
  • open_in_new,我个人觉得这个东西就应该是 true,不是用新标签的都是坏人
  • baidu_tongji,我个人使用的是百度统计,具体百度统计的使用可以查看百度统计官网:http://tongji.baidu.com

    我的 yelle 主题配置

  • Yelee 主题使用说明:http://moxfive.coding.me/yelee/
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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
# Theme Version | 当前版本
Yelee: "3.5"

# >>> Basic Setup | 基础设置 <<<

# Header | 主菜单
## About Page: `hexo new page about`
## Tags Cloud Page: `hexo new page tags`
menu:
主页: /
所有文章: /archives/
#随笔: /tags/随笔
标签云: /tags/
关于我: /about/

# Link to your avatar | 填写头像地址
avatar: /img/avatar.png

# Small icon of Your site | 站点小图标地址
favicon: /favicon.png

# Internationalization | 主题语言
## Change Language in SITE's _config.yml | 在站点配置中切换语言
## https://hexo.io/docs/internationalization.html
## Available Languages: en, zh-Hans, zh-Hant-TW, zh-Hant-HK

# Subdirectory | 子目录
## If your site' url is 'http://yoursite.com/blog', set root_url as '/blog/'
## 网站若存放在子目录,请按上面格式填写
## https://hexo.io/docs/configuration.html#URL
root_url:

# Year of Site Creation | 网站成立年份
since: 2015

# Social info. Bar | 社交信息展示
## Keep "mailto:" in Email | 设置 Email 时保留 "mailto:"
## Encrypt email 加密邮件地址 http://ctrlq.org/encode/
## RSS requires a plugin to take effect | 使用 RSS 需先安装对应插件
## https://github.com/hexojs/hexo-generator-feed

subnav:
Email: ""
#新浪微博: "sina weibo"
GitHub: ""
#V2EX: "#"
RSS: "/atom.xml"
#知乎: "zhihu"
#豆瓣: "douban"
#简书: "jianshu"
#SegmentFault: ""
#博客园: "cnblogs"
CSDN: ""
#Coding: ""
#网易云音乐: ""
#虾米音乐: "xiami"
#bilibili: ""
#AcFun: ""
#niconico: ""
#Quora: ""
#Facebook: "#"
#Google: "#"
#Twitter: "#"
#LinkedIn: "#"
#QQ: "#"
微信: "weixin"
#PayPal: "#"
#StackOverflow: "#"
#CodePen: ""
#Plunker: ""
#Instagram: "#"
#LOFTER: ""
#Flickr: "#"
#reddit: ""
#Medium: ""
#TiddlyWiki: ""
#Tumblr: ""
#_500px: ""

# >>> Conments 评论系统 <<<
# Chose ONE as your comment system and keep others disable.
# 选一个作为网站评论系统,其他保持禁用。

preload_comment: true
## false: 当点击评论条等区域时再加载评论模块
## false: load comment's section until u click/hover on the bar/icon

show_count: false
## 是否在主页文章标题旁显示评论数(多说、Disqus)
## Add comment count after article title

disqus:
#on: true
shortname:
# https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
# It is unnecessary to enable disqus here if
# you have set "disqus_shortname" in your site's "_config.yml"

duoshuo:
#on: true
domain:
# 是否开启多说评论,http://duoshuo.com/create-site/
# 使用上面网址登陆你的多说,然后创建站点,在 domain 中填入你设定的域名前半部分
# http://<要填的部分>.duoshuo.com (domain只填上<>里的内容,不要填整个网址)

youyan:
#on: true
id:
# 是否开启友言评论,http://www.uyan.cc/index.php
# id 中填写你的友言用户数字ID,注册后进入后台管理即可查看
# 友言服务在 Web 环境下运行,普通本地环境无法查看,请部署后在线上测试。

# >>> Style Customisation 样式自定义 <<<

# Background | 背景
## "5": show images form bg-1.jpg to bg-5.jpg in `/yelee/source/background/`
## "5": 显示`/yelee/source/background/`文件夹中 bg-1.jpg 到 bg-5.jpg 这5张图片
## "0": white-gray background | 淳朴灰白背景
background_image: 5

# Base Font Size | 字号调节
base_font_size: 16 #px, 16 - 24

## General Color Scheme | 主题配色方案
## 可用值 Value: yilia
color_scheme:

highlight_style:
on: true
inline_code: 3 # Value: 0 - 9 可选
code_block: 2 # Value: 0 - 4
# Set inline_code to style highlight text
# Chose a highlight theme for code block
# 通过 inline_code 切换内置文本高亮样式
# 通过 code_block 切换内置代码高亮配色主题

blockquote_style:
on: true
blockquote: 1 # Value: 0 - 7 可选
# 自定义文章「引用部分」的样式

# Headings Style | 标题风格
## 0-Yelee, 1-Yilia, 2-GitHub
heading_style: 0 # Value: 0 - 2

## List style type (ul) | 无序列表项标记样式
list_style: 0 # value: 0 - 12 可选

# 左边栏宽度 px
left_col_width: 300

# Copyright info. of post | 文末版权信息
copyright: true

# Table of contents | 文章目录
toc:
on: true
list_number: true # 目录序号
max_depth: 3 # 1 - 6 (h1-h6) 目录最大级数
nowrap: false # Keep title on same line | 目录标题不换行

# 是否开启主页及加载头像时的动画效果
# Animation in Homepage and Loading avatar
animate: true

# Load jQuery UI to style tooltips
# 工具提示框样式美化
jquery_ui: false

# Max width of right cloumn | 限制右侧内容的宽带
limit_article_width:
on: false
max_width: 60 # em

# >>> Small features | 小功能设置 <<<

# 是否开启边栏多标签切换
# Birdhouse button in left column
tagcloud: true

# Blogroll, Link exchange | 友情链接
friends:
GitHub: https://pages.github.com/
#friends: false

#是否开启“关于我”。
aboutme: 专注于技术,专注于开发
#aboutme: true

# Open link in a new tab | 是否在新窗口打开链接
## `global` 0: Set separately, 1: Open all in new 2: Open all in current
## `global` 0: 分开设置, 1: 全部在新标签打开, 2: 全部在"当前"标签打开
open_in_new:
global: 0 # 0-2
title: false # article title in homepage 主页文章标题
post: false # link within post/page 正文中的链接
tags: false # 标签
categories: false # 分类
article_nav: false # 导航
archives: true # 归档
mini_archives: true # 迷你归档
menu: false # 边栏菜单
friends: true # 友情链接
socail: true # 社交图标

# Customize feed link 自定义订阅地址
rss: /atom.xml

# Update Reminder for IE6/7/8
# 针对 IE6/7/8 的升级浏览器提示
ie_updater:
on: true
link: //outdatedbrowser.com/
## http://browsehappy.com/
## http://outdatedbrowser.com/

# Tab Title Change | 标签页标题切换
tab_title_change:
#on: false
left_tab_title: '(つェ⊂) 我藏好了哦~ '
return_tab_title: '(*´∇`*) 被你发现啦~ '

# >>> Vendors | 第三方工具 & 服务 <<<

# Local Site Search | 本地站内搜索
## Insatall below plugin to take effect | 使用搜索需先安装对应插件
## https://github.com/PaicHyperionDev/hexo-generator-search
search:
on: true
onload: false
## true: get search.xml file when the page has loaded
## false: get the file when search box gets focus

# images viewer | 图片浏览器
## http://www.fancyapps.com/fancybox/
fancybox: true

# Display Math(LaTeX, MathML...) | 数学公式支持
## https://www.mathjax.org/
mathjax: false

# Socail Share | 是否开启分享
share:
on: true
baidu: true
addthis: false
addthis_pubid: ""
## Go to www.addthis.com/dashboard to get your pubid (in src of Code)
## and customize AddThis share buttons

# 百度、谷歌站长验证。填写 HTML 标签 content
# Site Verification for Google and Baidu. HTML label content.
baidu_site:
google_site:

# Fill in Google Analytics tracking ID, #e.g. UA-XXXXX-X
google_analytics:

# 百度统计 http://sitecenter.baidu.com/sc-web/
# 查看代码,填入 //hm.baidu.com/hm.js? 之后的内容
baidu_tongji:

# 不蒜子网站计数设置
# http://ibruce.info/2015/04/04/busuanzi/
visit_counter:
on: true
site_visit: 本站到访数
page_visit: 本页阅读量

# GitHub Repo Widget
# https://github.com/hustcc/GitHub-Repo-Widget.js
github_widget: false

# Progress Bar | 页面加载进度条
# Demo: http://github.hubspot.com/pace/docs/welcome/
# type: barber-shop|big-counter|bounce|center-atom|center-circle|
# center-radar|center-simple|corner-indicator|flash|flat-top|
# loading-bar|mac-osx|minimal
# color: black|blue|green|orange|pink|purple|red|silver|white|yellow|
progressBar:
on: true
type: "minimal" # Keep Quotes | 保留引号避免出错
color: blue

CDN:
jquery: //cdn.bootcss.com/jquery/2.2.4/jquery.min.js
require: //cdn.bootcss.com/require.js/2.2.0/require.min.js
fontawesome: //cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css
fancybox_js: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js
fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
animate_css: //cdn.bootcss.com/animate.css/3.5.1/animate.min.css
jquery_ui_js: //cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js
jquery_ui_css: //cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css
pace_js: //cdn.bootcss.com/pace/1.0.2/pace.min.js
clipboard: //cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js
mathjax: //cdn.bootcss.com/mathjax/2.6.1/MathJax.js
scrollreveal: //cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js

常用页面添加

404、关于我、标签页

  • 还是以上一篇文章我们讲解的项目根目录上:E:\blog_space\hexo,在该目录启动 Git Bash:
  • 新增一个 404 页面:hexo new page 404
  • 新增一个 about 页面:hexo new page about
  • 新增一个 tag 标签云页面:hexo new page tags
  • 新增一个 robot.txt 文件,把该文件放在:E:\blog_space\hexo\source 目录下,如果你没有该文件可以到我的项目上找:https://github.com/chenjh0611/chenjh0611.github.io
  • robot 文件内容:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    User-Agent: *
    Allow: /
    Disallow: /background
    Disallow: /css
    Disallow: /fancybox
    Disallow: /font-awesome
    Disallow: /img
    Disallow: /js
    Sitemap: http://code.skyheng.com/sitemap.xml
    Sitemap: http://code.skyheng.com/baidusitemap.xml

在md文件的Front-matter区域添将comments设置为flase的话,将不会展示评论界面。

设置分类

在我们编辑文章的时候,直接在categories:项填写属于哪个分类,但如果分类是中文的时候,路径也会包含中文。 比如分类我们设置的是:
categories: 编程 那在生成页面后,分类列表就会出现编程这个选项,他的访问路径是:*/categories/编程
如果我们想要把路径名和分类名分别设置,需要怎么办呢?
打开根目录下(并非主题目录)的配置文件_config.yml(别打开错了),找到如下位置做更改(设置种类):

1
2
3
4
5
6
7
8
# Category & Tag
default_category: uncategorized
category_map:
编程: programming
Hexo:Hexo
生活: life
其他: other
tag_map:

在这里category_map:是设置分类的地方,每行一个分类,冒号前面是分类名称,后面是访问路径。 可以提前在这里设置好一些分类,当编辑的文章填写了对应的分类名时,就会自动的按照对应的路径来访问。

置顶文章方法

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});

var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};
  • 然后在文章头部的:Front-matter位置加上一个:top: 1000的内容。数值越大,越靠前

另外一种解决方案:

  • hexo博客优化之文章置顶+置顶标签
    文章中卸载hexo-generator-index使用cnpm install --save hexo-generator-index-pin-top插件来实现,安装这个插件然后在需要置顶的文章的Front-matter中加上top: true即可,也可以是数值,数值越大,越靠前

字数统计和阅读时长

Next 是已经集成了这个功能,所以还是得需要咱们自己完成,首先看一下官网的使用帮助hexo-wordcount.

集成步骤

  1. 先安装插件 hexo-wordcount、执行cnpm install --save hexo-wordcount安装
  2. 文件配置、在yelee/layout/_partial/post/word.ejs下创建word.ejs文件:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div style="margin-top:10px;">
    <span class="post-time">
    <span class="post-meta-item-icon">
    <i class="fa fa-keyboard-o"></i>
    <span class="post-meta-item-text"> 字数统计: </span>
    <span class="post-count"><%= wordcount(post.content) %>字</span>
    </span>
    </span>

    <span class="post-time">
    &nbsp; | &nbsp;
    <span class="post-meta-item-icon">
    <i class="fa fa-hourglass-half"></i>
    <span class="post-meta-item-text"> 阅读时长: </span>
    <span class="post-count"><%= min2read(post.content) %>分</span>
    </span>
    </span>
    </div>
  3. 然后在 themes/yelee/layout/_partial/article.ejs文件中<%- partial('post/title', {class_name: 'article-title'}) %>后面添加如下代码
    1
    2
    3
    <% if(theme.word_count && !post.no_word_count){ %>
    <%- partial('post/word') %>
    <% } %>
  4. <div class="article-info article-info-post">后添加如下代码
    1
    2
    3
    4
    <% if(theme.word_count && !post.no_word_count){ %>
    <br>
    <br>
    <% } %>
  5. 在主题_config.yml中配置word_count是否需要添加字数统计功能控制的flag、在md文件的Front-matter区域添加no_word_count为true即配置文章不需要显示字数统计功能
  • article.ejs文件中代码块示例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <% if (post.link || post.title){ %>
    <header class="article-header">
    <%- partial('post/title', {class_name: 'article-title'}) %>
    <% if(theme.word_count && !post.no_word_count){ %>
    <%- partial('post/word') %>
    <% } %>
    </header>
    <% if (!index){ %>
    <div class="article-info article-info-post">
    <% if(theme.word_count && !post.no_word_count){ %>
    <br>
    <br>
    <% } %>
    <%- partial('post/category') %>
    <%- partial('post/tag') %>
    <div class="clearfix"></div>
    </div>
    <% } %>
    <% } %>

网易云音乐

  • 集成起来就很简单了,MarkDown 是支持 h5 代码的,所以打开网易云,输入你想要的歌曲,点击对应歌曲的 生成外链播放器。前提是有版权哈,然后拷贝相应的代码即可。
    外链
    拷贝代码
    效果请点击关于我

鼠标点击效果

废话不多说,直接看如何集成。 拷贝需要的文件、进入到下位子的Github,拷贝文件。
文件夹目录
拷贝resources下的所有文件到您对应的目录。
打开themes/yelee/layout/_partial/after-footer.ejs文件,添加刚刚添加文件的配置。

1
2
3
<% if (theme.background_animation){ %>
<script type="text/javascript" src="/resources/love.js"></script>
<% } %>

压缩页面静态资源

为什么要压缩页面静态资源

  • 对于个人博客来说,优化页面的访问速度是很有必要的,如果打开你的个人站点,加载个首页就要十几秒,页面长时间处于空白状态,想必没什么人能够忍受得了吧。我个人觉得,如果能把页面的加载时间控制在三四秒内,就很不错了。

那么怎么提高hexo这个静态博客的页面加载速度呢?可以从以下的几个方面去入手:

  • 将js文件尽可能放置到body的闭合标签之前,因为在加载或者引入js文件时是阻塞式的,如果我们在页面的最开始就引入这些js文件,而这些文件又比较大,会造成页面在渲染时长时间处于白屏状态。
  • 尽量避免去引用访问速度非常低下的cdn或者图片,可以改用访问速度更快的cdn,或者将难以迅速加载的图片保存到自己的站点目录下,以免在加载图片时耗费了大量的时间,最后还加载不出来。
  • 对页面的静态资源进行压缩,包括css、js和html等文件。我们自己添加的css和js文件为了可读性,往往会有很多换行和空格,这些对于浏览器来说并没什么卵用,甚至还会降低渲染页面的速度。至于html文件,由于Markdown转成html的bug,会导致页面存在大量的空白,如果你查看下页面的源代码,就会发现这些大量的空白符,十分难看。这也会造成页面渲染的性能问题。
  • 项目压缩也叫代码丑化, 分别对 html、css、js、images进行优化,即把重复的代码合并,把多余的空格去掉,用算法把 images 进行压缩。压缩后的博客,加载速度会有较大的提升,自然能留住更多游客。

hexo的压缩静态资源插件

蛮多朋友使用了gulp对博客进行压缩,这也是一个办法,但在社区逛了下,找到了一个比较好用的模块hexo-all-minifier,这个模块集成了对 html、css、js、image 的优化。安装上此模块后,只要在根目录下的_config.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
html_minifier:
enable: true
ignore_error: false
exclude:

css_minifier:
enable: true
exclude:
- '*.min.css'

js_minifier:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'

image_minifier:
enable: true
interlaced: false
multipass: false
optimizationLevel: 2
pngquant: false
progressive: false

上面这做法是使用gulp来进行压缩,gulp是Node.js下的自动构建工具,通过一列的task执行步骤进行自动流程化处理。

使用这种方法会比较麻烦,每次压缩时还需要输入额外的命令,比较繁琐,个人不是很喜欢,有兴趣的可以去自己了解下相关的东西。这篇教程里很多详细的说明,里边有说到gulp的使用,绝对的精品文章。

这里我选择的是由rozbo大佬开发的hexo-neat压缩插件,配置简单,无需额外命令,你只要使用原本的调试三连或者部署三连就可以自动帮你完成静态资源的压缩!

如何使用hexo-neat
在站点根目录下安装hexo-neat
npm install hexo-neat --save

为站点配置文件添加相关配置
下边是我自己站点的相关配置,直接添加到站点配置文件_config.yml的末尾就可以。可以安装自己的需求去自定义配置,不过有些注意事项,可以参考我后文的踩坑记录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'

hexo-neat插件踩坑记录
由于在使用hexo-neat插件时,可以在命令窗口中看到各个文件的压缩率,于是我就开始捣鼓跳过哪些文件可以让效率更高。在鼓捣了一段时间之后,记录下使用该插件的一些注意事项,避免日后重蹈覆辙,也希望能对各位看官有所帮助。

跳过压缩文件的正确配置方式
如果按照官方插件的文档说明来配置exclude,你会发现完全不起作用。这是因为配置的文件路径不对,压缩时找不到你配置的文件,自然也就无法跳过了。你需要给这些文件指定正确的路径,万能的配置方式如下:

1
2
3
4
neat_css:
enable: true
exclude:
- '**/*.min.css'

压缩html时不要跳过.md文件

.md文件就是我们写文章时的markdown文件,如果跳过压缩.md文件,而你又刚好在文章中使用到了NexT自带的tab标签,那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。
当初为了找到这个原因花了我两个晚上的时间,简直是夜不能寐。
压缩html时不要跳过.swig文件
.swig文件是模板引擎文件,简单的说hexo可以通过这些文件来生成对应的页面。如果跳过这些文件,那么你将会发现,你的所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。

参考链接

  1. GitHub项目地址
  2. hexo博客压缩优化
  3. Hexo-Neat介绍

文章链接唯一化

也许你会数次更改文章题目或者变更文章发布时间,在默认设置下,文章链接都会改变,不利于搜索引擎收录,也不利于分享。唯一永久链接才是更好的选择。

这里有个知识点:

百度蜘蛛抓取网页的规则: 对于蜘蛛说网页权重越高、信用度越高抓取越频繁,例如网站的首页和内页。蜘蛛先抓取网站的首页,因为首页权重更高,并且大部分的链接都是指向首页。然后通过首页抓取网站的内页,并不是所有内页蜘蛛都会去抓取。
搜索引擎认为对于一般的中小型站点,3层足够承受所有的内容了,所以蜘蛛经常抓取的内容是前三层,而超过三层的内容蜘蛛认为那些内容并不重要,所以不经常爬取。出于这个原因所以permalink后面跟着的最好不要超过2个斜杠。

  • 然后在站点配置文件中添加如下代码:
    1
    2
    3
    4
    # abbrlink config
    abbrlink:
    alg: crc32 # 算法:crc16(default) and crc32
    rep: hex # 进制:dec(default) and hex

可选择模式:

  • crc16 & hex
  • crc16 & dec
  • crc32 & hex
  • crc32 & dec

示例:
生成的链接如下所示:

1
2
3
4
5
6
7
8
crc16 & hex
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html

生成完后,原md文件的Front-matter 内会增加abbrlink 字段,值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。

1
2
3
---
abbrlink: seourl
---

如果文章中未指定 abbrlink: xxx,将会根据算法随机生成数字

这样就确保了博文链接的唯一化,只要不修改 md 文件的 abbrlink 的值,url 就永久不会改变。如此 md 文件名和文件内容也可以随便改了。这样也有利于 SEO 优化。

畅言实现评论

畅言去广告:https://www.cgtblog.com/jishu/3251.html

Yelog—对Yelee主题的改进

由于Yelee主题存在代码块上下出现空格的情况以及主题布局尺寸固定的情况,Yelog主题对Yelee主题进行了改进,github地址如下:
https://github.com/yelog/hexo-theme-yelog

使用Yilia主题需要

  • 在查看所有文章的时候需要
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:npm i hexo-generator-json-content –save
    3、在根目录_config.yml里添加配置:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    jsonContent:
    meta: false
    pages: false
    posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

显示pdf的支持

  • 安装:cnpm install --save hexo-pdf github地址:hexo-pdf
  • 使用示例:

插件推荐

插件的基本使用命令

  • 插件官网:https://hexo.io/plugins/
  • 安装插件:npm install 插件名 --save
  • 卸载插件:npm uninstall 插件名
  • 更新插件和博客框架(需要在 E:\blog_space\hexo 目录下):npm update
  • 它实质上是通过项目根目录下 package.json 文件更新各大组件

必备插件

  • 支持RSS:cnpm install hexo-generator-feed --save
  • 生成站点地图:cnpm install hexo-generator-sitemap --save
  • 生成百度站点地图:cnpm install hexo-generator-baidu-sitemap --save
  • HTML 压缩:cnpm install hexo-html-minifier --save
  • JavaScript 压缩:cnpm install hexo-uglify --save
  • CSS 压缩插件:cnpm install hexo-clean-css --save
  • SEO优化:cnpm install hexo-generator-seo-friendly-sitemap
  • 站内搜索:hexo-generator-search插件为 Hexo3 提供搜索功能。 安装: cnpm install hexo-generator-search --save

其他插件支持

命令 功能 文档
npm install hexo-generator-index-pin-top –save 文章置顶插件 点我
npm uninstall hexo-generator-index –save 文章置顶插件 点我
npm i –save hexo-wordcount 文章字数+阅读时长统计 点我
npm install hexo-baidu-url-submit –save 百度链接主动推送 点我
npm install hexo-deployer-ftpsync –save hexo上传至FTP服务器 点我
npm install hexo-deployer-cos –save hexo上传至腾讯云COS 点我
npm install hexo-deployer-aliyun –save hexo上传至阿里云 点我
npm install –save hexo-admin hexo管理插件 点我
hexo-blog-encrypt(请看文档) hexo文章加密码 点我
卜算子ip计数统计 IP计数统计 点我
npm install leancloud-storage –save Valine评论 点我
Valine评论邮件通知 Valine评论提醒 点我
hexo-qiniu-sync 七牛云图片同步 点我

搜索引擎提交网址大全

结束语

系列博文整理

整理了下hexo系列的文章,发现这位博主写系列博客感觉还是很棒的:

个人微信公众号技术交流QQ群
文章目录
  1. 1. 主题优化
    1. 1.1. 主题配置介绍
    2. 1.2. 我的 yelle 主题配置
  2. 2. 常用页面添加
    1. 2.1. 404、关于我、标签页
  3. 3. 设置分类
  4. 4. 置顶文章方法
    1. 4.1. 另外一种解决方案:
  5. 5. 字数统计和阅读时长
    1. 5.1. 集成步骤
  6. 6. 网易云音乐
  7. 7. 鼠标点击效果
  8. 8. 压缩页面静态资源
  9. 9. 文章链接唯一化
  10. 10. 畅言实现评论
  11. 11. Yelog—对Yelee主题的改进
  12. 12. 使用Yilia主题需要
  13. 13. 显示pdf的支持
  14. 14. 插件推荐
    1. 14.1. 插件的基本使用命令
    2. 14.2. 必备插件
    3. 14.3. 其他插件支持
  15. 15. 搜索引擎提交网址大全
  16. 16. 结束语
  17. 17. 参考资料
  18. 18. 系列博文整理