Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

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

shablon_cmsms

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

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Комментарии
  1. Спасибо за статью! Очень помогло разобраться с этой cms-кой)))

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*