如何从Wagtail StreamField提取首图与简介片段用于博客索引页？

没问题，完全可以实现需求！咱们可以通过两种方式来处理——要么在模型里添加辅助属性让模板更简洁，要么直接在模板里遍历StreamField的块。下面详细说明：

方法一：在BlogPage模型中添加辅助属性（推荐） #

这种方式把逻辑封装在模型里，模板代码会更干净易维护。修改你的BlogPage模型，添加两个@property方法：

from django.utils.html import strip_tags
from wagtail.models import Page
from wagtail.fields import StreamField
from wagtail.blocks import CharBlock, RichTextBlock, ImageChooserBlock

class BlogPage(Page):
    body = StreamField([
        ('heading', CharBlock(classname="full title")),
        ('intro', RichTextBlock()),
        ('body', RichTextBlock()),
        ('image', ImageChooserBlock()),
    ], null=True, blank=True,)

    # 提取首个image块的内容
    @property
    def first_image(self):
        # 遍历StreamField的所有块，找到第一个类型为'image'的块
        for block in self.body:
            if block.block_type == 'image':
                return block.value
        # 如果没有找到图片，返回None
        return None

    # 提取intro块的开头内容（前50个词）
    @property
    def intro_excerpt(self):
        for block in self.body:
            if block.block_type == 'intro':
                # 先去掉HTML标签，再截取前50个词
                raw_text = strip_tags(block.value.source)
                words = raw_text.split()
                if len(words) > 50:
                    return ' '.join(words[:50]) + '...'
                return raw_text
        # 如果没有intro块，返回空字符串
        return ""

    content_panels = Page.content_panels + [
        FieldPanel('body'),
    ]

对应的模板写法 #

现在你的blog_index_page.html可以简化成这样：

{% for post in blogpages %}
    {% with post=post.specific %}
        <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
        <!-- 显示首个图片 -->
        {% if post.first_image %}
            {% image post.first_image fill-160x100 %}
        {% endif %}
        <!-- 显示intro的前50个词 -->
        {% if post.intro_excerpt %}
            <p>{{ post.intro_excerpt }}</p>
        {% endif %}
    {% endwith %}
{% endfor %}

方法二：直接在模板中遍历StreamField块（无需修改模型） #

如果你不想改动模型代码，也可以直接在模板里处理：

{% for post in blogpages %}
    {% with post=post.specific %}
        <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
        
        <!-- 提取并显示首个image块 -->
        {% set first_image = None %}
        {% for block in post.body %}
            {% if block.block_type == 'image' and first_image is None %}
                {% set first_image = block.value %}
                {% image first_image fill-160x100 %}
                {% break %}
            {% endif %}
        {% endfor %}
        
        <!-- 提取并显示intro块的前50个词 -->
        {% set intro_text = "" %}
        {% for block in post.body %}
            {% if block.block_type == 'intro' %}
                {% set intro_text = block.value|striptags %}
                {% break %}
            {% endif %}
        {% endfor %}
        {% if intro_text %}
            <p>{{ intro_text|truncatewords:50 }}</p>
        {% endif %}
    {% endwith %}
{% endfor %}

注意事项 #

• 确保你的StreamField块定义中确实包含intro和image类型，否则提取逻辑会找不到对应的内容。
• 两种方法都处理了“没有找到对应块”的情况，避免模板报错。
• 如果需要更复杂的内容截取（比如按字符数而不是词数），可以把truncatewords换成truncatechars，或者在模型方法里自定义逻辑。

内容的提问来源于stack exchange，提问作者Inyoka