1

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}

Prismic は次の型に戻ります: 'o-list-item' (順序付きリスト) および 'list-item' (順序なしリスト)。

開始タグと終了タグを作成するには、これらの型を解釈する必要があります。

問題は、特にタグを自動的に閉じる pugjs でそれを行う方法がわからないことです。

上記のコードでは、リストが開始されたことを示す変数を作成しようとしました。リストが終了した場合は、その変数を false に設定しようとしました。しかし、それはうまくいきません。

pugjs を使用して順序付きリストと順序なしリストを動的に作成するには、他にどのように処理すればよいでしょうか?

ありがとうございました。

4

2 に答える 2