Учебник. Добавление на сайт пользовательского макета страницы

Когда вы создаете новые веб-страницы с помощью рабочей области «Страницы», вам на выбор предлагается ряд готовых макетов страниц. В некоторых случаях вам может потребоваться создать собственный макет страницы для отображения информации в определенном формате или для предоставления специализированного пользовательского интерфейса.

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

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

Ниже приведены необходимые шаги, а также ресурсы, которые будут созданы для реализации пользовательского макета страницы:

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

Предварительные условия

• Подписка или пробная версия Power Pages. Получите пробную версию Power Pages здесь.
• Создание сайта Power Pages. Создайте сайт Power Pages.
• Базовые знания HTML и Liquid.

Шаг 1. Создание веб-шаблона и написание кода шаблона Liquid.

Сначала мы создадим веб-шаблон и напишем код шаблона Liquid. Вероятно, некоторые общие элементы этого шаблона будут повторно использоваться в будущих шаблонах. Поэтому мы создадим общий базовый шаблон, который затем расширим с помощью нашего конкретного шаблона. Наш базовый шаблон будет предоставлять ссылки навигационной цепочки и заголовок/верхний колонтитул нашей страницы, а также определять макет из двух колонок.

1. Переход к Power Pages.

2. В студии дизайна выберите ..., а затем — Управление порталом. Вам нужно будет использовать приложение «Управление порталом», чтобы создать запись веб-шаблона и ввести собственный код.

   

3. В приложении «Управление порталом» прокрутите до раздела Контент и выберите Веб-шаблоны.

4. На экране Активные веб-шаблоны выберите Создать.

5. Назовите веб-шаблон Макет из двух колонок.

   

6. Вставьте следующий код в поле Источник.

   Макет с двумя столбцами (веб-шаблон)

   <div class=container>
     <div class=page-heading>
       <ul class=breadcrumb>
         {% for crumb in page.breadcrumbs -%}
           <li>
             <a href={{ crumb.url }}>{{ crumb.title }}</a>
           </li>
         {% endfor -%}
         <li class=active>{{ page.title }}</li>
       </ul>
       <div class=page-header>
         <h1>{{ page.title }}</h1>
       </div>
     </div>
     <div class=row>
       <div class=col-sm-4 col-lg-3>
         {% block sidebar %}{% endblock %}
       </div>
       <div class=col-sm-8 col-lg-9>
         {% block content %}{% endblock %}
       </div>
     </div>
   </div>
   

7. Выберите Сохранить.

Шаг 2. Создание нового веб-шаблона, который расширяет наш базовый шаблон макета

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

1. В приложении «Управление порталом» прокрутите до раздела Контент и выберите Веб-шаблоны.

2. На экране Активные веб-шаблоны выберите Создать.

3. Назовите-веб шаблон Веб-ссылки на левой навигационной панели.

   

   Веб-ссылки на левой навигационной панели (веб-шаблон)

   Обратите внимание, как в коде используется ключевое слово Liquid extends для включения базового шаблона макета.

   {% extends 'Two Column Layout' %}
   
   {% block sidebar %}
     {% assign weblinkset_id = page.adx_navigation.id %}
     {% if weblinkset_id %}
       {% assign nav = weblinks[page.adx_navigation.id] %}
       {% if nav %}
         <div class=list-group>
           {% for link in nav.weblinks %}
             <a class=list-group-item href={{ link.url }}>
               {{ link.name }}
             </a>
           {% endfor %}
         </div>
       {% endif %}
     {% endif %}
   {% endblock %}
   
   {% block content %}
     <div id="mainContent" class = "wrapper-body" role="main">
       {% include 'Page Copy' %}
     </div>
   {% endblock %}
   

Шаг 3. Создание шаблона страницы на основе веб-шаблона

На этом этапе мы создадим новый шаблон страницы, который основан на веб-шаблоне, созданном на предыдущем шаге. Шаблон страницы необходим для нашего пользовательского макета страницы, чтобы его можно было выбирать при создании новой веб-страницы.

1. В приложении «Управление порталом» прокрутите до раздела Веб-сайт и выберите Шаблоны страниц.

2. На экране Активные шаблоны страниц выберите Создать.

3. Заполните поля.

   Поле	Стоимость
   Имя.	Введите имя.
   Веб-узел	Выберите веб-сайт, к которому будет применена тема. Установите указатель в поле и нажмите Enter на клавиатуре, чтобы отобразить список доступных параметров.
   Type	Выберите Веб-шаблон
   Веб-шаблон	Выберите Веб-ссылки на левой навигационной панели (если вы не назвали веб-шаблон по-другому).
   Использовать верхний и нижний колонтитулы веб-сайта	Флажок установлен.
   Является значением по умолчанию	Флажок снят.
   Имя таблицы	Ничего не выбрано.
   Description	Описание шаблона страницы.

   

4. Выберите Сохранить.

Шаг 4. Создание веб-страницы для отображения содержимого

1. Встудиии дизайна выберите Синхронизация. Так изменения, внесенные в приложении «Управление порталом», будут отражены в студии дизайна.

2. В рабочей области Страницы выберите + Страница.

3. В диалоговом окне Добавление страницы:

   1. Введите Имя страницы
   2. Из списка Пользовательские макеты выберите пользовательский макет страницы.
   3. Выберите Добавить.

   

4. Добавьте любой другой контент в редактируемые разделы страницы.

Дополнительная настройка страницы

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

1. В студии дизайна выберите ..., а затем — Управление порталом. Добавлять дополнительную конфигурацию на страницу мы будем с помощью приложения «Управление порталами».

2. В приложении «Управление порталами» прокрутите до раздела Содержимое и выберите Веб-страницы.

3. Найдите и откройте созданную ранее страницу в рабочей области Страницы. Откроется корневая веб-страница. Нам потребуется внести изменения в соответствующую страницу с локализованным содержимым.

4. Прокрутите вниз до раздела Локализованное содержимое и выберите веб-страницу с локализованным содержимым.

   

   Заметка

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

5. Перейдите в раздел Разное и выберите набор веб-ссылок, который вы хотите отобразить в поле Навигация.

   

6. Сохраните изменения и вернитесь в студию дизайна.

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

   

См. также

• Создание пользовательского макета страницы
• Обзор Liquid