Crear una plantilla de página personalizada

Artículo
04/25/2023

Nota

A partir del 12 de octubre de 2022, los portales de Power Apps son Power Pages. Más información: Microsoft Power Pages ya está disponible para el público en general (blog)
Pronto migraremos y fusionaremos la documentación de los portales de Power Apps con la documentación de Power Pages.

En este ejemplo, crearemos una plantilla de páginas personalizada, usando Liquid y una plantilla de página que se basa en una plantilla web. Más información:Almacenar contenido de origen con plantillas web. Nuestra objetivo es crear una plantilla simple de dos columnas que use un conjunto de vínculos web como navegación del lado izquierdo, con el contenido de páginas a la derecha.

Paso 1. Crear una plantilla web y escribir el código de plantilla de Liquid

Primero, crearemos nuestra plantilla web y escribiremos el código de plantilla de Liquid. Es probable que reutilicemos algunos elementos comunes de esta plantilla en plantillas futuras. De esta manera, crearemos una plantilla base común que ampliaremos con nuestra plantilla específica. Nuestra plantilla base proporcionará vínculos de ruta de navegación y nuestro título/encabezado de página, así como el diseño de una columna:

Diseño de una columna de plantilla web.

Sugerencia

Lea sobre herencia de plantilla con las etiquetas block y extends: Etiquetas de plantilla

Diseño de dos columnas (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>

Paso 2: Crear una nueva plantilla web que amplíe nuestra plantilla de diseño base

Utilice el conjunto de vínculos web de navegación asociado con la página actual para nuestros vínculos de navegación para crear una nueva plantilla web que amplía nuestra plantilla de diseño base.

Diseño de navegación izquierda de vínculos web de plantilla web.

Sugerencia

Familiarícese sobre cómo cargar conjuntos de vínculos web mediante el objeto weblinks.

Navegación izquierda por weblinks (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 %}

Paso 3: Crear una nueva plantilla de página web basada en la plantilla web

En este paso, crearemos una nueva plantilla de página que se base en la plantilla web que creamos en el paso anterior.

Diseño de navegación izquierda de vínculos web de plantilla de página.

Paso 4: Crear una página web para mostrar contenido

Cree una página web que utilice nuestra plantilla de página.
Vaya a la página web de contenido localizado.
Vaya a la sección Diverso y seleccione el conjunto de enlaces web que desea mostrar en el campo Navegación.
Cuando ahora vea su página, debería ver la navegación lateral.