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

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

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

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

	nav­ig­a­tion_pages: [
		{ title: "Ману­ал", url: "/notes/", class: "" },
		{ title: "#11ty", url: "/tag­s/11ty/" },
		{ title: "#Обсидиан", url: "/tag­s/ob­sidi­an/" },
		{ title: "Все посты", url: "/notes/all/" },
	],

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

/_includes/layouts/base.njk

<ul class="linklist">
{×- for entry in metadata.navigation_pages ×}
	<li class="linklist-item unvis­it­able under­line">
			<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-­шаблон вроде «кар­точка упомя­ну­того поста» — поло­жите его в _in­cludes/ и сошли­тесь в заметке через что-то вроде

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

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

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