hexo添加自定义页面

hexo是一个快速搭建静态博客的利器，目前很多同学都在使用hexo在github上部署了自己的静态博客，用于记录平时的技术心得。github上可以搜到很多的关于hexo的主题，如何在主题之外添加自定义的页面？比如，添加 照片墙 或者 实验室 等页面。目前发现添加此类页面有两种情况：

• 主题内渲染，添加的模块仍然包含在该主题中，主题头部等信息依然存在，仅仅是在特定区域进行渲染
• 完全页面渲染，在主题内点击对应的链接后，跳转到一个完全崭新的页面

接下来对两种情况进行分别说明。

hexo的执行逻辑

source文件夹下存放了待被转化的markdown文件，比如 _post 目录下存放了所有文章的markdown文件, about 目录下存放了 关于 模块的源文件。在执行 hexo g 命令时，source目录下的文件将被转化为html文件。

页面内渲染

这种情况对应了自定义页面在主题内部进行渲染，包含有主题的布局。

以本站添加 实验室 模块为例：

• 主题配置文件 _config.yml 文件中添加对应的 menu 项，如：

  menu:
      首页: /
      归档: /archives/
      关于: /about/
      实验室: /lab/

• source 目录下添加对应的 lab 源文件, hexo new page
• lab 文件夹下的index.md文件头部添加 layout: false
• lab 文件夹下添加index.html用于自定义html的渲染

完成以上步骤即可发现在点击对应的 实验室 菜单导航时，页面中出现了刚才自定义的html的内容

完全渲染

这种情况对应了自定义页面在一个崭新的页面进行渲染，不包含主题布局

同样以添加 实验室 模块为例：

• 主题配置文件 _config.yml 文件中添加对应的 menu 项，如：

  menu:
      首页: /
      归档: /archives/
      关于: /about/
      实验室: /lab/

• source 目录下添加对应的 lab 源文件, hexo new page
• 在站点配置文件 _config.yml 中配置 skip_render 项，如：lab/**,这样就意味着lab文件夹下的内容将不会转化为html，直接被 copy 到public 文件夹
• 在 lab 文件夹下添加 index.html 文件用于渲染自定义的页面

完成以上步骤，即可在点击 实验室 导航菜单时，完成自定义页面的展示。

经测试发现，hexo对于页面内处理是将自定义的页面的html内容插入到主题布局中，而完全渲染是将自定义的html原封不动的复制到public的文件夹中，因此这两种不同的配置会有两种不同的效果。