+++
template = "article.html"
title = "Демо Страница"
[extra]
archive = "Эта страница, на деле, не архивирована, а это значит, что она будет получать обновления контента."
trigger = "Эта страница содержит блэкджек и проституток, а также плохие шутки, такие как эта."
disclaimer = """
- Все трюки на этой странице выполнены лаборантами, не пытайтесь повторить это дома
- Не подвергайте себя воздействию 4000° по Кельвину
- Не принимайте позу распридилителя вечеринок
- Не взаимодействуйте с асбестом и лунными камнями
"""
+++

Текст может быть **жирным**, _курсивным_ или ~~зачеркнутым~~.

[Ссылка на другую страницу](@/demo/page.ru.md).

Между абзацами должны быть пробелы.

Рекомендуется включить README или файл с информацией о вашем проекте.

# Заголовок 1

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

## Заголовок 2

> Это блок-цитата, следующая за заголовком.
>
> > Когда что-то достаточно важно, вы делаете это, даже если шансы не в вашу пользу.

### Заголовок 3

```js
// Javascript-код с подсветкой синтаксиса
var fun = function lang(l) {
  dateformat.i18n = require("./lang/" + l);
  return true;
};
```

```ruby
# Код на языке Ruby с подсветкой синтаксиса
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end
```

#### Заголовок 4

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

##### Заголовок 5

1.  Это упорядоченный список, следующий за заголовком.
2.  Это упорядоченный список, следующий за заголовком.
3.  Это упорядоченный список, следующий за заголовком.

###### Заголовок 6

| head1        | head two          | three |
| :----------- | :---------------- | :---- |
| ok           | good swedish fish | nice  |
| out of stock | good and plenty   | nice  |
| ok           | good `oreos`      | hmm   |
| ok           | good `zoute` drop | yumm  |

## Под этим есть горизонтальный разделитель.

---

## Вот неупорядоченный список:

- Item foo
- Item bar
- Item baz
- Item zip

## И упорядоченный список:

1. Item one
2. Item two
3. Item three
4. Item four

## И вложенный список:

- level 1 item
  - level 2 item
  - level 2 item
    - level 3 item
    - level 3 item
- level 1 item
  - level 2 item
  - level 2 item
  - level 2 item
- level 1 item
  - level 2 item
  - level 2 item
- level 1 item

## Вот галочки:

- [ ] Milk
- [x] Eggs
- [x] Flour
- [ ] Coffee
- [x] Combustible lemons

### То же, но интерактивно:

<ul>
<li><input type="checkbox"> Milk</li>
<li><input checked="" type="checkbox"> Eggs</li>
<li><input checked="" type="checkbox"> Flour</li>
<li><input type="checkbox"> Coffee</li>
<li><input checked="" type="checkbox"> Combustible lemons</li>
</ul>

### С типом radio

<ul>
<li><input type="radio" name="test"> Milk</li>
<li><input type="radio" name="test"> Eggs</li>
<li><input type="radio" name="test"> Flour</li>
<li><input checked="" type="radio" name="test"> Coffee</li>
<li><input type="radio" name="test" disabled=""> Combustible lemons</li>
</ul>

## Маленькое изображение

{{ image(url="https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png", alt="Codeberg icon", transparent=true, no_hover=true) }}

## Большое изображение

{{ image(url="https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png", alt="Codeberg horizontal", transparent=true, no_hover=true) }}

## Списки определений можно использовать с синтаксисом HTML.

<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>

```
Длинные однострочные блоки кода не должны сворачиваться. Они должны горизонтально прокручиваться, если они слишком длинные. Эта строка должна быть достаточно длинной, чтобы продемонстрировать это.
```

```
Последний элемент.
```

## Дополнительное

Ладно, теперь, когда обычная (немного расширенная) демо-страница ~~Jekyll~~ Zola закончилась, мы можем перейти к пользовательским вещам, которые, поверьте мне, очень хороши.

😭😂🥺🤣❤️✨🙏😍🥰😊

### Шорткоды

Duckquill предоставляет несколько полезных [шорткодов](https://www.getzola.org/documentation/content/shortcodes/), которые упрощают некоторые задачи.

#### Изображение

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

Доступны следующие переменные:

- `url`: URL-адрес изображения.
- `url_min`: URL-адрес сжатой версии изображения, оригинал можно открыть, щелкнув по изображению.
- `alt`: Alt-текст, такой же, как если бы текст был заключен в квадратные скобки в Markdown.
- `full`: Заставляет изображение/видео быть во всю ширину.
- `pixels`: Использует алгоритм nearest neighbor для масштабирования, полезно для сохранения четкости пиксель-арта.
- `transparent`: Удаляет закругленные углы и тень, полезно для прозрачных изображений.
- `no_hover`: Убирает масштабирование при наведении.

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

```jinja2
{{/* image(url="image.png", alt="This is an image" no_hover=true) */}}
```

{{ image(url="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg", alt="Portal Gun blueprint", no_hover=true) }}
<figcaption>Изображение с alt-текстом и без масштабирования при наведении</figcaption>

{{ image(url="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg", url_min="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg", alt="The gravestone of J.P.G.", no_hover=true) }}
<figcaption>Изображение со сжатой версией, альт-текстом и без масштабирования при наведении</figcaption>

В качестве альтернативы вы можете добавить следующие url- якоря. В некоторых случаях это может быть удобнее, например, такие изображения будут нормально отображаться в любом редакторе Markdown, в отличие от шорткодов Zola.

- `#full`: Заставляет изображение/видео быть во всю ширину.
- `#pixels`: Использует алгоритм nearest neighbor для масштабирования, полезно для сохранения четкости пиксель-арта.
- `#transparent`: Удаляет закругленные углы и тень, полезно для прозрачных изображений.
- `#no-hover`: Убирает масштабирование при наведении.

![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)
<figcaption>Изображение во всю ширину с alt-текстом, пиксель-арт рендеринг, без тени и закругленных углов, а также без масштабирования при наведении</figcaption>

#### Видео

То же самое, что и с изображениями, но с некоторыми отличиями: `no_hover` и `url_min` недоступны.

```jinja2
{{/* video(url="video.webm", alt="This is a video") */}}
```

{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
<figcaption>WebM видео пример взятый с MDN</figcaption>

#### ЭЛТ

Ладно, этот не упрощает ничего, он просто добавляет эффект, напоминающий ЭЛТ, вокруг блоков кода Markdown.

```jinja2
{%/* crt() */%}
-> Markdown code block <-
{%/* end */%}
```

{% crt() %}

```
 _____________________________________________
|.'',        Public_Library_Halls         ,''.|
|.'.'',                                 ,''.'.|
|.'.'.'',                             ,''.'.'.|
|.'.'.'.'',                         ,''.'.'.'.|
|.'.'.'.'.|                         |.'.'.'.'.|
|.'.'.'.'.|===;                 ;===|.'.'.'.'.|
|.'.'.'.'.|:::|',             ,'|:::|.'.'.'.'.|
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|.'.'.'.'.|---|','   /%%%\   ','|---|.'.'.'.'.|
|.'.'.'.'.|===:'    /%%%%%\    ':===|.'.'.'.'.|
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|.'.'.'.','       /%%%%%%%%%\       ','.'.'.'.|
|.'.'.','        /%%%%%%%%%%%\        ','.'.'.|
|.'.','         /%%%%%%%%%%%%%\         ','.'.|
|.','          /%%%%%%%%%%%%%%%\          ','.|
|;____________/%%%%%Spicer%%%%%%\____________;|
```

{% end %}

## Подписи

Медиа может иметь дополнительное текстовое описание с помощью HTML-тега `<figcaption>` непосредственно под ним.

```markdown
![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
<figcaption>Подпись к изображению</figcaption>
```

![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
<figcaption>Офис, в котором работает Стэнли, с желтым полом и бежевыми стенами</figcaption>

## Аккордеон

<details>
  <summary>Я могу быть спойлером, я могу быть длинным текстом, я могу быть чем угодно.</summary>

_Кря-кря!_

![Cute duck](https://i.ibb.co/x5Wd5dm/EEVSKgV.jpg)

</details>

## Маленький

<small>Маленький, симпатичный текст, который не привлекает внимания.</small>

## Аббревиатура

Искусство <abbr title="American Standard Code for Information Interchange">ASCII</abbr> - великолепно!

## В стороне

<aside>
Перо и пергамент
<img class="transparent no-hover" style="margin-bottom: 0; border-radius: 0;" alt="Перо и пергамент" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg/326px-%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg" />
</aside>

Перо - это инструмент для письма, изготовленный из линяющего летного пера (предпочтительно первичного крыла) крупной птицы. Перья использовались для письма чернилами до изобретения чернильного пера, пера с металлическим наконечником, перьевой ручки и, в конце концов, шариковой ручки.

Как и у более раннего тростникового (и более позднего чернильного) пера, у пера нет внутреннего резервуара для чернил, поэтому во время письма его необходимо периодически окунать в чернильницу. Вырезанное вручную гусиное перо теперь редко используется в качестве инструмента для каллиграфии, поскольку многие виды бумаги теперь производятся из древесной массы и быстро изнашивают перо. Тем не менее оно по-прежнему остается любимым инструментом некоторых писцов, которые отмечают, что перья обеспечивают непревзойденную четкость штриха, а также большую гибкость, чем стальное перо.

## Комбинации клавиш

```html
<kbd>⌘ Super</kbd> + <kbd>Space</kbd>
```

Для переключения раскладки клавиатуры, нажмите <kbd>⌘ Super</kbd> + <kbd>Space</kbd>.

## Выделенный

Знаете что? Я собираюсь сказать кое-что <mark>очень важное</mark>, настолько <mark>важное</mark>, что даже **жирного** недостаточно.

## Внешняя ссылка

```html
<a class="external" href="https://example.org">Ссылка на сайт</a>
```

<a class="external" href="https://example.org">Ссылка на сайт</a>

## Кнопки

```html.j2
<div class="dialog-buttons">
  <a class="inline-button" href="#top">Перейти в Начало</a>
  <a class="inline-button colored external" href="{{ config.extra.issues_url }}">Отправить Отчет об Ошибке</a>
</div>
```

> Посмотрите в конец этой страницы xD