Tutorial: Menambahkan tata letak halaman kustom ke situs Anda

Artikel
10/07/2023

Saat membuat halaman web baru menggunakan ruang kerja Halaman, Anda memiliki pilihan tata letak halaman yang disediakan. Dalam kasus tertentu, Anda mungkin ingin membuat tata letak halaman kustom untuk menampilkan informasi dalam format tertentu atau menyediakan antarmuka pengguna khusus.

Dalam tutorial ini, Anda akan mempelajari cara membuat tata letak halaman kustom menggunakan Liquid.

Skenario contoh kami adalah untuk membangun template dua kolom yang mana menu situs utama merupakan navigasi sisi kiri, dengan konten halaman di kanan.

Berikut adalah langkah-langkah dan aset berikut yang akan dibuat untuk menyediakan tata letak halaman kustom:

Kami akan membuat template web dasar umum dengan kode kustom untuk menetapkan tata letak halaman dasar.
Kami akan membuat template web kedua dengan kode tambahan untuk memperagakan fitur-fitur default template web.
Kami juga akan membuat rekaman template halaman yang mengacu pada template web yang akan mengkonfigurasikan tampilan tata letak halaman di situs.
Terakhir, kita akan membuat halaman web menggunakan tata letak halaman kustom.

Prasyarat

Mendapatkan langganan atau uji coba Power Pages. Dapatkan uji coba gratis Power Pages di sini.
Situs Power Pages dibuat. Buat situs Power Pages.
Pengetahuan dasar HTML dan Liquid.

Langkah 1: Buat Web Template dan tulis kode template Liquid

Pertama, kita akan membuat Web Template kita, dan menulis kode template Liquid kita. Kita cenderung untuk menggunakan kembali beberapa unsur umum template ini di template masa depan. Jadi, kita akan membuat basis template umum yang kita kemudian akan memperpanjang dengan template tertentu kita. Template dasar kita akan memberikan tautan breadcrumb, judul/header halaman kita, serta menentukan tata letak dua kolom kita.

Tuju Power Pages.
Di studio desain, pilih ... dan kemudian pilih Manajemen Portal. Anda harus menggunakan aplikasi Manajemen Portal untuk membuat rekaman template web dan memasukkan kode kustom Anda.
Di aplikasi Manajemen Portal, gulir ke bagian Konten dan pilih Template Web.
Dari layar Template Web Aktif, pilih Baru.
Namai template web ke Tata Letak Dua Kolom.

Rekatkan kode berikut ini ke dalam bidang Sumber.

Tata letak dua kolom (Web Template)

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

Pilih Simpan.

Langkah 2: Buat sebuah Template Web baru yang meluaskan template tata letak dasar kita

Kita akan membuat template web yang akan membaca rekaman navigasi dari halaman web terkait (lihat di bawah). Kita juga akan memperluas template dasar yang kita buat pada langkah sebelumnya. Template web dapat digunakan sebagai komponen yang dapat digunakan kembali saat membuat situs lanjutan.

Di aplikasi Manajemen Portal, gulir ke bagian Konten dan pilih Template Web.
Dari layar Template Web Aktif, pilih Baru.

Namai template web dengan Navigasi kiri weblink.

Template web kustom dengan navigasi dan konten.

Perhatikan bagaimana kode menggunakan kata kunci Liquid extends untuk memasukkan template tata letak dasar.

{% 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 %}

Langkah 3: Buat template halaman Web baru berdasarkan Web Template

Pada langkah ini, kami akan membuat template halaman baru yang didasarkan pada template web yang dibuat pada langkah sebelumnya. Template halaman diperlukan agar tata letak halaman kustom kami menjadi pilihan yang dapat Anda pilih saat membuat halaman web baru.

Di aplikasi Manajemen Portal, gulir ke bagian situs web dan pilih Template Halaman.
Dari layar Template Halaman Aktif, pilih Baru.

Isi bidang.

Bidang	Nilai
Nama	Ketikkan nama.
Situs web	Pilih situs web yang akan menerapkan tema. Letakkan kursor di bidang dan tekan enter pada keyboard untuk menampilkan daftar pilihan yang tersedia.
Tipe	Pilih templat web
Template Web	Pilih Navigasi Kiri Tautan Web (atau apa pun yang Anda namai template web Anda).
Gunakan Header dan Footer Situs Web	Dicentang.
Adalah Default	Tidak dicentang.
Nama Tabel	Tidak ada yang dipilih.
Deskripsi	Deskripsi template halaman Anda.

Tata letak Navigasi kiri tautan web template halaman.

Pilih Simpan.

Langkah 4: Membuat halaman web untuk menampilkan konten

Di studio desain, pilih Sinkronisasi. Hal ini akan membawa pembaruan yang dibuat dalam aplikasi Manajemen Portal ke studio desain.
Di ruang kerja halaman lalu pilih + Halaman.
Di dialog Tambahkan halaman;
1. Masukkan nama halaman
2. Dari tata letak Kustom, pilih tata letak halaman kustom Anda.
3. Pilih Tambahkan.
Tambahkan konten lainnya ke bagian halaman yang dapat diedit.

Konfigurasi halaman tambahan

Di contoh ini, kita harus menautkan rekaman navigasi ke halaman konten agar kode kustom kita dapat menampilkan menu di navigasi kiri.

Di studio desain, pilih ... dan kemudian pilih Manajemen Portal. Anda akan menggunakan aplikasi Manajemen Portal untuk menambahkan konfigurasi tambahan ke halaman.
Di aplikasi Manajemen Portal, gulir ke bagian Konten dan pilih Halaman Web.
Cari dan buka halaman yang Anda buat sebelumnya di ruang kerja Halaman. Ini akan membuka halaman web akar. Kita harus membuat perubahan di halaman konten dilokalkan yang terkait.
Gulir ke bawah dan di bagian Konten Yang Dilokalkan, pilih halaman web konten yang dilokalkan.

Catatan

Jika memiliki beberapa bahasa yang ditetapkan, Anda harus memperbarui setiap halaman yang dilokalkan.
Buka bagian Lain-lain, lalu pilih rangkaian tautan web yang akan ditampilkan di bidang Navigasi.
Simpan perubahan Anda dan kembali ke studio desain.
Pilih Pratinjau dan kemudian Desktop untuk melihat halaman kustom Anda dengan navigasi sisi yang diimplementasikan.

Share via