328 lines
15 KiB
Markdown
328 lines
15 KiB
Markdown
+++
|
||
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`: Убирает масштабирование при наведении.
|
||
|
||
|
||
<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
|
||
|
||
<figcaption>Подпись к изображению</figcaption>
|
||
```
|
||
|
||
|
||
<figcaption>Офис, в котором работает Стэнли, с желтым полом и бежевыми стенами</figcaption>
|
||
|
||
## Аккордеон
|
||
|
||
<details>
|
||
<summary>Я могу быть спойлером, я могу быть длинным текстом, я могу быть чем угодно.</summary>
|
||
|
||
_Кря-кря!_
|
||
|
||
|
||
|
||
</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
|