Оформление постов и синтаксис ББ-кодов

Вселенная

BB-коды (Bulletin Board Codes) — это простой способ форматирования текста на форумах с помощью специальных тегов в квадратных скобках, например: жирный текст, курсив, цитаты и так далее.
Наша платформа немного отличается от привычной многим форумным ролевикам системы форумов Quadra, телеграмма, ВК или Дискорда, поэтому некоторые знакомые вам комбинации могут здесь работать иначе.

В статьях этой темы вы найдёте пояснения и примеры, как именно использовать BB-коды в Сатине.

Базовая разметка	Таблицы
Изображения в постах	HTML в постах

Вселенная

БАЗОВАЯ РАЗМЕТКА И ПАНЕЛЬ ИНСТРУМЕНТОВ

Основные инструменты работают практически так же, как и на quadra, но если вы не знакомы с форумными board-движками — эта статья для вас.

Если вы привыкли к Telegram, VK или Discord, интерфейс может показаться сперва непривычным — ниже по шагам разобрано, что делает каждая кнопка панели.

На скриншоте ниже показана базовая форма ввода текста в веб-версии форума.

Кнопки формы отвечают за базовое редактирование текста, как в ворде: при нажатии выделенный текст автоматически оборачивается в нужные теги, а если текст не выделен — теги будут вставлены пустыми.

Основные функции

Код:

[font=название шрифта]текст[/font] - меняет шрифт

[size=хх]текст[/size] - размер шрифта

[b]текст[/b] - жирный

[i]текст[/i] - курсив

[u]текст[/u] - нижнее подчеркивание

[s]текст[/s] - зачеркнутый текст

(вы также можете пользоваться стандартным сочетанием клавиш: Ctrl+b / Ctrl+u / Ctrl+i / Ctrl+s  )

[paragraph] - отступ в начале абзаца (одинарный тег, выделять текст не нужно)

[align=left]текст[/align] - выравнивание слева

[align=center]текст[/align] - выравнивание по центру

[align=justify]текст[/align] - выравнивание по ширине. Для массивов текста этот формат у нас сделан по умолчанию

[align=right]текст[/align] - выравнивание справа

[color=цвет]текст[/color] - изменить цвет текста. Вы можете использовать любой цвет, записав его в RGB формате. Например, #FFFFFF для белого

Изображения и ссылки

Код:

[float-left]изображение[/float-left] - обтекание текстом слева

[float-right]изображение[/float-right] - обтекание текстом справа

[url=прямая ссылка]текст или изображение[/url] - вставить гиперссылку. ВАЖНО! Для ссылки внутри форума старайтесь использовать сокращенный формат: например, вместо  ссылки на эту тему - https://satina.space/showthread.php?tid=106, записать можно так: /showthread.php?tid=106. Ссылки на изображение следует размещать через тег изображения [url=прямая ссылка][img]ссылка на картинку[/img][/url]

[img]прямая ссылка на изображение[/img]  - вставить изображение. Об нем подробнее расскажем ниже, но учтите, что этот тег [img] принимает только прямую ссылку на файл изображения (jpg, png, gif). Вы также можете вставить изображение из буфера обмена - нажмите Ctrl+V и дождитесь загрузки вашей картинки на сервер. Результат будет сразу в нужном теге.

[video=youtube]ссылка на видео[/video] - вставить видео с Youtube

Объекты

Код:

[spoiler=текст][/spoiler] - вставить свернутый текст, спойлер. ББ-коды в названии отключены

[quote=заголовок цитаты]текст[/quote] - цитата. Заголовок опционален

[hide="1"]текст[/hide] - скрытый текст. Не привязан к количеству постов. Об этом расскажем ниже.

[html]любой текст[/html] - вставить блок разметки html. Об этом расскажем ниже.

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

Код:

[table][tr]

[td]текст[/td]

[/tr][/table]

Этот код вставляет таблицу с заданным вами количеством столбцов и рядов. Подробнее ниже

Игровое

Код:

[roll=xdy+bonus reason="название броска" result="код шифрования"] - броски кубиков. Вы можете задать свои значения. Бросок происходит автоматически и ничего дописывать в этот код не следует, результат вы получите в форме вот такого кода. Используйте кнопку на панели инструментов

Бросок будет произведен, когда вы отправите свой пост, но будет в зашифрованной форме. Обновите страницу, чтоб увидеть результат.

Маски — изменяемое оформление мини-профиля для конкретного поста. Например, вы можете указать другое отображаемое имя или аватар.
Маски сохраняются в вашем браузере — вводить код каждый раз не требуется.

Код:

[mask name="Имя" status="Статус профиля" avatar="ссылка на аватар"][/mask]

BB-код hide привязан не к количеству постов, а к группе пользователей, которые могут просматривать контент. Вы можете выбрать одну или несколько групп из списка

[hide="0"] - все зарегистрированные пользователи
[hide="2"] - игроки - общая категория
[hide="11"] - мастера
[hide="6"] - модераторы
[hide="12"] - игроки Петровского Указа
[hide="13"] - игроки Сатины (не видят содержимого раздела Петровского Указа, АМС переводит в эту группу по индивидуальному запросу пользователя)

NB! Администрация видит содержимое любого подзамочного поста.
Кнопка Дополнительное
Позволяет использовать следующие BB-коды:

Код:

[abbr="пояснение"]оригинальный текст[/abbr] - создает небольшое пояснение в виде всплывающего при наведении блока подсказки. Например, там можно расшифровать аббревиатуру 

[hr] - вставить горизонтальную линию

[ya url="ссылка" width="хх" height="хх" title="название"] - вставить трек с Yandex музыки 

[*code]любой текст[*/code] - код. Пишется без символов *. В таком блоке не будет использоваться разметка и коды, которые вы применяете, будут видны. Этот блок написан с использованием этого тега

Вставить iFrame - нужен, чтоб разместить в посте контент другого сайта. Вам потребуется заполнить форму и использовать ссылки, которые вы получите на стороннем ресурсе, а также задать размеры размещаемого iFrame. Этой функцией пользуется в основном администрация.

Последняя кнопка на панели - "Загрузить последнее сохраненное сообщение" позволяет вставить текст поста, сохраненный в вашем браузере. Это чтоб ваши посты не пропадали, если пришлось закрыть страницу.

Если что-то не получилось — используйте предпросмотр перед отправкой поста. Кнопка "Предпросмотр" внизу поля ввода - покажет, как будет выглядеть ваш пост со сработавшими кодами. Там включена небольшая задержка, дождитесь динамического отображения. Предпросмотр открывается под полем ввода, чтоб ваш экран не скакал при наборе текста, когда появляются новые строки.

Вселенная

ТАБЛИЦЫ

На нашей платформе таблицы работают иначе, чем на Quadra: система допускает больше гибкости в стилях, но строже относится к разрешённым атрибутам. Некоторые конструкции, привычные пользователям Quadra, здесь просто не сработают — они либо будут отброшены, либо не позволят сохранить сообщение вовсе.
Поэтому в этом разделе вы найдёте не только примеры базовой таблицы, но и список допустимых атрибутов (качеств таблицы) и рабочих комбинаций, протестированных в условиях движка форума.

В стилях таблицы разрешённые атрибуты пишутся внутри кавычек. Разрешены все безопасные атрибуты.

список

Настройки по умолчанию: выравнивание ячеек по верху и по ширине, рамка в 1px. Если хотите без рамки, пишите первый тег так: table border="0"

Приведем примеры:
1. Базовая таблица с атрибутами выравнивания и фона

1.

Ячейка 1	Ячейка 2	Ячейка 3
Текст справа	Текст сверху и по центру	Серый фон

Код:

[table border="2" cellpadding="5" align="center"]

[tr]

[td]Ячейка 1[/td]

[td]Ячейка 2[/td]

[td]Ячейка 3[/td]

[/tr]

[tr]

[td align="right"]Текст справа[/td]

[td valign="top" align="center"]Текст сверху и по центру[/td]

[td bgcolor="#f0f0f0"]Серый фон[/td]

[/tr]

[/table]

[table border="2" cellpadding="5" align="center"]

[tr]

[td]Ячейка 1[/td]

[td]Ячейка 2[/td]

[td]Ячейка 3[/td]

[/tr]

[tr]

[td align="right"]Текст справа[/td]

[td valign="top" align="center"]Текст сверху и по центру[/td]

[td bgcolor="#f0f0f0"]Серый фон[/td]

[/tr]

[/table]

. Таблица со стилями и объединением ячеек

Этот пример демонстрирует использование CSS-стилей через атрибут `style`, а также применение `colspan` и `rowspan` для объединения ячеек по горизонтали и вертикали.
Таблица включает:
— заголовок, растянутый на две колонки;
— стилизованные границы и отступы;
— объединённую ячейку в левой колонке и наклонный текст в одной из строк.

Заголовок
Левая колонка	Правая колонка
Объединённые строки	Строка 1, наклонная
	Строка 2

Код:

[table style="border-collapse: collapse; margin: 10px 0;"]

[tr style="background-color: #e0e0ff;"]

[td colspan="2" style="font-weight: bold; text-align: center;"]Заголовок[/td]

[/tr]

[tr]

[td width="30%" style="border: 1px solid #ccc; padding: 5px;"]Левая колонка[/td]

[td style="border: 1px solid #ccc; padding: 5px;"]Правая колонка[/td]

[/tr]

[tr]

[td rowspan="2"]Объединённые строки[/td]

[td style="font-style:italic;"]Строка 1, наклонная[/td]

[/tr]

[tr]

[td]Строка 2[/td]

[/tr]

[/table]

3. Таблица без стилей и параметров
Эта таблица показывает, как выглядит разметка без использования каких-либо атрибутов или CSS-стилей.
Ширина колонок распределяется автоматически, в зависимости от содержимого ячеек.
Такой вариант подходит для простых случаев, когда не требуется дополнительное оформление.

Автоматическая ширина 1	Автоматическая ширина 2	Автоматическая ширина 3
Без стилей	Должна быть	Равномерная ширина

Код:

[table]

[tr]

[td]Автоматическая ширина 1[/td]

[td]Автоматическая ширина 2[/td]

[td]Автоматическая ширина 3[/td]

[/tr]

[tr]

[td]Без стилей[/td]

[td]Должна быть[/td]

[td]Равномерная ширина[/td]

[/tr]

[/table]

4. таблица с комбинированными атрибутами и стилями
Этот пример демонстрирует таблицу с одновременным использованием HTML-атрибутов (`border`, `cellpadding`, `cellspacing`, `colspan`, `valign`, `width`) и встроенных CSS-стилей через `style`.
Выделены следующие особенности:
— заголовок таблицы растянут на две колонки (`colspan="2"`);
— левая колонка заданной ширины и с вертикальным выравниванием (`valign="top"`);
— правая колонка оформлена с внутренним отступом и декоративной пунктирной рамкой слева (`border-left: 3px dashed red;`).

Заголовок таблицы
Левая колонка	Правая колонка с дополнительными стилями

Код:

[table border="1" cellpadding="5" cellspacing="0" style="width: 80%; margin: 20px auto;"]

[tr style="background-color: #f5f5f5;"]

[td align="center" colspan="2"]Заголовок таблицы[/td]

[/tr]

[tr]

[td width="30%" valign="top"]Левая колонка[/td]

[td style="padding: 10px; border-left: 3px dashed red;"]Правая колонка с дополнительными стилями[/td]

[/tr]

[/table]

5. Таблица в виде списка данных с чередующимися строками
Этот пример иллюстрирует, как с помощью CSS-стилей можно оформить таблицу:
Особенности оформления:
— используется шрифт `Arial` и эффект лёгкой тени (`box-shadow`) для визуального отделения таблицы от фона;
— строки чередуются по цвету (`background-color`) для лучшей читаемости;
— добавлены отступы внутри ячеек (`padding`) и нижняя рамка (`border-bottom`) для разделения;
— указано плавное появление фона (`transition`), хотя на нашей платформе анимации могут быть не поддержаны визуально.

ID	Заголовок	Комментарии
1	Текст 1	Пояснения 1
2	Текст 2	Пояснения 2

Код:

[table style="width: 100%; border-collapse: collapse; font-family: Arial; box-shadow: 0 2px 3px rgba(0,0,0,0.1);"]

[tr]

[td style="padding: 12px 15px;"]ID[/td]

[td]Заголовок[/td]

[td]Комментарии[/td]

[/tr]

[tr style="background-color: #fff; transition: all 0.3s;"]

[td style="padding: 10px 15px; border-bottom: 1px solid #eee;"]1[/td]

[td style="border-bottom: 1px solid #eee;"]Текст 1[/td]

[td style="border-bottom: 1px solid #eee;"]Пояснения 1[/td]

[/tr]

[tr style="background-color: #f9f9f9; transition: all 0.3s;"]

[td style="padding: 10px 15px; border-bottom: 1px solid #eee;"]2[/td]

[td style="border-bottom: 1px solid #eee;"]Текст 2[/td]

[td style="border-bottom: 1px solid #eee;"]Пояснения 2[/td]

[/tr]

[/table]

6. Стилизованная таблица
Эта таблица оформлена с помощью стилей. В ней сочетаются структурное и декоративное оформление:
— зелёная рамка (`border`) и закруглённые углы (`border-radius`) придают таблице вид карточки;
— заголовок объединяет все три колонки и выделен цветом фона, белым шрифтом и увеличенным размером текста;
— строки содержат чёткие колонки: время, предмет, аудитория;
— используется `rowspan`, чтобы объединить ячейку времени для двух предметов подряд;
— мягкие оттенки и границы (`border-bottom`) повышают читаемость без перегрузки визуала.

Расписание занятий
Время	Предмет	Аудитория
9:00-10:30	Математика	Ауд. 304
9:00-10:30	Физика	Ауд. 415

Код:

[table style="width: 90%; margin: 25px auto; border: 2px solid #4CAF50; border-radius: 5px; overflow: hidden;"]

[tr]

[td colspan="3" style="background-color: #4CAF50; color: white; text-align: center; padding: 15px; font-size: 1.2em;"]Расписание занятий[/td]

[/tr]

[tr style="background-color: #f2f2f2;"]

[td style="padding: 12px; text-align: center; font-weight: bold; width: 20%;"]Время[/td]

[td style="padding: 12px; text-align: center; font-weight: bold; width: 40%;"]Предмет[/td]

[td style="padding: 12px; text-align: center; font-weight: bold; width: 40%;"]Аудитория[/td]

[/tr]

[tr]

[td rowspan="2" style="padding: 10px; text-align: center; vertical-align: middle; background-color: #e8f5e9;"]9:00-10:30[/td]

[td style="padding: 10px; border-bottom: 1px solid #ddd;"]Математика[/td]

[td style="padding: 10px; border-bottom: 1px solid #ddd;"]Ауд. 304[/td]

[/tr]

[tr]

[td style="padding: 10px;"]Физика[/td]

[td style="padding: 10px;"]Ауд. 415[/td]

[/tr]

[/table]

Вселенная

ИЗОБРАЖЕНИЯ В ПОСТАХ

У нас на форуме всё волшебно просто: достаточно скопировать изображение в буфер обмена (например, через ПКМ → «Копировать изображение» или Ctrl + C) и нажать Ctrl + V в поле ввода — картинка автоматически загрузится на сервер, а в том месте, где стоял курсор, появится вставка в формате

Код:

[img]ссылка_на_изображение[/img]

Вставится именно та версия изображения и в том размере, в каком она была в буфере.

Ну и, конечно, можно пользоваться стандартным способом - через кнопку, выбирая картинку локально, с твоего компьютера или телефона, или вставить ссылку, выделить ее, и нажать "ПОДТВЕРДИТЬ" в выпадающем меню под кнопкой "Загрузить изображение" - ссылку автоматически возьмет в bb-код [img]

Но и это не все: вы можете использовать следующие атрибуты для вашего изображения:

Код:

[img=300x300]URL[/img] - задает размеры изображения



[img align=left|right]URL[/img] - выставлять выравнивание изображения



[img=300x300 align=left|right]URL[/img] - использовать и то и другое

Вселенная

ХТМЛ В ПОСТАХ

Если любишь HTML в постах — он у нас работает, но с некоторыми ограничениями. Можно использовать базовые теги (p, h1–h6, b, i, a, img, table, ul, div, span и др.) и атрибуты вроде style, href, src, width, height, class. Пиши как в обычном HTML, только внутри тега

Код:

[html]...[/html]

Скрипты и сложные конструкции не поддерживаются, всё строго — но для оформления текста, таблиц и стиля этого вполне достаточно. Примеры разрешенных тегов и атрибутов ниже:

Код:

ALLOWED_TAGS: [

            // Базовые текстовые элементы

            'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote', 'pre',

            // Форматирование

            'b', 'strong', 'i', 'em', 'u', 's', 'strike', 'sub', 'sup', 'mark',

            // Ссылки и изображения

            'a', 'img', 

            // Структурные элементы

            'div', 'span', 'br', 'hr', 'ul', 'ol', 'li', 'dl', 'dt', 'dd',

            // Таблицы

            'table', 'tr', 'td', 'th', 'thead', 'tbody', 'tfoot', 'caption', 'colgroup', 'col',

            // Специальные

            'style', 'details', 'summary'

        ],

        ALLOWED_ATTR: [

            // Основные атрибуты

            'href', 'src', 'alt', 'title', 'class', 'id', 'name', 'role', 'aria-*',

            // Стили

            'style',

            // Атрибуты таблиц

            'border', 'width', 'height', 'cellspacing', 'cellpadding', 'align', 

            'valign', 'colspan', 'rowspan', 'scope', 'headers', 'bgcolor',

            // Атрибуты ссылок

            'target', 'rel', 'download',

            // Атрибуты изображений

            'width', 'height', 'loading', 'decoding'

        ],



Запомнить меня