Кастомизация шаблона GitHub-блога

Введение

Шаблон блога, который я использую, судя по всему, постоянно совершенствуется. Версия уже поднялась до 6.3.1. При осмотре обновлённой темы заметил, что на главной странице появилась возможность отображать изображения предпросмотра для постов, а цветовая гамма в целом стала более аккуратной.

Я искал способ обновления, и в процессе выяснил, что при первоначальном создании блога использовал метод Chirpy starter. Этот способ прост при установке, но имеет недостаток — ограниченные возможности кастомизации.

Поскольку причиной выбора GitHub-блога вместо обычных Tistory или Naver Blog была широкая возможность кастомизации, это несколько обесценивало смысл. Я быстро перешёл на метод GitHub Fork, который рекомендован на официальной странице.

Следуя этой инструкции шаг за шагом, количество файлов блога заметно увеличилось. В новых папках _includes, _javascript, _layouts, _sass можно редактировать JavaScript и CSS-файлы, напрямую изменяя компоненты веб-страницы, так что я внёс кое-какие правки.

Редактирование шаблона

Размер шрифта и межстрочные интервалы

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

SCSS можно редактировать в assets/css/jekyll-theme-chirpy.scss или создавать новые файлы, так что я написал код в этом файле. За свойства текста постов отвечает селектор .content в _scss/addon/commons.scss. Я установил font-size для всех .content примерно на 0.98, а межстрочные интервалы, ориентируясь на формат Tistory и Naver Blog, отрегулировал с 1.25rem до примерно 1.5rem.

.content {
  font-size: 0.98rem;
}

p:not(blockquote p) {
  margin-top: 1.5rem;
}

Удаление нижнего колонтитула

Оригинальная тема Chirpy создаёт внизу блога колонтитул: слева — «ⓒ {год} {имя} Некоторые права защищены», справа — «Powered by Jekyll with Chirpy theme». Последнее не особо важная информация, поэтому чтобы страница выглядела чище, я нашёл и закомментировал соответствующий код.

<p>
    {%- capture _platform -%}
        <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
    {%- endcapture -%}

    {%- capture _theme -%}
        <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
    {%- endcapture -%}

    {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
</p>
-->

Полужирное выделение заголовков постов

Увидев на другой платформе для письма — Medium — что заголовки статей выделяются полужирным шрифтом и привлекают внимание читателя, я решил сделать то же самое в своём блоге, добавив следующий код в assets/css/jekyll-theme-chirpy.scss.

.btn-outline-primary {
  font-weight: bold;
}

Удаление навигации по постам

Навигация по постам. Перенаправляет пользователя к предыдущей или следующей статье относительно текущей.

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

Мне показалось, что навигация по постам, наоборот, захламляет нижнюю часть страницы. Я хотел оставить только раздел «Похожие записи» и удалил код, подключающий навигацию (- post-nav), в файле _layouts/post.html{: .filepath}.

---
layout: default
refactor: true
panel_includes:
  - toc
tail_includes:
  - comments
  - related-posts
---

Изменение цвета фона боковой панели

Хотелось изменить цвет фона боковой панели, но при прямом использовании свойства background-color цвет фиксируется независимо от тёмной темы. Мне нужно было оставить цвет для светлой темы без изменений, а изменить только для тёмной. К счастью, в теме Chirpy в папке _sass/colors есть отдельный файл typography-dark.scss для тёмной темы, отличный от светлой. В этом файле я изменил цвет фона боковой панели для тёмной темы на #1D1D1E.

--sidebar-bg: #1D1D1E;

Изменение способа генерации TOC

Тема Chirpy по умолчанию создаёт TOC (оглавление) справа на странице поста. Это полезно: можно отслеживать текущее место чтения или переходить к нужному разделу. Но после обновления темы поведение изменилось и стало неудобным.

Не знаю точно, с какой версии это изменилось, но раньше оглавление строилось начиная с h1, а теперь требует наличия тегов h2 и ниже. Наверное, на то есть причина, но лично мне это показалось лишним, поэтому я вернул как было. Код длинный, поэтому написал только изменённую часть.

document.querySelector("main h1")&&tocbot.init({tocSelector:"#toc",contentSelector:".content",ignoreSelector:"[data-toc-skip]",headingSelector:"h1, h2, h3",orderedList:!1,scrollSmooth:!1})

export function toc() {
  if (document.querySelector('main h2')) {
    // see: https://github.com/tscanlin/tocbot#usage
    tocbot.init({
      tocSelector: '#toc',
      contentSelector: '.content',
      ignoreSelector: '[data-toc-skip]',
      headingSelector: 'h1, h2, h3',
      orderedList: false,
      scrollSmooth: false
    });
  }
}

{% if page.content contains '<h1' or page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
  {% assign urls = urls | append: ',' | append: site.data.origin[type].toc.js %}
{% endif %}

В процессе регистрации блога в веб-мастерах Naver и Bing я получил предупреждение «Обнаружено несколько тегов h1». Выясняя, почему такие предупреждения существуют, узнал о Руководстве по доступности веб-контента (WCAG). Вероятно, изменение генерации TOC с h2, а не с h1, связано с тем, чтобы стимулировать использование только одного тега h1 в соответствии с этим руководством. Действительно, проверив через инструменты разработчика такие страницы, как Википедия, я увидел, что заголовок статьи оформлен тегом h1, а пункты оглавления — h2.

Не уверен на 100%, что дело именно в WCAG, но рекомендации нужно соблюдать, поэтому я понизил уровни всех заголовков в постах блога на один шаг. Однако хотелось сохранить размер шрифта оглавления, поэтому в jekyll-theme-chirpy.scss я отдельно задал свойство font-size:

h2 {
  font-size: 1.9rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.3rem;
}

Изменение шрифта для определённых тегов

$font-family-base: 'IBM Plex Sans KR', 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
$font-family-heading: 'IBM Plex Sans KR', Lato, 'Microsoft Yahei', sans-serif;

Базовый шрифт казался мне широким, поэтому я поискал на Google Fonts шрифт с более узким межбуквенным интервалом и изменил его. Вместо прямого редактирования кода шрифта я воспользовался тем, что в шаблоне есть variables-hook.scss, и написал код там. Страница с новым шрифтом выглядит гораздо лучше.

**Заключение