问题描述

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}

注意点：

1. div后的. 是必须的，表示标签中的块

有的时候您可能想要写一个非常大的纯文本块。一个典型的例子就是嵌入 Pug 的
脚本或者样式

2. 应该使用！ 而不是 # 。 使用# 直接输出文本<h1>markdown</h1>
!意味着Jade模板不编码该内容

错误使用方法(坑点)

直接在pug文件上写下
···

{result}

···
显示如图

同时我们查看源代码发现,该段

<<h1>markdown</h1>
></<h1>markdown</h1>
>

究其原因就是引擎把<h1>markdown</h1>当作一个整体的标签来处理了，即被渲染成了<result></result> 就造成了该显示结果