0%

hexo插件

查看根目录package.json 所有插件信息

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
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "6.2.0"
},
"dependencies": {
"hexo": "^6.2.0",
"hexo-abbrlink": "^2.2.1",
"hexo-cli": "^4.3.0",
"hexo-deployer-git": "^3.0.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-index": "^2.0.0",
"hexo-generator-search": "^2.4.3",
"hexo-generator-tag": "^1.0.0",
"hexo-related-popular-posts": "^5.0.1",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-marked": "^5.0.0",
"hexo-renderer-stylus": "^2.1.0",
"hexo-server": "^3.0.0",
"hexo-symbols-count-time": "^0.7.1",
"hexo-theme-landscape": "^0.0.3"
}
}

最简单就是 在github 上官方托管的仓库看教程,当然第三方博客,我都结合了一下!

hexo-abbrlink插件

前言:

hexo-next文章链接默认的生成规则是:`:year/:month/:day/:title`,是按照年、月、日、标题来生成的。

比如:https://www.liaofuzhan.com/2019/08/12/hello-world/ 这样,如果文章标题是中文的话,URL链接是也会是中文,

复制后的链接是一长串,非常不利于阅读,也不简洁。。。😢

使用:

1
npm install hexo-abbrlink --save

配置:

修改 (在注释原来的配置基础上 或者 copy一份原来的配置文件!) 根目录站点配置文件config.yml,改为

1
2
3
4
permalink: posts/:abbrlink.html  # 此处可以自己设置,也可以直接使用 :/abbrlink
abbrlink:
alg: crc32 #算法: crc16(default) and crc32
rep: hex #进制: dec(default) and hex

生成的链接将会是这样的(官方样例):详情请查看github仓库!

1
2
3
4
5
6
7
8
9
10
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
hexo clean && hexo g && hexo s # 本地调试

hexo-deployer-git插件

前言:

HexoBlog通过git部署到阿里云服务器

使用:

1
npm install hexo-deployer-git --save

配置:

1
2
3
4
deploy:
type: git
repo: git@:云服务公网ip:/home/git/hexo.git
branch: master

设置好部署参数之后,通过hexo的部署指令,就可以一键部署了:

1
hexo deploy

hexo-cli & hexo-serve 插件

这两个 在安装hexo时官方文档 说的很详细,请查阅hexo 中文官网

hexo-generator-search插件

GitHub仓库

1
npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

1
2
search: path: search.xml;
field: post;

hexo-wordcount插件

GitHub仓库

1
npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中,将各个文章字数相关的配置激活即可: (此处注意源文档的 postInfo 是错的,应该为 post_wordcount)

1
2
3
4
5
6
7
post_wordcount:
date: true # 发布日期
update: true # 更新日期
wordCount: true # 文章字数统计
totalCount: true # 站点总文章字数
min2read: true # 文章阅读时长
readCount: true # 文章阅读次数

hexo-filter-github-emojis 插件

GitHub仓库

1
npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

1
2
3
4
5
6
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:

hexo-generator-index插件(默认安装)

hexo-generator-index是官⽅默认的博客⽂章排序插件,在我们安装hexo时就存在该插件了,hexo博客正常运⾏离不开该插件。该插件
实现了按⽂章发表时间倒序排序,没有实现⽂件置顶功能

hexo-symbols_count_time插件

能够统计页面或者站点的单词以及阅读所需时间

1
npm install hexo-symbols-count-time

配置Hexo站点配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
# 设置博客单词统计
symbols_count_time:
# 文章字数统计
symbols: true
# 文章阅读时间统计
time: true
# 站点总字数统计
total_symbols: false
# 站点总阅读时间统计
total_time: false
exclude_codeblock: false

配置NexT主题配置文件themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
# 设置博客单词统计
symbols_count_time:
# 是否另起一行(true的话不和发表时间等同一行)
separated_meta: true
# 首页文章统计数量前是否显示文字描述(本文字数、阅读时长)
item_text_post: true
# 页面底部统计数量前是否显示文字描述(站点总字数、站点阅读时长)
item_text_total: false
# 平均字长
awl: 4
# 每分钟阅读字数
wpm: 275

重新生成Hexo即可

1
hexo clean && hexo g && hexo s

添加网站运行时间

在F:\MyHexoBlogs\blogs\themes\next_7.8.0\layout_partials\footer.swig 文件下添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<br /> 
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("04/21/2021 15:54:40");//此处修改你的建站时间或者网站上线时间
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 = "本站已安全运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>

最后效果

文章评论Gitalk

1
npm i --save gitalk