Использование BB-кода

Для отображения любого сайта через браузер используется HTML-разметка. Это обычный текст, который размечается с помощью тэгов. Например, чтобы выделить полужирный текст, используется тэг B.

текст текст <b>полужирный текст</b> текст текст

То есть то, что заключается в угловые скобки и есть html-тэги.

HTML — это язык разметки. Сам по себе он не очень сложен, особенно если речь идёт о простых задачах. Но использование угловых скобок делает его не совсем читаемым, а если стоит задача указать для тэга ещё и атрибуты, то для новичков HTML окажется несколько сложным.

Именно поэтому были придуманы различные парсеры (обработчики), которые позволяют использовать более простой синтаксис, который автоматически будет преобразован в корректный HTML. Один из них — BB-код.

BB-код похож на html-тэги, только вместо угловых скобок используются прямые: [ и ].

текст текст [b]полужирный текст[/b] текст текст

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

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

• [address] - используется для указания адреса.
• [cite] - цитата в тексте (без переноса строки).
• [quote] - блок цитаты.
• [abbr] - аббревиатура.
• [h1] - заголовки (1..6 уровней).
• и т.д.

Обратите внимание на то, что BB-код может быть одиночным, либо парным. Парный код означает, что у него есть открывающий и закрывающий блок. Примеры парных:

[h1]Заголовок[/h1]
текст текст [b]полужирный текст[/b] текст текст
текст текст [i]курсив[/i] текст текст

То есть действие BB-кода распространяется на его внутренний текст.

В HTML также есть парные и одиночные тэги.

Из одиночных кодов скорее всего будут востребованы только эти:

• [hr] - горизонтальная линия.
• [br] - принудительный перенос в тексте.

Переносы строк, абзацы

В HTML для абзацев в тексте используется тэг P. Есть соответствующий ему BB-код, но с 99% вероятностью вам не нужно будет расставлять абзацы вручную — достаточно нажать Enter, как это принято в любом другом текстовом редакторе.

Ранее мы активировали плагин parser_default и именно он и выполняет все необходимые преобразования. Поэтому код/тэг абзаца — очень специфичная вещь и пока у вас нет опыта, постарайтесь им не пользоваться (иначе это может привести к невалидному html-коду).

При этом у вас может возникнуть задача добавить пустую строку где-то в тексте. Для этого используйте код [br]

текст абзаца

[br][br]

текст абзаца

Вы не сможете использовать html-тэг <br> из-за особенностей работы редактора в браузере (это проблема не только MaxSite CMS, но и других систем). Вообще <br> используется редко, поскольку если стоит задача увеличить отступ, то решается это с помощью css-классов.

Выравнивание текста

Часто новички пытаются выровнять текст записи по формату. Формально для этого можно использовать код P, но есть намного более простое решение.

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

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

В HTML (и его аналог в BB-коде) для этого используется универсальный тэг DIV. Это тэг блочного уровня, то есть браузер начнет его вывод с новой строки, поэтому его не следует располагать в середине строки.

У большинства BB-кодов можно указать атрибуты. Самые востребованные это css-классы. С их помощью браузер будет менять оформление/поведение тэга так, как это задано в стилях класса. Сейчас вам нет необходимости вдаваться в детали, поэтому я просто покажу несколько примеров.

В этом примере мы оборачиваем текст div-блоком.

[div(t-justify)] 
текст по ширине
текст по ширине
[/div]

[div(t-right)] 
текст справа
текст справа
[/div]

[div(t-center)] 
текст по центру
текст по центру
[/div]

Класс указывается в скобках: t-justify отвечает за выравнивание текста по ширине, t-right сделает текст выровненным справа, а t-center — по центру.

CSS-классы

CSS-классы, наряду с разметкой HTML — являются основополагающими для любой web-страницы. В любом случае вам придётся столкнуться с ними, хотя бы в минимальном объеме, поскольку браузеры по другому просто не работают.

Поэтому желательно сразу получить общее представление о том, как указывать и использовать классы в bb-кодах.

CSS-классы для HTML мы рассматриваем, поскольку это более сложный вопрос.

В Default шаблоне используется библиотека Berry CSS, где определено множество css-классов. В других шаблонах могут использоваться другие библиотеки и будут другие классы. То есть названия классов целиком и полностью ложится на разработчика шаблона.

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

Например если нужно выделить текст каким-то цветом, то используются классы t-цвет:

[div(t-justify t-green500)] 
текст
текст
текст
[/div]

Обратите внимание, что в скобках можно указывать сразу несколько классов. В данном примере текст будет выровнен по формату t-justify и станет зеленым t-green500.

В некоторых случаях нужно оформить текст в середине строки. Для этого используется универсальный тэг/код SPAN. В отличие от DIV, SPAN не создаёт перенос строки.

текст [span(t-green600 bg-yellow200 bold)]зеленый текст с желтым фоном[/span] текст

В большинстве случаев вам будет достаточно запомнить только DIV и SPAN, как универсальные элементы. Это на случай, если вы не нашли других подходящих кодов.

[h2(t-red italic)]Красный заголовок курсивом[/h2]

В данном случае мы используем классы к коду заголовка.

Отступы

Рассмотрим ещё пару вещей, которые вам могут пригодиться при оформлении текстов. Часто стоит задача сделать отступ. Выше мы рассмотрели вариант с BR, но вместо него, лучше всего использовать классы mar (от слова margin — используется в css-стилях).

Например нужно отбить заголовок от верхнего текста. Для этого используется класс marXX-t, где XX — это размер отступа в px, а модификатор -t — указывает на «верхний» (от top).

текст

[h2(mar30-t)]Заголовок[/h2]

текст

Если же наоборот стоит задача обнулить все отступы, то указывается класс mar0.

Классы mar отвечают за внешний отступ. Но бывает задача оформить внутренний отступ, особенно, если блок имеет какой-то фон. Для этого используются аналогичные классы pad

[div(pad20 bg-green200 t-center t150 t-green600)]текст текст текст[/div]

Если убрать pad20, то текст как бы «слипнется» с краями блока.

Изображения

Мы уже рассмотрели основы работы с изображениями, сейчас поговорим от том, как их использовать в тексте.

После загрузки файла, вы можете добавить изображение в позицию курсора с помощью кнопки img или image.

Код img может быть в любом из вариантов:

[img]адрес[/img]
[img Описание]адрес[/img]
[img(классы)]адрес[/img]
[img(классы) Описание]адрес[/img]

Код image более сложный, поскольку формируется с учетом миниатюры:

[image=миниатюра]адрес полноразмерного изображения[/image]
[image=миниатюра Описание]адрес полноразмерного изображения[/image]

Здесь важный момент в том, что этот код обрабатывается плагином lightbox, который следует предварительно включить. Когда image встретится в тексте, он будет преобразован в html-код миниатюры со ссылкой на полную версию. При этом плагин lightbox создаст красивую анимацию открытия полноразмерного изображения.

Адреса изображений получаются достаточно длинными, например https://вашсайт/uploads/_pages/47/image.jpg.

В тексте все ссылки, которые начинаются с «https://вашсайт/uploads/_pages/» можно сократить с помощью короткого кода [page_images] или [pi], которая будет MaxSite CMS автоматически заменена на адрес каталога текущей записи. Все эти примеры полностью эквиваленты:

[img]https://вашсайт/uploads/_pages/47/image.jpg[/img]
[img][page_images]image.jpg[/img]
[img][pi]image.jpg[/img]

Для того, чтобы упростить замены, вы можете выбрать в меню редактора пункт Заменить адреса на page_images.