Современная, быстрая и удобная система управления сайтом

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

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

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

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

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

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

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

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

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

Текстовый редактор MaxSite CMS

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

  • [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 style="clear:both">

текст абзаца

[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 — по центру.

текст по ширине текст по ширине текст по ширине текст по ширине текст по ширине текст по ширине текст по ширине текст по ширине текст по ширине текст по ширине текст по ширине

текст справа текст справа текст справа текст справа текст справа текст справа текст справа текст справа текст справа текст справа

текст по центру текст по центру текст по центру текст по центру текст по центру текст по центру текст по центру

Обратите внимание, что достаточно задать один общий div-блок, чтобы обрамить множество абзацев.

CSS-классы

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

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

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

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

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

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

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

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

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

текст [span(t-green 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.