Wagtail：如何在自動生成的塊中更改 css class？

Question

我在 StreamFied 中有一個 StructBlock：

courses = StreamField([
        ('Courses', StructBlock([
            ('Start_date', CharBlock()),
            ('Name', CharBlock()),
            ('Description', TextBlock()),
            ('Image', ImageChooserBlock()),
            ('Price', CharBlock()),

        ], icon = 'plus', template = 'blocks/course_block.html'))
    ], True)

content_panels = Page.content_panels + [FieldPanel('courses')]

---

在 html 中，我有以下結構：/index.html

<div class="swiper-wrapper" id="swiper-wrapper-dfa89409b3fe2577" aria-live="polite" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
    {{ page.courses }}
    # Html have this structure after rendering
    #<div class="block-Courses"></div>
    #<div class="block-Courses"></div>
    #<div class="block-Courses"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

---

/塊/course_block.html

<div class="{{ classname }}">
    <div class="item-courses swiper-slide">
        <p class="item-courses__data">{{ self.start_date }}</p>
        <div class="item-courses__title">
            <h3 class="title3">{{ self.course_name }}</h3>
        </div>
        <div class="item-courses__text">
            <p class="text2">{{ self.course_description }}</p>
        </div>
        <div class="item-courses__more">
            <div class="item-courses__price">
                <h4 class="title4">{{ self.course_price }} ₫</h4>
            </div>
            <a href="#" class="item-courses__link link-hover">More</a>
        </div>
        <div class="item-courses__image">
            <img src="{{ image_course.url }}" alt="chocolate-basics">
        </div>
    </div>
</div>

我想在索引頁中更改 class 課程塊的名稱

我嘗試在StructBlock 中添加form_classname

courses = StreamField([
        ('Courses', StructBlock([
            ('Start_date', CharBlock()),
            ('Name', CharBlock()),
            ('Description', TextBlock()),
            ('Image', ImageChooserBlock()),
            ('Price', CharBlock()),

        ], form_classname = 'swiper-wrap' icon = 'plus', template = 'blocks/course_block.html'))
    ], True)

content_panels = Page.content_panels + [FieldPanel('courses')]

但這對我沒有幫助它在course-Block創建了一個沒有 class 屬性的新 div，如下所示：

<div class="swiper-wrapper" id="swiper-wrapper-b225a982a905e0c8" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
<div class="block-Courses">
    <div class=""></div>
</div>
<div class="block-Courses">
    <div class=""></div>
</div>
<div class="block-Courses">
    <div class=""></div>
</div>

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

有一個想法通過管理面板添加 css class，但這個想法不是很成功，因為最終用戶不需要會干擾的字段。 但它仍然沒有取代課程塊的 class

Answer 1

如果您使用{{ page.courses }}在一個 go 中渲染整個 StreamField，則<div class="block-Courses"></div>包裝器只是您獲得的標准渲染。 如果你想要不同的東西，你可以遍歷page.courses並自己編寫 HTML ：

{% for course in page.courses %}
    <div class="whatever-you-like">
        {{ course }}
    </div>
{% endfor %}

有關呈現 StreamField 值的更多方法，請參閱https://docs.wagtail.org/en/stable/topics/streamfield.html#template-rendering 。