Первые шаги по настройке Триремы
Запускаем блог на локальном сервере, минимально-необходимо изменяем его под себя и играемся с цветами и шрифтами в custom.css
Поднимаем локалхост
Напомню краткую инструкцию:
- установите себе Node.js,
- скачайте и распакуйте архив с исходниками (гитхаб),
- откройте Терминал в папке trireme-blog командой
cd путь_до_папки, - установите все нужные скрипты командой
npm install, - вызовите
npx @11ty/eleventy --serve, - перейдите на http://localhost:8080 — там вас будет ждать готовая к изменениям копия этого сайта.
Всё работает? Переходите к следующему разделу.
Подробнее о пункте 3 для тех, кто боится слова «Терминал»: откройте разархивированную папку trireme-blog и скопируйте полный путь до неё. В терминале наберите cd, через Ctrl+Shift+V вставьте путь, нажмите энтер и переходите к пункту 4.
Возможно, вы пользуетесь Фаерфоксом и у вас не открывает локалхост — попробуйте открыть http://[::1]:8080/ вместо этого.
Открываем редакторы кода
Если всё получилось, то в браузере по адресу http://localhost:8080 сейчас видно главную страницу сайта Триремы. Не сильно привыкайте к ней — через полчаса и десяток-другой изменённых файлов её будет не узнать.
Вы без проблем можете настроить Трирему, имея под рукой только Проводник и Блокнот — но будет бесконечно проще, если у вас будет установлен хоть какой редактор кода. Если у вас такого нет, посмотрите в сторону ВС Кода, Курсора или Зед. Первые два очень похожи, последние два имеют ИИ-ассистентов в комплекте. Моя душа лежит к Зед: красиво, легковесно, быстро, с ИИ, мэтчится с Обсидианом,. Версия Зед для Виндовс пока в альфе (я не встретил ни одного бага), её можно скачать тут: https://github.com/deevus/zed-windows-builds
В редакторе кода откройте папку trireme_blog как новый проект, запустите npx @11ty/eleventy --serve в местном Терминале и поехали редактировать файлы
Правим метаданные сайта
Убедимся, что мы действительно имеем полную власть над внутренностями: откройте файл _data/metadata.js и заполните его информацией о своём блоге — хотя бы в тех местах, где вы готовы.
export default {
title: "Трирема",
description:
"Ещё один сетап для статического блога с кодом 11ty и вайбом Эгеи. Без админки, с тотальной кастомизацией.",
shortdescription: "— ещё один сетап для блога",
url: "https://trireme.magvag.ru",
language: "ru",
blog_homepage: "/notes/",
blog_homepage_name: "Мануал",
navigation_pages: [
{ title: "Мануал", url: "/notes/", class: "" },
{ title: "Фичи", url: "/tags/features/" },
{ title: "#11ty", url: "/tags/11ty/" },
{ title: "#Обсидиан", url: "/tags/obsidian/" },
],
blog_foundation: "2025",
author: {
name: "Магомед Вагабов",
email: "[email protected]",
url: "https://magvag.ru",
},
tag_links: [
{ name: "фичи", url: "features" },
{ name: "навигация", url: "navigation" },
{ name: "оптимизация", url: "optimization" },
],
};
Всё должно быть интуитивно понятно, кроме необязательного поля class для массива navigation_pages — задав его, можно стилизовать отдельные элементы меню в шапке ЦСС-классами.
Заполнили? Зайдите на страницу локалхоста в браузере — у вас поменяется как минимум шапка сайта. Конгратс!
Ремонтируем подвал
Теперь откройте _includes/layouts/base.njk и просмотрите его по диагонали (или попросите ЧатГПТ сделать это за вас, если не переносите вид кода). В этом файле описана минимальная ХТМЛ-разметка любой страницы блога: подключенные стили и скрипты, предзагруженные шрифты, фавыконка, шапка и подвал сайта.
Давайте отремонтируем подвал. Избавьтесь от моей личной инфы и заполните её своей: почта, контакты, etc. Если вашему блогу больше 1 года, уберите { # и # } вокруг —{× year ×}. Не удивляйтесь тому, что в исходном файле на месте × будут %.
<footer class='unvisitable'>
<p class="footer-text">© { { metadata.author.name } }, { { metadata.blog_foundation } }{ # –{× year ×} # }<br>
<a href="/rss/">РСС,</a> <a href="https://t.me/magmoyed">телеграм-канал</a><br>
Есть вопросы по Триреме? Пишите: <a href="https://t.me/magvag">@magvag</a></p>
<p class="footer-built"> Сделано на <a href="https://trireme.magvag.ru/">Триреме</a></p>
</footer>
Вы, конечно, можете убрать и надпись Сделано на Триреме, но тогда я расстроюсь.
Прикручиваем аватар и фавыконки
Фавыконка
В base.njk вы могли заметить строчки
<link rel="icon" href="/assets/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="icon" href="/assets/favicon.png" sizes="32x32">
и не понять, где лежат исходные файлы — корневой папки /assets/ внутри trireme-blog/ ведь нет. Нужная папка в исходниках живёт на /content/assets/ — в (/_site)/assets/ она дублируется во время генерации папки статичного сайта.
Давайте поменяем вашему сайту фавыконку и аватар. Сходите в любимый графический редактор, нарисуйте favicon.png размером 32 на 32 пикселя и опционально favicon.svg, если ваша фавыконка, кхм, иконочная. Слишком сильно не старайтесь, это чаще вредит, чем помогает.
Положите эти файлы в /content/assets/ взамен оригинальных. Если svg-иконки у вас нет, удалите эту строчку.
<link rel="icon" href="/assets/favicon.svg" sizes="any" type="image/svg+xml">
Если фавыконка локалхоста не поменялась — погуглите, как сбросить кэш сайта.
Аватарка
Аватарку меняйте по похожему алгоритму. Сожмите любимую картинку до 135×135 пикселей и конвертируйте в .webp формат. Зачем конвертировать? Потому что ваш изначальный .png будет весить под 50 Кб — больше, чем все ХТМЛ, ЦСС и JS файлы на странице разом. Формат .webp весит где-то в 10 раз меньше.
Ходим по страницам не-постов
Весь движ в Триреме происходит в папке /content/, а все заметки и медифайлы к ним лежат в подпапке /blog/. Большинство из страниц в корне папки это скрипты для генерации страниц пачками, вроде tag-pages.njk, но вам стоит заглянуть хотя бы на index.md — из этого файла сгенерируется содержимое главной страницы. Вычистите его и заполните тем, что вашей душе угодно: рассказом о себе, ещё какой лабудой.
Если очень хотите, можете выставить metadata.blog_homepage на /, а index.md удалить — тогда на главной будет сразу список постов.
Бонус: настраиваем РСС
Если вы следите за сайтами дюжины-другой авторов путём периодического прокликивания их главных страниц, то попробуйте настроить себе РСС-читалку. Илья Бирман расписал, насколько это удобно.
Если вы хотите оставить у блога РСС-поток, откройте eleventy.config.js, домотайте до этого куска и отредактируйте там метаданные по красоте.
eleventyConfig.addPlugin(feedPlugin, {
type: "atom", // or "rss", "json"
outputPath: "/rss/feed.xml",
stylesheet: "pretty-atom-feed.xsl",
collection: {
name: "posts",
limit: 10,
},
metadata: {
language: "en",
title: "Blog Title",
subtitle: "This is a longer description about your blog.",
base: "https://example.com/",
author: {
name: "Your Name",
},
},
});
Не забудьте сходить в файл content/rss.md и убрать напоминалку в конце!
Избавляемся от сирени (ура, кастомизация!)
Я специально поставил сиреневую тему как дефолтную — так ни один человек с блогом на Триреме не избежит открытия public/css/custom.css и настройке стилей под себя.
Видите /* в начале и */ в конце? Удалите их и разблокируете нейтральную тему.
/* :root {
--background-color: #fff;
--text-color: #000;
--text-color-header: #000;
--text-color-highlight: #000;
--text-color-link: #3857ff;
--text-color-link-active: #f84890;
--text-color-link-visited: #b24bab;
--text-color-accent: #f84890;
--background-color-highlight: color-mix(in srgb, #ffe300, transparent 50%);
--spoiler-color: #a6aed7;
--code-background: color-mix(in srgb, var(--text-color), transparent 95%);
--font-size-text: 1.125rem;
--font-size-caption: 0.825rem;
--syntax-tab-size: 2;
--article-width: 48rem;
--sidenote-margin: 3rem;
--transparency-underline: 80%;
--star-mark: "♥";
--end-mark: "❦";
} ...
Смена темы возможна потому, что в ЦСС-бандле (ЦСС-файле со всеми используемыми на странице ЦСС-файлами) правила из custom.css находятся ниже правил из default.css и браузер считает их более важными.
Вы можете подключить и другие шрифты: конвертируйте их .otf/.ttf файлы в легковесный .woff2, скопируйте .woff2 файлы в папку /public/fonts/ и добавьте в custom.css что-то типа
@font-face {
font-family: "PT Sans";
src: url("/fonts/PTSansRegular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "PT Sans Caption";
src: url("/fonts/PTSansCaptionRegular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--font-family: "PT Sans", -apple-system, system-ui, sans-serif;
--font-family-monospace: "PT Mono", Consolas, Menlo, Monaco, monospace;
--font-family-caption: "PT Sans Caption", -apple-system, system-ui, sans-serif;
}
А вообще чего это я вас ЦСС учу. Вперёд, открывайте режим разработчика в браузере, смотрите классы и идентификаторы интересующих объектов, просите ЧатГПТ сделать с ней то, что вам нужно, добавляйте изменение в custom.css.
Почему бы сразу не редактировать default.css? Вы можете так сделать, но это сильно осложнит обновление до новых версий Триремы — в них, разумеется, будет изменённый default.css и без git объединить ваши измения и мои будет затруднительно. Будьте паиньками, не лезте в дефолт.
Короче, веселитесь!