Pielāgotas lapas veidnes izveide

Raksts
03/14/2023

Piezīme

No 2022. gada 12. oktobra, Power Apps portāli ir Power Pages. Papildinformācija. Pakalpojums Microsoft Power Pages tagad ir vispārēji pieejams (emuārs)
Drīzumā Power Apps portālu dokumentācija tiks migrēta un sapludināta ar Power Pages dokumentāciju.

Šajā piemērā tiks izveidota pielāgotas lapas veidne, izmantojot Liquid un lapas veidni, kas ir izveidota, izmantojot tīmekļa vedni. Papildinformācija Avota satura glabāšana, izmantojot tīmekļa veidnes. Mūsu mērķis ir izveidot vienkāršu veidni ar divām kolonnām, kurā kā kreisās puses navigācijas elementi tiek izmantota tīmekļa saišu kopa un labajā pusē atrodas lapas saturs.

1. darbība. Tīmekļa veidnes izveide un Liquid veidnes koda rakstīšana

Vispirms izveidosim tīmekļa veidni un rakstīsim Liquid veidnes kodu. Iespējams, ka atkārtoti izmantosim dažus šīs veidnes kopīgos elementus turpmākajās veidnēs. Tādēļ izveidosim kopīgu pamata veidni, kuru pēc tam paplašināsim ar īpašo veidni. Pamata veidne nodrošinās atpakaļceļa saites un lapas virsrakstu/galveni, kā arī definēs vienas kolonnas izkārtojumu:

Tīmekļa veidne vienas kolonnas izkārtojumā.

Padoms

Lasīt par veidnes mantošanu, izmantojot tagus block un extends: Veidņu tagi

Divu kolonnu izkārtojums (tīmekļa veidne)

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

2. darbība. Tādas jaunas tīmekļa veidnes izveide, paplašinot mūsu pamata izkārtojuma veidni

Izmantojiet navigācijas tīmekļa saišu kopu, kas ir saistīta ar pašreizējo mūsu navigācijas saišu lapu, lai izveidotu jaunu tīmekļa veidni, paplašinot mūsu pamata izkārtojuma veidni.

Tīmekļa veidnes saišu kreisās puses navigācijas izkārtojums.

Padoms

Iepazīstieties, kā ielādēt tīmekļa saišu kopas, izmantojot objektu weblinks.

Weblinks kreisās puses navigācijas elementi (tīmekļa veidne)

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

3. darbība. Jaunas lapas veidnes izveide, izmantojot tīmekļa veidni

Šīs darbības ietvaros mēs izveidosim jaunu lapas veidni, izmantojot tīmekļa veidni, ko izveidojām iepriekšējās darbības ietvaros.

Lapas veidnes tīmekļa saišu kreisās puses navigācijas izkārtojums.

4. darbība. Satura rādīšanai paredzētas tīmekļa lapas izveide

Izveidojiet tīmekļa lapu, kas izmanto mūsu lapas veidni.
Dodieties uz lokalizētā satura tīmekļa lapu.
Dodieties uz sadaļu Dažādi un atlasiet tīmekļa saišu kopu, ko vēlaties rādīt laukā Navigācija.
Kad tagad skatāt savu lapu, ir jābūt redzamai sānu navigācijai.