利用 Hexo 搭建个人博客（四）博客优化

发表于 2017-09-28 分类于创建个人博客教程本文字数： 2.6k 阅读时长 ≈ 9 分钟

说在前面

Hexo 提供了许多的博客主题，链接可以在参考中找到。本文以使用 Next 主题为例，仅提供部分优化参考，其他优化配置请阅读官方文档。

Next 8.x

多目录设置

以下的分类配置会把一篇文章放到 Sports/Baseball 目录下：

1
2
3

categories:
  - Sports
  - Baseball

也可以这样写

1	categories: [Sports,Baseball]

如果要把一篇文章放到多个不同的同级目录下，可以写为：

1
2
3

categories:
  - [Sports]
  - [Baseball]

引用

安装 hexo-reference 插件 npm install hexo-reference --save，并使用说明中的语法即可。

自定义字体一

添加 source/_data/head.njk

1
2

<link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-webfont/1.6.0/style.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css" />

修改 _config.next.yml

custom_file_path:
  head: source/_data/head.njk

# ...

font:
  # ...
  family: LXGW WenKai Screen, LXGW WenKai

自定义字体二

下载喜欢的字体（建议 woff2 格式）到 /source/fonts 目录，创建 /source/_data/styles.styl 文件，写入类似如下配置：

@font-face {
    font-family: "LXGW WenKai GB Screen";
    src: url("/fonts/LXGWWenKaiGBScreen.woff2") format("woff2");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

修改主题配置文件，添加如下内容：

1 2	custom_file_path: style: source/_data/styles.styl

在 font: 设置中添加字体 LXGW WenKai GB Screen 即可。

Next 6.x

安装使用

Next 主题官网已转移至 https://github.com/theme-next/hexo-theme-next

启用 Mathjax

参照主题配置文件设置。

新版本似乎已经修复了 _ 与 Markdown 语法冲突的问题，不需要写成 \_ 。

MathJax 中 \\ 仍然与 Markdown 语法存在冲突，写矩阵和方程组时 \\ 需要写成 \\\\ 。

MathJax 支持 \lbrace ， \rbrace 和 \{ ， \} 两种显示方式，但是写博客只能使用前一种，因为语法冲突 Hexo 不会显示后一组。

本地搜索

改用 hexo-generator-search 插件

文章内链接

想要在文章中链接自己曾经的文章，只要 [xxx](../<urlname>)

字数统计，阅读时长等

参考主题配置文件设置。

禁止爬虫跟踪外链

当你提交了链接，写好了蜘蛛爬取协议之后，搜索引擎的蜘蛛就会来爬取你的文章内容。但是，如果你的文章中有外链，蜘蛛就会通过这个链接到别人的站点去。如果这个站点是友情链接还好，如果是非友链，就会严重影响网站的爬取。

为了避免蜘蛛进入非友情链接，需要为非友链添加上 nofollow 属性。~~推荐使用 hexo-autonofollow 插件。~~ 请使用 hexo-filter-nofollow 插件。详情参考此处。

~~在站点根目录下执行：~~

1	npm install hexo-autonofollow --save

修改站点配置文件，添加如下内容：

nofollow:
    enable: true
    exclude: # 例外链接
    - 你自己的站点地址
    - 友链地址

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

插件自动添加的属性为 external nofollow noopener noreferrer 。一般来说标准的 nofollow 属性只需要 external nofollow 即可，noopener noreferrer 估计是新闻上说的钓鱼漏洞的补救方法，不过这条属性会影响站长工具的友链检测。

如果想要去掉 noopener noreferrer，修改 /yoursite/node_modules/hexo-autonofollowlib/filter.js ：

1	rel: 'external nofollow noopener noreferrer'

去掉其中的 noopener noreferrer ，再生成即可。

匹配主题的 404 页面

输入 hexo new page 404
生成文件默认在 Hexo 文件夹根目录下 /source/404/index.md
在顶部插入一行，写上 permalink: /404，这表示指定该页固定链接为 http://"主页"/404.html （然而并没有测试成功）
如果你用了 Nginx，你只写 404 网页也是无效的，不存在的网址打开依然是 Nginx 默认的错误页，想生效你还要稍微配置下 Nginx：
- 在 Nginx 配置文件 /etc/nginx/nginx.conf 的 http 区加入
  1
  fastcgi_intercept_errors on;
- 在自己网站的配置文件（一般在 /etc/nginx/conf.d/ ）的 server 区加入
  1
  error_page 404 /404.html;
- 重启

RSS

安装 hexo-generator-feed: npm install hexo-generator-feed --save
在主题的 _config.yml 文件中找到 RSS ，根据说明留空即可

修改网站的 _config.yml ，添加配置

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

Next 4.x

首页不显示文章全文

在写 markdown 文章时在 Font-matter 后添加  ，首页会自动显示该标签前内容，省略标签后内容。

或在 Front matter 中添加 description: 字段。

MathJax

NexT 中开启对 MathJax 的支持

编辑主题的 _config.xml 文件

# MathJax Support
mathjax:
  enable: false
  per_page: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

将 enable: false 修改成 enable: true

复制 MathJax 代码

查看网页源码
在公式上右键，Show Math As -> Tex Commands

注意事项

~~在 Markdown 中使用 MathJax 下标 _ 时，记得一定要改写成 \_ ，否则将会出现不能解析的情况。~~

添加本地搜索

站点目录下执行 npm install hexo-generator-searchdb --save
编辑站点文件，添加以下内容

search:
  path: search.xml
  field: post
  format: html

编辑主题文件,启用本地搜索

1
2
3

# Local search
local_search:
  enable: true

注：
- 本地、服务器都需要安装 hexo-generator-searchdb 插件
- 第一次加载的等待时间会比较长
- 实在加载不出来请检查 public 文件夹下的 search.xml 文件是否生成

修改永久链接

hexo 默认是使用日期和文章名作为链接，十分不友好。为了让文章使用英文链接，文章题目仍旧保留中文名，做如下修改：

在文章 Font-matter 中添加 urlname: xxxx ，这个 xxxx 即为你想要的英文链接
在站点配置文件中修改 permalink: :urlname.html

文章尾部添加版权信息

修改主题配置文件

# Declare license on posts
post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

把 enable: 的值为修改为 true

修改文章底部带 # 号的标签

主要目的是把难看的 # 号修改成标签图案。

修改文件 /themes/next/layout/_macro/post.swig，搜索 rel="tag"># ，把 # 换成 <i class="fa fa-tag"></i>

文章字数统计，阅读时长，全站字数统计

切换至博客根目录下安装 npm install hexo-wordcount --save
在主题配置文件中打开 word-count 功能

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

修改 Blog\themes\next\layout\_macro\post.swig 文件，把 字 、 分钟 添加到以下位置

<span title="{{ __('post.wordcount') }}">
  {{ wordcount(post.content) }} 字
</span>
 ...
<span title="{{ __('post.min2read') }}">
  {{ min2read(post.content) }} 分钟
</span>

修改 /themes/next/layout/_partials/footer.swig 文件，尾部加上

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

实现顶部加载条

修改 /themes/next/layout/_partials/head.swig 文件，在 maximum-scale=1”/> 后添加代码

1 2	<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script> <link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

改变加载条颜色，在刚才文件中添加代码（加在刚才的 link 后面）

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

动态标题 / 崩溃欺骗

在 \themes\next\source\js\src 目录下新建 dynamticTitle.js 。添加以下内容：

//崩溃欺骗
var OriginTitile = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/TEP.ico");
         document.title = ' 呀，页面崩溃啦 ~ | Nullplus ！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = ' 噫，又好了~ ' + OriginTitile;
         titleTime = setTimeout(function () {
             document.title = OriginTitile;
         }, 2000);
     }
 });

更改 \themes\next\layout\_layout.swig 。在 </body> 之前添加：

1 2	<!--崩溃欺骗--> <script type="text/javascript" src="/js/src/dynamticTitle.js"></script>

博客压缩

安装 hexo-neat，在根目录下执行 npm install hexo-neat --save。

在站点配置文件下添加

# hexo-neat 静态资源压缩
neat_enable: true
neat_html:
  enable: true
  exclude:
neat_css:
  enable: false
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

文章更新时间添加

如果要显示每篇文章的更新时间，通过以下步骤，可以通过主题配置文件选择显示或者不显示更新时间。

修改主题配置文件

hexo/themes/hexo-theme-next/_config.yml

1 2	post_meta: updated_at: true

文章的 Font_matter 设置

在文章的开头增加

1	updated: 2017-12-13 20:18:54

可自定义设置修改时间。

SEO 优化

准备

百度账号
谷歌账号
Google Search Console
百度站长平台

验证站点是否被收录

在百度 / 谷歌中搜索 site:yoursite.com，如果没有结果则未被收录

收录网站

谷歌

HTML 标签验证

登陆 Google Search Console , 选择 HTML 验证，获得你的 HTML 标签。
在 next 主题配置文件内设置 google_site_verification: true

修改 themes/next/layout/_partials/head.swig 修改对应代码

1
2
3

{% if theme.google_site_verification %}
  <meta name="google-site-verification" content="xxx....xxx" />
{% endif %}

提交部署，进入你的首页，按 F12 查看源代码，在 <head> 标签中查看到 <meta name="google-site-verification" content="xxx....xxx" /> 即成功
在 Search Console 端验证提交即可

百度

HTML 标签验证

参考谷歌

文件验证（并不推荐）

下载验证文件，格式为.html
然后将这个文件放在你的主题的根目录下，之所以不放在 source 文件夹是因为 next 主题在构建过程中会在验证文件中加入很多东西影响验证（？存疑，尚未验证，放在 source 文件夹下应该也可以）
部署验证

自动推送

修改主题配置文件，修改 baidu_push: 的值为 true

修改 themes\next\layout\_scripts\baidu_push.swig，添加如下代码（代码来自百度自动推送）

{% 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>
{% endif %}

添加站点地图

安装插件

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

在站点配置文件内添加

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

站点配置文件内将 url: http://yoursite.com 修改为你的网址

添加蜘蛛协议 ( robots.txt )

在站点 source 文件夹下创建 robots.txt ，添加文件内容：

User-agent: *
Allow: /
Allow: /archives/
Allow: /tags/
Allow: /categories/
Allow: /about/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://yoursite.com/sitemap.xml
Sitemap: http://yoursite.com/baidusitemap.xml

添加关键字

修改 scaffolds/post.md 文件，添加 keywords 和 description 字段。

修改 `nofollow` 标签

修改 themes\next\layout\_partials\footer.swig 文件，将

1	{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}

修改为

1	{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io" rel="external nofollow">Hexo</a>') }}

将

1	<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">

修改为

1	<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">

修改 themes\next\layout\_macro\sidebar.swig 文件，将

1	<a href="{{ link }}" target="_blank" title="{{ name }}">

修改为

1	<a href="{{ link }}" target="_blank" title="{{ name }}" rel="external nofollow">

说在前面

Next 8.x

多目录设置

引用

自定义字体一

自定义字体二

Next 6.x

安装使用

启用 Mathjax

本地搜索

文章内链接

字数统计，阅读时长等

禁止爬虫跟踪外链

匹配主题的 404 页面

RSS

Next 4.x

首页不显示文章全文

MathJax

NexT 中开启对 MathJax 的支持

复制 MathJax 代码

注意事项

添加本地搜索

修改永久链接

文章尾部添加版权信息

修改文章底部带 # 号的标签

文章字数统计，阅读时长，全站字数统计

实现顶部加载条

动态标题 / 崩溃欺骗

博客压缩

文章更新时间添加

修改主题配置文件

文章的 Font_matter 设置

SEO 优化

准备

验证站点是否被收录

收录网站

谷歌

HTML 标签验证

百度

HTML 标签验证

文件验证（并不推荐）

自动推送

添加站点地图

添加蜘蛛协议 ( robots.txt )

添加关键字

修改 nofollow 标签

修改 `nofollow` 标签