自定义 Wagtail 流场

Question

任何人都可以提供创建在 wagtail.io 网站首页上预览的 Wagtail Streamfield 选项所需的代码吗？

https://media.wagtail.io/images/w1_5pmaP1U.original.width-1600.png

具体来说，我对 Aligned Image、Wide Image、Bustout、Raw HTML 和 Markdown 感兴趣。

Answer 1

本页介绍了如何使用 StreamField（块）自由形成页面内容。 https://docs.wagtail.io/en/latest/topics/streamfield.html

您可以继承任何内置块并提供您自己的模板：

class WideImage(ImageChooserBlock):
    class Meta:
        label = 'Wide image'
        icon = 'image'
        template = 'website/blocks/wide_image.html'

html 由您决定：

{% load wagtailimages_tags %}

{% image self width-1024 as img %}
<img src="{{ img.url }}" class="image--wide">

当然 css 也取决于你。

.image--wide { width: 100% }

确切的标记和样式应该是什么，取决于您当前的前端标记和样式。

Aligned Image、Wide Image和Bustout可以用同样的方法实现。简单的标记和小 css。

原始 HTML 是一个现有块 https://docs.wagtail.io/en/latest/topics/streamfield.html#rawhtmlblock

您可以将 Markdown 存储在 TextBlock 中。 https://docs.wagtail.io/en/latest/topics/streamfield.html#textblock

将 markdown 转换为 html 是一个三行自定义字符串过滤器：

@stringfilter
def md(value):
    return markdown2.markdown(value)

在您的模板中使用它：

{% load app_tags %}
{{ self|md }}