nuckty-ext-block-grid

Многоколоночная раскладка контента. Пакет объединяет блок grid и конструкцию markdown-разметки :::grid: синтаксис и реализация раскладки поставляются вместе.

Типы

Пакет совмещает два типа расширений через единый register(env):

block — блок grid через env.levels.
markdown — конструкция :::grid через env.markdown.

Конструкция markdown-разметки

Автор пишет:

:::grid
Первая колонка.

Вторая колонка.

Третья колонка.
:::

Каждый непустой дочерний абзац становится текстовой ячейкой grid__item. Выделение и ссылки сводятся к тексту; дочерние списки и заголовки вызывают ошибку. Пустой контейнер раскрывается в содержимое. Без расширения движок обрабатывает Markdown внутри директивы обычным образом.

Поведение

Адаптивная сетка — ячейки выкладываются в несколько колонок через CSS блока; число колонок подстраивается под ширину экрана.
Без внешних зависимостей — раскладка держится на CSS блока, без сторонних библиотек CSS и JS.

Установка

Пример продолжает быстрый старт со стандартным обработчиком nuckty-ext-block-root. Добавьте новое расширение в ext глобального config/config-nuckty.ts, сохранив остальные записи. Если обработчик документа собственный, оставьте его вместо nuckty-ext-block-root.

Команда ниже выполняется из распакованного стартового проекта: готовые архивы расширений находятся в packages/.

npm install ./packages/nuckty-ext-block-grid-1.0.0-beta1.tgz

import { defineNucktyConfig } from 'nuckty';

export default defineNucktyConfig({
    targets: { main: { configDir: 'config/', outDir: 'site/' } },
    ext: ['nuckty-ext-block-root', 'nuckty-ext-block-grid'],
});

После этого конструкция :::grid работает в любом .md, а блок grid добавьте в bemdecl бандла — он подключится по зависимостям.

Переопределение

Блок grid переопределяется как любой другой: поместите свой blocks/grid/grid.nu.ts на более поздний уровень.