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

Question

我正在使用Express，PugJs和Prismic.io (headless CMS)创建一篇博客文章。

棱镜端点为文章的每个部分返回一个带有"type“的JSON主体，例如，它可以是一个段落、一个图像、一个标题或一个列表。

然后，我使用pugjs to 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}

Prismic返回类型：'o-list-item‘(有序列表)和'list-item’(无序列表)。

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

问题是，我不确定如何做到这一点，特别是与pugjs，它自动关闭标签。

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

我还能怎么用pugjs动态创建有序和无序列表呢？

谢谢。

Answer 1

我认为您正在尝试重新实现一个解析棱镜API富文本字段的函数。谢天谢地，我们介绍了Prismic DOM，这是一个库，它为您提供了解析这些字段的实用程序，代表您处理大量的边缘情况(比如正确地使用span键并应用内联样式: em、strong等)。

你应该在这里查看关于如何使用它的文档：https://prismic.io/docs/nodejs/templating/rich-text (有一个pug开关在examples上)，如果你喜欢看代码，我们有一个示例博客，使用它在Express和Pug上运行，就像你在这里：https://github.com/prismicio/nodejs-blog，请参阅how we injected Prismic DOM和usage in pug files。

如果我没有解决你的问题，请告诉我们进展如何，或者给我打电话:)

Answer 2

这绝对是一个有趣的谜题。在尝试直接使用模板之前，我建议将document.ik_article_content数组转换为更易于管理的形式。您可以使用Pug中的内联代码块来完成此操作，如下所示。在这种方法中，我将棱镜HTML值替换为实际的type标记，以便稍后更容易处理。

看看这对你是否有效：

-
  // 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}