Индексный порядок блоков Wagtail для учета вставок - PullRequest
Новая
       4

Индексный порядок блоков Wagtail для учета вставок

0 голосов
/ 17 февраля 2020

Я хочу, чтобы фрагменты Wagtail размещались под определенным номером блока, чтобы они появлялись в середине содержимого статьи, например, 4 абзаца вниз или n абзацев вниз.

Это так, что читателям предлагается получать одинаковую информацию на каждой странице, как только они начали читать статью, но до конца.

У меня был некоторый успех только с CSS, в частности, путем установки переменной порядка для блочных объектов (например, class="article-page__rich-text") с использованием псевдо-селектора n-го ребенка, например:

article-page.scss

// if grid is supported
@supports (display: grid) {
    .article-page {
         .article-page__article-content > :nth-child(4) {
             order: -3;
         }
         .article-page__article-content > :nth-child(5) {
             order: -2;
         }

Отрывок отрисовки html

<div class="article-page__text">
    <div class="rich-text">
        <p>First block text</p>
        <p>First block text</p>
        <h2>First block header</h2>
        <p>First block text</p>
        <p>First block text</p>
    </div>
</div>
<div class="article-page__text">
    <div class="rich-text">
        <p>Second block text</p>
        <h2>Second block header</h2>
    </div>
</div>

Однако некоторые блоки имеют несколько абзацев, вложенных в них. На некоторых страницах много абзацев, все в одном или нескольких блоках. Это усложняет размещение блоков по номеру абзаца.

Добавление css значений ордеров непосредственно к абзацу также не работает, поскольку абзацы содержатся в блоке и имеют свои проблемы. Во многих статьях также есть изображения и другие типы блоков.

Я знаю, что вы можете применять классы на этапе рендеринга блоков, но я тоже предвижу проблемы с этим.

У кого-нибудь есть хорошее решение? к стилевому оформлению системы на основе блоков, как это, в частности Wagtail? Я хотел бы избежать добавления, например, jQuery.

...