Hexo 推荐插件
Hexo 插件说明
如果应用官网的主题你会发现,有可能出现打不开的情况,这是由于有些主题使用的插件,本地并没有安装导致的报错。(没有问题的可以跳过)
代码高亮(建议安装)
由于 Hexo 自带的代码高亮主题显示不好看,可以使用 hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:
1 | npm i -S hexo-prism-plugin |
然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:
1 | highlight: |
搜索(建议安装)
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
1 | npm install hexo-generator-search --save |
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
1 | search: path: search.xml; |
文章字数统计插件(建议安装)(使用了 halo 主题则必须安装)
如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。安装命令如下:
1 | npm i --save hexo-wordcount |
然后只需在本主题下的 _config.yml 文件中,将各个文章字数相关的配置激活即可:
1 | post_wordcount: |
添加代码压缩(建议安装)
hexo-neat插件实现压缩代码,底层是通过 gulp 来实现的。但是这个插件是有 Bug 的:
压缩 md 文件会使 markdown 语法的代码块消失,会删除全角空格
在博客站点根目录执行安装代码:
1 | npm install hexo-neat --save |
紧接着在站点根目录下的配置文件添加如下代码:
1 | neat_enable: true |
然后直接输入 hexo cl && hexo g 就可以了,会自动压缩文件 。
补充:为了解决以上 Bug,对于halo主题(其他主题自行解决)需要将以上默认配置修改为:
1 | #hexo-neat 优化提速插件(去掉HTML、css、js的blank字符) |
外链跳转插件 hexo-external-link(可选安装)(使用了 halo 主题则必须安装)
hexo-external-link是一个跳转外链相关插件。自动为所有 html 文件中外链的 a 标签生成对应的属性。 比如 设置target=’_blank’, rel=’external nofollow noopener noreferrer’告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html。
安装:
1 | npm install hexo-external-link --save |
配置插件 在 Hexo 根目录的_config.yml 文件中添加如下配置:
1 | hexo_external_link: |
- enable:是否开启 hexo_external_link 插件 - 默认 false
- enable_base64_encode:是否对跳转 url 使用 base64 编码 - 默认 fasle
- url_param_name:url 参数名,在跳转到外链传递给 html_file_name 的参数名 - 默认 ‘u’
- html_file_name:跳转到外链的页面文件路径 - 默认 ‘go.html’
- target_blank:是否为外链的 a 标签添加 target=’_blank’ - 默认 true
- link_rel:设置外链的 a 标签的 rel 属性 - 默认 ‘external nofollow noopener noreferrer’
- domain:如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
- safety_chain:go.html 为了防止外链盗用 对域名进行的判断 - 默认 false 即关闭防盗链
添加 RSS 订阅支持(可选安装)(使用了 halo 主题则必须安装)
本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS,安装命令如下:
1 | npm install hexo-generator-feed --save |
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
1 | feed: type: atom; |
添加 sitemap 站点地图(可选安装)(使用了 halo 主题则必须安装)
本主题中还使用到了 hexo-generator-sitemap 的 Hexo 插件来做 Sitemap,安装命令如下:
1 | npm install hexo-generator-sitemap --save |
访问地址:/sitemap.xml
中文链接转拼音(可选安装)
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
这里为可选安装,因为我希望使用urlname进行连接访问,中文链接转拼音由一个缺点就是当文章名字过长会显示十分臃肿。
安装命令如下:
1 | npm i hexo-permalink-pinyin --save |
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
1 | permalink_pinyin: |
注:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。
添加 emoji 表情支持(可选安装)
本主题新增了对emoji表情的支持,使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成,把对应的markdown emoji语法(::,例如::smile:)转变成会跳跃的emoji表情,安装命令如下:
1 | npm install hexo-filter-github-emojis --save |
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
1 | githubEmojis: |
deploy 发布插件(可选安装)(部署到 github 需要安装)
如果你想通过deploy的方式进行推送public文件夹到托管网站,你需要安装
1 | npm install hexo-deployer-git --save |
当然你也可以选择不装,使用 Github Actions、docker 等方式
执行 hexo clean && hexo g 重新生成博客文件,然后在 public 文件夹中即可看到 atom.xml 文件,说明你已经安装成功了。
添加 DaoVoice 在线聊天功能(可选的)
前往 DaoVoice 官网注册并且获取 app_id,并将 app_id 填入主题的 _config.yml 文件中。
添加 Tidio 在线聊天功能(可选的)
前往 Tidio 官网注册并且获取 Public Key,并将 Public Key 填入主题的 _config.yml 文件中。
修改页脚
页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。
修改社交链接
在主题的 _config.yml 文件中,默认支持 QQ、GitHub 和邮箱等的配置,你可以在主题文件的 /layout/_partial/social-link.ejs 文件中,新增、修改你需要的社交链接地址,增加链接可参考如下代码:
1 | <% if (theme.socialLink.github) { %> |
其中,社交图标(如:fa-github)你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识,供你参考:
- Facebook: fab fa-facebook
- Twitter: fab fa-twitter
- Google-plus: fab fa-google-plus
- Linkedin: fab fa-linkedin
- Tumblr: fab fa-tumblr
- Medium: fab fa-medium
- Slack: fab fa-slack
- Sina Weibo: fab fa-weibo
- Wechat: fab fa-weixin
- QQ: fab fa-qq
- Zhihu: fab fa-zhihu
注意: 本主题中使用的 Font Awesome 版本为 5.11.0。