Yuminos

Yuminos - минималистичная и функциональная тема для генератора статических сайтов Hugo.

Основана на теме Minos и дизайне сайта Дмитрия Ковалёва.

Демонстрация темы: https://yu-leo.github.io/yu0dev/

❗Дисклеймер

1. Проект находится в стадии разработки. Может содержать ошибки и недочеты как в UI/UX, так и в реализации задуманного: "костыли", не оптимальные решения, дублирование кода, некрасивый код и т. д. и т. п. Issues с замечаниями и предложениями, а так же Pull Requests с исправлениями приветствуются!
2. Корректное отображение и функционирование table of content при включении данной опции в конфиге не гарантируется!

🗿 Философия темы

• Минималистичность дизайна
• Контент первичен. Оформление темы не должно мешать его восприятию
• Широкие возможности для авторов контента важны

🖼 Скриншоты

Главная страница

Страница тега

Страница статьи (начало)

Страница статьи (конец)

🔨 Установка

Для того чтобы установить тему Yuminos:

1. Склонируйте этот репозиторий в директорию themes/ Вашего сайта:

git clone https://github.com/Yu-Leo/hugo-theme-yuminos

либо добавьте его как подмодуль, если в директории с Вашим сайтом инициализирован git-репозиторий:

git submodule add https://github.com/Yu-Leo/hugo-theme-yuminos

2. Укажите название темы в конфигурационном файле. По умолчанию - в файле hugo.toml в директории Вашего сайта:

theme = "hugo-theme-yuminos"

⬆ Обновление

Если тема была установлена как git-подмодуль, обновить её можно следующим образом:

git submodule update --remote themes/hugo-theme-yuminos

⭐ Возможности

Пагинация

Используется на страницах, содержащих списки постов: главная страница, страницы тегов и категорий.

paginate = 50

KaTeX

В теме присутствует поддержка отображения TeX вёрстки при помощи KaTeX. Включить либо отключить рендеринг можно в соответствующем параметре в конфиге:

[params]  
  katex = true

Скриншот

• Inline верстка должна обрамляться последовательностями \\( и \\).
• Отдельные блоки, выравниваемые по центру, - последовательностями $$
• Дополнение copy-tex заменяет отрендеренные фрагменты на исходную TeX-верстку при выделении и копировании
• Поддерживаемые операции: https://katex.org/docs/supported.html
• Простой TeX редактор: https://latexeditor.lagrida.com/

Блоки кода

Все блоки кода содержат кнопку "копировать", по нажатию на которую содержимое соответствующего блока копируется в буфер обмена. Вне зависимости от того, оформлены блоки кода в разметке Markdown или добавлены при помощи Hugo shortcodes.

❗Баг в текущей реализации: при включении нумерации строк ({lineNos=true}) номера строк так же копируются в буффер обмена.

Тема Yuminos подразумевает использование цветовой схемы gruvbox для блоков кода. Цвета кнопки копирования взяты из её палитры. Тема содержит встроенные стили для блоков кода (highlight-style.css), основанные на теме gruvbox. Размер табуляции равен 4 пробелам.

Рекомендую установить следующие настройки в конфигурационном файле:

[markup]
  defaultMarkdownHandler = 'goldmark'
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
    [markup.goldmark.extensions]
      highlight = true
  [markup.highlight]
    lineNumbersInTable=false
    noClasses=false

Скриншот

Shell

Если в качестве языка для блока с кодом указан shell, то к каждой строке такого блока будет добавлен символ "$". Он не будет выделяться курсором вместе с остальным текстом и не будет копироваться в буфер обмена при нажатии кнопки копирования. Эту фичу можно использовать для оформления запускаемых из терминала команд.

Скриншот

Diff

Встроенные стили для блоков кода (highlight-style.css) имеют кастомное оформление для языка diff:

Исходный код (.md)

diff --git a/.signer2.go b/.signer2.go
var hello = function() {
-  return "hello";
+  return "hello world";
}

!strong text
text
@subheading
Index asdfasdf
= asfdasfasfd

Скриншот

Highlight shortcode

Документация. Справка

❗ Опция lineNos=table имеет некорректное отображение. Рекомендую использовать lineNos=inline

Title

Можно задать название для блока кода. Для этого нужно указать его после названия языка: rust {title="main.rs"}

Исходный код (.md)

Скриншот

Мета-теги

Для улучшения SEO шаблоны темы содержат мета-теги. Значения тегов title, description и keywords берутся из параметров поста. При отсутствии в параметрах поста - из конфигурационного файла сайта.

Для всего сайта

Значения задаются в конфигурационном файле:

[params]
  description = "Site description"
  keywords = ["keyword1", "keyword2"]
  [params.author]
    name = "Author name"

Для конкретного поста

Значения задаются в параметрах поста:

---
title: "Тестовая страница"
description: "Это тестовая страница, демонстрирующая возможности темы"
keywords: ["keyword1", "keyword2"]
---

Open Graph

Присутствует поддержка мета-тегов Open Graph: og:title, og:description, og:type, og:url.

Комментарии. Giscus

Присутствует интеграция с системой комментариев giscus.

Настройки в конфигурационном файле:

[params]
  [params.comments]
    enabled = true
  [params.comments.giscus]
      repo = "repo-name"
      repoID = "repo-id"
      category = "category-name"
      categoryID = "category-id"
      mapping = "title"
      reactionsEnabled = 1
      emitMetadata = 0
      lazy = false
      lang = "en"

Для каждого поста можно отдельно отключить комментарии в его параметрах:

---
comments: false
---

Яндекс.Метрика

Присутствует интеграция с сервисом Яндекс.Метрика.

Настройки в конфигурационном файле:

[params]
  yandexMetrikaId = "1234567890"

Alerts

К каждому посту можно добавить алёрт, который будет отображаться перед его содержимым.

Для этого нужно указать в параметрах поста следующие строки:

---
page:
  alert:
    message: "Содержимое алёрта. Можно использовать **Markdown**"
    type: "danger"
---

Типы алёртов:

• info (синий)
• success (зелёный)
• danger (красный)

Если Вам нужен информационный алёрт, можно использовать сокращённую форму:

---
page:
  alert: "Информационный алерт"
---

Скриншоты

Блоки ToDo

Полезны, если в процессе написания поста Вы хотите оставить какие-либо заметки на будущее и не забыть удалить их перед публикацией.

Все ToDo-блоки, содержащиеся в посте, автоматически будут подсчитаны. В начале поста будет отображаться алёрт с их количеством, если оно больше 0.

Блок с содержимым

Добавляется в пост следующим образом:

{{< todo >}}
Содержимое блока ToDo. Можно использовать **Markdown**
{{< /todo >}}

Блок без содержимого

Добавляется в пост следующим образом:

{{< td >}}

Скриншоты

Скрытые блоки

Синтаксис:

Исходный код

<details>
<summary>Подробнее</summary>

## Скрытый блок

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

> Цитата
</details>

Скриншот (блок скрыт)

Скриншот (блок открыт)

Goat

Присутствует поддержка Goat.

Исходный код

      .               .                .               .--- 1          .-- 1     / 1
     / \              |                |           .---+            .-+         +
    /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
   +     +        |       |        |       |    ---+            ---+          +
  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
 /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
 1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4

Скриншот

StartTime

Если данная опция включена, в футере будет выводиться startTime - дата, с которой работает сайт.

[params]
    startTime = "2023-08-24T10:00:00"

Скриншот

Thinkpad-like кнопки

Если данная опция включена, обрамленные тегом <kbd>...</kbd> символы будут иметь стиль, схожий со стилем кнопок на клавиатурах ноутбуков Lenovo Thinkpad.

[params]
  thinkpadKbd = true

Скриншот

Обычный вид кнопок (опция выключена):

Скриншот

Кастомное название сайта

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

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

[params]
  customTitle = true

в таком случае на место названия сайта будет подставлено содержимое файла layouts/partials/custom-title.html.

🎨 UI

Шрифты

Основной текст: Lato

Моноширинный текст: JetBrains Mono

Цветовая палитра

На данный момент тема содержит только светлое оформление, основанное на следующей цветовой палитре:

• Белый: #ffffff - фоновый цвет
• Черный: #000000 - основной цвет текста
• Оттенки серого:
  • #939393 - иконки и названия тегов и категорий, иконки ссылки в заголовках в постах, текст в футере сайта
  • #f2f2f2 - фон для inline-кода
  • #495057 - фон для клавиш
  • #444444 - ссылки и заголовки постов в списках
• Оранжевый: #F37E0C - основной контрастный цвет
• Синий: #0C7C96 - алёрт типа info
• Зелёный: #0AC20A - алёрт типа success
• Красный: #E10B39 - алёрт типа danger
• Фиолетовый: #5815A4 - ToDo блоки и алёрты

Иконки

В интерфейсе используются иконки из коллекции.

📝 Лицензия

• Автор темы Minos для Hexo: @ppoffice
• Порт для Hugo: @carsonip
• Дополнения: @devpew
• Автор темы Yuminos: @Yu-Leo

Проект разрабатывается под лицензией MIT. Полный текст - в файле LICENSE.