1317 lines
47 KiB
Markdown
1317 lines
47 KiB
Markdown
---
|
||
title: "Shortcodes"
|
||
weight: 6
|
||
draft: true
|
||
description: "Все shortcodes темы Blowfish — справочник для практиков."
|
||
slug: "shortcodes"
|
||
tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
|
||
series: ["Документация"]
|
||
series_order: 8
|
||
---
|
||
|
||
Hugo даёт [стандартные shortcodes](https://gohugo.io/content-management/shortcodes/). Blowfish добавляет свои — для типичных задач блога.
|
||
|
||
## Alert
|
||
|
||
`alert` выводит стилизованный блок-уведомление. Нужен когда важную информацию нельзя пропустить.
|
||
|
||
| Параметр | Описание |
|
||
| --- | --- |
|
||
| `icon` | **Опционально.** Иконка слева.<br>**По умолчанию:** `triangle-exclamation` (см. [icon](#icon)) |
|
||
| `iconColor` | **Опционально.** Цвет иконки в CSS-формате.<br>Hex (`#FFFFFF`) или имя цвета (`white`).<br>По умолчанию — из текущей темы. |
|
||
| `cardColor` | **Опционально.** Цвет фона карточки в CSS-формате.<br>Hex (`#FFFFFF`) или имя цвета (`white`).<br>По умолчанию — из текущей темы. |
|
||
| `textColor` | **Опционально.** Цвет текста в CSS-формате.<br>Hex (`#FFFFFF`) или имя цвета (`white`).<br>По умолчанию — из текущей темы. |
|
||
|
||
Внутри — Markdown, форматируй как угодно.
|
||
|
||
**Пример 1:** Без параметров
|
||
|
||
```md
|
||
{{</* alert */>}}
|
||
**Внимание!** Это действие необратимо!
|
||
{{</* /alert */>}}
|
||
```
|
||
|
||
{{< alert >}}
|
||
**Warning!** This action is destructive!
|
||
{{< /alert >}}
|
||
|
||
**Пример 2:** Безымянный параметр
|
||
|
||
```md
|
||
{{</* alert "twitter" */>}}
|
||
Не забудь [подписаться](https://twitter.com/nunocoracao) в Twitter.
|
||
{{</* /alert */>}}
|
||
```
|
||
|
||
{{< alert "twitter" >}}
|
||
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
|
||
{{< /alert >}}
|
||
|
||
**Пример 3:** Именованные параметры
|
||
|
||
```md
|
||
{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}}
|
||
Это ошибка!
|
||
{{</* /alert */>}}
|
||
```
|
||
|
||
{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
|
||
This is an error!
|
||
{{< /alert >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Admonition
|
||
|
||
Admonition — визуальные блоки-выноски для акцентирования внимания.
|
||
|
||
Работает как alert, но через render hooks Hugo. Ключевое отличие — синтаксис Markdown, переносимый между платформами. Shortcodes — специфика Hugo. Синтаксис похож на GitHub alerts:
|
||
|
||
```md
|
||
> [!TIP]
|
||
> Admonition типа Tip.
|
||
|
||
> [!TIP]+ Свой заголовок + Своя иконка
|
||
> Сворачиваемый admonition с кастомным заголовком.
|
||
{icon="twitter"}
|
||
```
|
||
|
||
> [!TIP]
|
||
> A Tip type admonition.
|
||
|
||
> [!TIP]+ Custom Title + Custom Icon
|
||
> A collapsible admonition with custom title.
|
||
{icon="twitter"}
|
||
|
||
Знак alert (`+` или `-`) — опционален, управляет сворачиванием. Работает только в Obsidian.
|
||
|
||
> [!INFO]- Поддерживаемые типы
|
||
> Допустимые типы: [GitHub alert types](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) и [Obsidian callout types](https://help.obsidian.md/callouts). Регистр не важен.
|
||
>
|
||
> **GitHub:** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`\
|
||
>
|
||
> `NOTE`: `Заметка`: Полезная информация — даже при беглом чтении.\
|
||
> `TIP`: `Совет`: Как сделать проще или лучше.\
|
||
> `IMPORTANT`: `Важно`: Ключевое для достижения цели.\
|
||
> `WARNING`: `Внимание`: Срочно — иначе будут проблемы.\
|
||
> `CAUTION`: `Осторожно`: Риски и последствия этого действия.\
|
||
>
|
||
> **Obsidian:** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote`
|
||
|
||
> [!INFO]- Кастомизация admonition
|
||
> См. [руководство по кастомизации admonition](https://github.com/nunocoracao/blowfish/blob/main/layouts/_default/_markup/render-blockquote.html).
|
||
|
||
## Accordion
|
||
|
||
`accordion` — сворачиваемые панели. Элементы задаются через `accordionItem`. Параметр `mode` управляет одновременным открытием нескольких элементов.
|
||
|
||
| Параметр | Описание |
|
||
| --------- | ------------------------------------------------------------------------------------------------- |
|
||
| `mode` | **Опционально.** `collapse` (один открыт) или `open` (несколько открыты). По умолчанию `collapse`. |
|
||
| `separated` | **Опционально.** `true` — каждый элемент как отдельная карточка. По умолчанию `false` (единый список). |
|
||
|
||
Параметры `accordionItem`:
|
||
|
||
| Параметр | Описание |
|
||
| --------- | --------------------------------------------------------------------------------------------------- |
|
||
| `title` | **Обязательно.** Заголовок в шапке элемента. |
|
||
| `open` | **Опционально.** `true` — элемент открыт по умолчанию. |
|
||
| `header` | **Опционально.** Алиас для `title`, для совместимости. |
|
||
| `icon` | **Опционально.** Иконка перед заголовком. |
|
||
|
||
**Пример 1: `mode="open"` (несколько элементов открыты) + `separated=true`**
|
||
|
||
```md
|
||
{{</* accordion mode="open" separated=true */>}}
|
||
{{</* accordionItem title="Пример Markdown" icon="code" open=true */>}}
|
||
Этот элемент демонстрирует рендеринг Markdown:
|
||
- **Жирный текст**
|
||
- Списки
|
||
- `inline code`
|
||
{{</* /accordionItem */>}}
|
||
|
||
{{</* accordionItem title="Пример shortcode" md=false */>}}
|
||
Этот элемент демонстрирует рендеринг shortcode с <code>md=false</code>:
|
||
|
||
{{</* alert */>}}Это inline alert.{{</* /alert */>}}
|
||
{{</* /accordionItem */>}}
|
||
{{</* /accordion */>}}
|
||
```
|
||
|
||
{{< accordion mode="open" separated=true >}}
|
||
{{< accordionItem title="Markdown example" icon="code" open=true >}}
|
||
This item demonstrates Markdown rendering:
|
||
- **Bold text**
|
||
- Lists
|
||
- `inline code`
|
||
{{< /accordionItem >}}
|
||
|
||
{{< accordionItem title="Shortcode example" md=false >}}
|
||
This item demonstrates shortcode rendering with <code>md=false</code>:
|
||
|
||
{{< alert >}}This is an inline alert.{{< /alert >}}
|
||
{{< /accordionItem >}}
|
||
{{< /accordion >}}
|
||
|
||
**Пример 2: `mode="collapse"` (только один элемент открыт)**
|
||
|
||
```md
|
||
{{</* accordion mode="collapse" */>}}
|
||
{{</* accordionItem title="Первый элемент" open=true */>}}
|
||
Этот элемент использует Markdown с коротким списком:
|
||
1. Один
|
||
2. Два
|
||
3. Три
|
||
{{</* /accordionItem */>}}
|
||
|
||
{{</* accordionItem title="Второй элемент" md=false */>}}
|
||
Этот элемент включает другой shortcode:
|
||
{{</* badge */>}}Tip{{</* /badge */>}}
|
||
{{</* /accordionItem */>}}
|
||
{{</* /accordion */>}}
|
||
```
|
||
|
||
{{< accordion mode="collapse" >}}
|
||
{{< accordionItem title="First item" open=true >}}
|
||
This item uses Markdown with a short list:
|
||
1. One
|
||
2. Two
|
||
3. Three
|
||
{{< /accordionItem >}}
|
||
|
||
{{< accordionItem title="Second item" md=false >}}
|
||
This item includes another shortcode:
|
||
{{< badge >}}Tip{{< /badge >}}
|
||
{{< /accordionItem >}}
|
||
{{< /accordion >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Article
|
||
|
||
`article` встраивает статью в markdown-файл. Параметр `link` — `.RelPermalink` встраиваемой статьи. Shortcode не отображает родительскую страницу. _Важно: если сайт в подпапке (например, /blowfish/), включай этот путь в ссылку._
|
||
|
||
| Параметр | Описание |
|
||
| --------- | -------------------------------------------------------- |
|
||
| `link` | **Обязательно.** `.RelPermalink` целевой статьи. |
|
||
| `showSummary` | **Опционально.** Показывать краткое описание статьи. По умолчанию — из конфигурации сайта. |
|
||
| `compactSummary` | **Опционально.** Компактный режим отображения описания. По умолчанию `false`. |
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* article link="/docs/welcome/" showSummary=true compactSummary=true */>}}
|
||
```
|
||
|
||
{{< article link="/docs/welcome/" showSummary=true compactSummary=true >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Badge
|
||
|
||
`badge` — стилизованный бейдж для метаданных.
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* badge */>}}
|
||
Новая статья!
|
||
{{</* /badge */>}}
|
||
```
|
||
|
||
{{< badge >}}
|
||
New article!
|
||
{{< /badge >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Button
|
||
|
||
`button` — стилизованная кнопка для основного действия. Три опциональных параметра: `href`, `target`, `rel` — URL, target и relation ссылки.
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* button href="#button" target="_self" */>}}
|
||
Призыв к действию
|
||
{{</* /button */>}}
|
||
```
|
||
|
||
{{< button href="#button" target="_self" >}}
|
||
Call to action
|
||
{{< /button >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Carousel
|
||
|
||
`carousel` — интерактивная карусель изображений. Адаптивная, занимает место одного изображения по вертикали. Все изображения на полную ширину родительского контейнера с заданным соотношением сторон (по умолчанию `16:9`).
|
||
|
||
| Параметр | Описание |
|
||
| --- | --- |
|
||
| `images` | **Обязательно.** Regex-строка для поиска изображений или URL. |
|
||
| `captions` | **Опционально.** Список пар `ключ:подпись`. Ключи — имена файлов (локальные) или полные URL (внешние). Подписи поддерживают Markdown. |
|
||
| `aspectRatio` | **Опционально.** Соотношение сторон. По умолчанию `16-9`. |
|
||
| `interval` | **Опционально.** Интервал автопрокрутки в миллисекундах. По умолчанию `2000` (2с). |
|
||
|
||
Подписи сопоставляются по ключу. Для локальных — имя файла (например, `01.jpg`). Для внешних — полный URL.
|
||
|
||
**Пример 1:** Соотношение 16:9, явный список изображений
|
||
|
||
```md
|
||
{{</* carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" */>}}
|
||
```
|
||
|
||
{{< carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}
|
||
|
||
**Пример 2:** Соотношение 21:9, regex для изображений
|
||
|
||
```md
|
||
{{</* carousel images="gallery/*" aspectRatio="21-9" interval="2500" */>}}
|
||
```
|
||
|
||
{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}
|
||
|
||
**Пример 3:** Подписи к изображениям
|
||
|
||
```md
|
||
{{</* carousel images="gallery/*" captions="{01.jpg:Первое изображение с *форматированием*,02.jpg:Второе изображение со [ссылкой](https://example.com)}" */>}}
|
||
```
|
||
|
||
{{< carousel images="gallery/*" captions="{01.jpg:First image with *formatting*,02.jpg:Second image with a [link](https://example.com)}" >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Chart
|
||
|
||
`chart` — графики через библиотеку Chart.js. Поддерживает [разные типы диаграмм](https://www.chartjs.org/docs/latest/samples/). Параметры — между тегами shortcode, Chart.js делает остальное.
|
||
|
||
Синтаксис и типы диаграмм — в [официальной документации Chart.js](https://www.chartjs.org/docs/latest/general/).
|
||
|
||
**Пример:**
|
||
|
||
```js
|
||
{{</* chart */>}}
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
|
||
datasets: [{
|
||
label: '# of votes',
|
||
data: [12, 19, 3, 5, 3],
|
||
}]
|
||
}
|
||
{{</* /chart */>}}
|
||
```
|
||
|
||
{{< chart >}}
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
|
||
datasets: [{
|
||
label: '# of votes',
|
||
data: [12, 19, 3, 5, 3],
|
||
}]
|
||
}
|
||
{{< /chart >}}
|
||
|
||
Еще примеры диаграмм:
|
||
|
||
## Bar chart
|
||
|
||
<!-- prettier-ignore-start -->
|
||
{{< chart >}}
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||
datasets: [{
|
||
label: 'My First Dataset',
|
||
data: [65, 59, 80, 81, 56, 55, 40],
|
||
backgroundColor: [
|
||
'rgba(255, 99, 132, 0.2)',
|
||
'rgba(255, 159, 64, 0.2)',
|
||
'rgba(255, 205, 86, 0.2)',
|
||
'rgba(75, 192, 192, 0.2)',
|
||
'rgba(54, 162, 235, 0.2)',
|
||
'rgba(153, 102, 255, 0.2)',
|
||
'rgba(201, 203, 207, 0.2)'
|
||
],
|
||
borderColor: [
|
||
'rgb(255, 99, 132)',
|
||
'rgb(255, 159, 64)',
|
||
'rgb(255, 205, 86)',
|
||
'rgb(75, 192, 192)',
|
||
'rgb(54, 162, 235)',
|
||
'rgb(153, 102, 255)',
|
||
'rgb(201, 203, 207)'
|
||
],
|
||
borderWidth: 1
|
||
}]
|
||
}
|
||
{{< /chart >}}
|
||
<!-- prettier-ignore-end -->
|
||
|
||
## Line chart
|
||
|
||
<!-- prettier-ignore-start -->
|
||
{{< chart >}}
|
||
type: 'line',
|
||
data: {
|
||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||
datasets: [{
|
||
label: 'My First Dataset',
|
||
data: [65, 59, 80, 81, 56, 55, 40],
|
||
tension: 0.2
|
||
}]
|
||
}
|
||
{{< /chart >}}
|
||
<!-- prettier-ignore-end -->
|
||
|
||
## Doughnut chart
|
||
|
||
<!-- prettier-ignore-start -->
|
||
{{< chart >}}
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Red', 'Blue', 'Yellow'],
|
||
datasets: [{
|
||
label: 'My First Dataset',
|
||
data: [300, 50, 100],
|
||
backgroundColor: [
|
||
'rgba(255, 99, 132, 0.7)',
|
||
'rgba(54, 162, 235, 0.7)',
|
||
'rgba(255, 205, 86, 0.7)'
|
||
],
|
||
borderWidth: 0,
|
||
hoverOffset: 4
|
||
}]
|
||
}
|
||
{{< /chart >}}
|
||
<!-- prettier-ignore-end -->
|
||
|
||
|
||
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Code Importer
|
||
|
||
Импорт кода из внешних источников без копипасты.
|
||
|
||
| Параметр | Описание |
|
||
| --------- | ------------------------------------------------------- |
|
||
| `url` | **Обязательно.** URL внешнего файла с кодом. |
|
||
| `type` | Тип кода для подсветки синтаксиса. |
|
||
| `startLine` | **Опционально.** Начальная строка импорта. |
|
||
| `endLine` | **Опционально.** Конечная строка импорта. |
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" */>}}
|
||
|
||
```
|
||
|
||
{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}
|
||
|
||
```md
|
||
{{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18" */>}}
|
||
|
||
```
|
||
|
||
{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18">}}
|
||
|
||
<br/><br/>
|
||
|
||
## Codeberg Card
|
||
|
||
`codeberg` — карточка репозитория Codeberg через API. Показывает актуальную статистику: звёзды, форки.
|
||
|
||
| Параметр | Описание |
|
||
| --------- | ----------------------------------------------------- |
|
||
| `repo` | [String] Репозиторий в формате `username/repo` |
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* codeberg repo="forgejo/forgejo" */>}}
|
||
```
|
||
|
||
{{< codeberg repo="forgejo/forgejo" >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Figure
|
||
|
||
`figure` — вставка изображений. Заменяет базовый Hugo figure, добавляет оптимизацию производительности.
|
||
|
||
Если изображение — page resource, Hugo Pipes оптимизирует и масштабирует его под разные разрешения. Статические ассеты и внешние URL вставляются как есть.
|
||
|
||
| Параметр | Описание |
|
||
| --- | --- |
|
||
| `src` | **Обязательно.** Локальный путь/имя файла или URL. Порядок поиска: [page resource](https://gohugo.io/content-management/page-resources/), затем `assets/`, затем `static/`. |
|
||
| `alt` | [Альтернативный текст](https://moz.com/learn/seo/alt-text) для изображения. |
|
||
| `caption` | Markdown-подпись под изображением. |
|
||
| `class` | Дополнительные CSS-классы для изображения. |
|
||
| `figureClass` | Дополнительные CSS-классы для обёртки `<figure>`. Полезно для галерей. |
|
||
| `href` | URL для ссылки на изображении. |
|
||
| `target` | Атрибут target для `href` URL. |
|
||
| `nozoom` | `nozoom=true` отключает "зум" изображения. Полезно в сочетании с `href`. |
|
||
| `default` | Возврат к стандартному поведению Hugo `figure`. `default=true`, далее — обычный [синтаксис Hugo shortcode](https://gohugo.io/content-management/shortcodes/#figure). |
|
||
|
||
Blowfish автоматически конвертирует изображения в стандартном Markdown-синтаксисе:
|
||
|
||
```md
|
||
|
||
```
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* figure
|
||
src="abstract.jpg"
|
||
alt="Abstract purple artwork"
|
||
caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
|
||
*/>}}
|
||
|
||
<!-- ИЛИ -->
|
||
|
||
|
||
```
|
||
|
||
{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Forgejo Card
|
||
|
||
`forgejo` — карточка репозитория Forgejo через API. Актуальная статистика: звёзды, форки.
|
||
|
||
| Параметр | Описание |
|
||
| --------- | ----------------------------------------------------- |
|
||
| `repo` | [String] Репозиторий в формате `username/repo` |
|
||
| `server` | [String] URL сервера, например `https://v11.next.forgejo.org` |
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" */>}}
|
||
```
|
||
|
||
{{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Gallery
|
||
|
||
`gallery` — адаптивная галерея с разнообразными компоновками.
|
||
|
||
Для изображений используй `img` теги с классом `class="grid-wXX"` — ширина колонки. Доступные ширины: от 10% до 100% с шагом 5%. Пример: 65% → `grid-w65`. Также доступны 33% и 66% для галерей в 3 колонки. Tailwind-индикаторы для адаптивной сетки.
|
||
|
||
Для подписей — `figure` shortcode внутри gallery. Ширину задавай через `figureClass`, текст — через `caption`.
|
||
|
||
**Пример 1: Обычная галерея**
|
||
|
||
```md
|
||
{{</* gallery */>}}
|
||
<img src="gallery/01.jpg" class="grid-w33" />
|
||
<img src="gallery/02.jpg" class="grid-w33" />
|
||
<img src="gallery/03.jpg" class="grid-w33" />
|
||
<img src="gallery/04.jpg" class="grid-w33" />
|
||
<img src="gallery/05.jpg" class="grid-w33" />
|
||
<img src="gallery/06.jpg" class="grid-w33" />
|
||
<img src="gallery/07.jpg" class="grid-w33" />
|
||
{{</* /gallery */>}}
|
||
```
|
||
|
||
{{< gallery >}}
|
||
<img src="gallery/01.jpg" class="grid-w33" />
|
||
<img src="gallery/02.jpg" class="grid-w33" />
|
||
<img src="gallery/03.jpg" class="grid-w33" />
|
||
<img src="gallery/04.jpg" class="grid-w33" />
|
||
<img src="gallery/05.jpg" class="grid-w33" />
|
||
<img src="gallery/06.jpg" class="grid-w33" />
|
||
<img src="gallery/07.jpg" class="grid-w33" />
|
||
{{< /gallery >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
**Пример 2: Адаптивная галерея**
|
||
|
||
```md
|
||
{{</* gallery */>}}
|
||
<img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
{{</* /gallery */>}}
|
||
```
|
||
|
||
{{< gallery >}}
|
||
<img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
<img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
|
||
{{< /gallery >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
**Пример 3: Галерея с подписями (через `figure`)**
|
||
|
||
```md
|
||
{{</* gallery */>}}
|
||
{{</* figure src="gallery/01.jpg" alt="Gallery image 1" caption="Первая подпись" figureClass="grid-w33" */>}}
|
||
{{</* figure src="gallery/02.jpg" alt="Gallery image 2" caption="Вторая подпись" figureClass="grid-w33" */>}}
|
||
{{</* figure src="gallery/03.jpg" alt="Gallery image 3" caption="Третья подпись" figureClass="grid-w33" */>}}
|
||
{{</* /gallery */>}}
|
||
```
|
||
|
||
{{< gallery >}}
|
||
{{< figure src="gallery/01.jpg" alt="Gallery image 1" caption="First caption" figureClass="grid-w33" >}}
|
||
{{< figure src="gallery/02.jpg" alt="Gallery image 2" caption="Second caption" figureClass="grid-w33" >}}
|
||
{{< figure src="gallery/03.jpg" alt="Gallery image 3" caption="Third caption" figureClass="grid-w33" >}}
|
||
{{< /gallery >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Gist
|
||
|
||
`gist` — встраивание GitHub Gist: пользователь, ID, опционально — конкретный файл.
|
||
|
||
| Параметр | Описание |
|
||
| -------------- | ------------------------------------------------------------------ |
|
||
| `[0]` | [String] GitHub username |
|
||
| `[1]` | [String] Gist ID |
|
||
| `[2]` (опционально) | [String] Имя файла в Gist |
|
||
|
||
**Пример 1: Весь Gist**
|
||
|
||
```md
|
||
{{</* gist "octocat" "6cad326836d38bd3a7ae" */>}}
|
||
````
|
||
|
||
{{< gist "octocat" "6cad326836d38bd3a7ae" >}}
|
||
|
||
**Пример 2: Конкретный файл из Gist**
|
||
|
||
```md
|
||
{{</* gist "rauchg" "2052694" "README.md" */>}}
|
||
```
|
||
|
||
{{< gist "rauchg" "2052694" "README.md" >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Gitea Card
|
||
|
||
`gitea` — карточка репозитория Gitea через API. Актуальная статистика: звёзды, форки.
|
||
|
||
| Параметр | Описание |
|
||
| --------- | ----------------------------------------------------- |
|
||
| `repo` | [String] Репозиторий в формате `username/repo` |
|
||
| `server` | [String] URL сервера, например `https://git.fsfe.org` |
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" */>}}
|
||
```
|
||
|
||
{{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## GitHub Card
|
||
|
||
`github` — карточка GitHub-репозитория с актуальной статистикой: звёзды, форки.
|
||
|
||
| Параметр | Описание |
|
||
|-----------------|---------------------------------------------------------------|
|
||
| `repo` | [String] Репозиторий в формате `username/repo` |
|
||
| `showThumbnail` | **Опционально** [boolean] Показывать миниатюру репозитория |
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* github repo="nunocoracao/blowfish" showThumbnail=true */>}}
|
||
```
|
||
|
||
{{< github repo="nunocoracao/blowfish" showThumbnail=true >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## GitLab Card
|
||
|
||
`gitlab` — карточка GitLab Project (репозитория в терминологии GitLab). Актуальная статистика: звёзды, форки. В отличие от `github`, не показывает основной язык проекта. Поддерживает кастомный URL инстанса GitLab — если доступен endpoint `api/v4/projects/`, работает с self-hosted и enterprise.
|
||
|
||
| Параметр | Описание |
|
||
| ----------- | ----------------------------------------------------------------------- |
|
||
| `projectID` | [String] Числовой ProjectID GitLab |
|
||
| `baseURL` | [String] URL инстанса GitLab, по умолчанию `https://gitlab.com/` |
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* gitlab projectID="278964" */>}}
|
||
```
|
||
|
||
{{< gitlab projectID="278964" >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Hugging Face Card
|
||
|
||
`huggingface` — карточка модели или датасета Hugging Face. Актуальная информация: лайки, загрузки, тип и описание.
|
||
|
||
| Параметр | Описание |
|
||
|------------|----------------------------------------------------------------|
|
||
| `model` | [String] Модель в формате `username/model` |
|
||
| `dataset` | [String] Датасет в формате `username/dataset` |
|
||
|
||
**Важно:** Используй либо `model`, либо `dataset` — не оба.
|
||
|
||
**Пример 1 (Модель):**
|
||
|
||
```md
|
||
{{</* huggingface model="google-bert/bert-base-uncased" */>}}
|
||
```
|
||
|
||
{{< huggingface model="google-bert/bert-base-uncased" >}}
|
||
|
||
**Пример 2 (Датасет):**
|
||
|
||
```md
|
||
{{</* huggingface dataset="stanfordnlp/imdb" */>}}
|
||
```
|
||
|
||
{{< huggingface dataset="stanfordnlp/imdb" >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Icon
|
||
|
||
`icon` — SVG-иконка, масштабируется под текущий размер текста. Единственный параметр — имя иконки.
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* icon "github" */>}}
|
||
```
|
||
|
||
**Результат:** {{< icon "github" >}}
|
||
|
||
Иконки загружаются через Hugo pipelines — максимальная гибкость. Blowfish включает набор встроенных иконок для соцсетей, ссылок и прочего.
|
||
|
||
Свои иконки: положи SVG в `assets/icons/` проекта. В shortcode используй имя файла без `.svg`.
|
||
|
||
<br/><br/><br/>
|
||
|
||
## KaTeX
|
||
|
||
`katex` — математические выражения через KaTeX. Синтаксис — в [справочнике TeX-функций](https://katex.org/docs/supported.html).
|
||
|
||
Shortcode достаточно вставить один раз на странице — KaTeX автоматически отрендерит всю разметку. Поддерживаются inline и block нотации.
|
||
|
||
Inline: оберни выражение в `\(` и `\)`. Block: используй `$$`.
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* katex */>}}
|
||
\(f(a,b,c) = (a^2+b^2+c^2)^3\)
|
||
```
|
||
|
||
{{< katex >}}
|
||
\(f(a,b,c) = (a^2+b^2+c^2)^3\)
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Keyword
|
||
|
||
`keyword` — визуальное выделение важных слов и фраз (например, профессиональных навыков). `keywordList` — группировка нескольких `keyword`.
|
||
|
||
| Параметр | Описание |
|
||
| --------- | --------------------------------------- |
|
||
| `icon` | Опциональная иконка для keyword |
|
||
|
||
Внутри — Markdown.
|
||
|
||
**Пример 1:**
|
||
|
||
```md
|
||
{{</* keyword */>}} *Супер* навык {{</* /keyword */>}}
|
||
```
|
||
|
||
{{< keyword >}} _Super_ skill {{< /keyword >}}
|
||
|
||
**Пример 2:**
|
||
|
||
```md
|
||
{{</* keywordList */>}}
|
||
{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
|
||
{{</* keyword icon="code" */>}} **Важный** навык {{</* /keyword */>}}
|
||
{{</* /keywordList */>}}
|
||
|
||
{{</* keyword */>}} *Отдельный* навык {{</* /keyword */>}}
|
||
```
|
||
|
||
{{< keywordList >}}
|
||
{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}}
|
||
{{< keyword icon="code" >}} **Important** skill {{< /keyword >}}
|
||
{{< /keywordList >}}
|
||
{{< keyword >}} _Standalone_ skill {{< /keyword >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Lead
|
||
|
||
`lead` — акцент на начало статьи. Введение или важная информация. Оберни любой Markdown-контент.
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* lead */>}}
|
||
Когда жизнь даёт тебе лимоны — делай лимонад.
|
||
{{</* /lead */>}}
|
||
```
|
||
|
||
{{< lead >}}
|
||
When life gives you lemons, make lemonade.
|
||
{{< /lead >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## List
|
||
|
||
`list` — список последних статей. Обязательный параметр `limit` ограничивает количество. `where` и `value` фильтруют статьи по параметрам. Shortcode не отображает родительскую страницу, но учитывает её в limit.
|
||
|
||
| Параметр | Описание |
|
||
| --- | --- |
|
||
| `limit` | **Обязательно.** Количество статей. |
|
||
| `title` | Заголовок списка, по умолчанию `Recent` |
|
||
| `cardView` | Карточный вид, по умолчанию `false` |
|
||
| `where` | Переменная для фильтрации, например `Type` |
|
||
| `value` | Значение для `where`, например для `Type` — `sample` |
|
||
|
||
{{< alert >}}
|
||
Значения `where` и `value` используются в запросе `where .Site.RegularPages $where $value`. Доступные параметры — в [документации Hugo](https://gohugo.io/methods/page/).
|
||
{{</ alert >}}
|
||
|
||
**Пример 1:**
|
||
|
||
```md
|
||
{{</* list limit=2 */>}}
|
||
```
|
||
|
||
{{< list limit=2 >}}
|
||
|
||
**Пример 2:**
|
||
|
||
```md
|
||
{{</* list title="Samples" cardView=true limit=6 where="Type" value="sample" */>}}
|
||
```
|
||
|
||
{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## LTR/RTL
|
||
|
||
`ltr` и `rtl` — смешивание направлений текста. Пользователи RTL-языков могут вставлять LTR-фрагменты. С `%` как внешним разделителем — Markdown внутри рендерится нормально (см. [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown)).
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
- Это markdown-список.
|
||
- Направление по умолчанию — LTR
|
||
{{%/* rtl */%}}
|
||
- هذه القائمة باللغة العربية
|
||
- من اليمين الى اليسار
|
||
{{%/* /rtl */%}}
|
||
```
|
||
|
||
- This is an markdown list.
|
||
- Its per default a LTR direction
|
||
{{% rtl %}}
|
||
- هذه القائمة باللغة العربية
|
||
- من اليمين الى اليسار
|
||
{{% /rtl %}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Markdown Importer
|
||
|
||
Импорт markdown-файлов из внешних источников без копипасты.
|
||
|
||
| Параметр | Описание |
|
||
| --------- | ------------------------------------------------------- |
|
||
| `url` | **Обязательно.** URL внешнего markdown-файла. |
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}}
|
||
|
||
```
|
||
|
||
{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}
|
||
|
||
<br/><br/>
|
||
|
||
## Mermaid
|
||
|
||
`mermaid` — диаграммы и визуализации через текст. Под капотом Mermaid — широкий набор диаграмм, графиков и форматов.
|
||
|
||
Пиши синтаксис Mermaid внутри shortcode — плагин сделает остальное.
|
||
|
||
Синтаксис и типы диаграмм — в [официальной документации Mermaid](https://mermaid-js.github.io/).
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* mermaid */>}}
|
||
graph LR;
|
||
A[Lemons]-->B[Lemonade];
|
||
B-->C[Profit]
|
||
{{</* /mermaid */>}}
|
||
```
|
||
|
||
{{< mermaid >}}
|
||
graph LR;
|
||
A[Lemons]-->B[Lemonade];
|
||
B-->C[Profit]
|
||
{{< /mermaid >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Swatches
|
||
|
||
`swatches` — набор до трёх цветов для демонстрации палитры. Параметры — HEX-коды.
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}}
|
||
```
|
||
|
||
**Результат:**
|
||
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Tabs
|
||
|
||
`tabs` — вкладки для вариантов одного шага. Пример: инструкции по установке VS Code на разных платформах.
|
||
|
||
| Параметр | Описание |
|
||
| --------- | -------------------------------------------------------- |
|
||
| `group` | **Опционально.** Имя группы для синхронизации. Вкладки с одинаковым `group` переключаются вместе. |
|
||
| `default` | **Опционально.** Метка активной вкладки по умолчанию. Если не задано — первая вкладка. |
|
||
| `label` | **Обязательно.** Текст на кнопке вкладки. |
|
||
| `icon` | **Опционально.** Иконка перед текстом. |
|
||
|
||
**Пример 1: Базовое использование**
|
||
|
||
`````md
|
||
{{</* tabs */>}}
|
||
|
||
{{</* tab label="Windows" */>}}
|
||
Установка через Chocolatey:
|
||
|
||
```pwsh
|
||
choco install vscode.install
|
||
```
|
||
|
||
или через WinGet
|
||
|
||
```pwsh
|
||
winget install -e --id Microsoft.VisualStudioCode
|
||
```
|
||
{{</* /tab */>}}
|
||
|
||
{{</* tab label="macOS" */>}}
|
||
```bash
|
||
brew install --cask visual-studio-code
|
||
```
|
||
{{</* /tab */>}}
|
||
|
||
{{</* tab label="Linux" */>}}
|
||
См. [документацию](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||
{{</* /tab */>}}
|
||
|
||
{{</* /tabs */>}}
|
||
`````
|
||
|
||
**Результат:**
|
||
|
||
{{< tabs >}}
|
||
|
||
{{< tab label="Windows" >}}
|
||
Install using Chocolatey:
|
||
|
||
```pwsh
|
||
choco install vscode.install
|
||
```
|
||
|
||
or install using WinGet
|
||
|
||
```pwsh
|
||
winget install -e --id Microsoft.VisualStudioCode
|
||
```
|
||
{{< /tab >}}
|
||
|
||
{{< tab label="macOS" >}}
|
||
```bash
|
||
brew install --cask visual-studio-code
|
||
```
|
||
{{< /tab >}}
|
||
|
||
{{< tab label="Linux" >}}
|
||
See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
|
||
{{< /tab >}}
|
||
|
||
{{< /tabs >}}
|
||
|
||
**Пример 2: С Group, Default и Icon**
|
||
|
||
`````md
|
||
{{</* tabs group="lang" default="Python" */>}}
|
||
{{</* tab label="JavaScript" icon="code" */>}}
|
||
```javascript
|
||
console.log("Hello");
|
||
```
|
||
{{</* /tab */>}}
|
||
|
||
{{</* tab label="Python" icon="sun" */>}}
|
||
```python
|
||
print("Hello")
|
||
```
|
||
{{</* /tab */>}}
|
||
|
||
{{</* tab label="Go" icon="moon" */>}}
|
||
```go
|
||
fmt.Println("Hello")
|
||
```
|
||
{{</* /tab */>}}
|
||
{{</* /tabs */>}}
|
||
|
||
{{</* tabs group="lang" default="Python" */>}}
|
||
{{</* tab label="JavaScript" icon="code" */>}}
|
||
```javascript
|
||
const add = (a, b) => a + b;
|
||
```
|
||
{{</* /tab */>}}
|
||
|
||
{{</* tab label="Python" icon="sun" */>}}
|
||
```python
|
||
def add(a, b): return a + b
|
||
```
|
||
{{</* /tab */>}}
|
||
|
||
{{</* tab label="Go" icon="moon" */>}}
|
||
```go
|
||
func add(a, b int) int { return a + b }
|
||
```
|
||
{{</* /tab */>}}
|
||
{{</* /tabs */>}}
|
||
`````
|
||
|
||
**Результат:**
|
||
|
||
{{< tabs group="lang" default="Python" >}}
|
||
{{< tab label="JavaScript" icon="code" >}}
|
||
```javascript
|
||
console.log("Hello");
|
||
```
|
||
{{< /tab >}}
|
||
|
||
{{< tab label="Python" icon="sun" >}}
|
||
```python
|
||
print("Hello")
|
||
```
|
||
{{< /tab >}}
|
||
|
||
{{< tab label="Go" icon="moon" >}}
|
||
```go
|
||
fmt.Println("Hello")
|
||
```
|
||
{{< /tab >}}
|
||
{{< /tabs >}}
|
||
|
||
{{< tabs group="lang" default="Python" >}}
|
||
{{< tab label="JavaScript" icon="code" >}}
|
||
```javascript
|
||
const add = (a, b) => a + b;
|
||
```
|
||
{{< /tab >}}
|
||
|
||
{{< tab label="Python" icon="sun" >}}
|
||
```python
|
||
def add(a, b): return a + b
|
||
```
|
||
{{< /tab >}}
|
||
|
||
{{< tab label="Go" icon="moon" >}}
|
||
```go
|
||
func add(a, b int) int { return a + b }
|
||
```
|
||
{{< /tab >}}
|
||
{{< /tabs >}}
|
||
|
||
Обе группы вкладок имеют одинаковый `group="lang"` — клик по любой вкладке синхронизирует обе группы. `default="Python"` делает Python активной вкладкой по умолчанию, `icon="code"` добавляет иконку перед текстом.
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Timeline
|
||
|
||
`timeline` — визуальная хронология: профессиональный опыт, достижения проекта и т.д. Элементы — через `timelineItem`.
|
||
|
||
| Параметр | Описание |
|
||
| ----------- | -------------------------------------------- |
|
||
| `md` | Рендерить контент как Markdown (true/false) |
|
||
| `icon` | Иконка в визуальных элементах таймлайна |
|
||
| `header` | Заголовок записи |
|
||
| `badge` | Текст в бейдже справа сверху |
|
||
| `subheader` | Подзаголовок записи |
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* timeline */>}}
|
||
|
||
{{</* timelineItem icon="github" header="header" badge="badge test" subheader="subheader" */>}}
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
|
||
{{</* /timelineItem */>}}
|
||
|
||
|
||
{{</* timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" */>}}
|
||
With html code
|
||
<ul>
|
||
<li>Coffee</li>
|
||
<li>Tea</li>
|
||
<li>Milk</li>
|
||
</ul>
|
||
{{</* /timelineItem */>}}
|
||
|
||
{{</* timelineItem icon="star" header="Shortcodes" badge="AWESOME" */>}}
|
||
With other shortcodes
|
||
{{</* gallery */>}}
|
||
<img src="gallery/01.jpg" class="grid-w33" />
|
||
<img src="gallery/02.jpg" class="grid-w33" />
|
||
<img src="gallery/03.jpg" class="grid-w33" />
|
||
<img src="gallery/04.jpg" class="grid-w33" />
|
||
<img src="gallery/05.jpg" class="grid-w33" />
|
||
<img src="gallery/06.jpg" class="grid-w33" />
|
||
<img src="gallery/07.jpg" class="grid-w33" />
|
||
{{</* /gallery */>}}
|
||
{{</* /timelineItem */>}}
|
||
|
||
{{</* timelineItem icon="code" header="Another Awesome Header"*/>}}
|
||
{{</* github repo="nunocoracao/blowfish" */>}}
|
||
{{</* /timelineItem */>}}
|
||
|
||
{{</* /timeline */>}}
|
||
```
|
||
|
||
{{< timeline >}}
|
||
|
||
{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
|
||
{{</ timelineItem >}}
|
||
|
||
{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}}
|
||
With html code
|
||
<ul>
|
||
<li>Coffee</li>
|
||
<li>Tea</li>
|
||
<li>Milk</li>
|
||
</ul>
|
||
{{</ timelineItem >}}
|
||
|
||
{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
|
||
With other shortcodes
|
||
{{< gallery >}}
|
||
<img src="gallery/01.jpg" class="grid-w33" />
|
||
<img src="gallery/02.jpg" class="grid-w33" />
|
||
<img src="gallery/03.jpg" class="grid-w33" />
|
||
<img src="gallery/04.jpg" class="grid-w33" />
|
||
<img src="gallery/05.jpg" class="grid-w33" />
|
||
<img src="gallery/06.jpg" class="grid-w33" />
|
||
<img src="gallery/07.jpg" class="grid-w33" />
|
||
{{< /gallery >}}
|
||
{{</ timelineItem >}}
|
||
{{< timelineItem icon="code" header="Another Awesome Header">}}
|
||
{{< github repo="nunocoracao/blowfish" >}}
|
||
{{</ timelineItem >}}
|
||
{{</ timeline >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## TypeIt
|
||
|
||
[TypeIt](https://www.typeitjs.com) — самый универсальный JS-инструмент для эффекта печатной машинки. Простая конфигурация: одна или несколько строк, переносы, удаление и замена, сложный HTML.
|
||
|
||
Blowfish реализует подмножество функций TypeIt через shortcode. Текст — внутри `typeit`, поведение — через параметры.
|
||
|
||
| Параметр | Описание |
|
||
| --- | --- |
|
||
| `tag` | [String] HTML-тег для рендеринга строк. |
|
||
| `classList` | [String] CSS-классы для HTML-элемента. |
|
||
| `initialString` | [String] Начальная строка, которая будет заменена. |
|
||
| `speed` | [number] Скорость печати в миллисекундах между шагами. |
|
||
| `lifeLike` | [boolean] Неравномерный темп печати, как у человека. |
|
||
| `startDelay` | [number] Задержка перед началом печати после инициализации. |
|
||
| `breakLines` | [boolean] Печатать строки друг под другом (true) или удалять и заменять (false). |
|
||
| `waitUntilVisible` | [boolean] Начинать при загрузке или когда элемент станет видимым. По умолчанию `true`. |
|
||
| `loop` | [boolean] Зацикливать строки после завершения. |
|
||
|
||
**Пример 1:**
|
||
|
||
```md
|
||
{{</* typeit */>}}
|
||
Lorem ipsum dolor sit amet
|
||
{{</* /typeit */>}}
|
||
```
|
||
|
||
{{< typeit >}}
|
||
Lorem ipsum dolor sit amet
|
||
{{< /typeit >}}
|
||
|
||
**Пример 2:**
|
||
|
||
```md
|
||
{{</* typeit
|
||
tag=h1
|
||
lifeLike=true
|
||
*/>}}
|
||
Lorem ipsum dolor sit amet,
|
||
consectetur adipiscing elit.
|
||
{{</* /typeit */>}}
|
||
```
|
||
|
||
{{< typeit
|
||
tag=h1
|
||
lifeLike=true
|
||
>}}
|
||
Lorem ipsum dolor sit amet,
|
||
consectetur adipiscing elit.
|
||
{{< /typeit >}}
|
||
|
||
**Пример 3:**
|
||
|
||
```md
|
||
{{</* typeit
|
||
tag=h3
|
||
speed=50
|
||
breakLines=false
|
||
loop=true
|
||
*/>}}
|
||
"Frankly, my dear, I don't give a damn." Gone with the Wind (1939)
|
||
"I'm gonna make him an offer he can't refuse." The Godfather (1972)
|
||
"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
|
||
{{</* /typeit */>}}
|
||
```
|
||
|
||
{{< typeit
|
||
tag=h3
|
||
speed=50
|
||
breakLines=false
|
||
loop=true
|
||
>}}
|
||
"Frankly, my dear, I don't give a damn." Gone with the Wind (1939)
|
||
"I'm gonna make him an offer he can't refuse." The Godfather (1972)
|
||
"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
|
||
{{< /typeit >}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Video
|
||
|
||
`video` — встраивание локальных и внешних видео. Shortcode рендерит `<figure>` с адаптивным плеером и опциональной подписью.
|
||
|
||
| Параметр | Описание |
|
||
| --- | --- |
|
||
| `src` | **Обязательно.** URL видео или локальный путь. Порядок поиска: page resource → `assets/` → `static/`. |
|
||
| `poster` | Опциональный URL или путь к постеру. Если не задан — ищет изображение с тем же именем в page bundle. |
|
||
| `caption` | Опциональная Markdown-подпись под видео. |
|
||
| `autoplay` | `true`/`false`. Автовоспроизведение. По умолчанию `false`. |
|
||
| `loop` | `true`/`false`. Зацикливание. По умолчанию `false`. |
|
||
| `muted` | `true`/`false`. Без звука. По умолчанию `false`. |
|
||
| `controls` | `true`/`false`. Стандартные элементы управления браузера. По умолчанию `true`. |
|
||
| `playsinline` | `true`/`false`. Встроенное воспроизведение на мобильных. По умолчанию `true`. |
|
||
| `preload` | `metadata` (загрузить инфо), `none` (экономить трафик), `auto` (предзагрузка). По умолчанию `metadata`. |
|
||
| `start` | Опциональное время начала в секундах. |
|
||
| `end` | Опциональное время окончания в секундах. |
|
||
| `ratio` | Зарезервированное соотношение сторон. `16/9`, `4/3`, `1/1` или кастомное `W/H`. По умолчанию `16/9`. |
|
||
| `fit` | Как видео вписывается в соотношение: `contain` (без обрезки), `cover` (обрезка до заполнения), `fill` (растянуть). По умолчанию `contain`. |
|
||
|
||
Если браузер не воспроизводит видео — плеер покажет fallback-сообщение со ссылкой на скачивание.
|
||
|
||
**Пример:**
|
||
|
||
```md
|
||
{{</* video
|
||
src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
|
||
poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg"
|
||
caption="**Public domain demo** — CC0 video and poster."
|
||
loop=true
|
||
muted=true
|
||
*/>}}
|
||
```
|
||
|
||
{{< video
|
||
src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
|
||
poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg"
|
||
caption="**Public domain demo** — CC0 video and poster."
|
||
loop=true
|
||
muted=true
|
||
>}}
|
||
|
||
<br/><br/><br/>
|
||
|
||
## Youtube Lite
|
||
|
||
Лёгкое встраивание YouTube через [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed). Библиотека быстрее и эффективнее стандартных embed.
|
||
|
||
| Параметр | Описание |
|
||
| --------- | -------------------------------------------- |
|
||
| `id` | [String] ID YouTube-видео |
|
||
| `label` | [String] Метка видео |
|
||
| `params` | [String] Дополнительные параметры воспроизведения |
|
||
|
||
**Пример 1:**
|
||
|
||
```md
|
||
{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" */>}}
|
||
```
|
||
|
||
{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}
|
||
|
||
**Пример 2:**
|
||
|
||
Все [параметры плеера YouTube](https://developers.google.com/youtube/player_parameters#Parameters) для `params`:
|
||
|
||
> Это видео начнётся с 130 секунды (2м10с)
|
||
|
||
```md
|
||
{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130" */>}}
|
||
```
|
||
|
||
> Это видео без элементов управления, начнётся с 130 секунды и остановится через 10 секунд.
|
||
|
||
Для объединения нескольких параметров — символ `&` между ними:
|
||
|
||
```md
|
||
{{</* youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" */>}}
|
||
```
|
||
|
||
{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}}
|
||
|
||
Подробнее — в [репозитории youtubeLite](https://github.com/paulirish/lite-youtube-embed/blob/master/readme.md#custom-player-parameters) и на странице [параметров плеера YouTube](https://developers.google.com/youtube/player_parameters#Parameters).
|