Hexo内嵌网页

Posted by RyoCY on 2025-02-01
Estimated Reading Time 1 Minutes
Words 333 In Total
Viewed Times

最近学习了Web开发的一些基础知识,正用 50projects50days 的项目练手,也想要给自己的博客嵌入一些网页demo。

我决定使用 iframe 来内嵌网页。将编好的文件放入post_asset_folder自动生成的同名文件夹中:

1
<iframe src="xxx.html" height="500px" width="100%" scrolling="auto" frameborder="0" "></iframe>

打开网页,确实成功嵌入 demo,但好像有什么不太对……
回到首页,发现 HTML、CSS、JS 全部被解析为博客了🤣 。

还好 Hexo 提供了一个功能允许用户自定义哪些文件不进行渲染,这样就可以保留post_asset_folder 的功能(毕竟真的方便管理博客)。我在同名文件夹下新建了demo文件夹,将写好的网页放入。然后打开 Hexo 的 _config.yml,找到 skip_render 选项添加想要屏蔽的文件夹。

通配符示例:

1
2
3
4
skip_render:
- 'demo/*.html' # 单个文件夹下指定类型文件
- 'demo/**' # 单个文件夹下全部文件以及子目录
- 'demo/*' # 单个文件夹下全部文件

容易踩坑的点
skip_render 中的路径需要写成相对于 source/ 目录的路径。在 _config.yml文件修改后,记得要执行一下 hexo clean,不然skip_render可能不会生效。