在Hexo插入已有HTML页面

摘要：在 Hexo 工程中插入已经设计好的 HTML 文件，使其正常在网站展示。

一. 原因及目标

1. 复盘 Hexo 通常使用方法

step1：从终端进入 hexo 目录，执行新建文章命令 hexo new "title"
step2：进入source/_posts文件夹，会发现以title命名的.md文件
step3：对文章进行渲染，执行hexo g
step4：进入public文件夹，会发现被渲染后的.html文件
step5：将本地文件发布到服务器，执行hexo d；或本地预览，执行hexo s

2. 针对已设计完毕 HTML 出现的问题

问题：直接把 HTML 放在 source/_post 文件夹下，或是source/下级其他文件夹中， HTML 文件会被再渲染，内容会发生错乱或丢失

3. 目标

• 已经设计好的 HTML 文件能够正常显示
• 在首页导航，能点击图标进入到对应的页面

二、解决方法

1. 文件存放位置

在站点 source 文件夹下，建立用于保存 HTML 文件的文件夹，例如source/git-guide，将 HTML 工程的全部文件，都放在该文件夹里面。

2. 设置文件不参与渲染

在 hexo 根目录的配置文件_config.yml文件里，找到skip_render行，并增加配置项，形式如下：

…
# 跳过渲染
skip_render:
  - "git-guide/**"
  - "git-demo/**"
…

配置文件语法说明：

skip_render
跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。

skip_render: "mypage/**/*"
将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录

你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
这将会忽略对 'test-post.md' 的渲染

3. 配置导航栏菜单项

step1：找到主题的配置文件
在当前使用主题的的_config.yml文件当中添加菜单信息
例如， next 主题配置文件路径一般为：themes\next\_config.yml

step2：在配置文件_config.yml设置menu字段及图标
形式如： 字段名: /链接/ || 图标

menu:
  home: / || fa fa-home
  about: /about/me.html || fa fa-user
  git-guide: git-guide/index.zh.html || fa fa-sitemap

step3：修改对应语言文件配置
在 themes\next\languages\zh-CN.yml添加git-guide字段的文本

menu:
  home: 首页
  git-guide: Git教程

4. 后续步骤

hexo g //渲染全部文件
hexo s //在本地预览
hexo d //部署到服务器