使用 Pug 时前后台文章格式显示不一致的问题

如果我们想将一篇文章存储在后台,那么我们首先需要在后台按照一定格式输入一篇文章,比如说我们段落分明的输入以下文章:

如果使用 JQuery 来获取数据的话也很简单,只需要利用 split('\n') 将段落按照换行符分隔开,然后在每个元素的前后加上 <p></p> 构造一个 HTML 字符串,最后利用 JQuery.html() 方法就万事大吉了。

不过如果使用 Pug 的话就行不通了,即使构造了 HTML 字符串,由于它本身会将 < 或者 > 识别为字符串的一部分,所以你的 HTML 字符串就真的只是字符串,所以上述文章就会像下面这样展示。

所以需要一些手段,所经过的步骤如下:

  1. 将一篇文章使用 split('\n') 分割。
  2. 将分割后的数组传递给 .pug 文件,比如 {content: article.split('\n')}
  3. .pug 中获取传递的值,- var str = content
  4. 如下

经过以上处理,文章就可以按照相应的格式显示在前端了。

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注