Cipta templat halaman tersuai

Nota

Berkuat kuasa pada 12 Oktober 2022, portal Power Apps ialah Power Pages. Maklumat lanjut: Microsoft Power Pages kini tersedia secara umum (blog)
Kami akan memindahkan dan menggabungkan dokumentasi portal Power Apps dengan dokumentasi Power Pages tidak lama lagi.

Dalam contoh ini, kita akan mencipta templat halaman tersuai menggunakan Liquid dan templat halaman yang berdasarkan templat web. Maklumat lanjut: Simpan kandungan sumber menggunakan templat web. Matlamat kami adalah untuk membina templat dua lajur ringkas yang menggunakan set pautan web sebagai navigasi sebelah kiri dengan kandungan halaman di sebelah kanan.

Langkah 1: Cipta templat web dan tulis kod templat Liquid.

Pertama, kita akan mencipta Templat Web dan menulis kod templat Liquid kita. Kita berkemungkinan akan menggunakan semula beberapa elemen biasa templat ini dalam templat akan datang. Jadi, kita akan mencipta templat asas biasa yang kita kemudiannya akan lanjutkan dengan templat tertentu kita. Templat asas kita akan menyediakan pautan breadcrumb dan tajuk/pengepala halaman kita serta menentukan susun atur satu lajur kita.

Tataletak satu lajur templat web.

Petua

Baca tentang warisan templat yang menggunakan blok dan melanjutkan tag: Tag templat

Susun Atur Dua Lajur (Templat Web)

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

Langkah 2: Cipta templat web baharu yang melanjutkan templat susun atur asas kami

Gunakan set pautan web navigasi yang berkaitan dengan halaman semasa untuk pautan navigasi kami untuk mencipta templat web baharu yang melanjutkan templat susun atur asas kami.

Tataletak navigasi kiri pautan web templat web.

Petua

Biasakan diri anda dengan cara untuk memuatkan set pautan web menggunakan objek pautan web.

{% 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 class=page-copy>
    {{ page.adx_copy }}
  </div>
{% endblock %}

Langkah 3: Cipta templat halaman baharu berdasarkan templat web

Dalam langkah ini, kami akan mencipta templat halaman baharu berdasarkan templat web yang kami cipta dalam langkah sebelumnya.

Tataletak navigasi kiri pautan web templat halaman.

Langkah 4: Cipta halaman web untuk memaparkan kandungan

  1. Cipta halaman web yang menggunakan templat halaman kami.

    Halaman web dengan navigasi kiri.

  2. Pergi ke halaman web kandungan yang disetempatkan.

    Halaman kandungan disetempatkan.

  3. Pergi ke bahagian Pelbagai dan pilih set pautan web yang anda mahu paparkan dalam medan Navigasi.

    Carian navigasi.

  4. Apabila anda kini melihat halaman anda, anda perlu melihat navigasi sisi.

    Halaman navigasi kiri.

Lihat juga

Cipta templat halaman tersuai untuk mempersembahkan suapan RSS
Persembahkan senarai yang dikaitkan dengan halaman semasa
Persembahkan pengepala tapak web dan bar navigasi utama
Persembahkan sehingga tiga peringkat hierarki halaman menggunakan navigasi hibrid

Nota

Adakah anda boleh memberitahu kami tentang keutamaan bahasa dokumentasi anda? Jawab tinjauan pendek. (harap maklum bahawa tinjauan ini dalam bahasa Inggeris)

Tinjauan akan mengambil masa lebih kurang tujuh minit. Tiada data peribadi akan dikumpulkan (pernyataan privasi).