Пример разработки шаблона

В качестве примера создадим шаблон для сайта с двухуровневой системой навигации. При этом активный раздел сайта как первого, так и второго уровня должны выделятся специальным образом. Исходными данными для разработки шаблона 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?>&nbsp;

</BODY>

</HTML>

Обратите внимание на включенные в него файлы – яваскрипт и css, а также на реализацию вывода мета-информации и контента, соответствующего страницам сайта.

Настройка системы навигации

  • Теперь необходимо разработать систему навигации. В комплекте CimWebCenter в API имеется функция:

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 />
&nbsp; $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>&nbsp;&nbsp;&nbsp;</B>$name&nbsp;<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' )