Действия

Модули в шаблоне

Материал из База знаний Joomla

Статья руководства Создание шаблона Joomla


Создание шаблона Joomla 1.0.х
Руководство

CMS Joomla - внешний вид

Оглавление учебника

Приложения

Любая перепечатка учебника или его части запрещена без согласия администрации Joom.ru


Модули расширяют возможности Joomla! и дают программам новую функциональность. Модули - небольшие объекты содержимого, которые могут быть отображены в любом месте шаблона, если это будет разрешено. Модули очень легко устанавливаются в "Панели управления" Joomla!. Joomla! уже включает в себя несколько модулей: "Главное меню" (Main Menu), "Верхнее меню" (Top menu), "Выбор шаблона" (Template Chooser), "Опросы" (Polls) и т.д.

Каждый модуль должен находиться в определённой позиции - в обозначенном месте шаблона, в котором модуль будет отображаться при просмотре сайта. Мы уже разбирали, какой командой выводится модуль, но я не упомянул о нескольких вариантах вывода модуля. Вообще, конструкция определения позиции в шаблоне имеет такой вид:

mosLoadModules('$position_name','$style')

где

  • $position_name - название позиции, в которой будет выведен модуль.
  • $style - определяет стиль вывода модуля. Варианты: 0, 1, -1, -2 или -3.

Стили 0 и 1 выводят каждый модуль в таблицах. Пример:

<table cellpadding="0" cellspacing="0" class="moduletable">
  <tr>
    <th valign="top">Заголовок модуля</th>
  </tr>
  <tr>
    <td>Вывод модуля</td>
  </tr>
</table>

Стиль -1 выводит модули без заголовка и без разметки. Пример:

Вывод модуля

Стиль -2 выводит модуль посредством единичного слоя. Пример:

<div class="moduletable">
  <h3>Заголовок модуля</h3>
  Вывод модуля
</div>

Стиль -3 выводит модуль через вложенные друг в друга слои. Такой стиль применяют, если хотят оформить модуль с закруглёнными углами (Руководство по созданию модулей с закруглёнными углами). Пример:

<div class="module">
  <div>
    <div>
	<div>
	  <h3>Заголовок модуля</h3>
	  Вывод модуля
      </div>
    </div>
  </div>
</div>

Вероятно, вы заметили, что варианты -1, -2 и -3 используют меньше кода, нежели варианты 0 и 1. Я рекомендую вам при выводе модулей использовать варианты -1, -2 или -3.

В своем шаблоне я решил использовать стиль -2:

<body>
<div id="wrap">
  <div id="header">
    <?php echo $mosConfig_sitename; ?>
    <?php mospathway() ?>
    <?php mosLoadModules('top',-2);?>
  </div>
  <div id="main-body">
    <div id="content">
      <div class="inside">
        <?php mosMainBody(); ?>
      </div>
    </div>
    <div id="sidebar">
      <div class="inside">
        <?php mosLoadModules('left',-2);?>
      </div>
    </div>
  </div><!--end of main-body-->
  <div id="sidebar-2">
    <div class="inside">
      <?php mosLoadModules('right',-2);?>
    </div>
  </div>
  <div id="footer">
    <?php include_once($mosConfig_absolute_path .'/includes/footer.php');?>
  </div>
</div> <!--end of wrap-->
</body>

Обратите внимание, что к следующим конструкциям нельзя применять стили вывода, поскольку они не являются модулями:

<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosMainBody(); ?>
<?php include_once( $mosConfig_absolute_path .'/includes/footer.php' ); ?>

Выбрав вывод модулей через слои, я в итоге уменьшил количество таблиц до 14. Остальные таблицы невозможно убрать без дополнительного кодинга в компонентах. А теперь давайте немного оформим вывод содержимого, чтобы результат выглядел приблизительно также, как на рисунке:

Шаблон CMS Joomla - вторая версия (после правки)

Для начала, разместим заголовок сайта в контейнере <h1></h1>, это поможет добиться большей индексации сайта поисковыми системами:

<h1><?php echo $mosConfig_sitename; ?></h1>

(а я бы не рекомендовал так делать, т.к. одинаковые заголовки h1 на всех страницах - это не очень хорошо и вряд ли поисковики будут больше любить ваш сайт - прим. sourpuss)

Далее, немного оформим модули, а также добавим границу верхней части шаблона. Теперь мой файл customize.css выглядит так:

/*Compass Design Customize.css file */
* {
	margin:0;
	padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{
	margin:0.5em 0;
}
ul{
	margin-left:2em;
}
fieldset{
	padding:.5em;
}
body{
	font-size:76.1%;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	line-height:1.3em;
	margin:1em 0;
}
#wrap{
	border:1px solid #999;
	background: url(../images/threecol-r.gif) repeat-y 75% 0;
	height:100% !Important;
	height:1%;
}
#wrap-inner {
	background: url(../images/threecol-l.gif) repeat-y 25.125% 0;
	height:100% !Important;
	height:1%;
}
#header{
	border-bottom: 1px solid #999;
	padding:10px;
}
#footer{
	border-top: 1px solid #999;
	padding:5px;
}
a{
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
h1,.componentheading{
	font-size:1.7em;
	line-height:1.7em;
}
h2,.contentheading{
	font-size:1.5em;
	line-height:1.5em;
}
h3{
	font-size:1.3em;
	line-height:1.3em;
}
h4{
	font-size:1.2em;
	line-height:1.2em;
}
h5{
	font-size:1.1em;
	line-height:1.1em;
}
h6{
	font-size:1em;
	line-height:1em;
	font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
	font:0.8em Arial,Helvetica,sans-serif;
	color:#999;
}
.moduletable{
	margin-bottom:1em;
	padding:0 10px; /*отступ от текста внутри модуля*/
	border:1px #CCC solid;
}
.moduletable h3{
	background:#666;
	color:#fff;
	padding:0.25em 0;
	text-align:center;
	font-size:1.1em;
	margin:0 -10px 0.5em -10px;
/*отрицательный margin нужен для вписывания h3 в слой .moduletable (компенсация padding)*/
}


Вернуться: Создание шаблона: CSS и HTMLДалее: Создание меню