Hexo-abbrlink

在做次优化之前,hexo文章链接默认的生成规则是::year/:month/:day/:title,是按照年、月、日、标题来生成的。
比如:https://www.xxx.com/2019/08/12/hello-world/这样,如果文章标题是中文的话,URL链接是也会是中文,

为了让url地址不变,有了接下来这个插件hexo-abbrlink

详情见这篇文章Hexo-abbrlink生成唯一永久文章链接

hexo-generator-feed

这是一款生成rss订阅文件的插件

详情见这篇文章博客SEO优化

hexo-generator-sitemap 和 hexo-generator-baidu-sitemap

这是生成站点地图的插件

详情见这篇文章博客SEO优化

hexo-baidu-url-submit

百度自动提交,推送自己网站的插件,你在输入 hexo d 就会自动提交你的url

详情见这篇文章博客SEO优化

hexo-tag-aplayer

hexo-tag-aplayer是将aplay嵌入博客页面的hexo插件
原先 hexo-tag-aplayer 不支持 MetingJS,使得需要图片url,音乐url等等参数,操作起来都很麻烦,需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。but, now…

MeingJS 支持 (3.0 新功能)
MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

详情见这篇文章Hexo添加音乐播放功能

hexo-helper-live2d

详情见这篇文章hexo博客添加live2d看板娘

hexo-generator-index-pin-top

这是一款文章置顶插件
在butterfly主题中,你需要sudo npm uninstall hexo-generator-index --save 然后 sudo npm install hexo-generator-index-pin-top --save

你要在文章的front-matter区域里添加top: True属性来把这篇文章置顶。

你可以参考 hexo-generator-index-pin-top这个仓库来了解更多细节。

hexo-neat

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

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

安装hexo-neat

在博客根目录下输入
sudo 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
23
# 博文压缩
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'
- '**/js/main.js'

几个小问题

跳过压缩文件的正确配置方式

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

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

压缩 html 时不要跳过 Markdown 文件

如果跳过压缩.md 文件,而你又刚好在文章中使用到了自带的 tab 标签,那么当 Hexo 在生成静态页面时就会发生解析错误。这会导致使用到了 tab 标签的页面生成失败而无法访问。

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

.swig 文件是模板引擎文件,简单的说 Hexo 可以通过这些文件来生成对应的页面。如果跳过这些文件,那么你将会发现,你的所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。

页面加载性能测试

现在我们可以测试下页面加载性能。

Google PageSpeed Insights 可用于帮助分析网页加载速度瓶颈,该网站将会针对指定域名进行在线测试,并提供一份详细的页面加载分析报告,报告中还会根据页面资源加载情况给出合理的优化建议及预期优化效果,因此用户可以有的放矢的进行性能优化专项整改。

Google PageSpeed Insights

hexo-tag-dplayer

简介

hexo-tag-dplayer APlayer播放器的 Hexo 标签插件,可以十分方便地在文章内插入视频播放器。

安装

安装 hexo-tag-dplayer 插件十分简单,只需要在博客目录执行

1
sudo npm install hexo-tag-dplayer -s

修改 Hexo 的配置文件 _config.yml ,增加

1
2
3
4
5
6
7
8
9
10
hexo-tag-dplayer:
cdn:
- https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
- https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
default:
api: https://api.prprpr.me/dplayer/
loop: yes
screenshot: yes
autoplay: false
# 后面还可以接着写其他默认配置

使用

使用 hexo-tag-dplayer 非常简单,只需要在 MarkDown 文件中插入正确的标记就可以了。

1
{% dplayer "url=http://blog.gisersqdai.top/shanghaiurbandevlopment.mp4" %}

如果还需要其他配置,尽管在上面写就好,详情可以看这里,下面有一个简单的示例可以看一下:

1
{% dplayer "url=http://blog.gisersqdai.top/shanghaiurbandevlopment.mp4" "id=46190A32F63DFF2CF0A3BB0F3293636C" "addition=https://api.prprpr.me/dplayer/v3/bilibili?aid=17150441 " %}

可选的一些参数:

选项 默认值 描述
url 必须值 视频地址
loop false 视频循环播放
volume 0.7 播放器音量
hotkey true 开启热键
autoplay true 自动播放,移动端浏览器暂时不支持此功能
logo - 在左上角展示一个 logo,你可以通过 CSS 调整它的大小和位置
mutex true 该选项开启时,如果同页面有其他播放,该播放器会暂停
highlight [] 自定义进度条提示点
preload auto 视频文件预载入模式,可选项: none, metadata, auto
theme #ad7a86 播放器风格色彩设置

使用弹幕

上面的示例中已经写了怎么使用弹幕了,使用弹幕首先需要有一个 ID ,建议使用视频的哈希值作为ID,这样可以尽可能保证 ID 唯一,防止重复,接下来要配置弹幕接口,官方免费的弹幕接口能用,但是不稳定,如果有特殊需求,推荐个人自己搭建弹幕服务器。

解析 BiliBiLi 弹幕,这个上面的示例也已经有了,同样,免费的服务不一定稳定,有特殊需求的请自己搭建弹幕服务器。

增加外部弹幕列表,同解析 BiliBiLi 弹幕一样,只要将外部弹幕的地址写进addition就可以了。

使用字幕

增加参数"subtitle=字幕文件地址"就可以了,如需修改字幕颜色或者字体大小,仿照其他参数写就可以了。

hexo-pwa

Progressive Web App, 简称PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。

PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进行改进,在安全、性能和体验三个方面都有很大提升,PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点。

详情见这篇文章hexo博客开启pwa