搭建 Hexo 博客的填坑经历和必要的优化

使用 Hexo 这一静态博客框架可以快速搭建并生成自己的博客,同时也可以使用很多优秀的 Theme。但在实际搭建过程中我也遇到了各种奇怪的错误,而官方针对开发的文档信息十分有限,当需要对主题中的源文件进行自定义时,可以参考的很少。写这篇文章的目的就是趁着博客刚刚搭建起来,整理所遇到的问题,并给出解决方案,以及一些优化建议等,也欢迎各位读者进行补充,可以在下方留言给我。

注意:

  • _config.yml 文件在网站项目下有两个,一个在项目根目录下,另一个在主题目录下,文中会标注,注意分辨;
  • 本博客使用的是 next 主题,某些设置和修改与该主题有关。

自定义主菜单及其页面显示

这一条同时也跟 next 主题 GitHub 项目中的 issue #1778 相关,虽然该问题已经关闭,但从回答的内容上来看并没有解决。next 主题默认有“首页”、“归档”、“分类”、”标签“、“关于”等页面,可以通过调整主题配置文件 _config.yml 中的 menu 参数启用或关闭。当我们启用“分类”页面后,如果博客中有相关的文章并标注了分类,该页面显示的是分类的统计信息,包括一共有几个分类;点击其中一个分类,进入的页面样式和“归档”页面相同,以时间线排列,仅显示发布时间以及标题或图片。

而我实际想要的是,首页显示所有发布的文章,增加的自定义菜单是不同的文章分类,例如我的博客有程序猿、创意集和碎碎念 3 个分类。点击每个分类菜单,页面显示的内容样式应该和首页相同,但仅为该分类下的所有文章。归档样式保持默认不变,显示的是时间线。

通过对主题的源码进行分析,需要进行的修改如下:

  1. 增加自定义菜单(文章分类),编辑主题配置文件 _config.yml 中的 menu,例如:

    1
    2
    3
    4
    5
    6
    menu:
    home: /
    programming: /categories/programming/
    creatives: /categories/creatives/
    dailylife: /categories/dailylife/
    archives: /archives/
  2. 增加中文翻译,假设网站使用简体中文,编辑主题目录 /languages/zh-Hans.yml,在 menu 中增加:

    1
    2
    3
    programming: 程序猿
    creatives: 创意集
    dailylife: 碎碎念
  3. 编辑 category_map 以设置 url slug,编辑站点配置文件 _config.yml 中的 category_map,例如:

    1
    2
    3
    4
    category_map:
    程序猿: programming
    创意集: creatives
    碎碎念: dailylife
  4. 修改分类页面样式,编辑主题目录 /layout/category.swig,删除所有代码,修改为:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {% extends '_layout.swig' %}
    {% import '_macro/post.swig' as post_template %}
    {% import '_macro/sidebar.swig' as sidebar_template %}

    {% block title %}{{ __('title.category') }}: {{ page.category }} | {{ config.title }}{% endblock %}

    {% block content %}
    <section id="posts" class="posts-expand">
    {% for post in page.posts %}
    {{ post_template.render(post, true) }}
    {% endfor %}
    </section>

    {% include '_partials/pagination.swig' %}
    {% endblock %}

    {% block sidebar %}
    {{ sidebar_template.render(false) }}
    {% endblock %}

保存修改后就大功告成了,hexo clean && hexo g && hexo server 之后,即可预览网站查看新增的分类菜单,并且分类页面的显示效果和首页一致。

在编辑新的 post 时,一定要在 Front-matter 中增加定义好的分类信息。

文章链接唯一化

Hexo 默认的文章链接包含文章的发布时间和标题,但我们可能会数次修改文章标题或者变更发布时间,这种情况下,文章的 url 会发生改变,不利于搜索引擎收录,也不利于分享。通过 hexo-abbrlink 插件生成唯一的永久链接是更好的选择。需要注意的是,安装此插件后,不要在 hexo s 模式下更改文章文件名,否则文章将成空白。

1
npm install hexo-abbrlink --save

站点配置文件 _config.yml 中查找代码 permalink:,将其更改为:

1
permalink: posts/:abbrlink/  # “posts/” 可自行更换

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

1
2
3
4
# Abbrlink Config
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

插件文档说明参考:hexo-abbrlink

搜索引擎优化

添加网站地图

为网站添加 sitemap 需要安装以下插件:

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

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

1
2
3
4
5
# hexo sitemap 
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

配置成功后,会生成 sitemap.xml 和 baidusitemap.xml,前者适合提交给 Google,后者适合提交百度。其次,在 robots.txt 中添加下面的一段代码,请替换自己网站的域名:

1
2
Sitemap: http(s)://xxx.xxx/sitemap.xml
Sitemap: http(s)://xxx.xxx/baidusitemap.xml

如果博客是托管在 GitHub 上,无需安装适用于百度的网站地图。因为一些不可描述的原因,GitHub 屏蔽了来自百度的抓取。

插件文档说明参考:hexo-generator-sitemaphexo-generator-baidu-sitemap

添加蜘蛛协议

robots.txt 放置在网站项目 \source 目录下。

1
2
3
4
5
6
7
8
9
10
11
12
#hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/

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

Sitemap: http(s)://xxx.xxx/sitemap.xml
Sitemap: http(s)://xxx.xxx/baidusitemap.xml

限制出站链接

网络爬虫会在当前页面搜索所有的链接,故有可能跳到别的网站。nofollow 标签是由 Google 开发的“反垃圾链接”标签,现已被百度、Yahoo、Bing 等各大搜索引擎广泛支持,引用 nofollow 标签的目的在于指示搜索引擎不要追踪(即抓取)网页上带有 nofollow 属性的任何出站链接,以减少垃圾链接的分散网站权重。安装插件:

1
npm install hexo-autonofollow --save

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

1
2
3
4
5
6
# Nofollow Config
nofollow:
enable: true
# exclude: # 例外的链接,可将友情链接放置此处,请同时去掉注释
# - exclude1.com
# - exclude2.com

这样网站中所有的外链全部会自动带上 nofollow 标签。

插件说明文档请参考:hexo-autonofollow

结语

在博客的搭建过程中,一些细节的调整还有不少,就不在这里一一描述了。请使用 Hexo 的朋友仔细阅读官方的文档以及 next 主题的说明文档,如果你还有其它问题,可以在下方给我留言。