# [Старый помидор](README.en.md) Две темы Jekyll для оформления статических сайтов. Цветной вариант был написан раньше с использованием AngularJS и Material, таким было оформление предыдущей версии моего блога. Затем был написан облегчённый одноцветный вариант с использованием только HTML и CSS, внешний вид напоминает тему оформления по умолчанию на GitHub Pages. Обе темы дополняют друг друга и похожи друг на друга, общие черты и различия между ними отмечены в списке свойств. - [Цветной помидор](https://git.org.ru/golovin/color-tomato-theme/src/branch/master/README.md) — выбор цвета во время сборки. - Старый помидор — легковесная тема оформления. ### Свойства - [x] Адаптивная вёрстка или Responsive layout. - [x] Файлы пользователя JS и CSS в блоке head страниц HTML. - [x] SEO-разметка с использованием JSON-LD и Open Graph. - [x] Переключение между двумя языками и помидорными темами. - [x] Карта страниц сайта с их переводами в формате XML. - [x] Простая страница 404 для несуществующих URL-адресов. - [x] Перенаправление в корень сайта из папок, где нет `index.html`. - [x] Шрифты: Roboto для текста и JBMono для блоков кода. - [x] Помидоры: PNG, JPG 120x120, SVG 64x64, ICO 32x32. - [ ] Выбор цвета во время сборки, зелёный цвет по умолчанию. - [ ] Кнопка прокрутки вверх в стиле Material. ### Установка Запускаем скрипт из папки с темой, собираем пакет *gem* и устанавливаем его. ```shell rm older-tomato-theme-1.0.1.gem gem build older-tomato-theme.gemspec sudo gem install --local older-tomato-theme-1.0.1.gem ``` ### После сборки Сборка сайта выполняется командой `jekyll build`. После этого мы получаем папку `_site` с собранными страницами и подпапку `assets` из темы. Перемещаем содержимое этой подпапки обратно в папку `_site` — получаем короткие ссылки, которые используются в теме. После этого обходим страницы HTML и оптимизируем ряд тегов также для краткости и для корректности. Дополнительно копируем из темы файл перенаправления в корень сайта для всех подкаталогов, если в них отсутствует файл `index.html`. Скрипт предназначен для этой цели. ```shell # оптимизация собранного контента cd _site || exit cp -r assets/* . rm -r assets # шаблоны для оптимизации ряда тегов expr+=('s| class="language-plaintext highlighter-rouge"||g') expr+=('s| class="language-java highlighter-rouge"||g') expr+=('s| class="language-html highlighter-rouge"||g') expr+=('s| class="language-js highlighter-rouge"||g') expr+=('s| class="language-bash highlighter-rouge"||g') expr+=('s|
|
|g') expr+=('s|
|
|g') expr+=('s|
|
|g') expr+=('s|||g') expr+=('s|||g') # запуск параллельной обработки собранных страниц и оптимизация ряда тегов find . -type f -name "*.html" -printf '%p\0' | xargs -I{} -n1 -0 -P0 bash -c \ "echo 'Оптимизация: {}' && sed -i -E $(printf " -e '%s'" "${expr[@]}") '{}'" # переход в корень сайта для каталогов без заглавной страницы find . -type d -exec 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*, включая установленные локально. ```ruby source "https://rubygems.org" gem "jekyll" gem "older-tomato-theme" ``` ### Параметры сайта `_config.yml` — список общих параметров для сайта, включая параметры для сборки. ```yaml # название сайта для подписи в футере name: "Код с комментариями" # подпись в футере для переведённых страниц name_translated: "Code with comments" # URL адрес сайта, включая протокол url: "https://pomodoro.example.ru" # подпапка этой сборки для относительных URL-ов baseurl: "" # ссылка в верхнем левом углу заглавных страниц homepage_url: "https://git.org.ru/tolstoy.ln" # представление ссылки homepage_name: "GIT.ORG.RU" # подпапка альтернативной сборки, можно # не указывать, если не используется color_tomato_baseurl: "/color" # часовой пояс для формата даты 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: older-tomato-theme # макет для сборки defaults: - scope: path: "" values: layout: default ``` ### Параметры страниц Список индивидуальных параметров страниц сайта для указания в шапке страницы Front matter. ```yaml --- # заголовок страницы на языке страницы 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-2025