Hexo内嵌网页踩坑记录

首先，我先来说一说这个需求产生的原因，我前些日子更新了一些 CSS 相关的博客，但是我发现，要展示 CSS 的效果，必须要用到一些交互的功能，我必须要写一些小 demo，然后嵌入到网页中去。

一开始，我使用的就是纯粹的 HTML 代码，加上 style 和 script 标签，直接写在 .md 里面。

我意识到这不是一个好方法，一篇博客有时候需要多个 demo ，随着代码越来越多，每个 demo 之间会产生冲突，我迫切需要隔离它们。

使用 iframe

随着我的代码越来越多，我发现在一篇博客中定义很多 demo 并管理好样式和脚本不冲突是非常困难的。

我决定使用 iframe 来内嵌网页，做到每一个 demo 的隔离，不互相影响对方。

想要嵌入这样的一个网页，我需要先编写好 HTML、CSS、JS，然后在文章中使用 iframe 把他们挂载进来:

<iframe src="/assets/css-box-model/example4.html" height="300px" width="100%" scrolling="auto" frameborder="0" style="box-shadow: 0px 0px 20px -10px #888;">
</iframe>

src 代表网页的地址，这个网页你们也是可以访问的，只不过在我的博客里面没有直接的跳转链接而已。

scrolling 设置成 auto ，它的意思是，只有当你的网页超过 iframe 的大小的时候，才会有滚动条，默认情况下不会有。

frameborder，默认是 1 ，我设置成了 0 ，这个主要看你的 Hexo 主题适合哪种了，由于我用的 butterfly 采用的是 CardUI 的设计，为了适配这个主题的风格，我没有设置边框，才是采用了阴影代替边框。

style="box-shadow: 0px 0px 20px -10px #888;" 是一条非常简单的内嵌 CSS 代码，它的作用是定义了一个阴影，这个阴影的秘诀在于负扩散半径，我之前在另外一篇文章中有提到过，CSS阴影: 偏移、模糊半径、扩散半径。

不要使用 post_asset_folder

资源文件夹(post_asset_folder) 是 Hexo 的一项功能。具体使用方式是在 _config.yml 中修改:

post_asset_folder: true

这样子修改之后，当你使用 hexo new 命令创建文件的时候，会生成一个和你的文章同名的文件夹，里面可以放一些资源文件。

它的优势是，当你在同名的 markdown 文件中编写链接的时候，不需要写冗长的路径名，这些同名文件夹里面的资源和文章是在同一个级别下的，故不需要写冗长的路径。

比如你把一个头像图片放到里面，直接写成 [](avatar.png) 就可以链接了。

我一开始曾经想要把 HTML 网页放在这些资源文件夹里面，但是我发现这样不行。

因为 Hexo 默认会把所有 source/_posts 下的 .md、.html 甚至是 .js 文件都作为文章来处理。而资源文件夹里面的内容是和同名的 markdown 文件同一级别的，就会被放到博客的首页上去。

我当然不希望这样，这样首页会被很多奇怪的文章占领。

所以我不推荐你们使用资源文件夹来存放网页，放一些图片直接在网页中链接倒是可以。

我们需要一个路径来存放我们的资源，我建议在 source 下面新建一个文件夹，比如叫 assets ，然后把我们的网页代码放到那里面去。

不要把 assets 暴露出去

Hexo 会把 source 下面的每一个文件夹都编译到最后的网页中去。其中比较特殊的 _post 文件夹里面存放的是首页展示的博客。

archives、tags、categories 文件夹等等，很多教程都会让你在 source 下面创建这三个文件夹，其实就是三个页面。同样 assets 文件夹里面的内容当然也是能访问的。

但是你不在配置文件中配置菜单，是无法直接访问的，比如我使用的 butterfly 主题的配置文件的一部分:

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友情链接: /link/ || fas fa-link
  关于博主: /about/ || fas fa-heart

不要把 assets 作为一个页面放到菜单中，这会暴露你的那些资源文件。

避开主题渲染

我们终于可以在 iframe 中看到网页了，但是不幸的是，Hexo 会渲染所有在 source 文件夹下面的内容，我们在 assets 里面的网页也被渲染了。

所以你在 iframe 中看到的网页可能多了很多东西，你的自己写的 CSS 样式可能被你的 Hexo 主题覆盖了，导致你的网页 demo 无法正确地被展示。并且你还能看到你主题的 header、footer、sidebar 等等都被放进来了。

好在 Hexo 提供了一个功能让用户自定义那些文件需要渲染，打开 Hexo 的 _config.yml，修改一个配置项：

skip_render:
  - 'assets/**'

skip_render 的意思是 Hexo 会保留这些文件原来的样子，而不是渲染他们。添加 Hexo 和主题的样式。

如果文件很多，使用具体的路径是一件疯狂的事情，我们需要使用通配符。

关于 skip_render 支持的通配符

1. 单个文件夹下全部文件：

skip_render: demo/*

2. 单个文件夹下指定类型文件：

skip_render: demo/*.html

3. 单个文件夹下全部文件以及子目录:

skip_render: demo/**

4. 多个文件夹以及各种复杂情况：

skip_render:
    - 'demo/*.html'
    - 'demo/**'

做完上述的这些之后，记得使用 hexo clean，然后再使用 hexo s重新查看，根据我的测试，如果你不运行 hexo clean，那么对 skip_render 的设置是不会生效的。