鹡鸰博客文章目录答案

【问题标题】：Wagtail blog post table of contents鹡鸰博客文章目录
【发布时间】：2020-01-26 22:47:51
【问题描述】：

有没有办法为用作博客的wagtail 网站创建目录。更具体地说，我想为每篇博文创建一个目录。

例如，我创建了一个 BlogPost 页面模型，其中包含一个 StreamField 用于博客文章中的部分。流字段包含一个标题和一个富文本字段。这使我可以创建具有多个标题/部分的博客文章。

博文模型：

content = StreamField(
    [("article_section", ArticleSectionBlock())],
    null=False,
    blank=False,
)
content_panels = Page.content_panels + [
    StreamFieldPanel("content"),
]

文章部分块：

class ArticleSectionBlock(blocks.StructBlock):
    sections = blocks.ListBlock(
        blocks.StructBlock(
            [
                ("header", blocks.CharBlock(required=False)),
                ("content", blocks.RichTextBlock(required=False)),
            ]
        )
    )

我想做的是能够在每篇博客文章的顶部创建一个目录，其中包含指向文章中每个部分的链接。

【问题讨论】：

标签： django wagtail

【解决方案1】：

首先，我认为您的ArticleSectionBlock 可以简化为：

class ArticleSectionBlock(blocks.StructBlock):
    header = blocks.CharBlock(required=False))
    content = blocks.RichTextBlock(required=False))

您的content StreamField 已定义为ArticleSectionBlocks 的列表，因此ArticleSectionBlock 本身无需成为列表。（如果您确实希望 StreamField 成为列表列表，则此处的答案仍然适用，但您需要调整模板以使用嵌套的 {% for %} 循环，并记住 ListBlock 的子代不要' t 具有唯一的 id 属性。）

在您的模板上，您可以遍历page.content 以获取具有value、block_type 和id 属性的块对象列表，每个属性对应一个ArticleSectionBlock。通过循环两次，您可以输出一个目录，然后是内容本身：

<ul>
    {% for block in page.content %}
        <li><a href="#{{ block.id }}">{{ block.value.header }}</a></li>
    {% endfor %}
</ul>

{% for block in page.content %}
    <h1><a id="{{ block.id }}">{{ block.value.header }}</a></h1>
    {{ block.value.content }}
{% endfor %}

除了使用block.id 作为锚点ID，您还可以使用{{ forloop.counter }}。

【讨论】：