Настройка Wagtail Streamfield

Question

Может ли кто-нибудь предоставить код, необходимый для создания параметров Wagtail Streamfield, которые предварительно просматриваются на главной странице веб-сайта wagtail.io?

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

В частности, меня интересует AlignedИзображение, Широкое изображение, Обрыв, Необработанный HTML и Уценка.

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

Преобразование уценки в html - это трехстрочный пользовательский строковый фильтр:

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

Используйте его в своем шаблоне:

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