В качестве примера создадим шаблон для сайта с двухуровневой системой навигации. При этом активный раздел сайта как первого, так и второго уровня должны выделятся специальным образом. Исходными данными для разработки шаблона CimWebCenter является HTML-файл.
- В начале необходимо внимательно ознакомиться с HTML шаблоном как визуально, так и с кодом; мысленно разбить его на блоки. Далее определить подгружаемые внешние файлы яваскрипт, css и прочее. Если такие файлы существуют, то необходимо войти в web-студию, создать в соответствующих разделах такие файлы и перенести в них содержимое.
- Далее необходимо создать шаблон в разделе Template. Шаблоны для страниц лучше всего размещать в папке Pages. При этом оставьте его публикуемым и не забудьте выбрать для него внешний css файл – если таковой был создан. Имя публикуемых файлов рекомендуется задавать большими буквами.
- Далее загрузите все имиджи, относящиеся к этому шаблону.
- Вставьте все содержимое HTML шаблона в созданный только что объект и не забудьте подправить пути к имиджам.
- Для того, чтобы каждая страница имела свой заголовок, контент, title, keywords, description необходимо воспользоваться системными переменными (см. раздел «Системные переменные в части 2»).
Вот как может выглядеть простейший шаблон CimWebCenter:
<HTML>
<HEAD>
<TITLE><?=$ptitle?></TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<META name="keywords" value="<?=$pkeywords?>">
<META NAME="description" CONTENT="<?=$pdescription?>">
<LINK REL="STYLESHEET" TYPE="text/css" HREF="/css/cim.css">
<SCRIPT SRC="/js/cim.js"></SCRIPT>
</HEAD>
<body text="#000000"bgcolor="#FFFFFF" link="#663300" vlink="#000000" alink="#000000"topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
<P class=pagetitle><?=$pname?></P>
<?=$pcontent?>
</BODY>
</HTML>
Обратите внимание на включенные в него файлы – яваскрипт и css, а также на реализацию вывода мета-информации и контента, соответствующего страницам сайта.
Настройка системы навигации
function Menu2l($mid, $tmpl_label, $sub_tmpl_label = null)
где mid – это ID главной страницы сайта. Именно подпапки этого раздела до второго уровня включительно станут пунктами меню, $tmpl_label –шаблон для отображения пунктов меню первого уровня, $sub_tmpl_label - шаблон для отображения пунктов меню второго уровня
- Для того, чтобы получить возможность использовать эту функцию, необходимо подключить к шаблону библиотеку. Для этого в начало шаблона необходимо поместить строку <?require_once('userlib/menu.lib.inc');?> , где menu.lib.inc – имя файла библиотеки в API.
- Далее необходимо создать два шаблона для определения дизайна пунктов меню. Их лучше создать в папке Boxes. Назовем их menu_tmpl1 и sub_menu_tmpl1:
menu_tmpl1:
<table border=0 align=right cellpadding=5><tr><td>
<SELECT_MENU>
<P><A HREF=/$URL/><B>$NAME</B></A></P>
</SELECT_MENU>
<NOT_SELECT_MENU>
<P><A HREF=/$URL/>$NAME</A></P>
</NOT_SELECT_MENU>
<INDEX_PAGE>
<P><A HREF="/">На главную</A></P>
</INDEX_PAGE>
</td></tr></table>
sub_menu_tmpl1:
<UL>
<SELECT_MENU>
<P><A HREF=/$URL/><B>$NAME</B></A></P>
</SELECT_MENU>
<NOT_SELECT_MENU>
<P><A HREF=/$URL/>$NAME</A></P>
</NOT_SELECT_MENU>
<INDEX_PAGE>
</INDEX_PAGE>
</UL>
Здесь приведен простейший дизайн, в целом же такая схема позволяет реализовать любую задуманную дизайнером схему навигации.
- Теперь осталось только вызвать функцию меню из шаблона:
<P><?=Menu2l(get_index_page_ID(), 'menu_tmpl1', 'sub_menu_tmpl')?></P>
- Таким образом, шаблон CimWebCenter будет выглядеть следующим образом:
<?require_once('userlib/menu.lib.inc');?>
<HTML>
<HEAD>
<TITLE><?=$ptitle?></TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<META name="keywords" value="<?=$pkeywords?>">
<META NAME="description" CONTENT="<?=$pdescription?>">
<LINK REL="STYLESHEET" TYPE="text/css" HREF="/css/cim.css">
<SCRIPT SRC="/js/cim.js"></SCRIPT>
</HEAD>
<body text="#000000"bgcolor="#FFFFFF" link="#663300" vlink="#000000" alink="#000000"topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
<P><?=Menu2l(101, 'menu_tmpl1', 'sub_menu_tmpl1')?></P>
<P class=pagetitle><?=$pname?></P>
<?=$pcontent?>
</BODY>
</HTML>
- Напоследок целесообразно разбить этот шаблон на составные части, например, всю шапку и тег BODY можно вынести как отдельный шаблон, созданный в разделе boxes и т.п. Таким образом, результирующий шаблон типовой страницы может выглядеть так:
<?require_once('userlib/menu.lib.inc');?>
[%meta_head_box%]
<P><?=Menu2l(get_index_page_ID(), 'menu_tmpl1', 'sub_menu_tmpl1')?></P>
<P class=pagetitle><?=$pname?></P>
<?=$pcontent?>
[%bottom_box%]
Настройка системы поиска
Настройку системы поиска по сайту можно организовать следующим способом:
Создать бокс для для вывода формы для поиска SEARCH_INPUT_BOX , он может выглядеть так:
<form method="GET" action="/search/">
<input type="text" name="qrstr" value="<?=$_GET['qrstr']?>" />
<!-- <input type="image" src="/design/5/search-ok.gif" width=18 height=18 border=0 /> -->
<input type="submit" value="искать" />
</form>
Создать бокс для дизайна результатов поиска SEARCH_RESULT , он может выглядеть следующим образом:
<RESULT>
По запросу « <i><b> $str </b></i> » найдено документов <b> $num_rows </b><br />
</RESULT>
<ROW>
<p align=justify>
$npp $relevan<b><a href="/$link/">$name</a></b><br />
$annonce <a href="/$link/"><img src="/design/2/text.gif" align=texttop border=0 alt="дальше…"></a>
</p>
</ROW>
В модуле контент создать страницу с меткой search ( она должна соответсвовать action="/search/" из бокса SEARCH_INPUT_BOX )
В шаблон страницы включить код
if(strlen($_GET['qrstr']))
require_once('./lib/search.lib.inc');
echo CWC_search_result($_GET['qrstr']);
}
функции CWC_search_result() можно указать следущие параметры:
string $str - строка поиска
int $annonce_length - длина анонса найденой страницы (по умолчанию 300)
string $design_tmpl - шаблон дизайна результатов поиска (по умолчанию SEARCH_RESULT)
string $split_tmpl - шаблон вывода разбития на страницы (по умолчанию SPLIT_ON_PAGE)
int $split_MaxRows - максимальное количество строк на странице (по умолчанию 20)
return string - возвращает результаты поиска в нужном дизайне
Пример вызова функции со всеми параметрами:
CWC_search_result($str, $annonce_length, $design_tmpl, $split_tmpl, $split_MaxRows)
Для работы по умолчанию достаточно только первого параметра.
Настройка ленты новостей
Настройку ленты новостей можно организовать следующим способом:
Создать бокс для дизайна результатов поиска NEWS_LINE, он может выглядеть следующим образом:
<table border=0 cellpadding=0 cellspacing=3 width=100%>
<tr>
<td width=1><img src=/design/5/spacer.gif width=1 height=1 align=texttop border=0></TD>
<td width=135><a href="/$link/">
<b><nobr>$newsdatatime</NOBR> </B>$name <br>$annonce<img src=/design/5/marker-podrobnee.gif
width=7 height=7 border=0></a>
</td>
<td width=1><img src=/design/5/spacer.gif width=1 height=1 align=texttop border=0></td>
</tr>
</table>
В шаблон страницы включить вызов CWC_get_news
require_once('/lib/lib/news.lib.inc');
echo CWC_get_news($parenID);
Описание функции CWC_get_news();:
CWC_get_news($parentID, $maxRows = 0, $annonce_length = 0, $numPage=10, $design_tmpl = 'NEWS_LINE', $split_tmpl =' SPLIT_ON_PAGE')
$parentID - ID родительской папки раздела новостей
$maxRows - количество новостей, которые выводить, если 0 - то выводим все (по умолчанию 0)
$annonce_length - длина анонса, если ноль, то не выводится (по умолчанию 0)
$numPage - бить или не бить постранично вывод. Если 0 - не разбивается (по умолчанию 0)
$design_tmpl - шаблон дизайна ленты новостей (по умолчанию 'NEWS_LINE' )
$split_tmpl - шаблон дизайна разбивки на страницы (по умолчанию 'SPLIT_ON_PAGE' )
