Hello Hexo Again

发表于 本文字数： 2.1k 阅读时长 ≈ 2 分钟

这个博客是用 Hexo 构建的，最近换电脑 Hexo 博文源文件全部丢失了，这才发现像 Hexo 这种构建工具需要特别注意源文件备份，否则数据风险还挺高的。如果像我一样源文件已然丢失，其实也没有什么好的恢复方法，只能手动再配置一遍主题，再将博文搬运过来。

这个过程非常需要 html 转 markdown 工具，比如我用的这个，如果文章数量不太多，其实也花不了太多时间。而且这个重建博客的过程中往往我们会解决很多之前不完美而又懒得解决的问题。本文主要记录一下这两天我遇到的问题和解决过程。

Hexo 博客怎么备份源文件

Hexo 博客默认部署方式会将构建后文件也就是public/文件夹，直接部署到目标仓库的 master 分支，如果想连源文件一起交由 github 管理，部署方式需要改成分支部署，比如另建一个page分支用于发布构建后文件，将 Hexo 的部署配置改为：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/tower1229/tower1229.github.io # 你的git仓库地址
  branch: page # 你的GitHubPage发布分支

配合 github-page 在 source 中选择page分支，就可以实现 Hexo 博客的分支发布了。此时就可以将博客目录整体提交到 master 分支，别忘了忽略public/。

Hexo 博客自定义 layout 页面

我的博客里有很多单页，比如个人简介，项目介绍这种，这些单页其实类似文章详情页，但是内容区域不要展示页面的 title 和发布信息之类的，也不希望展示评论组件，现有的 layout 都满足不了，需要自己创建一个新的 layout。

方法也很简单，

  • 复制themes\next\layout\post.swig到themes\next\layout\blank.swig
  • 复制themes\next\layout\_macro\post.swig到themes\next\layout\_macro\blank.swig
  • 删掉themes\next\layout\blank.swig中不需要的文章标题之类的内容，修改{{ partial('_macro/post.swig', {post: page}) }}为{{ partial('_macro/blank.swig', {post: page}) }}

然后配置主题配置增加博客导航菜单，并在source/文件夹创建对应的文件，比如source/about/index.md。页面配置更换 layout，并关掉评论：

1
2
3
4
5
---
title: 前端简历
layout: blank
comments: false
---

Hexo 博客自定义文章底部

做过 SEO 的应该知道文章内容里是需要一定的关键词密度的，简单的做法在头部底部插入一段包含指定关键词的文案，重点在于这个插入段落必须在“文章正文”的部分，比如我用的NexT主题，正文就是<div class="post-body">...</div>这个元素里，想在这里插入内容需要修改themes\next\layout\_macro\post.swig这个文件，根据注释文章内容开始结束位置插入你想要的内容。

注意修改的时候加上非首页判断，因为 NexT 主题的首页和文章详情共用这个模板。

1
2
3
{%- if not is_index %}

{%- endif %}

重新构建，所有的文章都会带上自定义底部了。但还有个小问题，如果像本站一样希望在文章末尾加一个转载地址链接，在 Hexo 文档里找到page.permalink变量作为锚文本的话，会出现中文自动编码的情况，而我们希望锚文本是可读的，这个 Hexo 并没有现成的变量可以实现，需要手动拼接网站域名和文章路径，像这样：

1
2
3
4
5
<p>
  前端路上原创技术文章，转载请注明出处：<a href="{{ page.permalink }}"
    >{{ config.url }}/{{ page.path }}</a
  >
</p>

Hexo 首页展示文章摘要

默认使用 NexT 主题会发现首页把文章全文都展示出来了，我们通常希望首页展示少量摘要就好，这样可以一屏内展示更多的内容，我记得之前我用的版本是可以自动生成摘要的，其实也简单，就是自动提取内容跟的前 200 字符，不过最新版的 NexT 主题没有这个功能，想要使用摘要最方便的办法就是在正文插入 more 标签：

1
<!-- more -->

标签之前的内容会作为摘要展示在首页列表上，行吧，这样也有好处，就是摘要的内容一定程度上可以自由控制，不会出现断句的情况，习惯之后也不算麻烦，文章都写了，还差多写一个标签么。

Hexo 不需要全局安装

其实 Hexo 作为一个博客生成器，本来就没必要全局安装，只要在博客根目录的package.json配置好依赖和 npm 脚本，也可以像普通前端项目一样，拉下源码执行一下npm install就可以继续开发了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
"scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "serve": "hexo server",
    "algolia": "hexo algolia",
    "new": "hexo new post Artical"
  },
  "hexo": {
    "version": "5.4.0"
  },
  "dependencies": {
    "hexo": "^5.4.0",
    "hexo-algolia": "^1.3.2",
    "hexo-deployer-git": "^3.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-baidu-sitemap": "^0.1.9",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-sitemap": "^2.2.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^4.1.0",
    "hexo-renderer-stylus": "^2.0.1",
    "hexo-server": "^2.0.0"
  }

Hexo 博客必备插件

  • hexo-deployer-git GitHubPage 部署
  • hexo-generator-sitemap 自动生成站点地图
  • hexo-generator-baidu-sitemap 同上，不过是百度版本

Hexo 博文字数统计的 bug

在当前版本Hexo v5.4.0 + hexo-theme-next v7.8.0下，安装 NexT 主题默认继承的字数统计插件hexo-symbols-count-time v0.7.1会出现统计不出字数和阅读时间的问题，原因是模板里调用字数统计方法时，传的参数不符合预期，需要修改themes\next\layout\_macro\post.swig：

1
2
3
4
5
6
7
<span>{{ symbolsCount(post) }}</span>
改为：
<span>{{ symbolsCount(post.content) }}</span>

<span>{{ symbolsTime(post,
改为：
<span>{{ symbolsTime(post.content,

以上就是重建博客我觉得值得记录的点，好了我要去搬运博文了 — —