Фрагменты кода в Дизайнере SharePoint
Важно!
Такая расширяемость доступна только для классического интерфейса SharePoint. Эту возможность нельзя использовать вместе с современным интерфейсом в SharePoint Online, например на сайтах для общения. Мы больше не рекомендуем использовать классический интерфейс или эти методы брендирования.
Фрагмент кода — это HTML-представление компонента или элемента управления SharePoint, например панели навигации или веб-части. С помощью коллекции фрагментов кода в Дизайнере можно быстро добавить функциональные возможности SharePoint на эталонную страницу HTML или макет страницы.
Общие сведения о фрагментах кода и коллекции фрагментов кода
После преобразования главную страницу или создание макета страницы, у вас есть HTML-версии этой страницы. С помощью коллекция фрагментов кода можно быстро добавить определенных функций SharePoint, например поиска или навигации или каналов устройств для HTML-файла, связанного с главной странице или макету страницы. Коллекция фрагментов кода представляет собой страницу в диспетчере оформления которых можно:
Выберите компонент SharePoint от тех, которые доступны на ленте.
Настройка свойств для этого компонента.
Скопируйте фрагмент кода HTML в буфер обмена, чтобы можно было вставить фрагмент в расположении в HTML-файл.
Коллекция фрагментов кода отображает различные параметры на ленте, в зависимости от того, редактируете ли вы эталонную страницу или макет страницы. Например, элементы управления навигацией отображаются только для эталонных страниц, а зоны веб-частей и элементы управления полями страниц отображаются только для макетов страниц. Кроме того при изменении макета страницы полей страниц, доступных зависят от типа контента макета страницы, который требуется изменить.
После вставки фрагмента кода в HTML-файл, вы получаете разработки preview из HTML, представленные в примере. Также можно использовать preview на сервере в диспетчере оформления чтобы увидеть, как будет выглядеть элемент управления действующего сайта. Предварительный просмотр разработки может включать статические демонстрационных данных, но preview на сервере с помощью динамических данных, если он доступен. Например элемент управления навигации, которая отображает ссылки для перехода из набора терминов динамически отображать эти термины в предварительной версии на сервере, но предварительного просмотра во время разработки будет статический условия во время создания фрагмента. Однако данные в реальном времени недоступны в предварительной версии на сервере для некоторых фрагментов кода, включая многие веб-части. В этом случае preview на сервере может сказать Предварительной версии недоступно.
Примечание.
[!Примечание] Содержит фрагмент HTML-разметку, можно просмотреть во время разработки в редакторе HTML, но HTML-разметку содержатся в «запуск предварительного просмотра» и «предварительный просмотр плана» комментарии нельзя изменять так, как оно затрагивает только предварительного просмотра во время разработки, не как SharePoint воспроизводится в конечном счете фрагмента. Вместо этого стиля фрагмент кода, обычно необходимо определить и переопределения стилей SharePoint по умолчанию, которые применяются к фрагмента.
Вставить фрагмент кода из коллекции фрагментов кода
Коллекция фрагментов кода отображает различные параметры в зависимости от файла, который требуется изменить. Например другой страницы макетов иметь различные наборы поля страниц, доступных для них. По этой причине для перехода к коллекция фрагментов кода, сначала нужно выбрать главную страницу или макет страницы для редактирования.
Вставка фрагмента кода
Перейдите на сайт публикации.
Нажмите значок шестеренки "Параметры" в правом верхнем углу страницы, а затем выберите Дизайнер.
В диспетчере оформления на левой панели навигации слева выберите Изменить главную страницу или Изменение макетов страниц, в зависимости от того, какой тип файла требуется изменить.
Выберите имя главной страницы или макет страницы, который вы хотите добавить фрагменты кода для.
Чтобы открыть коллекцию фрагментов, выберите Фрагменты в правом верхнем углу страницы предварительного просмотра на стороне сервера.
На ленте перейдите на вкладку Конструктор выберите фрагмент, который нужно добавить на страницу.
При выборе фрагмента кода коллекция фрагментов кода обновляется, поэтому на странице отображаются свойства, доступные для этого фрагмента, и фрагмент кода HTML, который можно скопировать на эталонную страницу HTML или макет страницы.
Примечание.
Предварительный просмотр коллекции фрагментов кода устарел и не показывает предварительную версию выбранного фрагмента при обновлении.
В разделе Об этом компоненте в правой части коллекции фрагментов щелкните или выберите заголовок раздела, чтобы развернуть или свернуть группу свойств, а затем настройте все нужные настраиваемые параметры.
В верхнем разделе с именем важные отображаются свойства, которые являются наиболее важные для основных целей фрагмента. Далее представлены ключевые свойства, которые необходимо изучить при использовании фрагмент.
Примечание.
Если сетка свойств заголовка, который заканчивается на AjaxDelta, так как они применяются к элементам управления, связанные с минимальной загрузки стратегической, которое отключено главные страницы и макеты страниц, созданные через дизайнер следует игнорировать этих свойств.
После настройки всех свойств выберите обновление. При этом обновляется фрагмент HTML в левой части страницы, чтобы разметка отражала настраиваемые параметры. Всегда можно сбросить для возврата всех свойств к значениям по умолчанию.
В разделе Фрагмент HTML в левой части коллекции фрагментов выберите команду Копировать в буфер обмена.
В редакторе HTML откройте сопоставленный сетевой диск на своем компьютере, а затем откройте HTML-файл для эталонной страницы или макета, к которым добавляется фрагмент.
Вставьте фрагмент в том месте HTML-файла, где должна отображаться разметка.
Каждый фрагмент содержит HTML-код, который предоставляет visual предварительной версии компонента и образец данных. Не следует изменять этот HTML-код для предварительного просмотра только для чтения внутри <тегов !--PS> и <!--PE> , так как эта разметка влияет только на предварительный просмотр фрагмента во время разработки, а не на то, как фрагмент будет отображаться на динамическом сайте.
Для просмотра на сервере фрагмент, сохраните файл HTML-код для синхронизации изменений в файле связанного ASP.NET и обновите на сервере предварительного просмотра в диспетчере оформления.
В отличие от предварительного просмотра во время разработки предварительного просмотра на сервере показан элемент управления, как отобразить с помощью SharePoint.
Понимание разметки во фрагменте кода HTML
Он содержит четыре основных раздела:
Заголовок с запуском
и <тегов !--CS> (за исключением пользовательских фрагментов ASP.NET, которые не упаковываются вtag)Разметка SharePoint , в которой фрагменты кода заключаются в <!--MS> start и <!--ME> конечных тегов
Предварительный просмотр HTML-кода, заключенный в <теги начала !--PS> и <!--PE>
Нижний колонтитул с закрывающим <!--CE> и Теги
Все разделы фрагмент, за исключением предварительного просмотра HTML, заключаются в HTML-код комментариев во избежание взаимодействия с помощью модели объектов документа (DOM) и существующего стилей. Фрагмент начинается с именем компонента и затем включает фактический разметки ASP.NET, предварительный просмотр HTML-код для отрисовки во время разработки и затем к концу тегов. Закомментированы разметка ASP.NET, но SharePoint Удаляет теги комментариев и используется эта разметка при HTML-файл синхронизируется с .master или .aspx файла. Если вы знаете ASP.NET, можно настроить этот разметки в фрагменте.
Пример: Вот разметка по умолчанию для изменения режима панели, просто контейнер, в котором условно отображаются другие содержимое и элементы управления.
Заголовок
<div data-name="EditModePanelShowInEdit">
<!--CS: Start Edit Mode Panel Snippet-->
Разметка SharePoint
<!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->
Предварительный просмотр HTML-кода
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
You should replace this div with content that renders based on your Edit Mode Panel Properties.
</div>
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
Нижний колонтитул
<!--ME:</Publishing:EditModePanel>-->
<!--CE: End Edit Mode Panel Snippet-->
</div>
Ниже представлена разметка по умолчанию для навигации в начало фрагмента, которого является более сложным, поскольку в этом фрагменте содержит несколько различных элементов управления, с некоторыми вложенных в друг с другом, включая источник данных для терминов навигации, замещаемого элемента управления и заполнитель контента.
Примечание.
Некоторые элементы управления, такие как заполнитель контента, содержат пустые теги предварительном HTML, так как этот элемент не требует визуальное представление на странице.
Заголовок
<div data-name="TopNavigationNoFlyoutWithStartNode">
<!--CS: Start Top Navigation Snippet--> <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->
Разметка SharePoint
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation ms-dialogHidden" runat="server">-->
Предварительный просмотр HTML-кода
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
Разметка SharePoint
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
Предварительный просмотр HTML-кода
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<span style="display:none">
<table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow">
<tr><td nowrap="nowrap">
<span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span>
<!--PE: End of READ-ONLY PREVIEW-->
Разметка SharePoint
<!--MS:<Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
Разметка SharePoint
<!--ME:</asp:SiteMapDataSource>-->
<!--ME:</Template_Controls>-->
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>
Разметка SharePoint
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">-->
<!--MS:<SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="false" MaximumDynamicDisplayLevels="0" SkipLinkText="">-->
Предварительный просмотр HTML-кода
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" />
<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
<ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div>
<!--PE: End of READ-ONLY PREVIEW-->
Разметка SharePoint
<!--ME:</SharePoint:AspMenu>-->
<!--ME:</asp:ContentPlaceHolder>-->
Предварительный просмотр HTML-кода
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
Разметка SharePoint
<!--ME:</SharePoint:AjaxDelta>-->
Нижний колонтитул
<!--CE: End Top Navigation Snippet-->
</div>
Типы разметки
Вот разбивкой типами разметки, включенные в фрагмент.
Регистрация имен SharePoint SPM ("SharePoint разметки") указывает строку регистрации пространства имен SharePoint.
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
Комментарии CS и CE («Комментарий начала» и «комментарий окончания») помогают синтаксический анализ строки разметки.
<!--CS: Start Top Navigation Snippet-->
…
<!--CE: End Top Navigation Snippet-->
Фрагменты кода MS и ME («разметки начала» и «разметка окончания») обозначения начала и окончания управления SharePoint или фрагмент. Некоторые фрагменты кода, такой как ленты или выше, элемент управления навигации в начало содержать несколько элементов управления, включенная в один фрагмент.
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
…
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>
<!--MS:<Template_Controls>-->
…
<!--ME:</Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
…
<!--ME:</asp:SiteMapDataSource>-->
Предварительная версия блоки PS и заключите раздел HTML-код, который не следует изменять среда Предустановки («Начало просмотра» и «предварительный просмотр плана»). В этих разделах предварительной версии являются моментальный снимок времени элемента управления SharePoint Вставка фрагмента. Предварительный просмотр помогает более осознанно работать с HTML-файлом в клиентском редакторе HTML. Однако изменение контента или стилей для предварительного просмотра не окажет долговременного влияния на MASTER-файл, который в конечном итоге использует SharePoint. Чтобы применить стиль к фрагменту кода, необходимо идентифицировать и переопределить стили SharePoint в пользовательской таблице CSS.
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span style="display:none"><table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span><!--PE: End of READ-ONLY PREVIEW-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div><!--PE: End of READ-ONLY PREVIEW-->