前言

本来准备使用django写一个博客网站，但是感觉时间不够用，就先使用Hexo凑合用着吧。
推荐参考：

安装

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

然后即可安装hexo：

npm install -g hexo-cli

初始化

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

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

预览，这一步可以不用管

1
2
hexo g  # 生成静态网页
hexo s  # 本地预览

GitHub 一键部署

  1. 建立名为 <你的 GitHub 用户名>.github.io 的储存库，若之前已将 Hexo 上传至其他储存库，将该储存库重命名即可。

  2. 安装 hexo-deployer-git

    npm install hexo-deployer-git --save

  3. 配置 _config.yml
    配置 deploy

1
2
3
4
5
deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

配置 url:

1
2
url: https://johnsmith.github.io/johnsmith.github.io
root: /

  1. 部署

    hexo clean && hexo d

架构

主代码： node_modules/hexo/dist/hexo/index.js

过程

  1. constructor -> _bindLocals
  2. init
  3. ready
  4. render
  5. generate

其他

图片文件链接设置

新方法 使用 hexo-renderer-markdown-it

hexo-renderer-marked 难用，又不太行，直接卸载，换 hexo-renderer-markdown-it

再使用以下配置，问题就解决了。

1
2
3
4
5
post_asset_folder: true
markdown:
    images:
      prepend_root: true
      post_asset: true
1
2
3
4
# 卸载原有的
npm un hexo-renderer-marked --save
# 安装高级的
npm i hexo-renderer-markdown-it --save

旧方法 使用 hexo-renderer-marked

  1. 配置 _config.yml
1
2
3
4
post_asset_folder: true
marked:
    prependRoot: true
    postAsset: true
  1. vscode 配置 markdown.copy (paste image 不好用)，新增配置项 key 为 *.md ， value 为 ${documentBaseName}/${fileName}
  2. 以上配置之后，hexo 只会识别 ![Alt text](image-1.png) 不会识别 ![Alt text](solitude/image-1.png) ，还需要改代码

hexo/node_modules/hexo-renderer-marked/lib/renderer.js

1
2
3
4
# 234 行
postPath = join(source_dir, dirname(postSource), basename(postSource, extname(postSource)));
# 注释掉，改成
postPath = join(source_dir, dirname(postSource));

捕获 Hexo 渲染过程中的 LaTeX 警告

使用 hexo-renderer-markdown-it 之后，因为 LaTeX 公式中不支持 Unicode 字符，所以中文会抛出警告：

LaTeX-incompatible input and strict mode is set to 'warn': Unicode text character "等" used in math mode [unicodeTextInMathMode]

hexo 的渲染是在 node_modules/hexo/dist/plugins/filter/before_generate/render_post.js 中进行的，进行以下修改忽略warn。

1
2
3
4
5
6
7
8
9
10
//修改：
return this.post.render(post.full_source, post).then(() => post.save());
//改为：
// 重写 console warn 方法以忽略所有消息
const originalConsoleWarn = console.warn;
console.warn = function() {};
return this.post.render(post.full_source, post).then(() => post.save()).finally(() => {
    // 恢复原始的 console 方法
    console.warn = originalConsoleWarn;
});

或者也可以改一下 hexo-renderer-markdown-it ，例如 node_modules/@renbaoshuo/markdown-it-katex/index.js 文件。

1
2
3
4
5
6
7
8
9
10
//修改：
return katex.renderToString(latex, { ...options, displayMode });
//改为：
// 重写 console warn 方法以忽略所有消息
const originalConsoleWarn = console.warn;
console.warn = function() {};
return katex.renderToString(latex, { ...options, displayMode }).finally(() => {
    // 恢复原始的 console 方法
    console.warn = originalConsoleWarn;
});

创建“分类”选项

  1. 运行:

    hexo new page categories

  2. 显示以下信息创建成功:

    INFO Created: ~/Documents/blog/source/categories/index.md

  3. 添加 type: “categories” 到 index.md 中，添加后是这样的：

1
2
3
4
5
---
title: categories
date: 2017-05-27 13:47:40
type: "categories"
---
  1. 给文章添加 categories 属性, hexo 一篇文章只能属于一个分类，多个分类会嵌套（即该文章属于 web前端 下的 jQuery 分类）
1
2
3
4
5
6
7
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories: 
- web前端
- jQuery
---

创建“标签”选项

  1. 运行:

    hexo new page tags

  2. 显示以下信息创建成功:

    INFO Created: ~/Documents/blog/source/tags/index.md

  3. 添加 type: “tags” 到 index.md 中，添加后是这样的：

1
2
3
4
5
---
title: tags
date: 2017-05-27 13:47:40
type: "tags"
---
  1. 给文章添加 tags 属性, hexo 一篇文章可以有多个标签。
1
2
3
4
5
6
7
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
tags: 
- web前端
- jQuery
---