Как создать упорядоченный список с мопсом js и призматическим - PullRequest
Новая
       27

Как создать упорядоченный список с мопсом js и призматическим

1 голос
/ 12 июля 2020

Я использую Express, Pug Js и Prismi c .io (headless CMS) для создания статьи в блоге.

Prismi c end-point возвращает JSON body с «типом» для каждой части статьи, т.е. это может быть абзац, изображение, заголовок или список.

Затем я использую pug js 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}

Prismi c возвращается к типам: 'o-list-item' (упорядоченный список) и 'list-item' (неупорядоченный список).

Мне нужно для интерпретации этих типов для создания открывающих и закрывающих тегов or.

Проблема в том, что я не уверен, как это сделать, особенно с pug js, который автоматически закрывает теги.

В В приведенном выше коде я попытался создать переменную, которая указывает, что список запущен, а затем я пытаюсь установить для этой переменной значение false, если список закончился. Но это не работает.

Как еще я мог бы обрабатывать динамическое создание упорядоченных и неупорядоченных списков с помощью pug js?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 15 июля 2020

Я думаю, вы пытаетесь повторно реализовать функцию для синтаксического анализа полей Prismi c API с форматированным текстом. К счастью, мы предоставили вам Prismi c DOM , которая представляет собой библиотеку, которая предоставляет вам утилиту для анализа этих полей, обработки множества крайних случаев от вашего имени (например, получение правильного ключа span и применение встроенный стиль: em, strong, et c.)

Вы должны проверить do c о том, как его использовать здесь: https://prismic.io/docs/nodejs/templating/rich-text (там pug включите примеры), и если вы предпочитаете видеть код, у нас есть пример блога, в котором он работает на Express и Pug, как и вы здесь: https://github.com/prismicio/nodejs-blog см. как мы внедрили Prismi c Использование DOM и в файлах мопсов .

Сообщите нам, как это происходит, или напишите мне, если я неправильно понял вашу проблему:)

0 голосов
/ 12 июля 2020

Это определенно интересная головоломка. Я бы порекомендовал преобразовать массив document.ik_article_content во что-то более управляемое, прежде чем пытаться go прямо создавать шаблоны. Вы можете сделать это с помощью встроенного блока кода в Pug, как показано ниже. В этом подходе я заменяю значения Prismi c 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}
...