Hexo框架的回顾总结

发表于 2021-01-16 更新于 2023-10-31 分类于乐趣阅读次数：

将近一年多的时间没怎么整理过文档，更多的时候放在笔记里。但是笔记里的记录总是太随意。回过头来看，还是记录在网络上更为安全和踏实。

若干年前接触到 Hexo 这个框架，从起初的好奇到后来的放弃，中间经历了许多。现在回头看看，也是不错。之前的文档只求快速实现，自此之后，更多关注细节或者更深入的一些东西。

开始使用

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
想象一下，为什么要使用这个框架来实现一些东西呢？答案是快速和简单。作为当今时代的一个技术从业者，基本有部分人知道 Markdown 是个什么。恰巧我很喜欢这种语法格式，简洁且快速，不用再纠结于格式的调整和样式的美化。
所以当初选择了 Hexo。

安装

此处没有什么可说的。依赖环境就是 Node.js。跨平台，大部分设备都可以使用。

1	npm install -g hexo-cli

官方说的，强烈建议永远安装最新版本的 Hexo，以及推荐的 Node.js 版本。

建站

安装完 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1 2	cd <folder> hexo init

目录介绍

source 资源文件夹是存放用户资源的地方。除_posts文件夹之外，开头命名为_ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes 主题文件夹。Hexo 会根据主题来生成静态页面。

配置

网站

网址

文章

相对地址
默认情况下，Hexo 生成的超链接都是绝对地址。例如，如果您的网站域名为 example.com,您有一篇文章名为 hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。

常见问题

文件修改，但是内容没有变化

文件没有提交
- 检查 public 目录是否有对应的新的 HTML 文件
- 检查 Git 仓库是否是否有对应的新的 HTML 文件
仓库地址不对

搜索，总是转圈

搜索插件没有配置好

问题分析：

打开浏览器开发者工具，查看 search.xml 状态，是否 404，如果是则说明不存在

安装插件:
npm install hexo-generator-searchdb --save
修改根配置文件:

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

修改主题配置文件:

1
2
3

# Local search
local_search:
  enable: true

文章中包含特殊字符

问题分析：

打开浏览器开发者工具，查看 search.xml 状态，文件存在
浏览器访问域名+search.xml，提示报错信息

根据报错提示，在控制台定位具体文章标题
用Sublime Text3和Visual Studio Code分别打开文件对比看看，这两个编辑器都找到了特殊字符。删除特殊字符并保存。

优化方案

在使用过程中，search.xml文件报错的机率越来越高，有没有个好的方法一劳永逸呢？是的，使用JSON。更改文件后缀为JSON即可。

# 修改_config.yml
search:
  path: search.json
  field: post
  format: html
  limit: 10000
  content: true

valine.js加载慢

获取最新的 Valine.min.js 获取地址：https://www.jsdelivr.com/package/npm/valine

拿到URL之后修改文件，替换链接即可：

1
2
3

vim themes/next/layout/_third-party/comments/valine.swig
# 更改为
{% set valine_uri = '//cdn.jsdelivr.net/npm/valine@1.5.1/dist/Valine.min.js' %}