Yuminos - минималистичная и функциональная тема для генератора статических сайтов Hugo.
Основана на теме Minos и дизайне сайта Дмитрия Ковалёва.
Демонстрация темы: https://yu-leo.github.io/yu0dev/
- Проект находится в стадии разработки. Может содержать ошибки и недочеты как в UI/UX, так и в реализации задуманного: "костыли", не оптимальные решения, дублирование кода, некрасивый код и т. д. и т. п. Issues с замечаниями и предложениями, а так же Pull Requests с исправлениями приветствуются!
- Корректное отображение и функционирование table of content при включении данной опции в конфиге не гарантируется!
- Минималистичность дизайна
- Контент первичен. Оформление темы не должно мешать его восприятию
- Широкие возможности для авторов контента важны
Главная страница
Страница тега
Страница статьи (начало)
Для того чтобы установить тему Yuminos:
- Склонируйте этот репозиторий в директорию
themes/
Вашего сайта:
git clone https://github.com/Yu-Leo/hugo-theme-yuminos
либо добавьте его как подмодуль, если в директории с Вашим сайтом инициализирован git-репозиторий:
git submodule add https://github.com/Yu-Leo/hugo-theme-yuminos
- Укажите название темы в конфигурационном файле. По умолчанию - в файле
hugo.toml
в директории Вашего сайта:
theme = "hugo-theme-yuminos"
Если тема была установлена как git-подмодуль, обновить её можно следующим образом:
git submodule update --remote themes/hugo-theme-yuminos
Используется на страницах, содержащих списки постов: главная страница, страницы тегов и категорий.
paginate = 50
В теме присутствует поддержка отображения 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
, то к каждой строке такого блока будет добавлен символ "$". Он не будет выделяться курсором вместе с остальным текстом и не будет копироваться в буфер обмена при нажатии кнопки копирования. Эту фичу можно использовать для оформления запускаемых из терминала команд.
Встроенные стили для блоков кода (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
❗ Опция lineNos=table
имеет некорректное отображение. Рекомендую использовать lineNos=inline
Можно задать название для блока кода. Для этого нужно указать его после названия языка: rust {title="main.rs"}
Для улучшения SEO шаблоны темы содержат мета-теги. Значения тегов title
, description
и keywords
берутся из параметров поста. При отсутствии в параметрах поста - из конфигурационного файла сайта.
Значения задаются в конфигурационном файле:
[params]
description = "Site description"
keywords = ["keyword1", "keyword2"]
[params.author]
name = "Author name"
Значения задаются в параметрах поста:
---
title: "Тестовая страница"
description: "Это тестовая страница, демонстрирующая возможности темы"
keywords: ["keyword1", "keyword2"]
---
Присутствует поддержка мета-тегов Open Graph: og:title
, og:description
, og:type
, og:url
.
Присутствует интеграция с системой комментариев 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"
К каждому посту можно добавить алёрт, который будет отображаться перед его содержимым.
Для этого нужно указать в параметрах поста следующие строки:
---
page:
alert:
message: "Содержимое алёрта. Можно использовать **Markdown**"
type: "danger"
---
Типы алёртов:
info
(синий)success
(зелёный)danger
(красный)
Если Вам нужен информационный алёрт, можно использовать сокращённую форму:
---
page:
alert: "Информационный алерт"
---
Полезны, если в процессе написания поста Вы хотите оставить какие-либо заметки на будущее и не забыть удалить их перед публикацией.
Все 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.
Исходный код
. . . .--- 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
- дата, с которой работает сайт.
[params]
startTime = "2023-08-24T10:00:00"
Если данная опция включена, обрамленные тегом <kbd>...</kbd>
символы будут иметь стиль, схожий со стилем кнопок на клавиатурах ноутбуков Lenovo Thinkpad.
[params]
thinkpadKbd = true
Обычный вид кнопок (опция выключена):
По умолчанию в левом углу хэдера сайта будет отображаться содержимое параметра title
из конфигурационного файла.
Если вы хотите использовать кастомное название сайта с собственными стилями, включите соответствующую настройку в конфигурационном файле:
[params]
customTitle = true
в таком случае на место названия сайта будет подставлено содержимое файла layouts/partials/custom-title.html
.
Основной текст: 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.