Индивидуальная настройка шаблонов разделов HTML

Предпосылки и цель урока

Вам необходим доступ к HTML-редактору и менеджеру файлов системы управления содержимым bluetronix, а также соответствующие права разработчика для папки с шаблонами. В этом руководстве вы узнаете, как настраивать существующие разделы страниц, создавать собственные HTML Section Templates и предлагать вашим редакторам только одобренные шаблоны по мере необходимости.

Мы работаем с примерными шаблонами Clients и Banner. Стандартные файлы остаются неизменными; индивидуальные изменения вносятся с помощью обозначения _own.

1. Найдите шаблоны разделов страниц в редакторе.

Откройте существующую страницу CMS, выберите Редактировать и через Вставка → Раздел страницы откройте выбор шаблонов. Контекстное меню также предлагает элемент Текстовый блок для небольших повторно используемых материалов. Это руководство сначала охватывает разделы страниц.

В окне Раздел страницы будут показаны доступные шаблоны с предварительным просмотром. 

Выберите, например, категорию Clients. Там представлено несколько вариантов оформления.

2. Где хранятся шаблоны?

Файлы шаблонов находятся в папке разработчика /bx_Layout/. Откройте в менеджере файлов эту папку. Там вы найдете, среди прочего, файлы для разделов страниц (Section*.txt) и текстовых блоков (Tag*.txt).

Имя файла определяет его соответствие выбору шаблонов. Шаблон раздела страниц всегда начинается с Section; далее следует его уникальное имя. Для собственных вариантов перед расширением файла добавляется суффикс _own.

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

3. Почему нельзя редактировать стандартные файлы напрямую?

Стандартные файлы, поставляемые с CMS из /bx_Layout/, будут перезаписаны при обновлениях системы. Изменения напрямую в SectionClients.txt или SectionBanner.txt не будут постоянными. Скопируйте желаемый стандартный файл и обозначьте свою версию с помощью _own. Соответствующие варианты _own предназначены для ваших индивидуальных, устойчивых к обновлениям изменений.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

Если обе версии файла существуют, CMS будет использовать подходящий SectionClients_own.txt вместо стандартного шаблона SectionClients.txt. Вам не нужно переименовывать категорию Clients в редакторе.

Если вы создаете собственный файл с новым именем, например SectionMyTemplate_own.txt, стандартный шаблон Clients также останется доступным.

4. Структура шаблона HTML-секции: разделительная метка.

Файл Section может содержать несколько вариантов оформления одной и той же категории. Чтобы редактор CMS распознал отдельные варианты, они разделяются следующим разделителем:

<!--__SP_SectionTemplate__-->

Разделитель находится в начале, между вариантами и в конце примера файла. Точно соблюдайте написание в точности. Если разделитель отсутствует, редактор не сможет надежно представить несколько вариантов как отдельный выбор.

Шаблон SectionBanner.txt демонстрирует этот принцип с несколькими различными макетами баннеров. Ты можешь использовать его в качестве основы для собственного, просто структурированного раздела.

<!--__SP_SectionTemplate__-->
<Section class="section py-5 py-lg-6">
   <div class="container py-3">
      <div class="row align-items-center g-4">
         <div class="col-lg-8 wow fadeInLeft">
            <span class="badge text-bg-warning mb-3">&#x00AD;New&#x00AD;</span>
            <h2 class="mb-2">&#x00AD;Designed for everyday success&#x00AD;</h2>
            <p class="mb-0">&#x00AD;Explore practical solutions created to make everyday work easier, clearer and more effective.&#x00AD;</p>
         </div>
         <div class="col-lg-4 text-lg-end wow fadeInRight">
            <a href="#"><button class="btn btn-light btn-lg">&#x00AD;Learn more&#x00AD;</button></a>
         </div>
      </div>
   </div>
</Section>
<!--__SP_SectionTemplate__-->

Этот пример представляет собой полный вариант баннера. Для второго варианта ты должен добавить его HTML-код за последним разделителем и снова заключить этот вариант тем же разделителем. Затем ты можешь оформить сам раздел в соответствии с твоими требованиями.

Класс sectionAll не нужно добавлять самостоятельно: редактор bluetronix добавляет его автоматически при вставке части страницы.

5. Скопируйте шаблон клиента и измените заголовок.

Открой существующий шаблон SectionClients в файловом менеджере и посмотри его HTML-код. В нашем примере он содержит заголовок, описание и несколько партнерских плиток.

Скопируй соответствующий шаблон как SectionClients_own.txt и открой копию через Редактировать. Добавь к заголовку для нашего теста строку NEW!!!!. Ты также можешь изменить текст, количество карточек, символы или CSS по своему усмотрению.

<!-- Vorher -->
<h2>&#x00AD;Trusted by growing organizations&#x00AD;</h2>

<!-- Nachher in SectionClients_own.txt -->
<h2>&#x00AD;NEW!!!! Trusted by growing organizations&#x00AD;</h2>

Нажми Сохранить и затем снова открой выбор Вставить → Часть страницы → Клиенты. Ты узнаешь свою версию по измененному заголовку. Второй вариант клиентов можно выбирать и редактировать независимо от этого.

6. Предложите свой шаблон под новым именем.

Ты можешь создать отдельный шаблон вместо файла с тем же именем. Например, скопируй один из вариантов клиентов и сохрани его как SectionMyTemplate_own.txt. Часть после Section — это название собственного шаблона; оно определяет новый выбор в редакторе. Исходный шаблон Clients не заменяется при другом названии.

SectionClients.txt          → Standard: Clients
SectionClients_own.txt      → eigene Version von Clients
SectionMyTemplate_own.txt   → zusätzliche eigene Vorlage MyTemplate

Таким образом, ты можешь разрабатывать фиксированные разделы для определенных типов страниц для клиента, не изменяя содержательно все поставляемые шаблоны.

7. Показать только собственные шаблоны с помощью Only_own.txt.

Если конечный пользователь должен использовать только твои утвержденные шаблоны, создай в папке /bx_Layout/ файл флага Only_own.txt. Согласно показанной конфигурации шаблонов, будут предложены только подходящие собственные файлы с добавлением _own в выборке шаблонов. Для этой функции файл не требует HTML-кода.

/bx_Layout/Only_own.txt

Пример: если в директории находятся SectionClients.txt, SectionBanner.txt и SectionMyTemplate_own.txt, то после активации этой настройки выбор будет содержать только подходящий собственный шаблон. Это позволит тебе предложить клиенту целенаправленный, проектно-ориентированный выбор.

8. Свои шаблоны тегов для текстовых блоков.

Тот же принцип _own применяется и для меньших Текстовых блоков. Их файлы начинаются с Tag. Так, например, TagTemplate.txt станет TagTemplate_own.txt. Эту версию ты можешь предложить через пункт Текстовый блок в редакторе.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. Дубликаты редактируемых колонок с colAll.

Если раздел содержит несколько повторяемых колонок, колонка с классом colAll может быть распознана как самостоятельный блок. Таким образом, в контекстном меню будет доступна функция Статья-колонка → Дублировать.

<div class="colAll col-md-6">
   <h2>&#x00AD;Hello world&#x00AD;</h2>
   <p>&#x00AD;Writing&#x00AD;</p>
</div>

При дублировании соответствующий блок будет вставлен в качестве второй колонки. Поэтому для повторяемой карточки или колонки статьи ты должен установить colAll в правильный контейнер. Родительский класс sectionAll автоматически добавляется редактором.

10. Текстовые метки и многоязычные шаблоны.

Предоставляемые стандартные разделы содержат в примерах текста строку ­, например, перед и после заголовков. Эти текстовые метки не следует путать с разделителем <!--__SP_SectionTemplate__-->. При копировании существующих шаблонов такие метки CMS следует оставить, если нужно сохранить текущее поведение редактора.

<h2>&#x00AD;Designed for everyday success&#x00AD;</h2>

В многоязычных проектах могут быть полезны дополнительные переводные метки, чтобы редакторы могли редактировать содержимое на нужных языках. CMS bluetronix рассчитан на 24 языка. Для простого однолинейного проектного шаблона ты можешь пропустить ненужные дополнительные переводные метки; метки разделителей, требуемые для редактора, должны оставаться.

11. Собственные функции и необходимые подключения

Если ты расширяешь шаблон функциями PHP или выводами модулей, используй уникальные названия для собственных функций. Существующая функция не может быть объявлена повторно с тем же именем. Ты можешь защитить объявление, например, с помощью function_exists():

if(!function_exists("MyTestFunction")) {
   function MyTestFunction($Test) {
      return $Test;
   }
}

Необходимые включает должны быть подключены как минимум один раз на раздел. Соответствующий маркер для включения можно скопировать через редактор:

<!--bxInclude--/bx_Mod/Blog_Detail-->

Внутренние файлы шаблонов с расширениями .txt или .bx в описанной конфигурации CMS-сервера не предназначены для прямого доступа через публичные HTTP-/HTTPS-URL. Они считываются и обрабатываются на стороне сервера.

12. Почему ограниченные шаблоны полезны для редакционных команд

С собственными разделами и Only_own.txt ты определяешь, какие готовые элементы макета конечный пользователь может выбрать. Кроме того, в пользовательских настройках можно ограничить функции редактора, такие как изменения шрифта или цвета. Редакторы могут в первую очередь вставлять заранее заданные разделы, редактировать тексты и заменять изображения, не изменяя свободно установленный дизайн страницы.

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

13. Результат и резюме

Ты открываешь /bx_Layout/, копируешь существующий файл раздела, добавляешь _own, корректируешь HTML-код и проверяешь вывод в Вставить → Часть страницы. Для новых категорий выбора используй собственное имя файла, начинающееся с Section.

SectionClients.txt
       ↓ kopieren
SectionClients_own.txt
       ↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
       ↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → Clients

Если ты дополнительно активируешь Only_own.txt и соответствующим образом ограничиваешь права редактора, твои редакторы смогут целенаправленно работать с предоставленными собственными HTML-шаблонами разделов.