Элементы markdown для Hugo Pocket :: Павел Васильев. Блог.

Сборник элементов управления для с примерами отображения в теме Pocket для Hugo.

Описание

Элемент description в заголовке .md файла страницы даёт короткий текст, который выводится в начале страницы и вытаскивается под заголовок поста в общем списке статей на первой странице, в категории, теге и тд.

+++
...
description = "Элементы оформления markdown с примерами отображения для темы Hugo Pocket."
...
+++

Заголовки

# Заголовок уровня 1

## Заголовок уровня 2

### Заголовок уровня 3

…

(Рабочие примеры по тексту)

Работа с текстом

Размертка обычного текста: **жирный** жирный, *курсив* курсив, ***жирный курсив*** жирный курсив, `кусок кода` кусок кода. ~~Зачёркнутый текст~~ ~~Зачёркнутый текст~~, <u>подчёркнутый текст</u> подчёркнутый текст

Обратные кавычки

Одинарные обратные кавычки ` - кусок кода в тексте. Не копируется автоматом.

Тройные обратные кавычки ``` - появляется блок кода с кнопкой копирования.

Показать код с кавычками ``` - обернуть его в бОльшее количество кавычек ````.

Горизонтальная линия

---

Ссылки

Одиночная

Ссылка: [Ссылка на Hugo](https://gohugo.io/) - Ссылка на Hugo.

Блок ссылок

{{/*< friendlinks*/ >}}
  - title: Hugo
    description: Самый быстрый в мире генератор статических сайтов.
    website: https://gohugo.io
    image: https://gohugo.io/favicon.ico 
  - title: Приложение Pocket
    description: В приложении Pocket Hugo app можно сразу писать.
    website: https://leftn.com
    image: logo-app.webp
  - title: Тема Pocket Hugo
    description: Самая классная тема
    website: https://theme.leftn.com
    image: pocket-hugo-theme-logo.webp
{{< /friendlinks >}}

Hugo Самый быстрый в мире генератор статических сайтов.

Приложение Pocket В приложении Pocket Hugo app можно сразу писать.

Тема Pocket Hugo Самая классная тема

Списки

Ненумерованный

- Один пункт.
- Другой.
- Второй.
- Третий

Один пункт.
Другой.
Второй.
Третий

Нумерованный список

1. Строго 1.
2. Строго 2.
3. Строго 3.

Строго 1.
Строго 2.
Строго 3.

Todo-лист

- [x] Уже сделано 1
- [x] Уже сделано 2
- [ ] Этот пункт надо сделать

Уже сделано 1
Уже сделано 2
Этот пункт надо сделать

Цитаты, выноски, заметки

> Цитата в тексте.
>
> Можно в несколько строк.

Цитата в тексте.

Можно в несколько строк.

Заметка note для выделения подсказок, предупреждений, ремарок.

{{< note type="info" title="Заголовок заметки (серый)" >}}
Какой-то текст внутри заметки, чтобы было удобно обратить внимание.
{{< /note >}}

type="info"

Заголовок заметки (серый)

Какой-то текст внутри заметки, чтобы было удобно обратить внимание.

type="tip"

Зеленый

Какой-то текст внутри заметки, чтобы было удобно обратить внимание.

type="warn"

Рыжий

Какой-то текст внутри заметки, чтобы было удобно обратить внимание.

Блоки кода

Любой текст, ограниченный тремя обратными кавычками:

```
theme = "pocket-hugo-theme"
defaultContentLanguage = "en"
mainSections = ["posts"]
```

Будет выглядеть так:

theme = "pocket-hugo-theme"
defaultContentLanguage = "en"
mainSections = ["posts"]

Можно указать тип кода (```html):

```html
<html>
	<body>
	<p> Текст на html-странице</p>
	</body>
</html>
```

<html>
	<body>
	<p> Текст на html-странице</p>
	</body>
</html>

чтобы показать пример с тремя кавычками, нужно этот блок обернуть в четыре кавычки. И т.д.

Таблицы

| Элемент | Важность |
| --- | --- |
| Заголовки | Задают ритмику текста |
| Списки | Дают структуру |
| Цитаты | Атрибутируют текст |
| Изображения | Иллюстрируют сухой текст |

Элемент	Важность
Заголовки	Задают ритмику текста
Списки	Дают структуру
Цитаты	Атрибутируют текст
Изображения	Иллюстрируют сухой текст

если колонок в таблице много, автоматически включается горизонтальный скролинг таблицы (влево-вправо)

Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок	Заголовок
Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент
Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент
Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент	Элемент

Проверяйте количество столбцов!

Количество столбцов во всех строках должно строго совпадать! Если хотя бы в одной строке количество элементов будет отличаться - таблица отображаться не будет.

Не забывайте | — | — |

Элемент | --- | --- | под заголовком - обязателен.

Раскрывашка

Видимый текстовый блок + раскрывающийся дополнительный текст, по умолчанию скрытый под стрелочкой - fold.

{{< fold "Короткий видимый текст и стрелочка" >}}
Дополнительный объём текста, который становится видимым только после нажатия на стрелочку, включая элементы оформления, например  `<details>` элемент.
{{< /fold >}}

Короткий видимый текст и стрелочка

Дополнительный объём текста, который становится видимым только после нажатия на стрелочку, включая элементы оформления, например <details> элемент.

Бейджи

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

{{< badge "Stable" >}}
{{< badge text="Optional" type="info" >}}
{{< badge text="Experimental" type="warn" >}}

Stable Optional Experimental - можно в одну линию

type - Stable

type="info" - Optional

type="warn" - Experimental

Кнопка

Кнопка button - реальное действие внутри текста.

{{< button href="/" label="Открыть Первую" >}}
{{< button href="https://ya.ru" label="Открыть Яндекс" style="ghost" >}}

Открыть Первую Открыть Я

Изображения

![Текст для изображения](sample.jpg)

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

Встроенной галереи в Hugo Pocket нет - её надо конструировать другими методами.

Видео и аудио

Встроить локальное или внешнее аудио и видео:

{{< video src="/media/demo.mp4" title="Локальное HTML5 видео" >}}Текстовое описание для видео.{{< /video >}}
{{< audio src="/media/demo.mp3" title="Audio clip" >}}Текстовое описание для локального аудио.{{< /audio >}}
{{< youtube id="rdwz7QiG0lk" >}}Встроенное видео YouTube оформленное в том же стиле.{{< /youtube >}}
{{< bilibili bvid="BV1xx411c7mu" >}}То же самое для Билибили.{{< /bilibili >}}

Текстовое описание для видео.

Локальное HTML5 аудио

Текстовое описание для локального аудио.

Встроенное видео YouTube оформленное в том же стиле.

То же самое для Билибили.

Таймлайн

Лента времени timeline для оформления исторической последовательности.

{{< timeline >}}
{{< timeline-item date="2026-01" title="Планирование" >}}Составление планов на светлое будущее.{{< /timeline-item >}}
{{< timeline-item date="2026-08" title="Строительство" >}}Строительство светлого будущего.{{< /timeline-item >}}
{{< timeline-item date="2026-02" title="Наведение красоты" >}}Наведение красоты на светлом будущем.{{< /timeline-item >}}
{{< /timeline >}}

2026-01

Планирование

Составление планов на светлое будущее.

2026-08

Строительство

Строительство светлого будущего.

2026-02

Наведение красоты

Наведение красоты на светлом будущем.

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

Колонки

Колонки columns для сравнений и подобных вещей. Колонок может быть несколько.

{{< columns >}}
{{< column >}}
	### Заголовок левой
	- короткие сравнения
	- саммари
	- до/после
	{{< /column >}}
{{< column >}}
	### Заголовок правой
	- укрчвт
	- списки
	- а контент остаётся длинным
	{{< /column >}}
{{< /columns >}}

Заголовок левой

короткие сравнения
саммари
до/после

Заголовок правой

укрчвт
списки
а контент остаётся длинным

а вот так ведут себя 3 (три) колонки (то есть это скорее плитки)

{{< columns >}}
{{< column >}}
### Заголовок левой

- короткие сравнения
- саммари
- до/после
{{< /column >}}
{{< column >}}
### Заголовок правой

- укрчвт
- списки
- а контент остаётся длинным
{{< /column >}}
{{< /columns >}}

Заголовок левой

короткие сравнения
саммари
до/после

Заголовок средней

смотри лево-право
середина
тарифы иногда так делают

Заголовок правой

укрчвт
списки
а контент остаётся длинным