2023-12-17 07:54:22 +03:00
|
|
|
|
# [Старый помидор](README.en.md)
|
|
|
|
|
|
|
|
|
|
Две темы Jekyll для оформления статических сайтов. Цветной вариант был написан раньше
|
|
|
|
|
с использованием AngularJS и Material, таким было оформление предыдущей версии моего
|
|
|
|
|
блога. Затем был написан облегчённый одноцветный вариант с использованием только HTML
|
|
|
|
|
и CSS, внешний вид напоминает тему оформления по умолчанию на GitHub Pages. Обе темы
|
|
|
|
|
дополняют друг друга и похожи друг на друга, общие черты и различия между ними отмечены
|
|
|
|
|
в списке свойств.
|
|
|
|
|
|
2023-12-30 23:36:43 +03:00
|
|
|
|
- [Цветной помидор](https://git.org.ru/golovin/color-tomato-theme/src/branch/master/README.md) — выбор цвета во время сборки.
|
2023-12-17 07:54:22 +03:00
|
|
|
|
- Старый помидор — легковесная тема оформления.
|
|
|
|
|
|
|
|
|
|
### Свойства
|
|
|
|
|
|
|
|
|
|
- [x] Адаптивная вёрстка или Responsive layout.
|
|
|
|
|
- [x] Файлы пользователя JS и CSS в блоке head страниц HTML.
|
|
|
|
|
- [x] SEO-разметка с использованием JSON-LD и Open Graph.
|
|
|
|
|
- [x] Переключение между двумя языками и помидорными темами.
|
|
|
|
|
- [x] Карта страниц сайта с их переводами в формате XML.
|
|
|
|
|
- [x] Простая страница 404 для несуществующих URL-адресов.
|
|
|
|
|
- [x] Шрифты: Roboto для текста и JBMono для блоков кода.
|
|
|
|
|
- [x] Помидоры: PNG, JPG 120x120, SVG 64x64, ICO 32x32.
|
|
|
|
|
- [ ] Выбор цвета во время сборки, зелёный цвет по умолчанию.
|
|
|
|
|
- [ ] Кнопка прокрутки вверх в стиле Material.
|
|
|
|
|
|
2023-12-17 08:21:01 +03:00
|
|
|
|
### Установка
|
|
|
|
|
|
|
|
|
|
Запускаем скрипт из папки с темой, собираем пакет *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 и оптимизируем
|
|
|
|
|
ряд тегов также для краткости и для корректности. Скрипт предназначен для этой цели.
|
|
|
|
|
|
|
|
|
|
```shell
|
|
|
|
|
echo "Оптимизация собранного контента."
|
|
|
|
|
cd _site || exit
|
|
|
|
|
cp -r assets/* .
|
|
|
|
|
rm -r assets
|
|
|
|
|
find . -type f -name '*.html' | sort -r | while read -r file; do
|
|
|
|
|
sed -i 's/ class="language-plaintext highlighter-rouge"//g' "$file"
|
|
|
|
|
sed -i 's/ class="language-java highlighter-rouge"//g' "$file"
|
|
|
|
|
sed -i 's/ class="language-html highlighter-rouge"//g' "$file"
|
|
|
|
|
sed -i 's/ class="language-js highlighter-rouge"//g' "$file"
|
|
|
|
|
sed -i 's/ class="language-bash highlighter-rouge"//g' "$file"
|
|
|
|
|
sed -i 's/<div><div class="highlight"><pre class="highlight">/<div class="highlight"><pre class="highlight">/g' "$file"
|
|
|
|
|
sed -i 's/<\/code><\/pre><\/div><\/div>/<\/code><\/pre><\/div>/g' "$file"
|
|
|
|
|
sed -i 's/<hr \/>/<hr>/g' "$file"
|
|
|
|
|
sed -i -r 's/<input(.+) \/>/<input\1>/g' "$file"
|
|
|
|
|
sed -i -r 's/<img(.+) \/>/<img\1>/g' "$file"
|
|
|
|
|
done
|
|
|
|
|
```
|
|
|
|
|
|
2023-12-17 07:54:22 +03:00
|
|
|
|
### Структура каталогов
|
|
|
|
|
|
2023-12-17 08:21:01 +03:00
|
|
|
|
Папка с сайтом на Jekyll должна содержать два обязательных файла: с зависимостями `Gemfile`
|
|
|
|
|
и с параметрами `_config.yml`, все остальные файлы — это содержимое самого сайта. Эта тема
|
|
|
|
|
написана с расчётом, что содержимое сайта разделено на два подкаталога по языкам и состоит
|
|
|
|
|
из публикаций и заглавных страниц, где заглавные страницы — это списки публикаций с краткими
|
|
|
|
|
описаниями.
|
2023-12-17 07:54:22 +03:00
|
|
|
|
|
|
|
|
|
```
|
2023-12-17 08:21:01 +03:00
|
|
|
|
jekyll_site
|
|
|
|
|
├─ ru
|
|
|
|
|
│ ├─ . . . — публикации
|
|
|
|
|
│ └─ index.md — заглавная страница
|
|
|
|
|
├─ en
|
|
|
|
|
│ ├─ . . . — публикации
|
|
|
|
|
│ └─ index.md — заглавная страница
|
|
|
|
|
├─ . . .
|
|
|
|
|
├─ Gemfile — зависимости
|
|
|
|
|
└─ _config.yml — параметры
|
2023-12-17 07:54:22 +03:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Зависимости
|
|
|
|
|
|
|
|
|
|
`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"
|
|
|
|
|
# подпапка этой сборки для относительных URLs
|
|
|
|
|
baseurl: ""
|
|
|
|
|
# ссылка в верхнем левом углу заглавных страниц
|
2023-12-30 23:36:43 +03:00
|
|
|
|
homepage_url: "https://git.org.ru/tolstoy.ln"
|
2023-12-17 07:54:22 +03:00
|
|
|
|
# представление ссылки
|
2023-12-30 23:36:43 +03:00
|
|
|
|
homepage_name: "GIT.ORG.RU"
|
2023-12-17 07:54:22 +03:00
|
|
|
|
# подпапка альтернативной сборки, можно
|
|
|
|
|
# не указывать, если не используется
|
|
|
|
|
color_tomato_baseurl: "/color"
|
|
|
|
|
# часовой пояс для формата даты ISO-8601
|
|
|
|
|
timezone: "Europe/Moscow"
|
|
|
|
|
# языковые параметры должны быть указаны либо
|
|
|
|
|
# везде, либо только на страницах с переводами
|
|
|
|
|
lang: "ru" # по умолчанию, можно не указывать
|
|
|
|
|
# имя автора для SEO-разметки и подписи в футере
|
|
|
|
|
author: "Толстой Л.Н."
|
|
|
|
|
# транслитерация имени автора для переведённых страниц
|
|
|
|
|
author_translated: "Tolstoy L.N."
|
|
|
|
|
# дополнение к подписи в футере для переведённых страниц
|
|
|
|
|
translation_caption: "translation from Russian"
|
2023-12-17 08:21:01 +03:00
|
|
|
|
# тема оформления для сборки
|
2023-12-17 07:54:22 +03:00
|
|
|
|
theme: older-tomato-theme
|
2023-12-17 08:21:01 +03:00
|
|
|
|
# макет для сборки
|
2023-12-17 07:54:22 +03:00
|
|
|
|
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
|
2023-12-17 08:21:01 +03:00
|
|
|
|
# дата должна быть указана только на страницах публикаций,
|
2023-12-17 07:54:22 +03:00
|
|
|
|
# и не должна быть указана на заглавных страницах,
|
|
|
|
|
# заглавные страницы отображают дату последней сборки сайта
|
|
|
|
|
date: 2023.01.15
|
|
|
|
|
# языковые параметры должны быть указаны либо
|
|
|
|
|
# везде, либо только на страницах с переводами
|
|
|
|
|
lang: "ru" # по умолчанию, можно не указывать
|
|
|
|
|
# имя автора на языке этой страницы
|
|
|
|
|
author: "Толстой Л.Н."
|
|
|
|
|
# транслитерация имени автора для оригинальных страниц,
|
|
|
|
|
# или оригинальное имя автора для переведённых страниц
|
|
|
|
|
author_translated: "Tolstoy L.N."
|
|
|
|
|
# дополнение к подписи в футере для переведённых страниц
|
|
|
|
|
translation_caption: "translation from Russian"
|
|
|
|
|
---
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2023-12-17 08:21:01 +03:00
|
|
|
|
© Головин Г.Г., Код с комментариями, 2021-2023
|