使用hexo创建的静态博客，所有博文内容都是有markdown生成，且页面样式也是由下载的主题自动化生成的，那么想要在独立页面中大展身手的前端小伙伴，如何将写好的静态页面引入到hexo博客中呢？html，css，js等文件在hexo项目里如何避免被自动渲染呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

hexo
├─ public
|  └┈ demo
|     ├─ new_file.html
|     ├─ css
|     └┈ js
├─ source
|  ├─ _posts
|  ├─ demo
|  |  ├─ new_file.html
|  |  ├─ css
|  |  └┈ js
|  └┈ space
├─ themes
|  └┈ next
|     └┈ source
└┈ _config.yml

首先，在根目录下的source文件夹下，新建一个文件夹，用来存放静态页面文件。这里假设文件夹叫demo。
然后，在demo文件夹中放入所需的html文件。这里为new_file.html。
执行生成代码后，public文件夹中就会有相应的demo文件夹和其包含的文件生成。
此时，再在某个md文件中添加一个链接，访问地址"/demo/new_file.html"，即可链接到我们新建的new_file页面了。这时你会发现，我们访问到的new_file页面和在本地打开的并不相同，原因就是，hexo的source文件夹下的所有文件都会自动编译。
这种形式我们也可能用到，就是新引入的页面作为一篇博文的内容展示。这样做的话，就和写一篇md文章相差无几。
当然，使用html的好处就是可以随意修改css和js。这里就不建议使用外链的形式引入css、js，因为上面提到过，source文件下的文件都会被编译，从而导致css、js的编译错误。

那么，有没有方法可以避免文件被编译呢？

答案是肯定的。只要在文件开头加上

1
2

layout: false
---

即可。只是这个方法只适用于html文件，而且每个文件都要加，还是有很大的局限性。除此之外，有个还笨办法，就是把要引用的文件放到themes/(主题名)/source文件夹下，这样也会避免被编译，但本人不建议使用。

那么没有更好地办法了？

下面开始讲重点，时间宝贵的同学横线以上可忽略不看！
打开hexo项目根目录下的配置文件_config.yml，找到skip_render:，在这里就可以配置需要跳过渲染的文件。
例如，我们把所有静态页面放到source文件夹下的demo文件夹中，只要配置

1

skip_render: demo/**

就可以使demo下的所有文件（包括子文件）避免被编译。这样的匹配规则在许多前端框架和自动化工具中都有用到，前端小伙伴应该都很熟悉。举几个例子：

1
2
3
4

skip_render: demo/*             # 屏蔽demo文件夹下的文件，不包括子文件夹内的内容
skip_render: demo/**            # 屏蔽demo文件夹下的所有文件，包括子文件夹内的内容
skip_render: demo/index.html    # 屏蔽demo文件夹下的index.html，特指一个文件
skip_render: demo/*.html        # 屏蔽demo文件夹下的所有html文件

写多个筛选条件时，要这样：

1
2
3

skip_render:
	- space/**
	- demo/*

配置文件写好后，重新生成代码，就可以通过链接访问未经编码的原生页面了。这里有个小问题，在markdown页面里的链接只能在本页面打开，如果想实现以新标签打开链接，可以直接在markdown写<a target="_blank" href="#"></a>，或者通过js控制。

注意
在执行hexo g生成代码之前，建议先执行hexo clean将原有代码清空，以免造成混乱。