如何使用 pugjs 和 prismic 创建有序列表

Question

我正在使用 Express、PugJs 和 Prismic.io（无头 CMS）来创建博客文章。

Prismic 端点​​为文章的每个部分返回一个带有“类型”的 JSON 正文，即它可以是段落、图像、标题或列表。

然后我使用 pugjs 到 case 语句来处理每种类型：

            div(class='article-body')
            - let ul_list = false
            - let ol_list = false
            each item in document.ik_article_content
                case item.type
                    when 'paragraph'
                        - ol_list = false
                        - ul_list = false
                        p #{item.text}
                    when 'heading1'
                        h1 #{item.text}
                    when 'heading2'
                        h2 #{item.text}
                    when 'heading3'
                        h3 #{item.text}
                    when 'heading4'
                        h4 #{item.text}
                    when 'image'
                        img(class='article-body__image' src=`${item.url}`)
                    when 'hyperlink'
                        a(href=`${item.text}`) 
                    when 'o-list-item'
                        if !ol_list 
                            - ol_list = true
                            ol
                                li #{item.text}
                        else
                            li #{item.text}
                    when 'list-item'
                        if !ul_list 
                            - ul_list = true
                            ul
                                li #{item.text}
                        else
                    default 
                        p #{item.text}

棱镜返回类型：'o-list-item'（有序列表）和'list-item'（无序列表）。

我需要解释这些类型以创建开始和结束或标记。

问题是我不确定如何做到这一点，尤其是使用自动关闭标签的 pugjs。

在上面的代码中，我尝试创建一个表示列表已开始的变量，然后如果列表已结束，我尝试将该变量设置为 false。但这不起作用。

我还能如何处理使用 pugjs 动态创建有序和无序列表？

谢谢。

Answer 1

我认为您正在尝试重新实现一个函数来解析 Prismic API 富文本字段。值得庆幸的是，我们为您提供了 Prismic DOM，这是一个为您提供解析这些字段的实用程序的库，代表您处理许多边缘情况（例如正确使用 span 键并应用内联样式：em、strong 等.)

您应该在此处查看有关如何使用它的文档：https://prismic.io/docs/nodejs/templating/rich-text（有一个 pug 开关示例）如果您希望查看代码，我们有一个示例博客使用它在 Express 和 Pug 上运行，就像你在这里：https://github.com/prismicio/nodejs-blog 见 how we injected Prismic DOM 和 usage in pug files。

如果我没有解决您的问题，请告诉我们进展情况或联系我 :)

Answer 2

这绝对是一个有趣的谜题。我建议在尝试直接进入模板之前将document.ik_article_content 数组转换为更易于管理的东西。您可以使用 Pug 中的内联代码块来做到这一点，如下所示。在这种方法中，我将 Prismic type 值替换为实际的 HTML 标记，以便以后更轻松。

看看这是否适合你：

-
  // prismic to tag dictionary
  let prismicToTag = {
    'heading1':    'h1',
    'heading2':    'h2',
    'heading3':    'h3',
    'heading4':    'h4',
    'heading5':    'h5',
    'heading6':    'h6',
    'paragraph':   'p',
    'image':       'img',
    'hyperlink':   'a',
    'list-item':   'ul',
    'o-list-item': 'ol'
  }

  // declare variables
  const content = document.ik_article_content
  let pugReadyContent = []
  let lastType = null

  // for each element
  content.forEach(function(element) {
    // swap the prismic type string for the pug tag
    element.type = prismicToTag[element.type]
    // if the element is not a list item
    if (element.type !== 'ol' && element.type !== 'ul') {
      // append it to the new array
      pugReadyContent.push(element)
    }
    // if the element is a list item
    else {
      // if it's the first item in the list
      if (element.type !== lastType) {
        // append a new list element to the new array, with the item as a child
        pugReadyContent.push({
          type: element.type,
          children: [element]
        })
      }
      // if it's not the first item in the list
      else {
        // append it as a child to the last item in the new array
        pugReadyContent[pugReadyContent.length - 1].children.push(element)
      }
    }
    // set the lastType variable
    lastType = element.type
  })

// the templating
each item in pugReadyContent
  if (item.type !== 'ol' && item.type !== 'ul')
    if (item.type === 'img')
      img.article-body__image(src= item.url)
    else if (item.type === 'a')
      a(href= item.url) #{item.text}
    else
      #{item.type} #{item.text}
  else
    #{item.type}
      each listItem in item.children
        li #{listItem.text}