Печать

Создаем шаблон Joomlа по стандартам - прячем колонки

До сих пор мы подразумевали, что наш дизайн будет всегда содержать три колонки, не зависимо от того, содержат ли они какой-то контент. С точки зрения шаблона Joomla, это не очень удобно. В статическом сайте контент никогда не изменяется, но мы хотим предоставить администраторам сайта возможность размещать свой контент в любом месте, где они захотят, и чтобы не нужно было при этом заботиться о редактировании CSS-разметки. Нам нужна возможность «выключать» колонку автоматически или «свертывать» ее, если она не содержит контента.

При разработке движка шаблонов в Joomla 1.5 было сделано множество улучшений. Процитируем непосредственно блог разработчиков Joomla:

Изменения в системе шаблонов в Joomla 1.5 можно разбить на две категории. Прежде всего, есть изменения в том, как делались раньше некоторые вещи в Joomla 1.0, например новый способ загрузки модулей, а во вторых, было добавлено много новых функций, например, параметры шаблонов.
mosCountModules
Функция mosCountModules заменена на функцию $this->countModules и в нее добавлена поддержка условий. Это позволяет разработчикам легко подсчитать общее количество модулей в различных позициях шаблона с помощью одной строки кода, например, $this->countModules('user1 + user2') возвратит общеее количество модулей в позициях user1 и user2.

Примечание
Дополнительная информация доступна в форуме Joomla.

Таким образом, типовое использование countModules будет:

<?php if($this->countModules('condition')) : ?>
   do something
<?php else : ?>
   do something else
<?php endif; ?>


Существуют 4 возможных условия. В качестве примера, давайте подсчитаем количество модулей на предыдущем рисунке. Мы должны вставить этот код куда-нибудь в index.php:

left=<?php echo $this->countModules('left');?><br />
left and right=<?php echo $this->countModules('left and right');?><br />
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right');?>

 

  • countModules('left'). Возваращает 4; слева размещены 4 модуля.
  • countModules('left and right'). Возвращает 1; один модуль присутствует и в левой и в правой позиции.
  • countModules('left or right'). Возвращает 1; один модуль присутствует в левой или в правой позиции.
  • countModules('left + right'). Возвращает 7; подсчитывает все модули в левой и правой позиции

В этой ситуации нам нужна функция, которая позволят подсчитать модули, присутствующие в определенной позиции. Например, если нет контента, опубликованного в правой колонке, мы можем скорректировать размеры колонки, чтобы заполнить это пространство.

Существует несколько способов сделать это. Мы можем вставить условное выражение в body, чтобы не отображать контент, и определить различные стили для контента в зависимости от того, в какой колонке он находится. Для максимального удобства я определил несколько условных выражение в теге head, чтобы варьировать некоторые CSS-стили:

<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

Итак считаем:

  • Если ничего нет слева или справа, имеем 100%
  • Если что-то есть слева или справа, имеем 80%
  • Если что-то есть и слева и справа, имеем 60%

После этого нужно изменить div для контента в index.php следующим образом:

  <div id="content<?php echo $contentwidth; ?>">

При этом изменим CSS-разметку следующим образом:

#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}

Условное выражение PHP должно быть прописано в head сразу после появления ссылки на файл template.css. Это связано с тем, что когда встречаются два одинаковых правила CSS, будет выполняться последнее из них. Это можно было бы сделать в похожем стиле, используя выражение if при импорте CSS-файла.

Подсказка:
При решении проблем с условными выражениями полезно бывает вставить такую строчку кода в index.php, чтобы отображать значение переменной:

Ширина колонки контента: <?php echo $contentwidth; ?>%

Мы уже на полпути, но нам еще нужно очистить контейнеры div, в которых содержатся колонки.

Прячем код модулей

При создании «свертываемых» колонок хорошей практикой будет добиваться того, чтобы модули не генерировались, если для них нет контента. Если этого не сделать, страницы будут иметь пустые <div></div>, которые могут привести к кросс-браузерным проблемам.

Чтобы спрятать пустые <div>, используется следующее выражение:

  <?php if($this->countModules('left')) : ?>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <?php endif; ?>

При использовании этого кода, если ничего не должно быть опубликовано слева, то и <div id=«sidebar»> тоже не будет отображаться.

С использованием этих техник для левой и правой колонки наш index.php будет выглядеть следующим образом. Мы также добавли include для модуля breadcrumbs, который отображает текущую страницу и путь к ней по сайту. Обратите внимание, что он теперь также должен быть включен в index.php и опубликован в виде модуля.

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<?php if($this->countModules('left and right') == 0) $contentwidth = "100"; if($this->countModules('left or right') == 1) $contentwidth = "80"; if($this->countModules('left and right') == 1) $contentwidth = "60"; ?>
</head>
<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>
  <?php if($this->countModules('left')) : ?>
  <div id="sidebar">     <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />     </div>
  </div>
  <?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">     <div class="inside">
      <jdoc:include type="module" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />     </div>
  </div>
<?php if($this->countModules('right')) : ?>
  <div id="sidebar-2">     <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />     </div>
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer')) : ?>
  <div id="footer">     <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />     </div>
  </div>
  <?php endif; ?>
<!--end of wrap-->
</body>
</html>

Что необходимо знать

Такие элементы, как колонки или позиции для модулей, могут быть скрыты (или свернуты), когда для них нет контента. Это делаеся с помощью условных выражений PHP, которые свящываются с различными CSS-стилями.

Я бы порекомендоавл немного другой способ отображения подвала. В том стиле, который продемонстрирован здесь, он жестко прописан в файле index.php, что затрудяет внесение изменений. В настоящий момент модуль «footer» в админстративном интерфейсе показывает копирайт Joomla и не может быть легко изменен. Имеет смысл создать свой (X)HTML модуль, расположенный в позиции «footer», так, чтобы адмнистратор сайта, мог его легко изменять. Если вы хотите отобразить свой собственный подвал, вы просто отключаете отображение этого модуля и создаете свой модуль custom html на том языке, на котором захотите.

В данном случае мы заменяем

      <jdoc:include type="modules" name="footer" style="xhtml" />

на

      <jdoc:include type="modules" name="bottom" style="xhtml" />

Мы также должны помнить, что нужно добавить эту позицию в файл templateDetails.xml.

Подсказка:
  Есть ряд имен, связанных с модулями в Joomla: banner, left, right, user1, footer и т.д. Важно понимать, что эти имена вовсе не отвечают за определенное местоположение. Вы можете разместить их в месте, которое соответствует по значению своему имени, но это не обязательно.

Интересная статья? Поделись ей с другими: