Skip to content

Latest commit

 

History

History
187 lines (141 loc) · 7.02 KB

Контейнер.md

File metadata and controls

187 lines (141 loc) · 7.02 KB
Raw
icon tags
container
component

Контейнер

Компонент Контейнер может использоваться для обертывания любого контента в элемент

.

Компонент Контейнер создается путем добавления ::: над и под контентом.

Сам по себе, не должно быть видимой разницы между контентом внутри Контейнера и контентом вне Контейнера. Визуально окончательно отображаемый контент должен выглядеть одинаково. Например:

::: Этот текст находится внутри компонента Контейнер. :::

Синтаксис, используемый для создания указанной строки, выглядит следующим образом:

:::
Этот текст находится внутри компонента Контейнер.
:::

Разница заключается в сгенерированном HTML. Указанная строка текста теперь создается внутри нового элемента

:

<div>
    <p>Этот текст находится внутри компонента Контейнер.</p>
</div>

Настраиваемый CSS класс

Сила Контейнера заключается в возможности применять настраиваемые стили к контейнеру

.

<style> .sample { text-align: center; color: #1956AF; border-radius: 10px; background-color: #E1EDFF; border: 1px solid #1956AF; padding-top: 20px; margin-bottom: 20px; } </style>

:::sample Этот текст обернут в компонент Контейнер, ему применен настраиваемый css class. :::

Вышеуказанный Контейнер настроен путем присвоения класса :::sample открытию Контейнера, а затем определения встроенного CSS класса.

<style>
    .sample {
        text-align: center;
        color: #1956AF;
        border-radius: 10px;
        background-color: #E1EDFF;
        border: 1px solid #1956AF;
        padding-top: 20px;
        margin-bottom: 20px;
    }
</style>
:::sample
Этот текст обернут в компонент Контейнер, ему применен настраиваемый css `class`.
:::

Атрибуты по умолчанию

Компонент Контейнер также поддерживает применение атрибутов по умолчанию.

:::sample { #container1 } Этому контейнеру присвоен пользовательский атрибут id. :::

Для настройки вышеуказанного Контейнера используется следующий пример:

:::sample { #container1 }
Этому контейнеру присвоен пользовательский атрибут `id`.
:::

Сгенерированный HTML будет выглядеть так:

<div id="container1" class="sample">
    <p>Этому контейнеру присвоен пользовательский атрибут <code>id</code>.</p>
</div>

Настраиваемый глобальный CSS

Также можно добавить глобальные стили, добавив их в новый файл /_includes/head.html.

Содержимое _includes/head.html добавляется на все страницы сгенерированного веб-сайта.

Например, встроенный блок <style> выше можно извлечь из страницы и автоматически добавить на все страницы.

Создайте новый файл head.html и поместите его в папку /_includes/ в корне вашего проекта.

<style>
    .sample {
        text-align: center;
        color: #1956AF;
        border-radius: 10px;
        background-color: #E1EDFF;
        border: 1px solid #1956AF;
        padding-top: 20px;
        margin-bottom: 20px;
    }
</style>

Перемещение блока <style> в _includes/head.html - все, что вам нужно сделать. Сохраните файл, и ваш новый css-класс .sample теперь доступен на всех страницах вашего веб-сайта.

:::sample Этот контейнер использует класс sample. :::

:::sample
Этот контейнер использует класс `sample`.
:::

Глобальный файл .css

Поскольку _includes/head.html может содержать любой пользовательский HTML, вы также можете переместить ваш CSS в отдельный файл .css, который будет включен на всех страницах вашего сгенерированного веб-сайта.

<link href="/static/custom.css" rel="stylesheet" />
.sample {
    text-align: center;
    color: #1956AF;
    border-radius: 10px;
    background-color: #E1EDFF;
    border: 1px solid #1956AF;
    padding-top: 20px;
    margin-bottom: 20px;
}

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

!!!danger Docsinum не проверяет пользовательский HTML, добавленный в _includes/head.html. Аккуратно ознакомьтесь с этим HTML и убедитесь, что он корректен и не нарушает работу веб-сайта. !!!

Примеры

Выравнивание по центру на странице

Текст, Кнопка или любой другой компонент Docsinum могут быть выровнены по центру на странице, поместив компонент внутрь контейнера и применив css класс content-center.

Следующие примеры демонстрируют выравнивание по центру кнопки и текста:

:::content-center [!button Моя Кнопка] :::

:::content-center Этот текст должен быть по центру 👍 :::

:::content-center
[!button Моя Кнопка]
:::

:::content-center
Этот текст должен быть по центру :+1:
:::