django - 定制鹡鸰流域

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

您可以将降价存储在 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 }}