Модули в шаблоне
Когда модуль вызывается в index.php, для него можно определить несколько вариантов его вывода. Синтаксис:
<jdoc:include type="modules" name="LOCATION" style="OPTION">
Варианты вывода являеются дополнительным параметром и определены в templates/system/html/modules.php. В настоящее время, по умолчанию файл modules.php содержит следующие разметки.
OPTION = "table" (вывод по умолчанию) модули выводятся в колонку. Ниже показан пример вывода:
<table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
<tr>
<th valign="top">
<?php echo $module->title; ?>
</th>
</tr>
<?php endif; ?>
<tr>
<td>
<?php echo $module->content; ?>
</td>
</tr>
</table>
OPTION = "horz" заставляет модули появиться горизонтально. Каждый модуль выводится в ячейке обрамляющей таблицы. Ниже показан пример вывода:
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top">
<?php modChrome_table($module, $params, $attribs); ?>
</td>
</tr>
</table>
OPTION = "xhtml" выводит модули как простой элемент <DIV>. Ниже показан пример вывода:
<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
OPTION = "rounded" заставляет модули выводиться в формате, который позволяет сделать, например, масштабируемые закругленные углы. Если используется этот $style, название <DIV> изменяется с «moduletable» на «module». Ниже показан пример вывода:
<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
<div>
<div>
<div>
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
</div>
</div> OPTION = "none" заставляет модули выводиться в виде сырого продукта, не содержащего элементов и названия. Вот пример такого вывода:
echo $module->content;
Как мы можем видеть, варианты CSS (xhtml и rounded) заметно легче в коде и позволяют более свободно управлять стилем страницы. Я не рекомендую использовать параметры table или horz если только они не абсолютно необходимы.
Классная штуковина!
При внимательном рассмотрении файла modules.php можно найти все варианты вывода модулей. Не особенно сложно добавить с свой собственный вариант; эта возможность является мощной особенностью шаблонов версии 1.5. Мы рассмотрим это более детально в разделе о преобладании шаблонов.
Доработаем наш шаблон, указав стиль вывода модуля "xhtml" для всех наших модулей:
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg('sitename');?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="content">
<div class="inside">
<jdoc:include type="module" name="breadcrumbs" style="none" />
<jdoc:include type="component" /> </div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>
<!--end of wrap-->
</body> Заметьте, что мы не можем применить стили вывода модулей для <jdoc:include type="component">, потому что это не модуль.
Стоит заметить… В 1.5, можно полностью настроить вывод модулей или использовать предварительно сформированный вывод. Все эти варианты называются хромом модуля (chrome).
Кроме этого, поместили название участка в тег <H1>. Это семантически более правильно и полезно для SEO. Также давайте удалим фон из блоков разметки </div>.
Также добавим некоторые стили, для задания границы, фона и названия модуля.
Наш файл CSS теперь может выглядеть так:
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
#wrap {
border:1px solid #999;
}
#header {
border-bottom:1px solid #999;
}
#footer {
border-top:1px solid #999;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
h1,.componentheading {
font-size:1.7em;
}
h2,.contentheading {
font-size:1.5em;
}
h3 {
font-size:1.3em;
}
h4 {
font-size:1.2em;
}
h5 {
font-size:1.1em;
}
h6 {
font-size:1em;
font-weight:700;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption {
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable {
margin-bottom:1em;
border:1px #CCC solid;
padding:0 10px;
}
.moduletable h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em;
padding:0.25em 0;
}
Внимание! У нескольких меню в установке по умолчанию есть суффикс «menu» в свойствах модуля _menu. Чтобы все модули вели себя одинаково, я удалил этот параметр.
Правка CSS теперь приводит к результату, показанному на рис 9.6.
рис. 9.6. Шаблон со стилями модулей
Дальше »
|
Home