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

Статья
03/16/2023

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

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

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

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

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

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

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

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

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

Переход к Power Pages.
В студии дизайна выберите ..., а затем — Управление порталом. Вам нужно будет использовать приложение «Управление порталом», чтобы создать запись веб-шаблона и ввести собственный код.
В приложении «Управление порталом» прокрутите до раздела Контент и выберите Веб-шаблоны.
На экране Активные веб-шаблоны выберите Создать.
Назовите веб-шаблон Макет из двух колонок.

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

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

<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>

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

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

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

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

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

Пользовательский веб-шаблон с навигацией и содержимым.

Обратите внимание, как в коде используется ключевое слово 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. Создание шаблона страницы на основе веб-шаблона

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

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

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

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

Шаблон страницы с веб-ссылками на левой навигационной панели макета.

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

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

Встудиии дизайна выберите Синхронизация. Так изменения, внесенные в приложении «Управление порталом», будут отражены в студии дизайна.
В рабочей области Страницы выберите + Страница.
В диалоговом окне Добавление страницы:
1. Введите Имя страницы
2. Из списка Пользовательские макеты выберите пользовательский макет страницы.
3. Выберите Добавить.
Добавьте любой другой контент в редактируемые разделы страницы.

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

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

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

Заметка

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