• CMS Made Simple - Русская поддержка
Языки: CMS Made Simple - Official website CMS made Simple Czech Site Zur deutschsprachigen Supportseite CMS Made Simple - Danmark Sitio en Castellano Site francophone CMS Made Simple - Magyarország Benvenuto su CMSmadesimple CMSMS -  русский CMS Made Simple - slovenská verzia

Внедрение своего шаблона

Давайте представим, что у нас есть готовый шаблон HTML, который нужно использовать в CMS Made Simple. Шаблон для мастера-класса я взяла бесплатный. Можете загрузить его, если хотите потренироваться или посмотреть, как он выглядит. Если Вы владеете основами HTML и CSS, то последующие шаги не должны представлять для Вас никаких проблем. Заходим в административную панель CMS Made Simple.

Сначала добавим исходный код шаблона HTML. Для этого в основном меню выбираем Оформление » Шаблоны и нажимаем на ссылку Добавить новый шаблон. В появившемся окне задаем Имя шаблона. Это имя будет видно редактору контента при выборе шаблона для страницы. В поле Контент удаляем все, что там написано, копируем исходный код HTML нашего шаблона без изменений и добавляем в это поле. Нажимаем на Отправить.

В списке шаблонов видим новый шаблон. Давайте сделаем его 1) шаблоном по умолчанию и 2) установим его для всех страниц. Шаблон по умолчанию будет автоматически применяться ко всем новым страницам. Нажатием на ссылку Установить для всех страниц, мы присваем всем уже существующим страницам этот шаблон.

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

В административной панели в основном меню нажмите на Оформление » Стили и затем на ссылку Добавить стиль. Задаем любое Имя для стиля, а в поле Контент копируем содержимое файлов style.css и menu.css, т. е. все стили, которые используются в шаблоне без каких-либо изменений. Нажимаем на кнопку Отправить. Стиль добавлен в список стилей.

Теперь нужно присоединить этот стиль к нашему шаблону. Для этого в списке стилей нажимаем на синию кнопочку с надписью CSS в конце строчки с названием стиля. В следующем окне выбираем наш шаблон HTML в выпадающем меню и нажимаем на Присоединить к этому шаблону.

Во фронтенде пока еще ничего не изменилось, так как там до сих пор используется наш статический шаблон. Настало время его динамизировать. В основном меню выбираем Оформление »Шаблоны и нажимаем на наш шаблон, чтобы открыть его для редактирования.

Начинаем работу с Smarty. Smarty – это специальный язык для шаблонов, который позволяет вставлять в места, где должен находиться динамический контент, теги в фигурных скобках. В момент вызова страницы во фронтенде теги Smarty будут преобразовываться и изменяться в зависимости от нашего контента. Для начала заменим статический вызов стилей тегом {cms_stylesheet}. Ищем в шаблоне строчки:

 

И заменяем их на Smarty тег {cms_stylesheet}, нажимаем на Применить и смотрим результат во фронтенде. Вы видите, что стиль, который мы создали в административной панели и присоединили к шаблону теперь автоматически загружается на странице. Если Вы посмотрите исходник страницы, то убедитесь, что на том месте, где Вы использовали тег  {cms_stylesheet} появился обыкновенный тег link, автоматически сформированный CMS Made Simple.

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

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

и заменяем статические заголовки на теги Smarty:

Нажимаем на Применить и смотрим результат во фронтенде. Заголовок в обозревателе и на странице изменились. Теперь ищем место в шаблоне, где должно выводиться содержимое страницы и заменяем весь статичный контент шаблона на тег {content} :

Добавление меню

Осталось динамизировать меню. Для этого находим в шаблоне статичное меню:

Это все нужнозаменить на динамическое меню, которое будет формироваться из страниц первого уровня. Для меню мы используем тег {menu}. Давайте сначала заменим весь вывод статичного меню, приведенного выше, на этот тег. Меню добавилось, но оно выдает страницы всех уровней, поэтому сбивается дизайн. Для того, чтобы более тонко настроить тег {menu} используем параметры этого тега. Параметры Smarty очень похожи на атрибуты в HTML. Они добавляются прямо в фигурные скобки тега Smarty, могут иметь любую последовательность и состоят из параметра и его значения, разделенных знаком равно. На примере,если нам нужен вывод страниц только первого уровня, то настраиваем тег {menu} следующим образом:

Готово. Если где-то в другом месте шаблона нужно будет использовать меню второго уровня, то добавьте в этом место

Да, Вы можете использовать тег {menu} c различными параметрами в любом месте шаблона, а также в содержимом странице столько раз, сколько Вам захочется.

Доводим до ума

Осталось несколько деталей. В CMS Made Simple можно (и нужно) использовать индивидуальные мета теги для каждой страницы, поэтому статические нужно из шаблона убрать. Ищем все мета теги:

И заменяем на Smarty тег {metadata}. В этом месте будут выводиться глобальные теги, которые Вы найдете под Администрирование сайта » Общие настройки в поле Глобальные метаданные, а также индивидуальные мета данные страницы, которые можно задавать при редактировании страницы. Контент »Страницы, открыть страницу для редактирования, перейти на вкладку Опции и задать мета теги в поле Мета (meta) для данной страницы.

Вы заметили, чтоу нас исчезла картинка? Эта картинка подгружалась стилями, и теперь стиль не может ее найти. Самой простой вариант. В административной панели перейдите на Контент» Управление изображениями и загрузите изображение containerright-image.jpg в CMS Made Simple. Теперь добавим путь к изображению в стиль. Оформление » Стили, нажимаем на наш стиль и ищем строку

заменяем эту строку на

 

В этой строке используется также тег Smarty, но в виду того, что в стилях уже присуствуют фигурные скобки, в стилях Вы используете двойные квадратные скобки. [[root_url]] автоматически заменится на УРЛ Вашей страницы.

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

В следующем мастер-классе будет подробно описано, как реализовать меню любой сложности в CMS Made Simple. Подписываемся, если интересует.

comments powered by Disqus