纪念博客搭建完成

Hexo是静态页博客生成利器，同很多博主一样，前端路上原创技术博客也是使用Hexo生成并托管在Github Page上的，但在使用Hexo的过程中遇到一个小问题，Hexo默认会对/source/里的所有页面应用主题模板渲染，但有一些前端作品或demo页我们不希望经过渲染，而是能保持完全自定义的样子，那该怎么用Hexo添加自定义的web页面呢？

例如添加「自己的照片墙」或「作品集」，分两种情况：

• 主题内渲染，添加的模块仍在主题内，主题头部信息依然存在，仅仅是在特定区域进行渲染（适合添加 about 页面）
• 完全页面渲染，在主题内点击对应链接跳转到一个完全崭新的页面（我需要的）

hexo 的执行逻辑

source 文件夹下存放了待被转化的 markdown 文件，在执行hexo g命令时，source 目录下的文件将被转化为 html 文件。

下面介绍两种方法：

第一种方法是使用Hexo提供的跳过渲染配置，适用于整个目录的设置。具体步骤，打开博客根目录_config.yml，找到其中skip_render项，这个项目用来配置/source/中需要跳过渲染的文件或目录，例如希望跳过/source/projects/里的所有文件渲染（这样我们就可以将自己的作品放在这个文件夹中，然后可以通过自己的网址/projects/…访问了），可以配置为：

`skip_render: projects/**`

• source /projects目录下添加「照片墙」源文件
• 在站点配置文件_config.yml中配置skin_render项，如：skip_render: projects/**，这样projects文件夹下的所以文件内容将不会转化为 html，直接被 copy 到 public 文件夹
• 在「照片墙」文件夹下添加 index.html 文件用于渲染自定义页面
  完成以上步骤即可点击「照片墙」菜单导航，完成自定义页面的展示。

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

匹配规则是一种类似正则的规则，官方给出的参考是这个。另外在测试这个功能的时候发现，Hexo的内部缓存不是特别好用，有时候你修改了配置但生成出来的内容不一定及时应用了新配置，最好在生成之前执行一下hexo clean命令，清除掉旧的生成文件和缓存。

第二种方法是给单个文件添加不应用模板的标记，适用于个别特殊文件的处理。例如我们的网站如果要使用百度统计，往往需要在根目录放一个html格式的验证文件，这个文件默认也会经过用主题模板渲染，避免渲染的办法就是在文件头部添加如下内容：

`---``layout: ``false``---`

相当于做了个免费的服务器用于存放文件，有能力的话还可以自己做一个网盘用于上传下载文件　　

这样，这个文件就不会经过模板渲染，最终发布到/public/里的文件就是去掉标记后的文件的样子。

前端路上，雅X共赏

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以加QQ（2602138376）