Шаблоны CMSMS — как установить, как создать собственный шаблон
shablon_cmsms

Шаблоны CMSMS — как установить, как создать собственный шаблон

Nikel, 19.11.2014

CMS Made Simple использует различные шаблоны для отображения контента сайта.

Все установленные шаблоны вы можете найти в  консоли администратора выбрав пункт Оформление | Шаблоны.

шаблоны

Строго говоря, мы должны различать Шаблоны и Темы.

Шаблон — это только часть темы.Тема состоит из одного или нескольких шаблонов и одной или нескольких таблиц стилей. Некоторые темы по желанию включают шаблоны меню (Оформление | Менеджер меню).

Давайте посмотрим, как импортировать готовый шаблон .
1. Скачайте файл XML  шаблона с одного из следующих адресов:

и сохраните этот файл на локальном диске.
2. В консоли администратора, нажмите Оформление | Менеджер шаблонов.
3. Перейдите на вкладку Импортировать и выберите файл XML, который вы скачали.
4. Нажмите на кнопку Импортировать.
5. Перейдите в раздел Оформление | Шаблоны и найдите новый импортированный шаблон в списке.
Таким образом мы импортировали новую тему для CMS Made Simple, которая содержит несколько шаблонов и одну или несколько таблиц стилей, а иногда и шаблонов меню

импорт шаблона

Теперь откройте страницу, которую вы хотели бы видеть с новым шаблоном, для редактирования (Контент | Страницы). Переключитесь на вкладку Опции, и выберите недавно загруженный шаблон.

установка шаблона

Если нажать на кнопку Отправить, произойдет автоматическая переадресация к списку страниц, где мы можем видеть какой шаблон используется на каждой из них в настоящий момент .

шаблон для страницы

Этот замечательный принцип CMS Made Simple, позволяет задавать для каждой страницы свой неповторимый внешний вид,  создавать одно-, двух-, или трехколоночные макеты на различных страницах одного сайта.

Вы можете назначить один шаблон для всех страниц сразу, если у вас уже есть большое число страниц — в административной консоли откройте список существующих шаблонов (Оформление| Шаблоны) и нажмите на пункт Установить для всех страниц.

шаблон для существующих страниц

CMS Made Simple, автоматически выбирает шаблон по умолчанию для новой страницы. Нажмите на символ с неактивной галочкой в колонке По умолчанию около шаблона, который Вы хотели бы использовать в качестве стандартного.

Конечно, легче использовать готовые шаблоны CMS Made Simple. Однако, часто бывает необходимо создать собственный уникальный дизайн для веб-сайта.

Шаблоны в CMSMS, содержат чистый HTML. Для динамических частей макета, таких как навигация или контент, используются специальные плейсхолдеры. Эти плейсхолдеры реализованы с помощью  Smarty.  Вы используете простые теги Smarty, чтобы отметить места, где в страницах требуются динамические части. В отличие от HTML-тегов, эти теги  всегда заключены в фигурные скобки.

Итак, попробуем создать свой внешний вид для сайта, воспользовавшись  статическим шаблоном html+css, который бесплатно распространяется в Интернете.  Называется он Earthlingtwo by nodethirtythree + Free CSS Templatest (ссылка на скачивание в конце этой статьи). Простая структура, фиксированная ширина, яркая веселая расцветка — это все, что нужно для решения нашей задачи.

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

maket

Откроем файл index из шаблона  в каком-нибудь текстовом редакторе с подсветкой тегов (рекомендую Notepad++) и будем заменять соответствующие участки html плейсхолдерами Smarty.

В самом начале кода вставляем тег {process_pagedata}.

Заменяем мета-теги плейсхолдером {metadata}. Метаданные в CMSMS изменяются по адресу Администрирование сайта — Общие настройки контента — Глобальные метаданные, также существует возможность указать теги Мета на вкладке Опции для каждой конкретной страницы.

Таблицы стилей заменяем на {cms_stylesheet}.

Вместо содержимого тега <title> указываем {tile}.

Имя сайта — Earthlingtwo — будет содержаться в теге {sitename}.  Его можно изменять в поле Название сайта (Администрирование — Общие настройки ).

Под названием сайта  находится блок с описанием сайта (в примере by nodethirtythree + Free CSS Templatest), который мы можем заменить блоком контента с именем site_desc {global_content name='site_desc'}. Кроме него в виде блоков контента сделаем  футер сайта {global_content name='footer'} и кусок текста вверху правой колонки (Veroeros sit dolore), обозначив его как cite, цитата —  {global_content name="cite"}

Список пунктов меню сайта заменяем на тег {menu}.

Предположим нам нужно, чтобы на определенных страницах сайта отображалась  картинка-баннер. Вставлять ее прямо в тексте страницы не очень удобно.

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

{content_image block='image1' label='banner' dir='images'},

этот код вставляет  картинку в соответствующее место шаблона и создает в настройках страниц, в админке, дополнительное поле banner с выпадающим списком картинок, загруженных в директорию uploads/images сайта. В результате, будет показано выбранное из списка изображение, когда изображение не выбрано — баннер не показывается.

content_image

Заголовок страницы (Home, Services и т.д.), обозначенный в коде как h2 также будем выводить при помощи тега {title}.

Помимо заголовков, можно  также указывать подзаголовки для каждой страницы при помощи Дополнительный атрибут 1 (вкладка Опции), который вызывается плейсхолдером {page_attr key='extra1'}.

доп.поле

Для вывода содержимого страницы используем тег {content}.

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

Попробуем реализовать все вышеперечисленное  средствами CMSMS.

К сожалению,  встроенный функционал движка не позволяет создавать Категории и записи, как, например, в WordPress. Решить эту проблему призван модуль News, установленный в системе по умолчанию (загляните в раздел Расширения | Модули). Данное расширение дает нам возможность создавать Новости, Категории Новостей и шаблоны для тех и других. Его описанию посвящен отдельный урок по CMS Made Simple, а пока просто укажите эти теги в своем шаблоне.

Тег {news action="browsecat" browsecat="1"} в колонке справа выводит список категорий (за это отвечает параметр browsecat)

cats

Таким замысловатым кодом в нижнем блоке
{news number='1' action="default" moretext="Learn more..." category="Vestibulum risus vitae" summarytemplate="new"}
вызывается краткое содержание одной, последней новости из категории Vestibulum risus vitae, структура и внешний вид  которой определяется шаблоном new.

{news number="5" start="1" action="default" category="Vestibulum risus vitae" summarytemplate="new_list_articles"}тег служит для вызова списка из 5 новостей из категории Vestibulum risus vitae, начиная с предпоследней, созданных по шаблону new_list_articles.

news

Вот какой код получился в результате.

В административной панели перейдите в раздел Оформление | Шаблоны, и нажмите Добавить Новый шаблон.  Дайте ему имя new, а в поле Контент скопируйте вышеприведенный код.

Теперь внесем коррективы в файл style.css нашего статического шаблона, содержащий таблицы стилей. Тут потребуется только исправить пути к картинкам —  images/ переделать на /uploads/images/, после чего файл готов для копирования в CMSMS (чтобы это сделать в разделе Оформление | Стили щелкните пункт Добавить Стиль и вставьте его код в поле Контент, название дайте new-style).

добавить стильсвязь с шаблоном

Следующим шагом нужно присоединить стиль к шаблону (нажав на  значок  с надписью css  напротив выбранного стиля).  Откроется окно, в котором вы сможете выбрать шаблон new. При желании можно присоединять css ко многим шаблонам, все имеющиеся связи будут отображаться здесь.

присоединить к шаблону

Загружаем картинки  в Менеджере файлов административной панели

загрузка картинок

Настраиваем меню.  В Менеджере меню выберем шаблоном по умолчанию minimal_menu.tpl, который генерирует простейшее меню ul-li, такое же как в оригинале.

menu

Единственное отличие  у нас в том, что не подсвечиваются текущие вкладки. В статическом шаблоне это определяется правилом  #menu li.current_page_item a, а CMS Made Simple  генерирует класс  #menu a.currentpage  для текущей вкладки. Заходим  Оформление | Стили, открываем new-style, находим с помощью поиска (ctrl+f) #menu li.current_page_item a и меняем на  #menu a.currentpage.

Создадим блоки контента футера, описания и цитаты.  Вообще блоки контента это фрагменты html, которые вы можете помещать в любое место на странице  или в шаблоне. Выбираем в административной панели  Контент | Блоки контента. Вписываем название и код hml каждого блока, взятый из статического шаблона.

блоки контента

Теперь чтобы внешний вид сайта совпадал с эталонным, нужно немного поработать над выводом категорий и отдельных записей в модуле Новостей. Заходим в раздел Контент | Новости и создаем там  8 произвольных категорий как показано на рисунке.

добавить категорию

В категорию Vestibulum risus vitae добавляем 6 новостей (название и текст произвольные), которые и будут показываться там, где прописаны теги news .

новости

В разделе Новости | Шаблон для резюме создаем свой шаблон new, отвечающий за отображение краткого содержания новости в нижнем блоке слева.

А также шаблон new_list_articles, определяющий вывод списка остальных новостей  в нижнем блоке справа.

Перейдем к разделу Новости | Обзор категории шаблонов, который нам нужен, чтобы настроить показ категорий (я немного видоизменила оригинал — в коричневых блоках теперь отображается число записей в каждой категории) и создаем шаблон new.

Это общие принципы создания шаблонов CMSMS, руководствуясь которыми можно делать свои собственные шаблоны. На этом все. Спасибо за внимание!

шаблон Earthlingtwo by nodethirtythree.zip

3 комментариев


    • Fylhtq
      Cancel Replay
    • Июль 5, 2015

    Спасибо за статью! Очень помогло разобраться с этой cms-кой)))

    • Александр
      Cancel Replay
    • Октябрь 4, 2015

    От души благодарю!

    • Роман
      Cancel Replay
    • Апрель 1, 2016

    Зачетно. Информации по интеграции шаблона даже больше, чем в русскоязычной поддержке. Но основной момент с content не понятен. Контент будет выводить блоки или что? Или каждому текстовому блоку прописывать в шаблоне content а потом создавать блок и там прописывать текст и он будет выводиться в шаблоне. Но тогда как он будет инициализироваться?)) Вот в MODx все понятно. Там есть чанк (в данном случае аналог блока) вот он и вводит все что там находится. А какую функцию выполняет контент в этой CMS. Если можно пример приведите: вот есть два тестовых блока на странице. Не динамические. Просто постоянный текст и третий блок с динамическим контентом (к примеру, новости). Как это осуществить с помощью smarty тегов?