пятница, 8 апреля 2011 г.

Создание сайта. Шаг 6. Добавление на сайт меню

Добавьте несколько страниц на сайт.

Теперь пришло время добавить на сайт меню, для ориентации на сайте.

Мы должны написать свой модуль. Есть несколько способов для этого. Написать модуль на C# и подключить его или воспользоваться стандартным механизмом Umbraco и написать функционал с применением XSLT.

Входим в систему управления, переходим в раздел "Developer", находи раздел "XSLT Files", нажимаем правую кнопку мыши, появляется всплывающее меню:


Выбираем "Create":


 Вводим в поле "Filename (without .xslt)" название файла "Верхнее меню". В поле "Choose a template"выбираем шаблон "List Sub Pages By Level". Разработчики системы управления, позаботились о том, что бы мы не писали стандартные куски кода, и добавили шаблоны! "List Sub Pages By Level" этот шаблон создает скрипт, который выводит список страниц по уровню вложенности.

Нажимаем "Create" в итоге появится  следующий скрипт:


Для того что бы наш скрипт заработал, надо подправить единственный параметр

<xsl:variable name="level" select="1"/>

Значение 1 соответствует уровню страниц, второго уровня (нумерация идет с нуля), то есть я предполагаю, что все страницы у нас будут наследоваться от главной:



Нажимаем кнопку "Сохранить".
После добавления нашего скрипта, создалась еще одна сущность "Macros" (Макрос):


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

Теперь мы должны добавить наш модуль, а точнее "Макрос" в шаблон. Т.к. меню у нас должно быть на всех страницах, а не только на "Текстовой странице", то добавим Макрос в "Базовый шаблон".

Для этого переходим в раздел "Settings", выбираем раздел "Templates", выбираем "Базовый шаблон". На панели управления нажимаем кнопку (4):


И добавляем наш макрос "Верхнее меню", в итоге код нашего шаблона будет выглядеть следующем образом:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

<xsl:output method="xml" omit-xml-declaration="yes" />

<xsl:param name="currentPage"/>

<!-- Input the documenttype you want here -->
<xsl:variable name="level" select="1"/>

<xsl:template match="/">

<!-- The fun starts here -->
<ul>
<xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
  <li>
    <a href="{umbraco.library:NiceUrl(@id)}">
      <xsl:value-of select="@nodeName"/>
    </a>
  </li>
</xsl:for-each>
</ul>

</xsl:template>

</xsl:stylesheet>​

Нажмите кнопку "Сохранить" (1).

Теперь перейдите на сайт и попробуйте воспользоваться меню.

1 комментарий:

  1. Алексей, жалко Вы остановили свои публикации - лично мне ваш блог очень помог разобраться с Umbraco. Большое спасибо за проделанную работу. Очень надеюсь, что публикации продолжаться ))

    ОтветитьУдалить