hexo必备插件


张登友,张登友的博客,张登友的网站——

部署插件

Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。

hexo deploy

开始之前,您必须先在 _config.yml 中修改参数,一个正确的部署配置中至少要有 type 参数,例如:
单个地址

deploy:
  type: git

同时使用多个 deployer,Hexo 会依照顺序执行每个 deployer。

deploy:
- type: git
  repo:
- type: heroku
  repo:

缩进
YAML依靠缩进来确定元素间的从属关系。因此,请确保每个deployer的缩进长度相同,并且使用空格缩进。

1.安装 hexo-deployer-git

npm install hexo-deployer-git --save

2.修改配置。

deploy:
  type: git
  repo: <repository url> #https://github.com/libaiddd/zdy.github.io
  branch: [branch]
  message: [message]
参数 描述
repo 库(Repository)地址
branch 分支名称
message 自定义提交信息

repo值通常为https://github.com/libaiddd/zdy.github.io
message为:

Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

3.生成站点文件并推送至远程库。执行 hexo clean && hexo deploy
4.登录 Github/BitBucket/Gitlab,请在库设置(Repository Settings)中将默认分支设置为_config.yml配置中的分支名称。稍等片刻,您的站点就会显示在您的Github Pages中。

hexo 本地预览图片修复插件

hexo-asset-image-fix

hexo-asset-image Fork,修复了图像路径未使用hexo配置中的根路径的问题。自动为hexo中的资产图片提供绝对路径

使用方法

npm install hexo-asset-image --save

或者

npm install hexo-asset-image-fix --save

hexo5.0以上版本搭配某些主题(比如Butterfly)可能需要修改hexo根目录的_config.yml,否则生成图片的绝对引用链接始终不正确

post_asset_folder: true #必须修改的一项
marked:									#此项为手动添加
  prependRoot: true
  postAsset: true

代码高亮

hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:

npm i -S hexo-prism-plugin

然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'     #主题选项
  line_number: false    # default false
  custom_css:

可用的主题有

coy,dark,funky,okaidia,solarizedlight,tomorrow,twilight,a11y-dark,atom-dark,base16-ateliersulphurpool.light,cb,darcula,dracula,duotone-dark,duotone-earth,duotone-forest,duotone-light,duotone-sea,duotone-space,ghcolors,hopscotch,material-dark,material-light,material-oceanic,pojoaque,shades-of-purple,synthwave84,vs,xonokai,default,

搜索插件

hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:

npm install hexo-generator-search --save

中文链接转拼音

如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:

npm i hexo-permalink-pinyin --save

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

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

注:除了此插件外,hexo-abbrlink插件也可以生成非中文的链接。

文章字数统计插件

在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。
安装命令如下:

npm i --save hexo-wordcount

然后在主题下的 _config.yml 文件中,将各个文章字数相关的配置激活即可:

postInfo:
  date: true
  update: false
  wordCount: false # 设置文章字数统计为 true.
  totalCount: false # 设置站点文章总字数统计为 true.
  min2read: false # 阅读时长.
  readCount: false # 阅读次数.

添加emoji表情支持

本主题新增了对emoji表情的支持,使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成,把对应的markdown emoji语法(::,例如::smile:)转变成会跳跃的emoji表情,安装命令如下:

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

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

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

添加 RSS 订阅支持

(暂未使用过这个插件,但是还是写上,万一用上了呢)
本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS,安装命令如下:

npm install hexo-generator-feed --save

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

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件,然后在 public 文件夹中即可看到 atom.xml 文件,说明你已经安装成功了。

生成网站地图

我们需要使用npm自动生成网站的sitemap,然后将生成的sitemap提交到百度和其他搜索引擎
安装sitemap插件如下:

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save

修改博客配置文件
在根目录配置文件.yml中修改url为你的站点地址

# URL
# If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: https://www.zdyn.cn/
url: https://www.zdynb.cn
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

执行完hexo g命令之后就会在网站根目录生成sitemap.xml文件和baidusitemap.xml文件,可以通过:https://www.zdynb.cn/baidusitemap.xml, 查看该文件是否生成,其中sitemap.xml文件是搜索引擎通用的文件,baidusitemap.xml是百度专用的sitemap文件。

设置主动推送

安装插件hexo-baidu-url-submit

npm install hexo-baidu-url-submit --save

然后再根目录的配置文件中新增字段

baidu_url_submit:
  count: 80             # 提交最新链接数量
  host: www.zdynb.cn    # 在百度站长平台中注册的域名
  token: xxxxxxxxxxxxxx # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt  # 文本文档的地址, 新链接会保存在此文本文档里

设置自动推送

在主题配置文件下设置,将baidu_push设置为true:

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

然后主题文件目录加入下面代码,一般在目录/themes/matery/layout/_partial中的head.ejs中加入下面JS代码(有可能你的目录不是这样,原理类似),这样全站都有了:

<% if (theme.baidu_push) { %>
    <script>
        (function(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>
<% } %> 

题外话(有点偏题了,哈哈)

提交 robots.txt:
robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件,它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的,哪些是禁止爬取的。robots.txt 放在博客目录下的 source 文件夹中,博客生成后在站点目录 /public/ 下。

我的 robots.txt 文件内容如下:

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /about/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/

robots.txt 文件更新至网站后可进入 Google Search Console - 抓取 - robots.txt 测试工具进行测试。

优化hexo的url

SEO搜索引擎优化认为,网站的最佳结构是用户从首页点击三次就可以到达任何一个页面,但是我们使用hexo编译的站点打开文章的url是:sitename/year/mounth/day/title四层的结构,这样的url结构很不利于seo,爬虫就会经常爬不到我们的文章,于是,我们需要优化一下网站文章url
方案一:
我们可以将url直接改成sitename/title的形式,并且title最好是用英文,在根目录的配置文件下修改permalink如下:

url: https://www.zdyn.cn
root: /
permalink: :title.html
permalink_defaults:

方案二:

使用插件优化url

插件hexo-abbrlink实现了这个功能,它将原来的URL地址重新进行了进制转换和再编码。

安装hexo-abbrlink:

npm install hexo-abbrlink --save

配置博客根目录下的_config.yml文件:

# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32  # 算法:crc16(default) and crc32
  rep: hex    # 进制:dec(default) and hex

hexo-filter-nofollow - Hexo 官方的 nofollow 插件

hexo-filter-nofollow 是一个自动为 Hexo 博客中的外链添加 rel=”external nofollow noreferrer” 的插件。
使用npm安装

npm i hexo-filter-nofollow --save

如果你使用 yarn 作为你的 Hexo 的包管理器,你也可以使用下述命令:
使用yarn安装,yarn安装教程

yarn add hexo-filter-nofollow

然后在根目录的_config.yml添加以下选项

nofollow:
  enable: true #是否启用插件,默认值为 true
  field: site #插件的处理范围,默认值为 site,可选 post 或 site
  exclude: #域名白名单
    - 'exclude1.com'
    - 'exclude2.com'

enable - 是否启用插件,默认值为 true
field - 插件的处理范围,默认值为 site,可选 post 或 site
post - 仅处理文章内容
site - 处理全站所有页面
exclude - 域名白名单,不同的子域名视为不同的域名(如 www)
exclude1.com不包括 www.exclude1.comen.exclude1.com

其他SEO优化

SEO优化应该说是一个收益延迟的行为,可能你做的优化短期内看不到什么效果,但是一定要坚持,seo优化也是有很深的可以研究的东西,从我们最初的网站设计,和最基础的标签的选择都有很大的关系,网站设计就如我们刚刚说的,要让用户点击三次可以到达网站的任何一个页面,要增加高质量的外链,增加相关推荐(比如说我们经常见到右侧本站的最高阅读的排名列表),然后就是给每一个页面加上keyword和描述

在代码中,我们应该写出能让浏览器识别的语义化HTML,这样有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;并且对外链设置nofollow标签,避免spider爬着爬着就爬出去了(减少网站的跳出率),并且我们要尽量在一些比较大的网站增加我们站点的曝光率,因为spider会经常访问大站,比如我们在掘金等技术社区发表文章中带有我们的站点,这样spider是很有可能爬到我们中的站点的,所以说,重要的还是:

网站外链的推广度、数量和质量
网站的内链足够强大
网站的原创质量
网站的年龄时间
网站的更新频率(更新次数越多越好)
网站的服务器
网站的流量:流量越高网站的权重越高
网站的关键词排名:关键词排名越靠前,网站的权重越高
网站的收录数量:网站百度收录数量越多,网站百度权重越高
网站的浏览量及深度:用户体验越好,网站的百度权重越高


文章作者: 张登友
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 张登友 !
  目录