15 KiB
+++ template = "article.html" title = "Демо Страница" [extra] archive = "Эта страница, на деле, не архивирована, а это значит, что она будет получать обновления контента." trigger = "Эта страница содержит блэкджек и проституток, а также плохие шутки, такие как эта." disclaimer = """
- Все трюки на этой странице выполнены лаборантами, не пытайтесь повторить это дома
- Не подвергайте себя воздействию 4000° по Кельвину
- Не принимайте позу распридилителя вечеринок
- Не взаимодействуйте с асбестом и лунными камнями """ +++
Текст может быть жирным, курсивным или зачеркнутым.
Между абзацами должны быть пробелы.
Рекомендуется включить README или файл с информацией о вашем проекте.
Заголовок 1
Это обычный абзац, следующий за заголовком. Codeberg - это платформа хостинга кода для контроля версий и совместной работы. Она позволяет вам и другим людям работать над проектами из любого места.
Заголовок 2
Это блок-цитата, следующая за заголовком.
Когда что-то достаточно важно, вы делаете это, даже если шансы не в вашу пользу.
Заголовок 3
// Javascript-код с подсветкой синтаксиса
var fun = function lang(l) {
dateformat.i18n = require("./lang/" + l);
return true;
};
# Код на языке Ruby с подсветкой синтаксиса
GitHubPages::Dependencies.gems.each do |gem, version|
s.add_dependency(gem, "= #{version}")
end
Заголовок 4
- Это неупорядоченный список, следующий за заголовком.
- Это неупорядоченный список, следующий за заголовком.
- Это неупорядоченный список, следующий за заголовком.
Заголовок 5
- Это упорядоченный список, следующий за заголовком.
- Это упорядоченный список, следующий за заголовком.
- Это упорядоченный список, следующий за заголовком.
Заголовок 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
И упорядоченный список:
- Item one
- Item two
- Item three
- 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
- Eggs
- Flour
- Coffee
- Combustible lemons
То же, но интерактивно:
- Milk
- Eggs
- Flour
- Coffee
- Combustible lemons
С типом radio
- Milk
- Eggs
- Flour
- Coffee
- Combustible lemons
Маленькое изображение
{{ 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.
- Name
- Godzilla
- Born
- 1952
- Birthplace
- Japan
- Color
- Green
Длинные однострочные блоки кода не должны сворачиваться. Они должны горизонтально прокручиваться, если они слишком длинные. Эта строка должна быть достаточно длинной, чтобы продемонстрировать это.
Последний элемент.
Дополнительное
Ладно, теперь, когда обычная (немного расширенная) демо-страница Jekyll Zola закончилась, мы можем перейти к пользовательским вещам, которые, поверьте мне, очень хороши.
😭😂🥺🤣❤️✨🙏😍🥰😊
Шорткоды
Duckquill предоставляет несколько полезных шорткодов, которые упрощают некоторые задачи.
Изображение
По умолчанию изображения имеют такие стили, как закругленные углы и тень. Для тонкой настройки можно использовать шорткоды с различными комбинациями переменных.
Доступны следующие переменные:
url: URL-адрес изображения.url_min: URL-адрес сжатой версии изображения, оригинал можно открыть, щелкнув по изображению.alt: Alt-текст, такой же, как если бы текст был заключен в квадратные скобки в Markdown.full: Заставляет изображение/видео быть во всю ширину.pixels: Использует алгоритм nearest neighbor для масштабирования, полезно для сохранения четкости пиксель-арта.transparent: Удаляет закругленные углы и тень, полезно для прозрачных изображений.no_hover: Убирает масштабирование при наведении.
Переменные должны быть разделены запятыми и находиться внутри скобок.
{{/* 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) }}
{{ 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) }}
В качестве альтернативы вы можете добавить следующие url- якоря. В некоторых случаях это может быть удобнее, например, такие изображения будут нормально отображаться в любом редакторе Markdown, в отличие от шорткодов Zola.
#full: Заставляет изображение/видео быть во всю ширину.#pixels: Использует алгоритм nearest neighbor для масштабирования, полезно для сохранения четкости пиксель-арта.#transparent: Удаляет закругленные углы и тень, полезно для прозрачных изображений.#no-hover: Убирает масштабирование при наведении.
Видео
То же самое, что и с изображениями, но с некоторыми отличиями: no_hover и url_min недоступны.
{{/* 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") }}
ЭЛТ
Ладно, этот не упрощает ничего, он просто добавляет эффект, напоминающий ЭЛТ, вокруг блоков кода Markdown.
{%/* crt() */%}
-> Markdown code block <-
{%/* end */%}
{% crt() %}
_____________________________________________
|.'', Public_Library_Halls ,''.|
|.'.'', ,''.'.|
|.'.'.'', ,''.'.'.|
|.'.'.'.'', ,''.'.'.'.|
|.'.'.'.'.| |.'.'.'.'.|
|.'.'.'.'.|===; ;===|.'.'.'.'.|
|.'.'.'.'.|:::|', ,'|:::|.'.'.'.'.|
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|.'.'.'.'.|---|',' /%%%\ ','|---|.'.'.'.'.|
|.'.'.'.'.|===:' /%%%%%\ ':===|.'.'.'.'.|
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|.'.'.'.',' /%%%%%%%%%\ ','.'.'.'.|
|.'.'.',' /%%%%%%%%%%%\ ','.'.'.|
|.'.',' /%%%%%%%%%%%%%\ ','.'.|
|.',' /%%%%%%%%%%%%%%%\ ','.|
|;____________/%%%%%Spicer%%%%%%\____________;|
{% end %}
Подписи
Медиа может иметь дополнительное текстовое описание с помощью HTML-тега <figcaption> непосредственно под ним.
<figcaption>Подпись к изображению</figcaption>
Аккордеон
Я могу быть спойлером, я могу быть длинным текстом, я могу быть чем угодно.
Кря-кря!
Маленький
Маленький, симпатичный текст, который не привлекает внимания.
Аббревиатура
Искусство ASCII - великолепно!
В стороне
Перо - это инструмент для письма, изготовленный из линяющего летного пера (предпочтительно первичного крыла) крупной птицы. Перья использовались для письма чернилами до изобретения чернильного пера, пера с металлическим наконечником, перьевой ручки и, в конце концов, шариковой ручки.
Как и у более раннего тростникового (и более позднего чернильного) пера, у пера нет внутреннего резервуара для чернил, поэтому во время письма его необходимо периодически окунать в чернильницу. Вырезанное вручную гусиное перо теперь редко используется в качестве инструмента для каллиграфии, поскольку многие виды бумаги теперь производятся из древесной массы и быстро изнашивают перо. Тем не менее оно по-прежнему остается любимым инструментом некоторых писцов, которые отмечают, что перья обеспечивают непревзойденную четкость штриха, а также большую гибкость, чем стальное перо.
Комбинации клавиш
<kbd>⌘ Super</kbd> + <kbd>Space</kbd>
Для переключения раскладки клавиатуры, нажмите ⌘ Super + Space.
Выделенный
Знаете что? Я собираюсь сказать кое-что очень важное, настолько важное, что даже жирного недостаточно.
Внешняя ссылка
<a class="external" href="https://example.org">Ссылка на сайт</a>
Кнопки
<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