将 varialbeles 传递给鹡鸰轮播

Question

使用 Wagtail，我需要显示卡片库，其中卡片的特征之一是轮播图像。我只用图像制作它，但是当我尝试向每个轮播添加标题文本时，我在显示数据时遇到了问题。虽然我可以在转盘上显示第一张图片，但我无法使用 Next/Previous 转盘图标进行导航，而且标题文本字段为空白。似乎我没有使用正确的语法将变量名传递给轮播。

一如既往，非常感谢您提供有关如何解决语法 and/or 更好的轮播模型块结构的任何意见。

数据流从 carouselblock 到 blogpage（一个 child of）bloglistingpage

blocks.py:

class CarouselBlock(blocks.StreamBlock):
    carousel_image = blocks.StructBlock([
        ('image', ImageChooserBlock()),
        ('caption', blocks.TextBlock()),
    ])

    class Meta:
        icon = "cogs"
        template = "streams/custom_carousel_block.html"

models.py:

class BlogListingPage(Page):
    content = StreamField(
        [
            ...
            ("cards", blocks.CustomCardBlock()),
        ],
        null=True,
        blank=True,
    )

    content_panels = Page.content_panels + [
        ...
        StreamFieldPanel("content"),
    ]
    def get_context(self, request):
        # Update context to include only published posts, ordered by reverse-chron
        context = super().get_context(request)
        blogpages = self.get_children().live().order_by('-first_published_at')
        context['blogpages'] = blogpages
        return context

class BlogPage(Page):
    ...
    main_content = StreamField([
        ('carousel', CarouselBlock()), 
      ...
    ],
        null=True,
        blank=False)
    ...

    content_panels = Page.content_panels + [
        ...
        StreamFieldPanel('main_content'),
    ]

streams/custom_carousel_block.html:

{% load wagtailcore_tags wagtailimages_tags %}

<div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        {% for sub_block in self %}
                {% image carousel_image.value original as carousel_img %}
            <ul class="carousel_image">
                {% for img in block.value %}
                    <li class="carousel-item {% if forloop.first  %}active{% endif %}">
            <img src="{{ image.value.url }}" class="d-block w-100" alt="{{ image.value.alt }}">       
        {% for sub_block in all_carousel %}
            {# for caption I tried both syntax SPECIFIC/VALUE, none worked for me #}
            {% if sub_block.specific.caption %}
                <p>{{ sub_block.specific.caption }}</p>
            {% endif %}
        {% endfor %}
                    </li>
          {% endfor %}
                <li>{{carousel_image.value.caption}}</li>
            </ul>


        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Answer 1

从行开始：

{% for sub_block in self %}

这里 self 是 StreamBlock 值，它的行为是 just as the top-level StreamField value would in your page template - 用 {% for sub_block in self %} 循环它会给你一个 sub_block 具有两个属性的对象 block_type 和 value.

在这种情况下，sub_block.block_type 将始终是 'carousel_image'，因为这是流中唯一可用的块类型。 sub_block.value 将为您提供块的值 - 由于该块类型是由 'image' 和 'caption' 组成的 StructBlock，该值将是由这两个字段组成的字典，您可以访问它作为 sub_block.value.image 和 sub_block.value.caption.

因此代码变为：

{% for sub_block in self %}
    {% image sub_block.value.image original %}
    <p>{{ sub_block.value.caption }}</p>
{% endfor %}

（我会把安装 HTML 的任务留给你。）

将 varialbeles 传递给鹡鸰轮播

passing varialbeles to wagtail carousel

carousel

wagtail

wagtail-streamfield