Tutorial: Menambahkan tata letak halaman kustom ke situs Anda

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

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

Contoh skenario kami adalah membuat templat dua kolom dengan menu situs utama sebagai navigasi sisi kiri dan konten halaman di sebelah kanan.

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

• Kita akan membuat template web dasar umum dengan kode khusus untuk membuat 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 templat halaman yang mereferensikan templat web yang mengonfigurasi bagaimana tata letak halaman dirender di situs.
• Terakhir, kita akan membuat halaman web menggunakan tata letak halaman khusus.

Prasyarat

• Mendapatkan langganan atau uji coba Power Pages. Dapatkan Power Pages uji coba di sini
• Situs Power Pages dibuat. Membuat Power Pages situs
• Pengetahuan dasar tentang HTML dan Liquid

Langkah 1: Buat Web Template dan tulis kode template Liquid

Pertama, buat template web Anda dan tulis kode template Liquid. Anda mungkin akan menggunakan kembali beberapa elemen umum dari templat ini di templat mendatang. Jadi, buat templat dasar umum yang Anda perluas dengan templat spesifik Anda. Template dasar Anda menyediakan tautan breadcrumb, judul/header halaman Anda, dan menentukan tata letak dua kolom Anda.

1. Tuju Power Pages.

2. Di studio desain, pilih ... dan kemudian pilih Manajemen Portal. Gunakan aplikasi Manajemen Portal untuk membuat rekaman templat web dan memasukkan kode kustom Anda.

   

3. Di aplikasi Manajemen Portal, gulir ke bagian Konten dan pilih Template Web.

4. Dari layar Template Web Aktif, pilih Baru.

5. Beri nama templat web Tata Letak Dua Kolom.

   

6. Tempelkan kode berikut ke bidang Sumber :

   <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. Pilih Simpan.

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

Kami sedang membuat template web yang membaca catatan navigasi dari halaman web terkait (lihat di bawah). Kami juga memperluas template dasar yang kami buat pada langkah sebelumnya. Template web dapat digunakan sebagai komponen yang dapat digunakan kembali saat membuat situs lanjutan.

1. Di aplikasi Manajemen Portal, gulir ke bagian Konten dan pilih Template Web.

2. Dari layar Template Web Aktif, pilih Baru.

3. Beri nama templat web Weblinks Navigasi Kiri.

Navigasi kiri Weblinks (Web Template)

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, buat template halaman baru berdasarkan template web yang dibuat pada langkah sebelumnya. Templat halaman diperlukan agar tata letak halaman kustom menjadi opsi yang dapat Anda pilih saat membuat halaman web baru.

1. Di aplikasi Manajemen Portal, gulir ke bagian situs web dan pilih Template Halaman.

2. Dari layar Templat Halaman Aktif, pilih Baru.

3. Isi kolom:

   Bidang	Nilai
   Nama	Ketikkan nama.
   Situs web	Pilih situs web tempat tema diterapkan. Untuk menampilkan daftar opsi yang tersedia, letakkan kursor Anda di bidang dan tekan enter pada keyboard Anda.
   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.

   

4. Pilih Simpan.

Langkah 4: Membuat halaman web untuk menampilkan konten

1. Di studio desain, pilih Sinkronkan. Tindakan ini membawa pembaruan yang dibuat di aplikasi Manajemen Portal ke studio desain.

2. Di ruang kerja halaman lalu pilih + Halaman.

3. Dalam dialog Tambahkan halaman :

   1. Masukkan Nama halaman.
   2. Dari tata letak Kustom, pilih tata letak halaman kustom Anda.
   3. Pilih Tambahkan.

   

4. Tambahkan konten lainnya ke bagian halaman yang dapat diedit.

Konfigurasi halaman tambahan

Dalam contoh ini, tautkan rekaman navigasi ke halaman konten untuk kode kustom untuk merender menu di navigasi kiri.

1. Di studio desain, pilih ... dan kemudian pilih Manajemen Portal. Gunakan aplikasi Manajemen Portal untuk menambahkan lebih banyak konfigurasi ke halaman Anda.

2. Di aplikasi Manajemen Portal, gulir ke bagian Konten dan pilih Halaman Web.

3. Cari dan buka halaman yang Anda buat sebelumnya di ruang kerja Halaman. Ini akan membuka halaman web root. Buat perubahan di halaman konten yang dilokalkan terkait.

4. Di dalam bagian Konten yang Dilokalkan, pilih halaman web konten yang dilokalkan.

   

   Catatan

   Jika Anda memiliki beberapa bahasa yang disediakan, perbarui setiap halaman yang dilokalkan.

5. Buka bagian Lain-lain dan pilih tautan web yang ditetapkan untuk ditampilkan di bidang Navigasi .

   

6. Simpan perubahan Anda dan kembali ke studio desain.

7. Pilih Pratinjau lalu Desktop untuk melihat halaman kustom Anda dengan navigasi samping.

   

Baca juga

• Membuat tata letak halaman kustom
• Ikhtisar cairan