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

Посібник: додавання настроюваного макету сторінки на сайт

  • Стаття

Під час створення нових веб-сторінок за допомогою робочої області «Сторінки» можна вибрати один із наданих макетів сторінки. У деяких випадках може знадобитися створити настроюваний макет сторінки для відображення інформації у певному форматі або надання спеціалізованого інтерфейсу користувача.

У цьому посібнику ви дізнаєтеся, як створити настроюваний макет сторінки за допомогою 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. назвіть веб-шаблон Навігація веб-посилання ліворуч.

    Настроюваний веб-шаблон із вмістом і областю переходів.

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

    {% 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 на клавіатурі, щоб відобразити список доступних параметрів.
    Ввести Виберіть Вебшаблон
    Веб-шаблон Виберіть Веб-посилання й переходи зліва (або як ви назвете свій веб-шаблон).
    Використовувати верхній та нижній колонтитули веб-сайту Прапорець установлено.
    Використовується за замовчуванням Прапорець знято.
    Назва таблиці Не вибрано.
    Опис Опис шаблону сторінки.

    Макет сторінки із веб-посиланнями й переходами зліва.

  4. Виберіть Зберегти.

Крок 4: Створення веб-сторінки для відображення вмісту

  1. У студії дизайну виберіть Синхронізація. Після цього зміни, внесені у програмі керування порталами, перенесуться у студію дизайну.

  2. У робочій області Сторінки натисніть + Сторінка.

  3. У діалоговому вікні Додати сторінку виконайте наведені нижче дії.

    1. Введіть Ім’я сторінки
    2. В області Настроювані макети виберіть настроюваний макет сторінки.
    3. Виберіть Додати.

    Виберіть настроюваний макет сторінки під час створення нової веб-сторінки.

  4. Додайте додатковий вміст до розділів сторінки, які можна редагувати.

Додаткові настройки сторінки

У цьому прикладі потрібно зв’язати запис переходів зі сторінкою вмісту для відтворення меню в області переходів ліворуч настроюваним кодом.

  1. У студії дизайну виберіть ..., а потім виберіть Керування порталом. Щоб додати на сторінку додаткову конфігурацію, скористайтеся програмою керування порталом.

  2. У програмі для керування порталом прокрутіть до розділу Вміст і виберіть Веб-сторінки.

  3. Знайдіть і відкрийте сторінку, створену раніше в робочій області Сторінки. Це відкриє кореневу веб-сторінку. Нам потрібно буде внести зміни на відповідну сторінку локалізованого вмісту.

  4. Прокрутіть униз і в розділі Локалізований вміст виберіть веб-сторінку локалізованого вмісту.

    Виберіть веб-сторінку локалізованого вмісту.

    Нотатка

    Якщо передбачено кілька мов, необхідно оновити кожну локалізовану сторінку.

  5. Перейдіть до розділу Інше та виберіть набір веб-посилань, який має відображатися в полі Навігація .

    Підстановка для переходу.

  6. Збережіть зміни та поверніться до студії дизайну.

  7. Натисніть Підготовча версія і Робочий стіл, щоб переглянути свою користувацьку сторінку з упровадженою бічною навігацією.

    Веб-сторінка, що використовує настроюваний макет.

Див. також