Логотип

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

Верстка шаблона разметки

При создании этого шаблона, в наши задачи входит оформить html-код используемых страниц нашего сайта и указать куда именно мы будем выводить результаты работы задействованных модулей.

Создадим в папке ~/xstTpls/ файл default.xsl и назначим его основным шаблоном в настройках модуля "Структура":

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html" version="4.01"
       encoding="utf-8"
       indent="yes"/>

  <xsl:template match="/">

   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

      <head>
        
      </head>

      <body>

        <div id="main">

          <div id="header">
            <div>
              <a href="/">Здесь можно разместить логотип</a>
            </div>
          </div>

          <div id="menu-sect">

            <div id="menu">
             
            </div>
          </div>

          <div id="page">

            <div id="left"> 
             
            </div>

            <div id="content">
              
              <div class="clear" />
            </div>

            <div class="clear" />
          </div>

          <div id="footer">
            <div class="copyright"> Тестовый сайт: пример создания ленты новостей на xslt-шаблонизаторе</div>
            <div class="developer"> Разработано:
              <a href="http://www.umi-cms.ru">
                <img src="/img/umicms.png" width="89" height="35" alt="UMI.CMS" align="middle" />
              </a>
            </div>
          </div>

        </div>
      </body>

   </html>
  
  </xsl:template>

</xsl:stylesheet>

Содержимое тега head и меню

Разберемся сначала с выводом данных, не имеющих непосредственное отношение к новостям:

  • Содержимое тега head. Интересующие нас поля уже есть в результате возвращаемом в формате UMI Data: это result/@title, result/meta/description и result/meta/keywords. Поэтому нужно вставить вывод их в соответствующие места шаблона:

    <head>
     <title>
        <xsl:value-of select="/result/@title" />
     </title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="DESCRIPTION" content="{/result/meta/description}" />
     <meta name="KEYWORDS" content="{/result/meta/keywords}" />
     <link type="text/css" rel="stylesheet" href="/css/style.css" />
    </head>
  • Вывод меню. Для удобства создадим дополнительный шаблон, который подключим к default.xsl при помощи <xsl:include href="imports/menu.xsl" />. Этот шаблон будет обрабатывать результаты макроса %content menu()%. Указываем место выводов результатов — <xsl:apply-templates select="document('udata://content/menu/')/udata" mode="site-menu" /> в default.xsl и в файле menu.xsl можем набрать примерно следующее:

    <?xml version="1.0" encoding="UTF-8"?>
    
    <xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    
     <xsl:template match="udata[@module = 'content'][@method = 'menu']" mode="site-menu">
      <ul>
        <xsl:apply-templates select="items/item" mode="site-menu" />
      </ul>
     </xsl:template>
    
     <xsl:template match="item" mode="site-menu">
      <li>
        <a href="{@link}">
            <xsl:value-of select="."/>
        </a>
      </li>
     </xsl:template>
    
    </xsl:stylesheet>

    Условие match="udata[@module = 'content'][@method = 'menu']" вместе с mode="site-menu" указывает, что именно этот шаблон будет применен к результатам работы макроса %content menu()%. Сам шаблон приводится здесь исключительно для примера, его можно переоформить в соответствии с представлениями о том, как должно выглядеть меню для конкретного сайта.

Левая и центральная колонка

Оформление результатов в этих случаях будет задаваться шаблонами в отдельном файле news.xsl, который мы подключим к default.xsl при помощи <xsl:include href="imports/news.xsl" />.

Для различения применяемых шаблонов зададим для левой колонки mode="leftcol" и применим <xsl:apply-templates select="result" /> в нужных местах:

...

<div id="page">

  <div id="left"> 
     <xsl:apply-templates select="result" mode="leftcol" />
  </div>

  <div id="content">
    <xsl:apply-templates select="result" />
    <div class="clear" />
  </div>

  <div class="clear" />
</div>

...

Сами шаблоны мы опишем далее, сейчас отметим лишь то, что в них будут вызовы макросов других модулей, и шаблоны для обработки результатов этих вызовов мы так же подключим в default.xsl:

...

  <xsl:include href="imports/dispatches.xsl" />
  <xsl:include href="imports/comments.xsl" />
  <xsl:include href="imports/utils.xsl" />

...

Итоговый вариант шаблона разметки

Файл default.xsl:

<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html" version="4.01"
encoding="utf-8"
indent="yes"/>

  <xsl:include href="imports/menu.xsl" />
  <xsl:include href="imports/news.xsl" />
  <xsl:include href="imports/dispatches.xsl" />
  <xsl:include href="imports/comments.xsl" />
  <xsl:include href="imports/utils.xsl" />
  
  <xsl:template match="/">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

      <head>
        <title><xsl:value-of select="/result/@title" /></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="DESCRIPTION" content="{/result/meta/description}" />
        <meta name="KEYWORDS" content="{/result/meta/keywords}" />
        <link type="text/css" rel="stylesheet" href="/css/style.css" />
      </head>

      <body>
        <div id="main">

          <div id="header">
            <div>
              <a href="/">Здесь можно разместить логотип</a>
            </div>
          </div>

          <div id="menu-sect">
           <div id="menu">
             <xsl:apply-templates select="document('udata://content/menu/')/udata" mode="site-menu" />
           </div>
          </div>

          <div id="page">

            <div id="left"> 
              <xsl:apply-templates select="result" mode="leftcol" />
            </div>

            <div id="content">
              <xsl:apply-templates select="result" />
              <div class="clear" />
            </div>

            <div class="clear" />
          </div>

          <div id="footer">
            <div class="copyright"> Тестовый сайт: пример создания ленты новостей на xslt-шаблонизаторе</div>
            <div class="developer"> Разработано:
              <a href="http://www.umi-cms.ru">
              <img src="/img/umicms.png" width="89" height="35" alt="UMI.CMS" align="middle" />
              </a>
            </div>
          </div>

        </div>
      </body>
  
  </html>
  
</xsl:stylesheet>