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

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

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

hexo的执行逻辑

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

页面内渲染

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

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

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

    1
    2
    3
    4
    5
    menu:
    首页: /
    归档: /archives/
    关于: /about/
    实验室: /lab/
  • source 目录下添加对应的 lab 源文件, hexo new page

  • lab 文件夹下的index.md文件头部添加 layout: false
  • lab 文件夹下添加index.html用于自定义html的渲染

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

完全渲染

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

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

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

    1
    2
    3
    4
    5
    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的文件夹中,因此这两种不同的配置会有两种不同的效果。