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

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

Prismic end-point为文章的每个部分返回一个带有“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。但这不起作用

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

---

谢谢。

这绝对是一个有趣的难题。我建议先将

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}

---

这绝对是一个有趣的难题。我建议先将

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}

---

我认为您正在尝试重新实现一个函数来解析Prismic API富文本字段。谢天谢地，我们为您介绍了一个库，它为您提供了一个实用程序来解析这些字段，代表您处理许多边缘情况（例如正确地使用

span

键并应用内联样式：em、strong等）

你应该在这里查看关于如何使用它的文档：（在示例上有一个

pug

开关），如果你喜欢看代码，我们有一个示例博客，使用它在Express和pug上运行，就像你在这里一样：请看和

---

让我们知道进展如何，如果我没有正确处理您的问题，请告诉我：）

我想您正在尝试重新实现一个函数来解析Prismic API富文本字段。谢天谢地，我们为您介绍了一个库，它为您提供了一个实用程序来解析这些字段，代表您处理许多边缘情况（例如正确地使用

span

键并应用内联样式：em、strong等）

你应该在这里查看关于如何使用它的文档：（在示例上有一个

pug

开关），如果你喜欢看代码，我们有一个示例博客，使用它在Express和pug上运行，就像你在这里一样：请看和

---

让我们知道进展如何，或者如果我没有正确处理您的问题，请告诉我：）

无论是谁投票结束了这个问题，它都不应该结束。它有足够的细节和足够清楚。我的回答解决了你的问题吗？无论谁投票结束这个问题，它都不应该结束。它有足够的细节和足够清楚。我的回答解决了你的问题吗？