Crear una plantilla de pàgina personalitzada

Nota

Des del 12 d'octubre de 2022, els portals del Power Apps són Power Pages. Més informació: Microsoft Power Pages ara està disponible de manera general (bloc)
Ben aviat migrarem i combinarem la documentació dels portals del Power Apps amb la documentació del Power Pages.

En aquest exemple, crearem una plantilla de pàgina personalitzada mitjançant Liquid i una plantilla de pàgina basada en una plantilla web. Més informació: Emmagatzematge de contingut d'origen mitjançant plantilles web. El nostre objectiu és crear una plantilla senzilla de dues columnes que utilitzi un conjunt d'enllaços web com a navegació per la part esquerra amb el contingut de la pàgina a la dreta.

Pas 1: crear una plantilla web i introduir el codi de plantilla de Liquid.

En primer lloc, crearem la plantilla web i introduirem el codi de plantilla de Liquid. Ens adonem que és probable que utilitzem alguns elements comuns d'aquesta plantilla en les plantilles futures. Per tant, crearem una plantilla base comuna que ampliarem amb la plantilla específica. La plantilla base proporcionarà enllaços de rutes de navegació i el títol o la capçalera de la nostra pàgina, així com defineix el disseny d'una columna:

Suggeriment

Llegiu informació sobre l'herència de la plantilla mitjançant les etiquetes block i extends: Etiquetes de plantilla

Disposició de dues columnes (plantilla 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>

Pas 2: Crear una nova plantilla web que ampliï la plantilla de disseny

Utilitzeu el conjunt d'enllaços web associat amb la pàgina actual per als enllaços de navegació per crear una nova plantilla web que ampliï la plantilla de disseny base.

Suggeriment

Familiaritzeu-vos amb com carregar conjunts d'enllaços web fent servir l'objecte weblinks.

Navegació esquerra dels enllaços (plantilla 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 %}

Pas 3: crear una plantilla de pàgina nova basada en una plantilla web

En aquest pas, crearem una nova plantilla de pàgina basada en la plantilla web que hem creat en el pas anterior.

Pas 4: Crear una pàgina web per mostrar contingut

1. Creeu una pàgina web que utilitzi la nostra plantilla de pàgina.

   

2. Aneu a la pàgina web de contingut localitzat.

   

3. Aneu a la secció Diversa i seleccioneu el conjunt d'enllaços web que voleu visualitzar al camp de navegació.

   

4. Quan visualitzeu ara la pàgina, hauríeu de veure la navegació lateral.

   

Consulteu també

Creació d'una plantilla de pàgina personalitzada per representar una font RSS
Representació d'una llista associada amb la pàgina actual
Representació d'una capçalera del lloc web i d'una barra de navegació principal
Representació de fins a tres nivells de la jerarquia de la pàgina mitjançant la navegació híbrida

Nota

Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)

Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).