Question

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

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

特别是，我对对齐图像，宽图像，Bastout，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% }

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

可以以相同的方式实现对齐图像，宽图像和断像。简单的标记和小的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 }}

自定义Wa尾流场

1 个答案: