在写Hexo Theme / 在Hexo的博客内容被渲染时中，如何不让HTML字符串被转义？

Question

我在为Hexo写一个主题。

获取博文的内容（用markdown语法写的）：
var blogStr =<p>我是p</p>'

Hexo的文章模板页(用jade/pug写的)：

-str = '<p>我是新的p</p>'
div#articleDiv #{str}

页面显示：

我期待的是就像 innerHTML 属性那样，传入的有标签名的话，浏览器会分析然后相应地做处理，而不是这样直接全部用字符串显示出来。

试过在jade/pug模板里用 document.cerete('div').innerHTML = str
报错：

Cannot read property 'createElement' of undefined

Answer 1

自问自答：
本来以为是Hexo后端的问题，到后来灵机一动，发现可能问题出在了jade/pug上。专门做了个测试，果然是jade的事。所以就提问了上面描述的问题。
然后我搜索一番无果后，想着还是自己解决吧。然后研究jade/pug源码和编译后的html代码，发现了问题：
jade:

-var str = '<p>我是新asd的p</p>'
#divId #{str}

编译后的html:

div id="articleDiv">&lt;p&gt;我是新asd的p&lt;/p&gt;</div>

发现了问题没有？
就是< 和 > 被转义了.... 问题就出在这里！
jade文档里提到了如果你想不转义的话，用 !=
所以jade这么改:

-var str = '<p>我是新asd的p</p>'
#divId!=str

就ok了。
页面显示：

和预想的效果一样。

PS:不转义的话，有安全上的风险，需要注意。

Answer 2

对hexo的引擎不怎么熟悉，但是对于你的情况，很明显是因为<、>之类的特殊字符被转义了。
转码之后，你的这段HTML描述将会被当作纯粹的字符串，而不会进行渲染。
想要让浏览器对这些东西进行渲染，你需要把你经过markdown解析之后的内容，把码转回来。

这东西很简单的：

str.replace(/&/g, '&')
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&quot;/, '"')
    .replace(/&#39;/, '\'');