Оформляем третью заметку: программируем с nunjucks

Настра­ивая Трирему под ­себя, вы уже мельком позна­ко­ми­лись с Nunjucks-­файлами и шаб­ло­нами. Давайте позна­ко­мимся с ним поближе и узнаем, чем он может быть нам полезен во время напи­сания заметок

Рассмотрим Nunjucks-­синтаксис на при­мере нави­гации в шапке.

В мета­данных сайта (файл /data/metadata.js) есть такое поле:
/data/metadata.js

	navigation_pages: [
		{ title: "Мануал", url: "/notes/", class: "" },
		{ title: "#11ty", url: "/tags/11ty/" },
		{ title: "#Обсидиан", url: "/tags/obsidian/" },
		{ title: "Все посты", url: "/notes/all/" },
	],

В базовом шаблоне для ­всех стра­ниц, внутри тега header есть следу­ющая инструк­ция. Поскольку 11ty испол­няет nunjucks-­инструкции даже внутри Маркдаун-­файлов, я заменил все % на ×, а сдво­енные фигурные скобки разредил пробе­лами.

/_includes/layouts/base.njk

<ul class="linklist">
{×- for entry in metadata.navigation_pages ×}
	<li class="linklist-item unvisitable underline">
			<a href="{ { entry.url } }">{ { entry.title } }</a>
	</li>
{×- endfor ×}
</ul

Если вста­вить эту же инструкцию прямиком в за­метку, у вас полу­чится воспро­из­вести шапку сайта. Стили тут чутка поле­тели, но это не важ­но — это proof-­of-­concept того, что вы можете писать скрипты для ­ге­не­рации сложных ХТМЛ-­конструкций прямиком в за­метке.

Строго говоря, пользы именно от воз­мож­ности писать код с усло­виями и цик­лами внутри Марк­дау­на — ника­кой. У ис­пол­ня­е­мого в за­метках Nunjucks нет доступа к важным вещам вроде коллекции всех постов, филь­трам и кто знает, чему ещё. Максимум слож­ного, что вы сдела­е­те — ХТМЛ-­таблицу, которая подтя­ги­вает свежие данные из какой-­нибудь джей­со­новой БД.

Ну и зачем оно нужно?

Если после прочтения преды­ду­щего поста в серии вы заме­тили за собой активное исполь­зо­вание контей­неров и ка­стомных классов через {.class}, ваш custom.css разросся до не­при­личных разме­ров, а сайт пере­стал молние­носно загру­жаться, попро­буйте выде­лить супер­сти­ли­зо­ванным элементам отдельные ЦСС-­файлы и под­гру­жать их только там, где необ­хо­димо через строку {×- css ×}{× include "file.css"×}{× endcss ×} в любом месте заметки.

Или вам хочется раскра­сить синтаксис внутри блоков кода, как на этой стра­ни­це — ­просто напи­шите в за­метке строку ниже с за­меной × на %

{×- css ×}{× include "node_modules/prismjs/themes/prism-okaidia.css" ×}{× endcss ×}

В теории в шаб­лоне может быть просто текст или какой-­нибудь жутко обве­шанный клас­сами ::: container — по идее Nunjucks-­инструкция должна испол­няться перед ренде­рингом Марк­дауна в ХТМЛ. Но я не про­ве­рял.

А может вы приду­мали какой-­нибудь сложный njk-­шаблон вроде «кар­точка упомя­ну­того поста» — поло­жите его в _includes/ и со­шли­тесь в за­метке через что-то вроде

{× set post = 'post.md' ×}
{× include "_includes/postcard.njk" ×}

Ну или можете { { page.url } } и  { { title } } вписать в текст как ­пе­ре­мен­ную, а не захард­ко­дить.

Кстати, эта заметка назы­ва­ется «Оформляем третью заметку: программируем с nunjucks». Вдруг вы забыли.