Этот пост — продолжение предыдущего. Там я коротко описал, как работает блог, созданный с помощью генератора статических сайтов Jekyll и опубликованный на хостинге GitHub Pages. В этом посте я опишу изменения, которые внес в тему оформления блога.

Такой блог можно с помощью этих инструментов создать почти с нуля, но в большинстве случаев блогеры используют готовые темы оформления. Выбор предоставляется богатый (вот тут можно выбрать из около двух тысяч: https://github.com/topics/jekyll-theme).

Я выбрал тему оформления minima. Она позиционируется как базовая, простая, минималистичная (это отражено и в названии), универсальная. Поскольку в разработке я предпочитаю простоту и минималистичность, то мне такой настрой авторов темы понравился. Позже я узнал, что это одна из официальных тем Jekyll (создана его авторами) и является темой по умолчанию (устанавливается по команде jekyll new, если вы работаете с этим инструментом на своем компьютере из командной строки; это я пока не делал, так как работаю по-другому).

После создания форка (копии репозитория) темы minima на GitHub я удалил демонстрационные посты и стал писать свои. Репозиторий с исходным кодом моего блога.

Простые изменения

Я убрал служебный пункт «HEAD» из верхнего меню блога (настраивается в файле настроек _config.yml в корне проекта), изменил название пункта меню «About» на «О блоге» (это можно сделать в разделе «Front Matter» файла about.md в корне проекта). Изменил содержимое файла about.md на своё.

Первоначально файл настроек темы _config.yml состоит из одних комментариев, комментарии обозначены символом решетки # в начале строки. Файл написан на языке YAML (это видно и по расширению файла), это язык в том числе для написания конфигурационных файлов. Комментарии лучше оставить, так как в них содержатся готовые настройки, которые можно раскомментировать и дополнить в случае необходимости.

Я раскомментировал и использовал в этом файле настройку для названия блога title, настройку для имени автора блога author. После публикации блога соответствующие изменения появились на страницах блога.

Вообще в файле _config.yml может быть раскомментировано и/или добавлено довольно много настроек. Все эти настройки описать сложно, так как при подключении в блог плагинов (новые части программы с дополнительным функционалом) становится возможно добавлять в этот файл и настройки подключенных плагинов. То есть сложно составить общий список настроек, число и названия которых могут постоянно меняться.

Я опишу только некоторые настройки, смысл которых постепенно разбирал в случае необходимости. Мой файл с настройками можно посмотреть по следующей ссылке:

https://github.com/ilyachalov/ilyachalov.github.io/blob/master/_config.yml

Плагины Jekyll для сборки на GitHub Pages

Насколько я понял, при том способе работы с блогом (форк репозитория на GitHub без установки Jekyll у себя на компьютере), который я использую, при сборке блога доступен только ограниченный список уже установленных на GitHub Pages плагинов Jekyll. (Это ограничение можно понять: общее число плагинов, по-моему, более трех тысяч, устанавливать на GitHub Pages их все было бы безумием.) Список доступных плагинов можно посмотреть в документации GitHub Pages.

Из этого списка доступных плагинов нужные плагины можно подключить в файле настроек _config.yml в корне проекта. Я пока подключил следующее:

plugins:
  - jekyll-feed
  - jekyll-paginate

Плагин jekyll-feed создает источник (feed) информации об изменениях на вашем сайте/блоге для RSS-агрегаторов (это программы или веб-сервисы, с помощью которых вы можете создать собственную ленту новостей из множества заданных источников). Я никогда не пользовался такими программами сам, но не прочь поучаствовать в этой движухе. Знаю людей, которые этим пользуются. Результатом работы этого плагина является файл в формате XML, который можно получить для моего блога по следующему адресу:

https://ilyachalov.github.io/feed.xml

Ссылка на этот файл присутствует в подвале страниц блога.

Про плагин jekyll-paginate, который нужен для обеспечения пагинации, будет сказано далее.

Еще раз уточню, так как сам понял не сразу. При описываемом способе работы с блогом вы не имеете возможности устанавливать какие-либо плагины, можете использовать только то, к чему вам предоставляет доступ GitHub. При этом нужно лишь включить нужные плагины в файле настроек _config.yml.

Если вы хотите использовать плагины, которые GitHub не поддерживает (или хотите написать свои плагины и использовать их), то придется работать другим способом: установить генератор Jekyll на свой компьютер и выполнять сборку у себя локально (при этом развертывание файлов блога после сборки на хостинг GitHub Pages остается возможным).

Отображение отрывков из постов

По умолчанию на главной странице блога в теме minima отображаются только названия и даты постов со ссылками на отдельные страницы постов. То есть по умолчанию отрывки из постов на главной странице блога не отображаются. С помощью настройки show_excerpts в файле настроек _config.yml отображение отрывков постов можно включить.

По умолчанию в качестве отрывка из поста будет отображен первый параграф поста. В тексте на языке Markdown параграфы отделяются друг от друга пустыми строками, поэтому будет показан отрывок из начала поста до первой пустой строки.

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

---
excerpt_separator: <!--more-->
---

После этого вставляем разделитель <!--more--> в нужное место в посте. Теперь в качестве отрывка будет отображена часть поста от его начала до этого разделителя. Тут подробнее.

Разделение длинного названия поста по строкам

На странице поста длинное название поста может не влезать на одну строку. Если оно не влезает, то браузер автоматически переносит часть названия на следующую строку. Такой автоматический перенос далеко не всегда хорош с моей точки зрения как автора поста.

Например, есть пост с автоматическим отображением названия в следующем виде:

C++: получение массива простых чисел, часть
                      2

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

В принципе, добавление HTML-элемента <br> (обозначение места переноса строки для браузера) разрешено в файле на языке Markdown. То есть проблема решается добавлением этого элемента в желаемое место/места переноса. Например, если в разделе «Front Matter» поста указано название поста в таком виде (со вставленным HTML-элементом <br>):

---
title: "C++: получение массива <br>простых чисел, часть 2"
---

То отображено название в браузере будет вот так:

C++: получение массива
простых чисел, часть 2

То есть решение достаточно простое. Однако, оно порождает другую проблему: название поста из раздела «Front Matter» используется не только в самом посте, но и во всех других местах, где оно требуется. Например, это название у меня отображается на главной странице блога, а также на странице с архивом меток. В этих других местах я не хочу, чтобы название поста отображалось с переносом в месте вставки HTML-элемента <br>.

Чтобы это реализовать, мне пришлось дополнить в соответствующих двух макетах/шаблонах код на языке программирования Liquid для удаления HTML-элемента <br> из названия поста. Например, было:

            {{ post.title }}

стало:

            {{ post.title | remove: "<br>" }}

Здесь используется символ | (конвейер) для пропуска названия поста через фильтр remove.

Что такое пагинация, ее включение и настройка

Слово «пагинация» существовало в русском языке еще до интернета и использовалось в издательском деле. Произошло оно от латинского «pagina» (страница). От того же корня произошло английское «page». Пагинацией называется нумерация на страницах книг рядом с текстом.

При публикации электронных текстов «пагинацией» называют разбивку большого количества данных на отдельные «страницы». В электронном виде не существует ограничения площади публикации, характерного для страниц бумажных книг, бумажных журналов и тому подобных объектов. Зачем тогда нужна пагинация в электронном виде, если всё можно расположить на одной очень длинной странице?

Думаю, изначально пагинацию стали использовать из-за маленьких скоростей передачи данных в интернете. Длинный текст долго грузился. Ситуация ухудшается, если речь идет не о тексте, а, скажем, о списке товаров с красивыми иллюстрациями или с видео большого объема. Поэтому онлайн-магазины до сих пор используют пагинацию по этой причине.

У пагинации есть большое количество преимуществ, но также и большое количество недостатков. Ее использование — вопрос спорный, каждый блогер решает это для себя сам.

При достаточно большом количестве постов в блоге (от нескольких десятков) имеет смысл рассмотреть возможность организации пагинации (дробления) главной страницы блога на ряд страниц. В Живом Журнале (livejournal.com), например, такая пагинация работает по умолчанию, наверное, с самого начала существования этого веб-сервиса.

В принципе, пагинацию главной страницы блога можно сделать разными способами. Я имею в виду как разные способы хранения и передачи данных при пагинации, так и разные способы оформления пагинации в составе сайта/блога.

В блоге на базе генератора Jekyll (подробнее про пагинацию) посты хранятся в виде файлов/страниц, а главная страница блога собирается (build) из названий этих постов, отрывков из постов, дат постов и другой информации. Насколько я понимаю, самый простой способ создать пагинацию в такой ситуации — создание при сборке не одной главной страницы со всеми постами, а создание ряда страниц, каждая со своей порцией постов.

По идее, это всё можно написать самому. Но зачем, если существует целый ряд уже написанных плагинов для этого? Как я писал ранее, список плагинов, установленных именно в рамках веб-сервиса GitHub Pages, ограничен. В описанной выше ситуации нам доступен только плагин jekyll-paginate. Про него часто пишут, что он устарел, но у меня работает прекрасно, поэтому не вижу необходимости списывать «старичка» раньше времени.

Итак, для включения пагинации я внес следующие изменения в файл настроек _config.yml:

plugins:
  - jekyll-paginate

# Настройки пагинации
paginate: 10
paginate_path: "/page:num/"

То есть потребовалось включить соответствующий плагин (в моей ситуации его установка не требуется, он доступен в рамках веб-сервиса GitHub Pages) и прописать настройки для него. Главная страница будет разбита на кусочки по 10 постов. Настройка paginate_path позволяет определить вид гиперссылки на отдельные кусочки главной страницы, начиная со второго: /page2/, /page3/ и так далее.

Таким образом, после включения и настройки пагинации в моем блоге доступны следующие адреса:

И так далее.

Отмечу, что потребовалось переименовать файл index.md в index.html. Это требование описано и объяснено в официальной документации генератора Jekyll в разделе про пагинацию.

По умолчанию в теме minima при включенной пагинации внизу каждого куска главной страницы отображаются гиперссылки на предыдущую и следующую порцию постов в следующем виде:

| • | 1 | 2 | — начальная порция

| 1 | 2 | 3 | — любая порция из середины

| 2 | 3 | • | — последняя порция

То есть при таком разделе гиперссылок внизу каждого куска главной страницы всегда есть три квадрата. Число в центральном квадрате показывает номер текущей порции постов и не является гиперссылкой. Числа в левом и правом квадратах являются гиперссылками и позволяют перейти к предыдущей или следующей порциям постов. Символ пункта списка • здесь обозначает окончание пагинации слева или справа.

Я считаю такую организацию этого раздела ущербной: по-моему, на каждом куске главной страницы в этом разделе должны быть гиперссылки на все имеющиеся порции, а не только на одну или две, которые вмещаются в рамки вышеприведенного дизайна.

Разумеется, я сделал так, как мне хотелось. Символы • убрал вообще, а число квадратов с номерами порций и гиперссылками соответствует общему числу порций. Например, если общее число порций четыре, то внизу каждого куска главной страницы у меня будет раздел с гиперссылками на порции постов в следующем виде (номер текущей порции постов отображается без гиперссылки):

| 1 | 2 | 3 | 4 |

Всё это можно настроить в программе на языке Liquid в макете home.html, который находится в подпапке _layouts в корне проекта. Страница index.html по умолчанию строится в соответствии с этим макетом.

Окончание следует

В следующем посте этой серии я собираюсь описать, что такое «метки» (tags) постов и как их можно включить и настроить в блоге с темой оформления minima на базе генератора Jekyll.