Руководство по созданию скинов
Введение
Эта статья предназначена для тех, кто не желает ограничиваться
стандартным набором скинов (шаблонов), а хочет создать свой
собственный.
- Ревизия статьи: 1
- Действительна для версий ReloadCMS 1.2.0-1.2.4 и
1.3.1.
Общая информация
Шаблоны ReloadCMS находятся в директории
“./skins/{ИМЯ_ШАБЛОНА}” и имеют общую обязательную
структуру, которая будет описана в этом разделе. В директории шаблона
обязательно должны существовать следующие файлы:
“skin.php”, “skin.general.php”
и “skin_name.txt”.
skin_name.txt
“skin_name.txt” должен содержать единственную
строку, содержащую полное имя скина.
skin.php
“skin.php” содержит системную информацию о шаблоне,
например:
Код:
<?php
///////////////////////////
// Skin definition file //
///////////////////////////
define('HIDE_NAVIGATION', true);
// Menu points
$skin['menu_point']['left'] = __('Left column');
$skin['menu_point']['up_center'] = __('Center column, upper than main module');
$skin['menu_point']['down_center'] = __('Center column, lower than main module');
$skin['menu_point']['right'] = __('Right column');
?>
Рассмотрим этот код. Строка define('HIDE_NAVIGATION', true);
необязательна и указывает на то, что в скине уже предусмотрена
навигация и дублировать её модулем не нужно 1). Далее идут
строки вида $skin['menu_point']['{ID_ТОЧКИ}'] = '{НАЗВАНИЕ_ТОЧКИ}'; ,
которые описывают “Точки меню” 2). Важно чтобы эти
точки совпадали с теми, которые вы использовали в основном шаблоне!
skin.general.php
“skin.general.php” - основной шаблон, скелет всего
сайта! Пример:
Код:
<!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="<?=$system->config['language']?>" lang="<?=$system->config['language']?>">
<head>
<title><?rcms_show_element('title')?></title>
<?rcms_show_element('meta')?>
<link rel="stylesheet" href="<?=CUR_SKIN_PATH?>style.css" type="text/css" />
</head>
<body>
<div id="header-root">
<div id="header-title">
<img src="<?=CUR_SKIN_PATH?>logo.png" alt="<?=$system->config['title']?>"/>
</div>
<div id="header-navbox">
<?rcms_show_element('navigation', '<a href="{link}" target="{target}" class="header-navbox">{title}</a> ')?>
</div>
</div>
<div id="layout-root">
<div id="layout-center">
<?rcms_show_element('menu_point', 'up_center@window')?>
<?rcms_show_element('main_point', $module . '@window')?>
<?rcms_show_element('menu_point', 'down_center@window')?>
</div>
<div id="layout-left">
<?rcms_show_element('menu_point', 'left@window')?>
</div>
<div id="layout-right">
<?rcms_show_element('menu_point', 'right@window')?>
<div id="copyright">
<a href="http://validator.w3.org/check?uri=referer"><img src="./skins/button-xhtml.png" alt="Valid XHTML 1.0!" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="./skins/button-css.png" alt="Valid CSS!" /></a>
<a href="http://php.net"><img src="./skins/button-php.gif" alt="PHP powered" /></a>
<img src="./skins/button-rss.png" alt="RSS Aggregation" /><br />
<?rcms_show_element('copyright')?>
</div>
</div>
</div>
</body>
</html>
Т.е. здесь вы определяете полный вид вашего сайта. Использование php
кода естественно разрешено и даже необходимо. Если вы хотите сэкономить
немного кода, то вместо
Код:
<?php ?>
можно использовать
Код:
<? ?>
а вместо
Код:
<?php echo something ?>
-
Код:
<?=something?>
3).
Шаблоны "окон" для точек модулей
Для вывода результатов работы модулей используются шаблоны
“окон” (для каждой точки шаблон может быть свой) и
они должны находится в файлах skin.{ШАБЛОН}.php в директории скина. Вот
примерный вид шаблона:
Код:
<?php if(!empty($title)) {?>
<div class="window-title"><?=$title?></div>
<?php }?>
<div class="window-main" style="text-align: <?=$align?>;">
<?=$content?>
</div>
В шаблоне доступны все рекоммендуемые константы и функции, а для
использования переменных их нужно в начале шаблона объявить
глобальными, например:
Код:
<?php global $system;?>
Также в шаблоне доступны следующие локальные переменные:
- $title - Заголовок “окна”
- $align - Метод выравнивания содержимого
“окна”
- $content - Содержимое “окна”
Переопределение системных шаблонов
Обычно модули используют для вывода своих данных, так называемые,
системные шаблоны, которые находятся в директории
“./modules/templates”. Вы можете переопределить эти
шаблоны создав файл с таким же именем в директории скина и указав
внутри шаблон, соответствующий формату оригинала. ВНИМАНИЕ! Так как в
системных шаблонах могут быть ошибки и они могут изменяться
рекомендуется при переходе на новую версию тщательно проверить
изменения! Если вы не поняли принцип работы шаблона - обратитесь к
авторам, так как неправильный шаблон может нарушить работу модуля,
который его использует.
Обязательные классы CSS
Для нормальной работы вы должны определить некоторые классы CSS. Это
можно сделать либо в отдельном css файле, либо используя тег
внутри .. . Вот примеры обязательных классов и их
описания:
Код:
/* Тег th используется для заголовков очень часто поэтому его стилю нужно уделить внимание */
th {
background-color: #F4F4F4;
padding: 1px 1px 1px 1px;
}
/* Классы row1, row2 и row3 используются везде, так что очень важно подобрать им правильные стили */
.row1 {
background-color: #DFDFDF;
padding: 1px 1px 1px 1px;
}
.row2 {
background-color: #E4E4E4;
padding: 1px 1px 1px 1px;
}
.row3 {
background-color: #ECECEC;
padding: 1px 1px 1px 1px;
}
/* Класс special используется для выделения важной информации (обычно фоном является один из классов row1/2/3 */
.special {
color: red ! important;
}
/* Класс border используется для обрамления элемента в рамку */
.border{
border: 1px solid black;
}
/* Класс codetitle используется для заголовка ббКодов quote, code и некоторых других */
.codetitle {
margin: 10px 5px 0px 5px;
padding: 4px;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #A9B8C2;
color: black;
background-color: #A9B8C2;
font-size: 8pt;
}
/* Класс codetitle используется для содержимого ббКодов quote, code и некоторых других */
.codetext {
margin: 0px 5px 10px 5px;
padding: 5px 5px 5px 5px;
border-color: #A9B8C2;
border-width: 0px 1px 1px 1px;
border-style: solid;
color: black;
font-weight: normal;
font-size: 8pt;
font-family: "Courier New", Courier, mono;
background-color: #FAFAFA;
overflow: auto
}
Рекоммендуемые константы, функции и объекты
Вот список и краткое описание рекоммендуемых к использованию в шаблонах
констант, функций и объектов:
- Константы
- CUR_SKIN_PATH - путь к текущему скину
- RCMS_ROOT_PATH - путь к корню ReloadCMS
- SKIN_PATH - путь к директории скинов
- LOGGED_IN - true если пользователь
идентифицирован, false - если пользователь -
“Гость”
- PUBLIC_FILES_PATH - путь к директории публичных
файлов 4)
- Функции
- rcms_show_element({тип_элемента}, {опции})
- тип: “title”, опции: нет.
Выводит заголовок страницы.
- тип: “meta”, опции: нет.
Выводит необходимые мета-теги и прочие данные для размещения в ...
- тип: “navigation”, опции:
“{ШАБЛОН_ЭЛЕМЕНТА_НАВИГАЦИИ}”. Выводит навигацию,
используя для её элементов указанный в опциях шаблон. В шаблоне должны
быть строчки {title}, {link} и {target}, которые будут заменены на
заголовок, ссылку и на целевое окно элемента соответственно.
- тип: “copyright”, опции:
нет. Выводит сообщение об авторах и версии ReloadCMS.
- тип: “menu_point”, опции:
“{ID_ТОЧКИ}@{ШАБЛОН}”. Определяет точку меню с
определённым ID и шаблоном. Шаблоны для них должны находиться в
директории скина в файлах “skin.{ШАБЛОН}.php”.
- тип: “main_point”, опции:
“@{ШАБЛОН}”. Определяет место, куда будет выводится
результат работы основного модуля. Точка должна быть только одна!.
Шаблон для неё должен находиться в директории скина в файле
“skin.{ШАБЛОН}.php”. Шаблон полностью совместим с
шаблонами точек меню.
- __({строка_на_английском}) - Локализация строки
- Объекты
- $system
- $system->config - массив, в котором
хранятся различные настройки сайта. Использование напрямую настроек
(кроме указанных) крайне не желательно!
- $system->config['language'] -
Хранит двухбуквенный идентификатор языка
- $system->config['encoding'] -
Хранит текущую кодировку
- $system->url - URL текущего сайта
- $system->current_point - Текущая
обрабатываемая точка (либо ID точки меню, либо
“__MAIN__“, если обрабатывается основная точка)
1) в
принципе, если вы хотите показать две навигации, то просто не
указывайте эту строку.
2) Точки
меню - это специальные отметки в шаблоне, вместо которых вставляются
результаты работы “Модулей меню”. Точки могут
находится где угодно, их может быть сколько угодно и каждая может иметь
свой собственный шаблон.
3) Но
для этого на сервере должна быть включена опция short_open_tag
4) Только
для 1.3 и 1.4 |
