Hexo 解决嵌入的html被渲染的问题和code_dir的配置项的用法

作者: Jim Wang 公众号: 巴博萨船长

摘要：使用Hexo时，如何解决嵌入的html也被hexo的主题代码渲染的问题？hexo中的code_dir的文件夹的作用是？

Abstract: How to solve the problem that embedded html is also rendered by hexo theme code. What does the code_dir folder in hexo for?

嵌入式html渲染异常

在使用Hexo管理自己的技术博客文章时，有时候需要在文中嵌入html代码。例如使用iframe嵌入html网页，这时候常常会遇见渲染异常，即嵌入的html也被hexo的主题代码渲染了。解决这部分异常的方法很简单。假设文章中嵌入的html代码如下：

1

<iframe width="200" height="300" src="demo/demo-1.html" frameborder="40"></iframe>

解决该问题的方法很简单，仅需在Hexo的配置文件_config.yml中找到skip_render这一配置项，按照如下修改配置文件即可：

1
2
3
4

# Directory
...
skip_render:
  - demo/*.html

出现问题的原因是：在渲染markdown文章的时候，内部的html也一并被渲染了，修改这一项则可以在渲染的时候过滤指定文件。该配置支持通配模式。相同方法，嵌入文章的CSS和Javascript文件也可以在渲染时被忽略。

code_dir配置项的用法

在hexo的配置文件_config.yml中有code_dir这一配置项，这个配置项也是在修改skip_render的时候发现的，就好奇它的作用，弄清楚之后记录下来，以便以后回顾学习。了解发现这个配置的用处很大。之前写文章时，为了解决文章配图的问题，当时学会了post_asset_folder配置项，为此也安装了hexo-asset-image包。所以一开始在使用iframe尝试在文章中嵌入html页面时，就把相应的html文件，css文件，js文件全部放在了与post同名的文件夹中，但是学会code_dir这一配置项后，就可以更优雅地处理这些文件了。

code_dir的默认值为路径downloads/code。问题是该文件夹应该位于何处，才能在确保使用hexo server和hexo deploy两个命令时，文章被正确处理。经过尝试之后得知，文件夹downloads/code应位于source文件夹内，如下图。这样的话可以确保，无论文章是在编辑、预览或发布时，文章中的相关内容都有效。

这个文件夹，不仅可以用于本文提到嵌入式的html，css和js文件的保存目录，也可以作为示例代码的保存路径以供读者下载尝试。即在markdown文章内使用下列代码：

1

[donwload file](/downloads/code/demo.html)

文章发布时，读者就可以使用右键菜单“储存为…”下载所需文件。

这里没有专家，记录这些主要是为了自己以后回顾学习之方便，文章有不足之处也实属正常。见解不同，诚切赐教，关注微信公众号，一起讨论学习。