Логотип

Документация по макросам и шаблонам UMI.CMS

Руководство пользователя Документация по API

Создание и подключение TPL-шаблона

См. также "Подключение мобильных версий шаблонов".

Проще всего делать шаблоны на основе уже сверстанных в HTML статических страниц. Рассмотрим создание и подключение шаблона на примере. Допустим, уже есть HTML-файл такого содержания:

<html>
  <head>
     <meta name="description" content="описание сайта Василия Пупкина" />
     <meta name="keywords" content="Вася Василий Пупкин официальный сайт" />
     <title>Сайт Васи Пупкина: Главная страница</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>

  // начало меню
     <table border="1">
        <tr>
          <td><a href="/"><b>Главная</b></a></td>
        </tr>

        <tr>
          <td><a href="/about/">Обо мне</a></td>
        </tr>

        <tr>
          <td><a href="/me_and_me/">Я и мировое господство</a></td>
        </tr>

        <tr>
          <td><a href="/contacts/">Контакты</a></td>
        </tr>
     </table>
  // конец  меню


     <h1>Главная страница</h1>

     <p>Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: </p>
     <p>Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: </p>
     <p>Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: </p>
     <p>Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: </p>

  </body>
</html>

Для того, чтобы добавить шаблон в CMS, нужно создать файл в директории tpls/content, например, test.tpl, и вставить туда ваш HTML-код. CSS-файл следует положить в папку css/cms и назвать style.css. Изображения желательно положить в папку images. Не забудьте поменять пути ко всем изображениям и CSS-файлам.

Замечание

В названии файла шаблона нельзя использовать русские буквы!

Чтобы система «увидела» новый шаблон и начала использовать его для вывода страниц, шаблон необходимо добавить в систему. Для этого следует зайти в настройки модуля «Структура», вкладка «Шаблоны» (http://yourdomain.ru/admin/content/config/). Вы увидите список уже установленных шаблонов в каждом домене, которые существуют в выбранной языковой версии.

Чтобы подключить новый файл шаблона, заполните в самой нижней свободной строке поля «Название шаблона» (дайте ему какое-нибудь осмысленное название, например «Мой тестовый шаблон») и «Имя файла» (в нашем случае, test.tpl) и нажмите кнопку «Сохранить».

Если вы хотите, чтобы этот шаблон использовался в качестве шаблона по умолчанию, поставьте напротив него отметку «Основной». Теперь этот шаблон будет выбран по умолчанию в выпадающем списке выбора шаблонов. Так же он будет использоваться для вывода системных страниц, которые используют шаблон по умолчанию (Регистрация, Восстановление пароля, Карта сайта).

Шаблоны будут видны в выпадающем списке при редактировании каждой страницы:

Таким образом, на одном сайте можно одновременно использовать много шаблонов, выбирая подходящий шаблон как для отдельной страницы, так и для группы страниц.

Попробуйте создать новую страницу (убедитесь, что в опции «Шаблон дизайна» выбран новый шаблон) и посмотрите, что получилось на сайте.

На сайте должен появиться ваш HTML-шаблон. Но сейчас он статический. Теперь вам надо сделать его динамическим.

Для начала надо определить, какие части HTML-кода будут изменяться. В нашем случае изменяться будут:

  • заголовок окна <title>;

  • мета-теги keywords и description;

  • заголовок текста <h1>;

  • собственно текст;

  • меню сайта.

Значит, предстоит немного поработать с HTML-шаблоном и вместо изменяющихся участков поставить соответствующие макросы.

Например, в начале HTML-файла заданы мета-теги и тайтл:

<meta name="description" content="описание сайта Василия Пупкина" />
<meta name="keywords" content="Вася Василий Пупкин официальный сайт" />
 <title>Сайт Васи Пупкина: Главная страница</title>

Заменяем их на соответствующие макросы (список макросов дан в приложении):

<meta name="description" content="%description%" />
<meta name="keywords" content="%keywords%" />
<title>%title%</title>

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

Аналогично поступим с заголовком текста. Было так:

<h1>Главная страница</h1>

А станет так. Заголовок текста выводится макросом %header%:

<h1>%header%</h1>

Основной текст страницы тоже изменяется:

<p>Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: </p>
<p>Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: </p>
<p>Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: </p>
<p>Текст обо мне: Текст обо мне: Текст обо мне: Текст обо мне: </p>

Для вывода основного текста страницы есть макрос %content%:

     %content%

В начало файла между тегами <head> и </head> вставляем макрос:

%system includeQuickEditJs()%

Эта строчка подключает функцию быстрого редактирования и другие полезные возможности. При помощи нее вы сможете, нажав Shift+D, быстро перейти к правке текущей страницы сайта или каких-либо ее фрагментов.

В итоге должно получиться следующее:

<html>
  <head>
    <meta name="description" content="%description%" />
    <meta name="keywords" content="%keywords%" />
    <title>%title%</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    %system includeQuickEditJs()%

  </head>
  <body>

  // начало меню
    <table border="1">
      <tr>
        <td><a href="/"><b>Главная</b></a></td>
      </tr>
 
      <tr>
        <td><a href="/about/">О компании</a></td>
      </tr>

      <tr>
        <td><a href="/projects/">Проекты</a></td>
      </tr>

      <tr>
        <td><a href="/contacts/">Контакты</a></td>
      </tr>
    </table>
  // конец  меню

    <h1>%header%</h1>

    %content%

  </body>
</html>

Итак, мы сохраняем файл шаблона и смотрим на результат. Теперь страница практически полностью динамическая, за исключением меню. Предстоит «оживить» меню сайта. Посмотрим как сверстано меню:

// начало меню
    <table border="1">
       <tr>
         <td><a href="/"><b>Главная</b></a></td>
       </tr>
 
       <tr>
         <td><a href="/about/">Обо мне</a></td>
       </tr>
 
       <tr>
         <td><a href="/me_and_me/">Я и мировое господство</a></td>
       </tr>
 
       <tr>
         <td><a href="/contacts/">Контакты</a></td>
       </tr>
    </table>
// конец  меню

Меню состоит из пунктов. Само меню как-то оформлено, и у пунктов тоже есть оформление. Например, у всего меню может быть некая рамка или фон, текущий пункт меню может быть выделен жирным и т.п. Также в одном меню могут быть разные уровни.

Выделим обрамление меню:

// начало меню
    <table border="1">
 
      <!-здесь пойдут пункты меню -->
 
    </table>
// конец  меню

Пункт меню оформлен так:

<tr>
    <td><a href="/contacts/">Контакты</a></td>
</tr>

Текущий пункт меню оформлен по-другому:

<tr>
    <td><a href="/"><b>Главная</b></a></td>
</tr>

Исходный шаблон меню находится в файле /tpls/content/menu/default.tpl и выглядит так:

<?php
$FORMS = Array();
 
$FORMS['menu_block_level1'] = <<<END
 
%lines%
 
END;
 

$FORMS['menu_line_level1'] = <<<END
   <div class="menu">
     <a href="%link%" class="menu">%text%</a>
   </div>
END;


$FORMS['menu_line_level1_a'] = <<<END
   <div class="menu_a">
     <span class="menu_a">%text%</span>
   </div>
END;
?>

Вначале немного непонятно. На самом деле, все очень просто. Посмотрим на первую часть кода:

$FORMS['menu_block_level1'] = <<<END

%lines%

END;

Это блок, который называется menu_block_level1. Есть всего 3 типа таких блоков.

  • menu_block_level1 ― содержит HTML-обрамление меню;

  • menu_line_level1 ― содержит HTML-код пункта меню;

  • menu_line_level1_a ― то же самое, что и menu_line_level1, только используется для активного пункта меню.

Все, что расположено между <<<END и END; воспринимается, как html-шаблон (для всего меню или для отдельного пункта).

При генерации меню, система берет шаблоны пунктов (например, menu_line_level1), и ставит их друг за другом. Получается HTML-код, в котором содержатся все пункты меню. Этот код вставляется вместо макроса %lines%.

Итак, необходимо проставить код, который мы выделили выше (обрамление, пункты меню) в соответствующие блоки. Должно получиться примерно так:

<?php
$FORMS = Array();
 
$FORMS['menu_block_level1'] = <<<END

  <table border="1">

     %lines%

  </table>

END;

 
$FORMS['menu_line_level1'] = <<<END

   <tr>
     <td><a href="%link%">%text%</a></td>
   </tr>

END;


$FORMS['menu_line_level1_a'] = <<<END

   <tr>
     <td><a href="%link%"><b>%text%</b></a></td>
   </tr>

END;
?>

Мы уже знаем, что вместо %lines% система подставляет пункты меню с их HTML-обрамлением. Нам встретились новые макросы. Вместо %link% вставляется URL пункта меню, а вместо %text% ― текст (определяется в поле «название страницы»).

Теперь меню можно вставить в шаблон страницы макросом %menu%::

<html>
   <head>
      <meta name="description" content="%description%" />
      <meta name="keywords" content="%keywords%" />
      <title>%title%</title>
      <link href="style.css" rel="stylesheet" type="text/css" />

      %system includeQuickEditJs()%

   </head>
   <body>
 
       // начало меню

          %menu%

       // конец  меню
 
       <h1>%header%</h1>
 
       %content%

   </body>
</html>

Шаблон готов.

Если вы хотите на каких-то страницах сайта выводить меню по другому шаблону, нужно создать еще один файл с шаблоном меню в той же папке. Например, menu2.tpl. Соответственно, при подключении меню к шаблону страницы вместо %menu% надо написать немного по-другому: %content menu('menu2')%.

Работа этого и других макросов подробно описана в текущей документации. Работа с ними строится точно по такому же принципу: вы разбиваете необходимый кусок HTML-шаблона на отдельные части, подставляете в соответствующие блоки нужных шаблонов, вставляете на место этого куска соответствующий макрос и он начинает работать.

Важно учитывать: не стоит размещать несколько макросов на одной строке. Вложенные макросы могут не сработать в качестве аргумента у других макросов.

Была ли данная статья полезна?

© UMI.CMS 2024