При создании этого шаблона, в наши задачи входит оформить 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
. Интересующие нас поля уже есть в результате возвращаемом в формате 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>