Question

我正在尝试创建一个索引页面，其中包含指向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”类。我意识到它正在循环并向Streamfield中的每个块添加一类“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>

Answer 1

看起来你想要的是一个包含图像，标题和链接的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类，这是我通常喜欢做的事情，这在我上面链接的部分的最后部分中有所介绍。

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

在模板中，每个块都有两个属性value和block_type。因此，您可以使用title访问{{ self.title.value }}。

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

Answer 2

我可以使用以下代码访问模板中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 %}

非常感谢您的协助！

通过Wagtail Streamfield项目循环

2 个答案: