问题描述
koa2默认用pug模版，可是pug的filter是在预编译的时候渲染的，不能动态渲染
在pug页面直接渲染静态
首先安装
$ npm install --save jstransformer-markdown-it
现在可以渲染下面这个模板了。
image.png
警告
过滤器在 Pug 编译的时候被渲染，这意味着它们可以很快呈现出来，但是同时也意味着它们不支持动态的内容和选项。
把模板放在服务器上编译渲染则不存在这个限制。
现在我们要把从服务器获取的内容动态渲染
首先安装
$ npm install --save markdown-it
之后在服务器端引用该包
const md = require('markdown-it')()
var result = md.render('# markdown')
通过路由传到相应pug页面
router.get('/article', async (ctx, next) => {
const title = 'article'
await ctx.render('article', {
title,
result:result
})
})
此时传到前端result的值为<h1>markdown</h1>
正确应用方式
div.
!{result}
注意点：
- div后的
.是必须的，表示标签中的块
有的时候您可能想要写一个非常大的纯文本块。一个典型的例子就是嵌入 Pug 的
脚本或者样式
- 应该使用
！而不是#。 使用#直接输出文本<h1>markdown</h1>
!意味着Jade模板不编码该内容
错误使用方法(坑点)
直接在pug文件上写下
···
{result}
···
显示如图
同时我们查看源代码发现,该段
<<h1>markdown</h1>
></<h1>markdown</h1>
>
究其原因就是引擎把<h1>markdown</h1>当作一个整体的标签来处理了，即被渲染成了<result></result> 就造成了该显示结果
