Практическое руководство. Настройка стилей
Дата последнего изменения: 4 апреля 2010 г.
Применимо к: SharePoint Server 2010
Во многих случаях дизайнеры хотят сохранить внешний вид веб-страницы, применяя определенные настраиваемые стили к содержимому страницы. При этом можно изменить определение таблиц стилей, чтобы поменять внешний вид страницы без влияния на содержимое страницы в будущем. HTML-редактор Microsoft SharePoint Server 2010 позволяет создателю страницы применять настраиваемые стили к контенту, используя предварительно заданный список стилей, предоставленных дизайнером.
По умолчанию HTML-редактор представляет набор стилей по умолчанию, но дизайнер разметки страницы может заменить его, добавив ссылки на таблицы стилей в разметку. Если HTML-редактор обнаруживает новые классы каскадных таблиц стилей (CSS), в именах которых есть префикс ms-rteCustom-XXXX, где XXXX — это отображаемое имя классов, уникальное для страницы, он отображает новый набор настраиваемых стилей вместо набора по умолчанию.
HTML-редактор обнаруживает классы, связанные с определенными тегами, и показывает их пользователю, только если выбран заданный контент. В раскрывающемся меню всегда отображаются стили, не заданные для определенного тега. Например, дизайнер разметки страницы может сделать следующий настраиваемый стиль доступным для создателя страницы с помощью CSS-файла, включенного в разметку страницы. Если автор редактирует страницу, созданную на основе разметки, он может нажат кнопку Выбрать на панели инструментов HTML-редактора для выделения списка на странице, нажать кнопку Стиль и выбрать стиль, показанный в фрагменте кода, чтобы применить его к выбранному списку.
Ol.ms-rteCustom-RomanNumberList {
font-family:Times New Roman; font-size:10pt; color:#000000;
text-indent:0; text-align:left; list- style-type:upper-roman;
margin-left:30; margin-right:10; padding-left:10px; margin-top:1;
text-transform:capitalize
Можно указать уникальный префикс имени CSS-класса для каждого публикуемого HTML-элемента управления полем, чтобы можно было представить различные настраиваемые стили для различных разделов страницы.
В разметке страницы, где определен элемент управления RichHTMLField, можно переопределить свойство PrefixStyleSheet. Например, если использовать следующий код, HTML-редактор выполнит поиск CSS-классов с префиксом PageContentStyleCustom с применением соответствующего синтаксиса CSS:
<PublishingWebControls:RichHtmlField id="Content" FieldName="PublishingPageContent" runat="server" PrefixStyleSheet-"PageContentStyle"/>
Если HTML-редактор находит настраиваемые стили с этим префиксом, он отображает стили в раскрывающемся списке Стили в соответствии с текущим выбором.
Настройка стилей веб-частей "Сводные ссылки", "Содержание" и "Контент по запросу"
Элемент управления "Сводные ссылки" и веб-часть "Контент по запросу" отображают на странице созданные ссылки. Эти ссылки можно создавать на основе набора стилей, доступных на веб-сайте.
Веб-части "Содержание" и "Контент по запросу" отображают представления навигации на основе данных. Обе веб-части могут отображать запросы контента сайта. Также можно изменить стиль элементов и заголовков групп в этих веб-частях так, чтобы они использовали для отображения набор доступных стилей.
SharePoint Server 2010 использует таблицы XSL-стилей для отображения этих веб-частей. Можно настроить и изменить стили в соответствии с фирменным стилем веб-сайта.
В таблице 1 показано сопоставление файлов таблиц XSL-стилей и соответствующих веб-частей.
Таблица 1. Сопоставление файлов таблиц XSL-стилей и соответствующих веб-частей
Таблица XSL-стилей |
Назначение |
Соответствующая веб-часть |
|---|---|---|
ContentQueryMain.xsl |
Таблица XSL-стилей "Application" |
Запрос контента |
Header.xsl |
Заголовки групп для веб-частей "Контент по запросу" и "Сводные ссылки", заголовки для веб-части "Содержание" |
"Контент по запросу", "Сводные ссылки", "Содержание" |
ItemStyle.xsl |
Стили элементов веб-частей "Контент по запросу" и "Сводные ссылки" |
"Контент по запросу", "Сводные ссылки" |
LevelStyle.xsl |
Стили уровней веб-части "Содержание", которые содержат сайт и его страницы |
Содержание |
SummaryLinkMain.xsl |
XSL-стиль "Application" для веб-части "Сводные ссылки" |
Сводные ссылки |
TableOfContentsMain.xsl |
XSL-стиль "Application" для содержания |
Содержание |
Процедуры
Поиск и изменение стилей веб-части "Сводные ссылки"
Зайдите на домашнюю страницу веб-сайта и нажмите кнопку Просмотреть весь контент сайта.
Выберите Библиотека стилей.
Выберите Таблицы XSL-стилей для отображения списка XSL-файлов в библиотеке стилей для всех трех веб-частей.
Для просмотра примера откройте файл ItemStyle.xsl, чтобы изменить его. ItemStyle.xsl управляет отображением элементов веб-части "Сводные ссылки" и "Контент по запросу". Затем рассмотрите структуру и содержимое файла.
XSL-шаблон — это простая HTML-разметка с несколькими переменными (@ImageURL, @LinkURL, @Description и т. д.).
Данные веб-части "Сводные ссылки" можно показывать и скрывать, добавляя и удаляя эти переменные.
Кроме того, можно изменить, как окружающий HTML-код отображает эти переменные.
Каждый XSL-шаблон сопоставляется с одним стилем, который выбирается автором.
В первом разделе примера кода представлены XSL-шаблоны, которые вызывает SharePoint Server 2010, которым передаются данные и из которых извлекаются измененные версии данных.
В этом разделе содержится отображаемый HTML-код с результатом функций:
<xsl:template name="Default" match="*" mode="itemstyle"> // This section includes a set of functions, or xsl templates, which SharePoint Server 2010 calls, passes data into, and gets modified versions of the data from. The product does this primarily to improve security. <xsl:variable name="SafeLinkUrl"> <xsl:call-template name="OuterTemplate.GetSafeLink"> <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="SafeImageUrl"> <xsl:call-template name="OuterTemplate.GetSafeStaticUrl"> <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="DisplayTitle"> <xsl:call-template name="OuterTemplate.GetTitle"> <xsl:with-param name="Title" select="@Title"/> <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="LinkTarget"> <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if> </xsl:variable> // Includes the rendered HTML with the results of the functions. <div id="linkitem" class="item"> <xsl:if test="string-length($SafeImageUrl) != 0"> <div class="image-area-left"> <a href="{$SafeLinkUrl}" target="{$LinkTarget}"> <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" /> </a> </div> </xsl:if> <div class="link-item"> <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/> <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}"> <xsl:value-of select="$DisplayTitle"/> </a> <div class="description"> <xsl:value-of select="@Description" /> </div> </div> </div> </xsl:template>
Создание нового стиля
Повторите действия 1-4 из предыдущей процедуры для перехода к файлу ItemStyle.xsl.
Откройте файл ItemStyle.xsl и добавьте следующий код.
<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle"> </xsl:template>Добавьте имя шаблона, переменные, сведения о параметрах и другую информацию между открывающими и закрывающими тегами в файле ItemStyle.xsl, как это необходимо.
Добавьте HTML-код и соответствующие XSL-операторы для отображения переменных в веб-части.