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

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

    The GitHub GraphQL API is fresh out of its Early Access program. Create your own tools with greater access to data than ever before using the same API that we use to build GitHub.

     Ask for the exact data you need in a single request and get updates in real time—no more hitting multiple endpoints or waiting for new ones after a feature has been released.

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

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

The GitHub GraphQL API is fresh out of its Early Access program. Create your own tools with greater access to data than ever before using the same API that we use to build GitHub. Ask for the exact data you need in a single request and get updates in real time—no more hitting multiple endpoints or waiting for new ones after a feature has been released.

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


  1. 将一篇文章使用 split(‘\n’) 分割。

  2. 将分割后的数组传递给 .pug 文件,比如 {content: article.split(‘\n’)}

  3. .pug 中获取传递的值,- var str = content

  4. 如下

        each val in str
    if val === ‘’
    br
    else
    p= val

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

坚持原创技术分享,您的支持将鼓励我继续创作!