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

Question

我正在使用 Express、PugJs 和 Prismic.io（無頭 CMS）來創建博客文章。

Prismic 端點返回一個 JSON 正文，其中包含文章每個部分的“類型”，即它可以是段落、圖像、header 或列表。

然后我使用 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

這絕對是一個有趣的謎題。 在嘗試將 go 直接轉換為模板之前，我建議將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}

Answer 2

我認為您正在嘗試重新實現 function 來解析 Prismic API 富文本字段。 值得慶幸的是，我們為您提供了Prismic DOM ，這是一個為您提供解析這些字段的實用程序的庫，代表您處理許多邊緣情況（例如正確獲取span鍵並應用內聯樣式：em、strong 等）

您應該在此處查看有關如何使用它的文檔： https://prismic.io/docs/nodejs/templating/rich-text （示例中有一個pug開關），如果您希望查看代碼，我們有一個示例博客像你一樣在 Express 和 Pug 上使用它： https://github.com/prismicio/nodejs-blog看看我們如何在 pug 文件中注入 Prismic DOM和用法。

如果我沒有解決您的問題，請告訴我們進展情況或聯系我:)