Это — страница спецпроекта. ☆

Личный сайт — это коммуналка, где по соседству с блогом живут портфолио, проекты, страница «Обо мне» и другие. Если кто-то из соседей затворничает и не принимает общие правила, на сайт становится грустно смотреть: общая навигация пришита белыми нитками, стили на одном разделе отличаются от стилей на других и так далее.

Трирема — сговорчивый сосед. Захотите — импортируете главную как сырой ХТМЛ-файл из старой версии сайта. Захотите — сверстаете её с нуля, подключив уникальные прелоады, стили и скрипты. Захотите — у страницы каждого проекта из портфолио будет уникальный цветной фон и ссылка в навигации по сайту. Захотите — и ваш пост про Гутенберга будет свёрстан плотным блоком фрактуры в центре страницы. Или ПТ Сансом на зелёном фоне без автоматически подставленного заголовка, полоски с тегами и розового сердечка.

Захотел. Как это работает?

Для этого нужно разобраться в nunjucks-шаблонах страниц, лежащих в папке _includes/layouts/. Они работают как матрёшка: в base.njk записаны ХТМЛ шапки и подвала сайта, post.njk берёт base.njk за основу и добавляет код для заголовка поста и навигации к другим постам, Маркдаун-заметка берет за основу post.njk и вписывают внутри ХТМЛ содержимое заметки.

# base.njk
<head>...</head>
<body>
	<header>Код для шапки</header>
	<main>
	
	{ { content | safe } }
	
	</main>
	<footer>Код для подвала</footer>
</body>

# post.njk
layout: layouts/base.njk
---
<article>
	<ul class='post-metadata'>Код для даты и тега</ul>
	<h1> { { Title } } </h1>
	{ { content | safe } }
	<ul class='links-nextprev'>Код для навигации по постам</ul>
</article>

# /content/blog/post.md
layout: layouts/post.njk
---
Содержимое заметки в Маркдауне.
Будет отрендерено в ХТМЛ-формат и засунуто внутрь { { content | safe } } внутри шаблона post.njk

Вы можете не понять, в какой момент во фронтмэттере заметки появилась строчка layout: layouts/post.njk. Всё просто: внутри папки с заметками /content/blog/ лежит файл blog.11tydata.js. Он задаёт дефолтные свойства для всех заметок в этой папке, в том числе используемый nunjucks-шаблон.

blog.11tydata.js

export default {
	tags: ["posts"], // ноги у collections.posts растут отсюда
	layout: "layouts/post.njk",
	permalink: "/{ { page.fileSlug } }/",
	eleventyComputed: {
	media: ... // тут список всех медиафайлов, упомянутых в заметке
	description: ... // тут генерируется описание, если его нет
	}

11ty Data Cascade ставит свойствам, прописанные в документе напрямую, приоритет выше, чем сгенерированным по дефолту. Поэтому вы запросто можете сменить шаблон на кастомный: для этого даже не нужно выходить из заметочника.

А как сделать свой шаблон?

Откройте _includes/layouts/featured.njk — это кастомный шаблон done right. Он не просто использует base.njk как внешнюю матрёшку, он расширяет её, дописывая и переписывая её даже в теге <head>

_includes/layouts/featured.njk

{× extends "layouts/base.njk" ×}

{×- block preload ×}
<link rel="preload" href="/fonts/PTSansRegular.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="/fonts/PTSansCaptionRegular.woff2" as="font" type="font/woff2" crossorigin="">
{× endblock ×}

{×- block extracss ×}
{×- css ×}{× include "public/css/featured.css" ×}{×- endcss ×}
{× endblock ×}


{×- block beforeContent ×}
<article>
{× endblock ×}



{×- block afterContent ×}
</article>
{×- if collections.posts ×}
...
{× endblock ×}

Просто используйте его как отправную точку: перепишите включенный в него CSS-файл, расширьте скриптами через {×- js ×}{× include ... ×}{×- endjs ×} в блоке extracss. Создавайте новые шаблоны, в конце-концов.

Если вы хотите, чтобы кастомный шаблон работал на определённом разделе вашего сайта (например, у вас есть проект с подстраницами), просто создайте папку /project/ внутри папки /content/ и добавьте следующее в project.11tydata.js

export default {
	layout: "layouts/project.njk", 
	permalink: "/project/{ { page.fileSlug } }/", # опционально
}

Веселитесь!

Это — страница спецпроекта. ☆

Захотел. Как это работает?

А как сделать свой шаблон?

Это — страница спецпроекта. ☆