Pasirinktinio puslapio šablono kūrimas

Straipsnis
03/14/2023

Pastaba

Nuo 2022 m. spalio 12 d. „Power Apps“ portalai tampa „Power Pages“. Daugiau informacijos: „Microsoft Power Pages“ dabar yra visuotinai prieinama (tinklaraštis)
Greitai perkelsime ir suliesime „Power Apps“ portalų dokumentaciją su „Power Pages“ dokumentacija.

Šiame pavyzdyje sukursime pasirinktinį puslapio šabloną naudodami „Liquid“ ir puslapio šabloną, kuris pagrįstas žiniatinklio šablonu. Daugiau informacijos: Šaltinio turinio laikymas naudojant žiniatinklio šablonus. Mūsų tikslas yra sukurti paprastą dviejų stulpelių šabloną, kuris naudos žiniatinklio saitą kaip naršymo juostą kairėje, puslapio turinį pateikdamas dešinėje.

1 veiksmas: žiniatinklio šablono sukūrimas ir „Liquid“ šablono kodo rašymas

Pirmiausia sukursime savo žiniatinklio šabloną ir parašysime „Liquid“ šablono kodą. Tikriausiai kai kuriuos šio šablono elementus pakartotinai panaudosime būsimuose šablonuose. Todėl sukursime bendrą bazinį šabloną, kurį po to išplėsime konkrečiu šablonu. Mūsų bazinis šablonas pateiks naršymo kelio saitus ir puslapio pavadinimą / antraštę, taip pat apibrėš mūsų vieno stulpelio maketą:

Žiniatinklio šablono vieno stulpelio maketas.

Patarimas

Skaitykite apie šablonų paveldimumą naudojant žymes block ir extends: Šablonų žymės

Dviejų stulpelių maketas (žiniatinklio šablonas)

<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 veiksmas: naujo žiniatinklio šablono, išplečiančio mūsų bazinio maketo šabloną, kūrimas

Naudodami su dabartiniu puslapiu susietą naršymo žiniatinklio saitų rinkinį mūsų naršymo saitams, sukurkite naują žiniatinklio šabloną, kuris išplės mūsų bazinio maketo šabloną,

Žiniatinklio šablono saitų kairiosios naršymo srities maketas.

Patarimas

Susipažinkite su žiniatinklio saitų rinkinių įkėlimu naudojant žiniatinklio saitų objektą.

Žiniatinklio saitų kairioji naršymo sritis (žiniatinklio šablonas)

{% 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 veiksmas: naujo puslapio šablono kūrimas pagal žiniatinklio šabloną

Atlikdami šį veiksmą sukursite naują puslapio šabloną, kuris pagrįstas žiniatinklio šablonu, sukurtu atliekant ankstesnį veiksmą.

Puslapio šablono žiniatinklio saitų kairioji naršymo sritis.

4 veiksmas: tinklalapio kūrimas siekiant rodyti turinį

Sukurkite žiniatinklio puslapį, kuriame naudojamas mūsų puslapio šablonas.
Eikite į lokalizuoto turinio žiniatinklio puslapį.
Eikite į skyrių Įvairūs ir pažymėkite žiniatinklio saitų rinkinį, kurį norite matyti lauke Naršymas.
Kai dabar peržiūrite puslapį, turėtumėte matyti šoninę naršymo juostą.