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

Версия для печати

Материал из База знаний 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Далее: Создание меню
Получено с http://www.joomla-docs.ru/%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D0%B8_%D0%B2_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B5
К этой странице обращались 66 074 раз(а).
Последнее изменение этой страницы: 13:00, 5 августа 2007.
Вернуться
Поддержка Joomla!