遍历 Wagtail Streamfield 项目

Looping through Wagtail Streamfield Items

我正在尝试创建一个索引页,其中包含指向 Wagtail 中多个照片库的链接。 GalleryIndexPage 模型如下所示:

class GalleryIndexPage(Page):
  subpage_types = ['home.GalleryPage']

  gallery_thumb = StreamField ([
      ('cover_photo', ImageChooserBlock()),
      ('title', blocks.CharBlock()),
      ('link', URLBlock()),
  ])

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

我很难将其渲染到模板中,每组数据周围都有 "gallery-item" class。我意识到它目前正在循环并向 Streamfield 内的每个块添加 class of "gallery-item",而不是围绕整个 Streamfield 集。这是我的模板代码:

<div class="photo-gallery">
{% for block in self.gallery_thumb %}
<div class="gallery-item">
  {% if block.block_type == 'cover_photo' %}
  <div class="thumb">
    {% image block.value fill-200x150 %}
  </div>
  {% endif %}
  {% if block.block_type == 'title' %}
  <div class="title">
    <p>{{ block.value }}</p>
  </div>
  {% endif %}
  {% if block.block_type == 'link' %}
  <div class="link">
    <a href="{{ block.value }}">View Gallery</a>
  </div>
  {% endif %}
</div>
{% endfor %}

还有其他方法可以解决这个问题吗?

编辑: 我在我的 StreamField 中添加了一个 StructBlock,如下所示:

class GalleryIndexPage(Page):
  subpage_types = ['home.GalleryPage']

  gallery = StreamField ([
      ('gallery_item', blocks.StructBlock([
          ('cover_photo', ImageChooserBlock()),
          ('title', blocks.CharBlock()),
          ('link', URLBlock()),
      ], icon='user'))
  ])

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

我不确定如何在我的模板中访问这些值?这是我目前所拥有的:

  <div class="photo-gallery">
    {% for block in self.gallery %}
    <div class="gallery-item">
      <div class="thumb">
        {% image self.cover_photo width-200 %}
      </div>
      <div class="title">
        <p>{{ self.title }}</p>
      </div>
      <div class="link">
        <a href="{{ self.link }}">>> View Gallery</a>
      </div>
    </div>
    {% endfor %}
  </div> 

您想要的似乎是一个包含图片、标题和 link 的 gallery_item 块。您可以通过使用更简单的块类型创建自己的块类型来做到这一点。参见 http://docs.wagtail.io/en/v1.5.3/topics/streamfield.html#structural-block-types

你可以这样做:

('gallery_item', blocks.StructBlock([
    ('title', blocks.CharBlock()),
    ('link', blocks.URLBlock()),
    ('image', ImageChooserBlock()),
], icon='xyz'))

您也可以将其创建为 Python class,这是我通常喜欢做的,这在我 link 编辑到的部分的最后一部分中介绍以上。

您可以为此块创建自己的模板。

在模板中,每个块都有两个属性,valueblock_type。例如,您可以使用 {{ self.title.value }}.

访问 title

http://docs.wagtail.io/en/v1.5.3/topics/streamfield.html#template-rendering

我能够使用以下代码访问模板中 StructBlock 的值:

<div class="photo-gallery">
{% for block in self.gallery %}
<div class="gallery-item">
  <div class="thumb">
    {% image block.value.cover_photo fill-200x150 %}
  </div>
  <div class="title">
    <p>{{ block.value.title }}</p>
  </div>
  <div class="link">
    <a href="{{ block.value.link }}">>>View Gallery</a>
  </div>
</div>
{% endfor %}

非常感谢您的帮助!