Kohandatud lehemalli loomine

Artikkel
03/14/2023

Märkus

Alates 12. oktoobrist 2022 on Power Appsi portaalid Power Pages. Lisateave: Microsoft Power Pages on nüüd üldiselt saadaval (ajaveebipostitus)
Peagi migreerime ja ühendame Power Appsi portaalide dokumentatsiooni Power Pagesi dokumentatsiooniga.

Selles näites loome kohandatud lehemalli, kasutades likviid- ja lehemalli, mis põhineb veebimallil. Lisateave: Allika sisu talletamine veebimalle kasutades. Meie eesmärk on luua lihtne kahe veeruga mall, mis kasutab vasakul pool navigeerimiseks veebilingikomplekti ja kus lehe sisu kuvatakse paremal.

Etapp 1: veebimalli loomine ja likviidmalli koodi kirjutamine

Esmalt loome veebimalli ja kirjtuame likviidmalli koodi. Tõenäoliselt kasutame mõnd selle malli levinud elementi tulevaste mallide puhul uuesti. Niisiis loome ühise alusega malli, mida me laiendame kindla malliga. Alusmall annab nii lingirea lingid ja lehe pealkirja/päise kui ka määratleb üheveerulise paigutuse:

Ühe veeruga veebimalli kujundus.

Jootraha

Lisateave malli päriluse kohta, kasutades ploki ja laiendamise silte Malli sildid

Kahe veeruga kujundus (veebimall)

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

Etapp 2: uue veebimalli loomine, mis laiendab aluseks olevat kujunduse malli

Kasutage praeguse lehega seotud navigeerimise veebilingikomplekti, et luua uus veebimall, mis laiendab meie aluseks olevat kujunduse malli.

Veebimalli veebilinkide vasakpoolse navigeerimise paigutus.

Jootraha

Uurige, kuidas laadida veebilingikomplete, kasutades objekti veebilingid.

Navigeerimise veebilingid vasakul (veebimall)

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

Etapp 3: uue lehemalli loomine veebimalli põhjal

Selles etapis loome uue lehemalli, mis põhineb eelmises etapis loodud veebimallil.

Lehemalli veebilinkide vasakpoolse navigeerimise paigutus.

Etapp 4: veebilehe loomine sisu kuvamiseks

Looge meie lehemalli kasutav veebileht.
Minge lokaliseeritud sisu veebilehele.
Minge jaotisse Muu ja valige veebilinkide kogum, mille soovite väljal Navigeerimine kuvada.
Kui te nüüd oma lehte vaatate, peaksite nägema kõrval navigeerimist.