Цветной помидор
Две темы Jekyll для оформления статических сайтов. Цветной вариант был написан раньше с использованием AngularJS и Material, таким было оформление предыдущей версии моего блога. Затем был написан облегчённый одноцветный вариант с использованием только HTML и CSS, внешний вид напоминает тему оформления по умолчанию на GitHub Pages. Обе темы дополняют друг друга и похожи друг на друга, общие черты и различия между ними отмечены в списке свойств.
- Цветной помидор — выбор цвета во время сборки.
- Старый помидор — легковесная тема оформления.
Свойства
-
Адаптивная вёрстка или Responsive layout. -
Файлы пользователя JS и CSS в блоке head страниц HTML. -
SEO-разметка с использованием JSON-LD и Open Graph. -
Переключение между двумя языками и помидорными темами. -
Карта страниц сайта с их переводами в формате XML. -
Простая страница 404 для несуществующих URL-адресов. -
Перенаправление в корень сайта из папок, где нет index.html
. -
Шрифты: Roboto для текста и JBMono для блоков кода. -
Помидоры: PNG, JPG 120x120, SVG 64x64, ICO 32x32. -
Выбор цвета во время сборки, зелёный цвет по умолчанию. -
Кнопка прокрутки вверх в стиле Material.
Цвета
Цвет темы можно выбрать из списка цветов библиотеки Material. Каждый цвет идёт вместе с палитрой своих оттенков, которые используются для оформления всего сайта, зелёный цвет по умолчанию. От цвета не зависят только подсветка синтаксиса в блоках кода и пользовательские файлы JS и CSS. В старой версии блога палитру можно было выбирать из выпадающего меню по кнопке на клиенте. Теперь палитра выбирается один раз во время сборки — это заметно упрощает дерево DOM и облегчает клиента.
Список цветов
-
red -
pink -
purple -
deep-purple -
indigo -
blue -
light-blue -
cyan -
teal -
green -
light-green -
lime -
yellow -
amber -
orange -
deep-orange -
brown -
grey -
blue-grey
Установка
Запускаем скрипт из папки с темой, собираем пакет gem и устанавливаем его.
rm color-tomato-theme-1.0.1.gem
gem build color-tomato-theme.gemspec
sudo gem install --local color-tomato-theme-1.0.1.gem
После сборки
Сборка сайта выполняется командой jekyll build
. После этого мы получаем папку _site
с собранными
страницами и подпапку assets
из темы. Перемещаем содержимое этой подпапки обратно в папку _site
—
получаем короткие ссылки, которые используются в теме. После этого обходим страницы HTML и оптимизируем ряд
тегов также для краткости и для корректности. Дополнительно копируем из темы файл перенаправления в корень
сайта для всех подкаталогов, если в них отсутствует файл index.html
. Скрипт предназначен для этой цели.
# оптимизация собранного контента
cd _site || exit
cp -r assets/* .
rm -r assets
# оптимизация ряда тегов
function optimize_html {
echo "Оптимизация: $1"
sed -i 's|layout-padding=""|layout-padding|g' "$1"
sed -i 's| class="language-plaintext highlighter-rouge"||g' "$1"
sed -i 's| class="language-java highlighter-rouge"||g' "$1"
sed -i 's| class="language-html highlighter-rouge"||g' "$1"
sed -i 's| class="language-js highlighter-rouge"||g' "$1"
sed -i 's| class="language-bash highlighter-rouge"||g' "$1"
sed -i 's|<div><div class="highlight">|<div class="highlight">|g' "$1"
sed -i 's|</pre></div></div>|</pre></div>|g' "$1"
sed -i -r 's|<input(.+) />|<input\1>|g' "$1"
sed -i -r 's|<img(.+) />|<img\1>|g' "$1"
}
export -f optimize_html
# запуск параллельной обработки собранных страниц и оптимизации ряда тегов
find . -type f -name "*.html" -print0 | xargs -I{} -n1 -0 -P0 bash -c 'optimize_html "{}"'
# страница перехода в корень сайта для каталогов без заглавной страницы
find . -type d -print0 | xargs -I{} -n1 -0 -P0 cp -n return.html {}/index.html
rm -r return.html
Структура каталогов
Папка с сайтом на Jekyll должна содержать два обязательных файла: с зависимостями Gemfile
и с параметрами _config.yml
, все остальные файлы — это содержимое самого сайта. Эта тема
написана с расчётом, что содержимое сайта разделено на два подкаталога по языкам и состоит
из публикаций и заглавных страниц, где заглавные страницы — это списки публикаций с краткими
описаниями.
jekyll_site
├─ ru
│ ├─ . . . — публикации
│ └─ index.md — заглавная страница
├─ en
│ ├─ . . . — публикации
│ └─ index.md — заглавная страница
├─ . . .
├─ Gemfile — зависимости
└─ _config.yml — параметры
Зависимости
Gemfile
— список пакетов ruby gems, включая установленные локально.
source "https://rubygems.org"
gem "jekyll"
gem "color-tomato-theme"
Параметры сайта
_config.yml
— список общих параметров для сайта, включая параметры для сборки.
# название сайта для подписи в футере
name: "Код с комментариями"
# подпись в футере для переведённых страниц
name_translated: "Code with comments"
# URL адрес сайта, включая протокол
url: "https://pomodoro.example.ru"
# подпапка этой сборки для относительных URL-ов
baseurl: "/color"
# ссылка в верхнем левом углу заглавных страниц
homepage_url: "https://hub.mos.ru/tolstoy.ln"
# представление ссылки
homepage_name: "HUB.MOS.RU"
# подпапка альтернативной сборки, можно
# не указывать, если не используется
older_tomato_baseurl: ""
# часовой пояс для формата даты ISO-8601
timezone: "Europe/Moscow"
# языковые параметры должны быть указаны либо
# везде, либо только на страницах с переводами
lang: "ru" # по умолчанию, можно не указывать
# имя автора для SEO-разметки и подписи в футере
author: "Толстой Л.Н."
# транслитерация имени автора для переведённых страниц
author_translated: "Tolstoy L.N."
# дополнение к подписи в футере для переведённых страниц
translation_caption: "translation from Russian"
# номера счётчиков для страниц, можно
# не указывать, если не используются
live_internet: "abcdefghij"
yandex_metrika: "1234567890"
# тема оформления и цвет для сборки
theme: color-tomato-theme
# по умолчанию, можно не указывать
color: green
# макет для сборки
defaults:
- scope:
path: ""
values:
layout: default
Параметры страниц
Список индивидуальных параметров страниц сайта для указания в шапке страницы Front matter.
---
# заголовок страницы на языке страницы
title: Вращаем пространственный крест
# предпочтительно 150-160 символов на языке страницы
description: ниасилил, многабукаф
# разделённый запятыми список секций страницы на её языке
sections: [Объёмные фигуры,Матрица поворота,Экспериментальная модель]
# разделённый запятыми список тегов страницы на её языке
tags: [javascript,canvas,геометрия,матрица,графика,изображение,куб]
# разделённый запятыми список скриптов для этой
# страницы, можно не указывать, если не используются
scripts: [/js/classes.js,/js/script1.js,/js/script2.js]
# разделённый запятыми список стилей для этой
# страницы, можно не указывать, если не используются
styles: [/css/pomodoro1.css,/css/pomodoro2.css]
# канонический URL адрес этой страницы
canonical_url: /ru/2023/01/15/spinning-spatial-cross.html
# URL адрес переведённой страницы для оригинальных страниц,
# или оригинальной страницы для переведённых страниц
url_translated: /en/2023/01/16/spinning-spatial-cross.html
# заголовок переведённой страницы для оригинальных страниц,
# или оригинальной страницы для переведённых страниц
title_translated: Spinning spatial cross
# дата должна быть указана только на страницах публикаций,
# и не должна быть указана на заглавных страницах,
# заглавные страницы отображают дату последней сборки сайта
date: 2023.01.15
# языковые параметры должны быть указаны либо
# везде, либо только на страницах с переводами
lang: "ru" # по умолчанию, можно не указывать
# имя автора на языке этой страницы
author: "Толстой Л.Н."
# транслитерация имени автора для оригинальных страниц,
# или оригинальное имя автора для переведённых страниц
author_translated: "Tolstoy L.N."
# дополнение к подписи в футере для переведённых страниц
translation_caption: "translation from Russian"
---
© Головин Г.Г., Код с комментариями, 2021-2024