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