Структура шаблонов дизайна (фреймворк)

Если вы хотите вносить изменения в код шаблонов, то это автоматически подразумевает, что вы обладаете знанием HTML и CSS. В противном случае вам следует либо изучить их на любом из множества ресурсов в интернете либо обратиться к профессионалам.

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

Шаблоны десктопного дизайна редактируются в:

Админка > Дизайн > Десктоп : Шаблоны и стили > Шаблоны

  • либо в файловом менеджере 

/design/desktop/html/

Структура шаблонов:

  • Расшифровка названий файлов шаблонов: десктоп

Страницы сайта формируются из шаблона-обертки index.tpl, который присутствует на всех страницах сайта и состоит из:

  • шапка/хэдер
  • левая колонка - в нее подключаются дополнительные шаблоны (меню блога, меню каталога, новинки и т.п.) через {include file='...'}
  • основной контент - {$content} - в нем выводится содержимое шаблонов (main.tpl, products.tpl, product.tpl, page.tpl, blog.tpl, post.tpl, articles.tpl, article.tpl, services.tpl, cart.tpl, order.tpl, register.tpl, user.tpl, login.tpl, feedback.tpl, wishlist.tpl, compare.tpl) по названию легко понять, какой контент выводится данными шаблонами (в них через {include file='...'} могут подключаться другие шаблоны).
  • подвал/футер

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

Админка > Дизайн > Мобильный : Шаблоны и стили (моб)

  • либо в файловом менеджере 

/design/mobile/html/

Структура шаблонов:

  • Расшифровка названий файлов шаблонов: мобильный

Страницы сайта формируются из шаблона index.tpl, который присутствует на всех страницах сайта и состоит из:

  • шапка и выплывающее слева меню - через подключамый в {include file='toolbar.tpl'} шаблон toolbar.tpl
  • основной контент - {$content} - в нем выводится содержимое шаблонов (main.tpl, products.tpl, product.tpl, page.tpl, blog.tpl, post.tpl, articles.tpl, article.tpl, services.tpl, cart.tpl, order.tpl, register.tpl, user.tpl, login.tpl, feedback.tpl, wishlist.tpl, compare.tpl) по названию легко понять, какой контент выводится данными шаблонами (в них через {include file='...'} могут подключаться другие шаблоны)

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

1) Открываем просмотр исходного кода страницы в браузере (правая кнопка мыши на пустое место без текста):

и смотрим класс в теге <body>:

<body class="productsview">

2) Далее 2 варианта действий:

  • либо сразу по названию открываем шаблон products.tpl

    Пример соответствующих контенту файлов шаблонов (main.tpl, products.tpl, product.tpl, page.tpl, blog.tpl, post.tpl, articles.tpl, article.tpl, services.tpl, cart.tpl, order.tpl, register.tpl, user.tpl, login.tpl, feedback.tpl, wishlist.tpl, compare.tpl). Здесь расшифровка названий шаблонов

  • либо заходим в одноименный файл контроллера view/ProductsView.php и находим там подключение шаблона:

$this->body = $this->design->fetch('products.tpl');

Разберем на примере десктопного дизайна:

Если вы хотите изменить тот или иной кусок кода, то вам нужно найти его в шаблоне.

Будем использовать браузер Хром (а именно встроенный в него инспектор кода).

На примере пункта меню подвала/футера - однозначно понятно, что футер относится не к основному контенту, а к шаблону-обертке index.tpl (т.к. он повторяется на всех страницах).

Открываем сайт на нужной странице, и в нужном месте дизайна правой кнопкой мыши вызываем меню и выбираем пункт "Просмотреть код":

Работа с шаблонами 

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

Работа с шаблонами

Копируем id или класс ближайшего верхнего узла - например footer (или footerbody и т.п.).

Далее открываем файл index.tpl и ищем по тексту (CTRL F) "footer" и находим:

Работа с шаблонами

Как видите по названиям классов или id легко сопоставить код шаблона с кодом сайта, чтобы понять что за что отвечает.

Как определить вложенный шаблон не основного контента:

В том случае, когда искомый элемент дизайна находится не в шаблоне-обертке index.tpl и не напрямую в коде шаблона основного контента, а дополнительно подключается через {include file='...'} в отдельном шаблоне.

Как правило актуально для:

  • блоков в левой колонке
  • модулей
  • виджетов
  • фильтров
  • повторящихся элементов (напр. товаров в каталоге)

Кликаем правой кнопкой мыши на нужный элемент в браузере и выбираем "Просмотреть код":

Редактирование шаблона

и если элемент находится в дополнительном шаблоне, мы увидим в коде следующую подсказку в комментарии <!-- incl. :

Редактирование шаблона

в данном примере видно, что кусок кода относится к файлу mblog.tpl, открываем его и видим:

Редактирование дизайна в 5CMS

Здесь условий конечно больше, но структура также легко читается.

Теги: шаблоны, tpl, работа с дизайном, изменение дизайна, редактирование шаблонов дизайна

UPD: описание обновлено 20.05.2024

Еще нет своего сайта? Запустите интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать