实现 Butterfly 主题 Hexo 博客内嵌 HTML 预览

缘由复制标题链接

最近想开始写点关于 50projects50days 的小 demo，但是只贴代码的话未免有点太单调，如果能显示出预览页面是不是更好玩，于是在梦神提到了 iframe 可以内嵌 html 的形式，我就去想怎么可以把本地未部署的 html 代码内嵌到我的博客文章当中并且单独可以渲染互动。

步骤复制标题链接

Step 1：在 source 文件夹下新建 demo 文件夹存放代码文件复制标题链接

于是在这里可以放置我的代码文件：

Step 2：在 hexo 的 _config.yml 配置文件中修改忽略 demo 文件夹复制标题链接

在 _config.yml 配置文件里这么写：

skip_render:
  - demo/**/*

意思是告诉 Hexo：不要去渲染 source/demo/ 下的内容，而是原样复制到 public/demo/ 中。

Step 3：如果你的 html 是外联 css 与 js复制标题链接

保证引用使用相对路径写：

<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>

Step 4：在博客文章的 markdown 中直接写 iframe复制标题链接

为了兼容性，最好加上 sandbox 或 allow 属性控制 iframe 权限，例如：

<iframe src="/demo/my-first-demo/index.html"
        width="100%" height="500"
        frameborder="0"
        sandbox="allow-scripts allow-same-origin"></iframe>

这里的 src 替换成自己的 html 的相对路径。

Step 5：如果遇到渲染页面包含博客框架，需使用 hexo clean 清理缓存再上传复制标题链接

不然就会出现像这样套娃的形式：

测试：不依赖外部文件直接渲染复制标题链接

如果不想引用 html 文件而是想直接渲染，注意：HTML 不允许 iframe 内嵌原始内容块。

HTML 的 <iframe> 是一个「独立文档容器」，它只能加载一个 URL 地址作为 src，不能直接在 iframe 标签中写入结构性的内容（比如 <h1>、<p> 等）——那种做法属于 <iframe srcdoc="...">。

直接把 HTML 内容写入 iframe 的 srcdoc 属性：

<iframe
  srcdoc="
    <div style='border:1px dashed gray; padding:1em; margin:1em 0;'>
      <h1>It works!</h1>
      <p>你可以直接把这段代码放在 Markdown 文件中。</p>
    </div>
  "
  width="100%" height="200" frameborder="0">
</iframe>

注意事项：

• srcdoc="..." 中的 HTML 要是单行字符串，不能换行，属性值里的 " 要改成 ' 或使用 HTML 实体
• 某些老旧浏览器（如 IE）不支持 srcdoc，现代浏览器完全支持
• 如果你要展示结构内容，不依赖 iframe，直接写 div 更干净

成功嵌入预览复制标题链接

成功了喵，还可以在这个上面玩 🎉