This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文
Настройка шаблона на примере поставляемого с системой
Раздел представляет собой перевод англиийской версии. В данный момент он перерабавтывается с учетом актуальной версии CMS.
Contents |
- Все шаблоны, поставляемые с системой, содержат практически один и тот же HTML код. Они отличаются только типом меню и количеством включенных в них блоков контента. Всё остальное оформление назначается только через таблицы стилей.
- Такое возможно потому, что исходные шаблоны не содержат таблиц. Вместо них? для определения каждого блока использованы теги <div>. Расположение и внешний вид каждого такого блока может быть настроено с помощью CSS.
- Далее мы пройдемся по всему шаблону, раздел за разделом, чтобы объяснить что это такое и что в нем можно изменить.
- Внешний вид и поведение будущей страницы затем настроим с помощью таблиц стилей, привязанных к каждому шаблону.
- Исходный код шаблона:
Тег {process_pagedata}
{process_pagedata}
- Этот служебный плагин запускает обработку дополнительных данных и логики шаблонизатора Smarty, если они были добавлены к странице в специальном поле редактора. Этот тег необязателен, если Вы не используете этот механизм. Но если всё-таки решили использовать, то этот тег обязательно должен стоять в самой первой строке шаблона.
Объявление DOCTYPE и назначение языка страницы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- Это DOCTYPE (document type declaration - объявление типа документа). Эта строка сообщает браузеру, что данный документ использует определенную версию(X)HTML, в результате чего браузер может отобразить его корректно. Это также необходимо для различных утилит, проверяющих синтаксис исходного кода документа.
- Первые две строки объявления должны быть оставлены без изменений. А вот объявление языка документа в теге <HTML> вполне может быть изменено. Измените "en" на "ru" для назначения странице русского языка.
Раздел <HEAD>
<head>
<title>{sitename} - {title}</title>
{cms_stylesheet}
{metadata}
</head>
- В разделе <head></head> содержится всевозможная служебная информация, котрая не отображается на самой странице. Обратите внимание, что весь этот раздел заполнен только тегами CMS Made Simple! И это вполне логично - для того и нужна CMS, чтобы "спихнуть" на неё все служебные функции. впрочем никто не запрещает Вам добавить в этот раздел любые свои теги, если Вы знаете что делаете.
- Тег <title></title> отвечает за текст, появляющийся в заголовке браузера. Мы будем использовать {sitename} - имя файла, определенное в "Общих настройках" и {title} - метку, которая будет замещена именем текущей страницы, заданным при редактировании конкретной страницы. Расположим их через дефис.
- Тег {cms_stylesheet} прилинковывает все таблицы стилей, привязанные Вами к данному шаблону. Обратите внимание, что тег {stylesheet} используется только один раз и включает в себя все привязанные таблицы стилей, даже если их привязано несколько. В CMS Made Simple до появления версии 1.8.1, вместо него использовался тег {stylesheet}.
- Тег {metadata} выводит все метаданные (ключевые слова и т.п.), как заданные в "Общих настройках" для всего сайта, так и назначенные отдельной странице при её редактировании.
Начало страницы
<body> <div id="pagewrapper">
- Это теги начала тела страницы и блока "контейнера" страницы, в который будет включено всё остальное содержимое. В таблице стилей Вы можете задать параметры этого блока - ширину страницы, выравнивание и т.п. Для этого в одной из привязанных таблиц стилей найдите строку, начинающуюся с div#pagewrapper.
Заголовок
<div id="header">
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
- Заголовок - это то место на странице, где размещается логотип CMS Made Simple.Как Вы можете заметить, сам шаблон не содержит никаrой информации о наполнении заголовка, всё оформление содержится в CSS. Так сделано для того, чтобы получить совершенно чистый код, соответствующий логической разметке. Однако, при желании, Вы можете включить текст, ссылки на изображения или любой другой контент, который должен отобразиться в блоке заголовка, непосредственно в шаблоне.
Путь к странице ("хлебные крошки")
<!-- Start Breadcrumbs -->
<div class="breadcrumbs">
{breadcrumbs starttext='You are here' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
<!-- End Breadcrumbs -->
- "Хлебные крошки" - это ссылки, которые показывают посетителю на какой странице он находится, и где её место в общей иерархической структуре сайта.
Это будет выглядеть как-то так:
Главная >> Раздел >> Текущая страница
- В CMS Made Simple есть тег, который добавляет путь к каждой странице: {breadcrumbs}.
- Логика вывода пути определяется с помощью параметров:
- delimiter='»' определяет символ, который будет использован в качестве разделителя.
- starttext='You are here' определяет текст, который будет выведен для текущей страницы
- root='Home' определяет страницу, от которой начинается отсчет
- initial='1' будет начинать вывод пути с разделителя. Т.е.разделитель появится перед самым первым элементом. Если параметру присвоить значение '0' или опустить, то разделитель появится только между элементами.
This page in:
English -
Deutsch -
Español -
Français -
Italiano -
Lietuvių -
Nederlands -
Norsk -
Polski -
Česky -
Русский -
Svenska -
Tiếng Việt -
عربي -
日本語
简体中文
