世间所有的相遇,都是久别重逢

0%

本博客当前使用的插件总结

本博客当前使用的插件总结

插件版本
hexo4.2.0
hexo-abbrlink2.0.5
hexo-deployer-git2.1.0
hexo-douban1.1.3
hexo-filter-nofollow2.0.2
hexo-generator-archive1.0.0
hexo-generator-category1.0.0
hexo-generator-index1.0.0
hexo-generator-searchdb1.3.0
hexo-generator-tag1.0.0
hexo-renderer-ejs1.0.0
hexo-renderer-marked2.0.0
hexo-renderer-stylus1.1.0
hexo-server1.0.0
hexo-symbols-count-time0.7.1
hexo-neat1.0.4

Hexo 一键部署插件

地址

安装配置

安装插件:

1
npm install hexo-deployer-git --save

然后修改站点配置文件_config.yml 中的配置:

1
2
3
4
deploy:
- type: git
repository: git@github.com:dta0502/dta0502.github.io.git
branch: master

Hexo 文章永久链接插件

地址

安装配置

安装插件:

1
npm install hexo-abbrlink --save

然后我们可以在站点配置文件_config.yml 中修改为:

1
2
3
4
5
6
7
url: https://tding.top/
root: /
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
permalink_defaults:

Hexo 豆瓣读书、豆瓣电影插件

安装配置

安装插件:

1
npm install hexo-douban --save

配置

将下面的配置写入站点的配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
douban:
user: mythsman
builtin: false
book:
title: 'This is my book title'
quote: 'This is my book quote'
movie:
title: 'This is my movie title'
quote: 'This is my movie quote'
game:
title: 'This is my game title'
quote: 'This is my game quote'
timeout: 10000
  • user: 你的豆瓣 ID. 打开豆瓣,登入账户,然后在右上角点击 “个人主页” ,这时候地址栏的 URL 大概是这样:”https://www.douban.com/people/xxxxxx/“,其中的”xxxxxx” 就是你的个人 ID 了。
  • builtin: 是否将生成页面的功能嵌入 hexo shexo g 中,默认是 false, 另一可选项为 true (1.x.x 版本新增配置项)。
  • title: 该页面的标题。
  • quote: 写在页面开头的一段话,支持 html 语法。
  • timeout: 爬取数据的超时时间,默认是 10000ms , 如果在使用时发现报了超时的错 (ETIMEOUT) 可以把这个数据设置的大一点。

如果只想显示某一个页面 (比如 movie),那就把其他的配置项注释掉即可。

启动

我们只需要在 Git Bash 中输入以下命令:hexo clean && hexo douban -bgm && hexo g && hexo s 即可,注意其中开启 hexo-douban 的命令中,-bgm 代表的是 book、game、movie 三个参数,如果只需要其中的一部分就只带你想要的那些参数。

注意:由于 hexo douban 的简写也是 hexo d,与 hexo deploy 的简写指令 hexo d 冲突,因此在进行二者部署的时候,只能都打全名而不能打简写形式

  • 在 0.x.x 版本中,文章的更新和豆瓣页面的爬取操作是绑定在一起的,无法支持单独更新文章或者单独爬取文章。
  • 在 1.x.x 版本中,使用 hexo douban 命令即可生成指定页面,如果不加参数,那么默认参数为 - bgm。如果配置了 builtin 参数为 true,那么除了可以使用 hexo douban 命令之外,hexo g 或 hexo s 也内嵌了生成页面的功能。因此,还是按照 hexo clean && hexo g && hexo s 就可以。

测试

上面都没问题之后,我们只需要在站点目录下测试 http://localhost:4000/books 或者 http://localhost:4000/movies 等,如果看到页面了就说明成功了。

部署

如果上述都没有问题,我们就可以在菜单栏中添加按钮了,打开主题配置文件_config.yml,找到菜单按钮,添加下面内容:

1
2
3
menu:
movies: /movies/ || film
books: /books/ || book

然后在 next/language/zh-CN.yml 文件中添加对应的中文参数信息:

1
2
3
menu:
movies: 观影
books: 阅读

至此,我们就完成了豆瓣读书页面的添加。

Hexo 字数和阅读时间统计插件

地址

安装配置

安装插件:

1
npm install hexo-symbols-count-time --save

在站点配置文件_config.yml 中添加以下代码:

1
2
3
4
5
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true

然后由于此插件集成在 NexT 中,然后修改主题配置文件_config.yml

1
2
3
4
5
6
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275

Hexo 本地搜索功能

本地搜索的原理

对于动态网站来说,可以通过 php 实现。但是,Hexo 博客是静态网站,用不了 php。

NexT 主题已经实现这个功能,它用了 Hexo 的拓展包 hexo-generator-searchdb,预先生成了一个文本库 search.xml,然后传到了网站里面。在本地搜索的时候,NexT 直接用 javascript 调用了这个文件,从而实现了静态网站的本地搜索。

插件地址

安装配置

安装插件:

1
npm install hexo-generator-searchdb --save

然后我们修改站点配置_config.yml 文件,添加如下内容:

1
2
3
4
5
6
# 本地搜索
search:
path: search.xml
field: post
format: html
limit: 100
  • path:索引文件的路径,相对于站点根目录
  • field:搜索范围,默认是 post,还可以选择 page、all,设置成 all 表示搜索所有页面
  • limit:限制搜索的条目数

然后修改主题配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

Hexo 文章置顶插件

地址

安装配置

安装插件:

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

在需要置顶的文章的 Front-matter 中加上 top: true 或者 top: 任意数字,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: TMDb电影数据分析
declare: true
toc: true
tags:
- Python
- 数据分析
categories:
- 数据分析
- 实战
abbrlink: 7e380af2
date: 2018-11-23 13:20:03
top: 100
---

注意:top 中数字越大,文章越靠前

设置置顶图标

打开 /themes/next/layout/_macro/ 目录下的 post.swig 文件,在 <div class="post-meta"> 的第一个 <span> 标签下,插入如下代码:

1
2
3
4
5
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

Hexo 减少出站链接

减少出站链接能够有效防止权重分散,Hexo 有很方便的自动为出站链接添加 nofollow 的插件。

地址

安装配置

安装插件:

1
npm install hexo-filter-nofollow --save

再在站点的_config.yml 中添加配置,将 nofollow 设置为 true

1
2
3
4
5
6
nofollow:
enable: true
field: site
exclude:
- 'exclude1.com'
- 'exclude2.com'

这样,例外的链接将不会被加上 nofollow 属性。

Hexo 页面静态资源压缩插件

我们自己添加的 css 和 js 文件为了可读性,往往会有很多换行和空格,这些对于浏览器来说是没有用的,甚至还会降低渲染页面的速度。同时,由于 Markdown 转成 html 的 bug,会导致页面存在大量的空白,我们可以通过查看页面源代码发现这些大量的空白符,这也会造成页面渲染的性能问题。

因此,我们需要对页面的静态资源进行压缩,包括 css、js 和 html 等文件。

我们可以使用 hexo-neat 插件进行压缩。hexo-neat 配置简单,无需额外命令,我们只需使用原本的调试、部署命令就可以自动完成静态资源的压缩。

地址

安装配置

安装 hexo-neat 插件

安装插件:

1
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
# 博文压缩
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'
- '**/fireworks.js'
-------------本文结束感谢您的阅读-------------