Создание макета страницы в SharePoint

Статья
03/21/2023

Важно!

Такая расширяемость доступна только для классического интерфейса SharePoint. Эту возможность нельзя использовать вместе с современным интерфейсом в SharePoint Online, например на сайтах для общения. Мы больше не рекомендуем использовать классический интерфейс и эти методы применения фирменной символики.

При построении макета страницы с помощью Дизайнера создаются два файла: ASPX-файл, который использует SharePoint, и HTML-версия этого макета страницы, которую можно редактировать в редакторе HTML. HTML-файл и макет страницы связаны друг с другом, поэтому при каждом редактировании и сохранении HTML-файла изменения синхронизируются со связанным макетом страницы.

Общие сведения о макетах страниц

При создании главной страницы вы отправляете и преобразуете HTML-файл непосредственно в главную страницу. Но, в отличие от главной страницы, HTML-файл не преобразуется напрямую в макет страницы. Это связано с тем, что основное назначение макета страницы заключается в том, чтобы содержать поля страницы, и эти поля страницы должны быть добавлены при создании макета страницы в Диспетчере дизайна.

При создании макета страницы:

В коллекции эталонных страниц создаются ASPX-файл и HTML-файл с одинаковыми именами.
В ASPX-файл добавляется вся разметка, необходимая SharePoint, поэтому макет страницы отображается правильно.
Другая разметка, например комментарии, теги, фрагменты кода и заполнители контента, добавляются в HTML-файл.
Поля страницы, уникальные для типа контента, добавляются на макет страницы автоматически. Другие поля страницы можно добавить на ленте в коллекции фрагментов кода.
HTML- и ASPX-файлы связаны, поэтому при сохранении HTML-файла любые дальнейшие изменения синхронизируются с ASPX-файлом. Другая разметка, например комментарии, теги, фрагменты кода и заполнители контента, добавляются в HTML-файл.

Примечание.

Синхронизация проходит только в одном направлении. Изменения макета HTML-страницы будут синхронизированы со связанным ASPX-файлом, однако если вы изменяете непосредственно ASPX-файл, внесенные изменения не будут синхронизированы с HTML-файлом. Для каждого макета HTML-страницы (и для каждой эталонной HTML-страницы) предусмотрено свойство Связанный файл, для которого по умолчанию задано значение True. Это свойство устанавливает связь между файлами и отвечает за их синхронизацию.

Например, если у вас есть пара связанных файлов (HTML и ASPX) и вы редактируете ASPX-файл, не нарушая связь, внесенные изменения будут сохранены, но вы не сможете отметить или опубликовать этот файл, то есть по большому счету эти изменения не сохраняются. Любые изменения в файле HTML перезаписывают ASPX-файл. Если вы отметите или опубликуете HTML-файл, то его изменения перезапишут любые изменения, которые были сделаны в ASPX-файле. Изменения, внесенные в ASPX-файл, будут утрачены.

Если вам удобно работать с ASP.NET, вы можете работать только с .aspx файлом, разорвав связь между файлами. Чтобы разорвать связь между HTML-файлом и файлом .aspx, в диспетчере конструкторов выберите Изменить свойства HTML-файла, а затем снимите флажок Связанный файл . Позже вы можете повторно связать файлы, изменив свойства и установив этот флажок. В этом случае изменения, сохраненные в HTML-файле, снова перезаписывают файл .aspx.

Общие сведения о связи между полями страницы и типом контента

Каждый макет страницы связан с типом контента, обычно одним из типов в группе "Макет страницы". Например, тип контента "Страницы статьи" связан с макетом страницы "Страницы статьи", они оба включены в веб-сайт публикации.

Тип контента состоит из столбцов сайта, которые вместе определяют схему допустимых типов данных. Вы можете сказать, что столбцы сайта являются уникальными для текущего типа контента, так как столбец "Источник" пустой (это значит, что данные столбцы сайта определены текущим типом контента и не наследуются от родительского типа контента).

Для любого заданного макета страницы столбцы сайта, образующие тип контента, непосредственно соответствуют полям страницы, которые доступны для данного макета страницы. Первая группа полей страницы на ленте — это поля страницы, которые автоматически добавляются на макет страницы при его создании. SharePoint добавляет эти поля автоматически, так как они являются уникальными для этого типа контента, и поэтому, вероятно, эти поля были созданы специально для того, чтобы использоваться макетом страницы в отличие от общих метаданных SharePoint.

Перед тем как создать макет страницы в Дизайнере, возможно, вам потребуется создать тип контента, который определяет поля страницы для макета страницы.

Общие сведения о связи между заполнителями контента на макете страницы и на эталонной странице

Для корректного отображения макет страницы и эталонная страница должны иметь одинаковый набор заполнителей контента. Это просто, если для создания эталонных страниц и макетов страниц вы используете Дизайнера, так как при создании файлов в каждый из них добавляется правильный набор заполнителей контента. Это гарантирует работу каждого макета страницы по каждому каналу, который используется различными эталонными страницами. Вам не нужно знать о большинстве этих заполнителях контента или работать с ними. Они требуются SharePoint для правильного отображения страницы.

Однако, если вы изменяете макет HTML-страницы и вручную добавляете заполнитель контента, вам следует добавить такой же заполнитель контента на каждую эталонную страницу, которая требуется для работы с данным макетом страницы. Подобный случай не является общим.

Если для создания макетов страниц и эталонных страниц вы используете Дизайнера, то наиболее общим случаем станет работа только со следующими заполнителями контента:

PlaceHolderMain Главная страница содержит заполнитель содержимого с ID="PlaceholderMain"тегом DefaultContentBlock<div> с желтым полем, в котором указано, что эта область будет заполнена содержимым, созданным в макетах страниц. Не следует помещать содержимое внутри этого заполнителя на главной странице. Макет страницы содержит заполнитель контента с таким же идентификатором. Поместите разметку внутри этого заполнителя в макете страницы, разметка за пределами заполнителя недопустима. Идентификаторы двух заполнителей ( PlaceholderMain) должны совпадать.
PlaceHolderAdditionalPageHead При работе с макетом страницы элементы обычно не вставляются в <head> тег макета страницы. Вместо этого вы добавляете элементы в заполнитель содержимого с помощью id="PlaceHolderAdditionalPageHead". При отображении страницы содержимого в браузере этот дополнительный заголовок страницы добавляется в конец заголовка эталонной страницы.

Создание макета страницы

Сначала необходимо узнать, какой тип контента и макет страницы будут связаны с макетом страницы.

Чтобы создать макет страницы:

Перейдите на сайт публикации.
В правом верхнем углу страницы щелкните значок шестеренки и выберите Дизайнер.

Меню настроек

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

В Дизайнере в левой области панели навигации выберите команду Изменить макеты страниц.
Выберите пункт Создать макет страницы.
В диалоговом окне Создание макета страницы укажите имя для макета страницы.
Выберите эталонную страницу.

Выбранная эталонная страница должна отобразиться в окне предварительного просмотра для данного макета страницы. Эта эталонная страницы также определяет заполнители контента, которые добавляются к макету страницы.

Примечание.

После выбора эталонной страницы вы не сможете выполнять предварительный просмотр макета страницы с другой эталонной страницей, даже если примените к действующему сайту другую эталонную страницу.
Выберите тип контента. Он определяет поля, которые будут доступны для данного макета страницы в коллекции фрагментов кода.
Нажмите кнопку OK.

На этой стадии SharePoint создает HTML- и ASPX-файлы с одинаковыми именами.

Теперь в Дизайнере для вашего HTML-файла отображается столбец "Состояние", который показывает один из двух возможных состояний:

Предупреждения и ошибки.
Преобразование выполнено успешно.

Щелкните ссылку в столбце "Состояние", чтобы выполнить предварительный просмотр файла и просмотреть ошибки или предупреждения, касающиеся эталонной страницы.

Страница предварительного просмотра — это страница динамического просмотра макета страницы на стороне сервера. Верхняя часть области предварительного просмотра отображает предупреждения или ошибки, которые необходимо устранить, отредактировав HTML-файл в редакторе HTML. Для того чтобы во время предварительного просмотра макет страницы отображался правильно, все ошибки должны быть устранены.

Дополнительные сведения об устранении ошибок и предупреждений см. в статье Практическое руководство. Устранение ошибок и предупреждений при предварительном просмотре страницы в SharePoint.

Дополнительные сведения о предварительном просмотре макета страницы см. в разделе Практическое руководство. Изменение страницы предварительного просмотра в SharePoint Design Manager.

Предварительный просмотр страницы также содержит ссылку фрагменты в правом верхнем углу. При переходе по этой ссылке откроется коллекция фрагментов кода, которая позволяет заменять элементы управления макета в своем конструкторе на динамические элементы управления SharePoint. Дополнительные сведения см. в статье Фрагменты кода в компоненте "Дизайнер" SharePoint.
Для устранения ошибок с помощью HTML-редактора откройте и измените HTML-файл на подключенном диске на стороне сервера. Каждый раз при сохранении HTML-файла, все изменения синхронизируется со связанным ASPX-файлом.
Во время предварительного просмотра макета страницы отображаются поля страницы, которые были автоматически добавлены в макет страницы. Эти поля — это столбцы сайта, уникальные для текущего типа контента. Теперь вы можете задать стиль для макета шаблона в соответствии с вашими исходными макетами.

Определение места выполнения стилей для макета страницы

При создании макетов HTML для сайта могут быть HTML-файлы, представляющие различные классы страниц, например страницу статьи или страницу сведений об элементе, содержащую веб-часть для отображения сведений об одном элементе из каталога. После создания макета страницы, которая представляет этот класс страниц, вы можете перенести стили из своего HTML-макета в HTML-версию своего макета страницы.

Вы можете просто поместить стили для одной или нескольких макетов страниц в одну таблицу стилей, на которую ссылается эталонная страница. Однако если вы захотите уменьшить размер таблицы CSS, которая загружается для каждого файла, вы также можете использовать различные таблицы стилей для различных макетов страниц. При этом важно знать, что ссылка на таблицу стилей не может идти в <head> теге макета страницы. Вместо этого ссылка должна вести к заполнителю контента с именем PlaceHolderAdditionalPageHead.

Примечание.

В этой разметке атрибут ms-design-css-conversion="no" исключает таблицу стилей из тем. Кроме того, ссылка на таблицу стилей должна появиться после строк, закомментированных <--SPM.


<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
            <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<link href="MyPageLayout.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />
        <!--ME:</asp:ContentPlaceHolder>-->

Когда посетитель сайта просматривает страницы, которые используют этот макет, этот дополнительный заголовок страницы добавляется в конец заголовка эталонной страницы, поэтому стили макета страницы применяются после стилей эталонной страницы.

Таким образом, у каждого макета страницы может быть своя таблица стилей. Например, тег <div> с id="xyz" может находиться в одном макете страницы, расположенном слева, и в другом макете страницы, расположенном справа.

У каждого макета страницы может быть одна или несколько таблиц стилей, специфических для каналов устройства. Например, вам может потребоваться макет страницы для телефонов, отличающийся от макета для настольных компьютеров. Для этого вы можете включить один или несколько панелей каналов устройств внутри PlaceHolderAdditionalPageHead, где каждая панель канала включает ссылку на таблицу стилей со специфическими для канала стилями. Таким образом, например, <div> с id="abc" может отображать крупный текст на одном канале и мелкий — на другом.

Ниже приведены несколько распространенных способов размещения ссылок на таблицу стилей для макетов страниц.

Ссылка на стили из эталонной страницы

Самый простой способ — включить стили для одного или нескольких макетов страниц в состав одной таблицы стилей, на которую ссылается эталонная страница. На главной странице поместите ссылку на файл .css непосредственно перед закрывающим тегом, чтобы переопределить таблицы стилей SharePoint по умолчанию, такие как corev15.css.


<head>
…
<link rel="stylesheet" type="text/css" href="MyStyleSheet.css" />
</head>

Ссылка на стили из макета страницы

Если вы хотите сократить размер таблицы CSS, которая загружается с каждым файлом, вы можете создать отдельные CSS-файлы для каждого макета страницы. В этом случае стили для макета страницы перейдут в заполнитель контента с именем PlaceHolderAdditionalPageHead.


<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
            <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<link href="MyPageLayout.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />
        <!--ME:</asp:ContentPlaceHolder>-->

Ссылка на стили в макете страницы по каналам устройств

Если у вас есть несколько каналов устройств, вероятно, вы захотите, чтобы макеты страниц для различных каналов отображались по-разному. В этом случае укажите один или несколько панелей каналов устройств внутри PlaceHolderAdditionalPageHead, а затем на каждую панель каналов поместите ссылку на специфичные для каналов CSS-файлы.


<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<div data-name="DeviceChannelPanel">
    <!--CS: Start Device Channel Panel 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:DeviceChannelPanel runat="server" IncludedChannels="Channel1">-->
…..
<link rel="stylesheet" type="text/css" href="MyStyleSheet.css" ms-design-css-conversion="no" />
    <!--ME:</Publishing:DeviceChannelPanel>-->
    <!--CE: End Device Channel Panel Snippet-->
</div><div data-name="DeviceChannelPanel">
    <!--CS: Start Device Channel Panel 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:DeviceChannelPanel runat="server" IncludedChannels="Channel2">-->
…..
<link rel="stylesheet" type="text/css" href="CSS5.css" />
    <!--ME:</Publishing:DeviceChannelPanel>-->
    <!--CE: End Device Channel Panel Snippet-->
</div>

Общие сведения о разметке в макете HTML-страницы

При создании макета страницы создается ASPX-файл, который используется SharePoint, а в HTML-версию макета страницы добавляется несколько HTML-разметок. Когда вы редактируете макет HTML-страницы в HTML-редакторе, полезно понимать назначение некоторых из этих разметок. Большая ее часть похожа на разметку, которая добавляется в эталонную HTML-страницу. Дополнительные сведения см. в разделе Практическое руководство. Преобразование HTML-файла в главную страницу в SharePoint.

Разметка, которая является уникальной для макетов страниц, — это поля страниц, добавленные на макет страницы на основе типа контента, с которым связан макет страницы. Поля страницы отображаются внутри заполнителя контента с id="PlaceHolderMain". Например, следующая разметка для PlaceHolderMain содержит два поля страницы, которые представляют поля Title и Page Image из связанного типа контента.


<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
            <div>
                <!--CS: Start Page Field: Title Snippet-->
                <!--SPM:<%@Register Tagprefix="PageFieldTextField" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                <!--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">-->
                    <!--MS:<PageFieldTextField:TextField FieldName="fa564e0f-0c70-4ab9-b863-0177e6ddd247" runat="server">-->
                    <!--ME:</PageFieldTextField:TextField>-->
                <!--ME:</Publishing:EditModePanel>-->
                <!--CE: End Page Field: Title Snippet-->
            </div>
            <div>
                <!--CS: Start Page Field: Page Image Snippet-->
                <!--SPM:<%@Register Tagprefix="PageFieldRichImageField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                <!--MS:<PageFieldRichImageField:RichImageField FieldName="3de94b06-4120-41a5-b907-88773e493458" runat="server">-->
                    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div id="ctl02_label" style="display:none">Page Image</div><div id="ctl02__ControlWrapper_RichImageField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl02_label"><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">Page Image</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field"><img alt="" src="/_layouts/images/home.gif" style="BORDER: px solid; " /></div></div></div></div><!--PE: End of READ-ONLY PREVIEW-->
                <!--ME:</PageFieldRichImageField:RichImageField>-->
                <!--CE: End Page Field: Page Image Snippet-->
            </div>
        <!--ME:</asp:ContentPlaceHolder>-->

Поделиться через