Crear plantillas web

Completado

Para crear plantillas de página personalizadas, puede usar la fila Plantilla web, que es, básicamente, una plantilla de diseño. Por ejemplo, si una plantilla web incluye HTML estático, este HTML se representará "tal cual" en el resultado de la página que usa esa plantilla. El verdadero potencial de las plantillas web proviene de la capacidad de contener código de Liquid, que agrega capacidades de procesamiento al contenido estático, incluido el acceso a datos de Dataverse.

Una plantilla web es una tabla que contiene las siguientes columnas:

• Name: cuando una plantilla se incluye en otro contenido o se extiende mediante otras plantillas, se hace referencia a ella mediante este nombre.

• Sitio web: fila del sitio web donde se utiliza la plantilla.

• Source: el contenido original de la plantilla. Puede ser un texto estático, un fragmento de HTML o, lo más frecuente, un diseño con Liquid.

• Tipo MIME: define qué tipo MIME (extensiones multipropósito de correo Internet) enviará el servidor al cliente cuando se represente la plantilla. Si no se proporciona un valor, se asume que se usa text/html, que es un tipo estándar para páginas HTML. Es posible crear una plantilla web que represente contenido especializado. Por ejemplo, puede crear una plantilla web que devuelva algunos datos de Microsoft Dataverse en formato json. En este caso, el tipo MIME se establecería en application/json.

Administración de plantillas web

Las implementaciones de Liquid dentro de los sitios web de Power Pages contienen numerosas etiquetas de plantilla que ayudan a administrar plantillas y promueven la reutilización.

Etiqueta de FetchXML

La etiqueta fetchxml permite al usuario consultar datos de Dataverse y muestra los resultados en una página.

{% fetchxml varResults %}
<!— Fetchxml query -->
<fetch>
  <entity name="account">
    <attribute name="name" />
  </entity>
</fetch>
{% endfetchxml %}

La variable varResults contiene los resultados de la consulta.

{% for account in varResults.results.entities %} 
  <p>{{ account.name }}</p>
{% endfor %}

Importante

Los permisos de tabla se aplican siempre a los datos que se recuperan con Liquid, incluida la etiqueta fetchxml.

Etiqueta Comment

Con la etiqueta comment, no se representará ningún contenido del bloque y no se ejecutará ningún código Liquid. Esta etiqueta es útil para incluir comentarios propagados en plantillas complejas y para comentar temporalmente bloques de código al solucionar problemas.

This is a {% comment %}very useful {% endcomment %}comment.

La lógica anterior genera el siguiente resultado:

Esto es un comentario.

Etiqueta Raw

La etiqueta raw permite la salida de código Liquid en una página sin tener que analizarlo e implementarlo. Esta etiqueta resulta útil para generar contenido que utiliza una sintaxis conflictiva del lado del cliente, como los Handlebars. También es útil cuando el contenido de la página debe incluir fragmentos de código Liquid, como un artículo de la Knowledge Base que analice el uso del lenguaje Liquid e incluya ejemplos.

Hello, {% raw %}{{ user.fullname }}.{% endraw %} Nice to meet you.

La lógica anterior genera el siguiente resultado:

Hola, {{ user.fullname }}. Un placer conocerte.

Observe cómo user.fullname se muestra explícitamente en lugar de procesarse como una instrucción Liquid y convertirse en el nombre real del usuario.

Etiqueta Include

La etiqueta include incluye el contenido de una plantilla en otra, por nombre. Esta etiqueta permite la reutilización de fragmentos de plantillas comunes en varios lugares, por ejemplo, la representación de vínculos sociales. La plantilla incluida tiene acceso a cualquier variable que se defina en la plantilla principal; es posible pasar parámetros.

{% include 'Breadcrumbs', separator: '>' %}

Esta lógica incluye el resultado generado por la plantilla Breadcrumbs, que tendrá una variable separator establecida en el símbolo del corchete angular derecho (>).

Etiqueta Block

Al usar la etiqueta block, puede definir un bloque dentro de una plantilla, que define una región que puede sobrescribirse opcionalmente con plantillas que extienden la plantilla actual.

Etiqueta Extend

Cuando se usa junto con la etiqueta block, la etiqueta extend permite heredar la plantilla. Esta etiqueta permite que varias plantillas usen un diseño compartido, a la par que anula áreas específicas del diseño principal. Cuando se usa extend, debe ser el primer contenido de la plantilla y solo puede seguirla una o más etiquetas de bloque.

Plantilla base

La lógica de la plantilla base es la siguiente:

<div>
Hello
{% block content %}default content{% endblock %}
</div>

Plantilla secundaria

La lógica de la plantilla secundaria es la siguiente.

{% extends 'Base Template' %}
{% block content %}Power Pages websites{% endblock%}

La plantilla secundaria genera el siguiente resultado:

<div>
  Hello
  Power Pages websites
</div>

El uso típico de las etiquetas extend y block es separar plantillas de diseño y contenido. Las plantillas principales o base suelen definir un diseño de página amplio, por ejemplo, si se trata de una página con una o dos columnas. Las plantillas secundarias que extienden la base solo pueden definir el contenido de los bloques según lo especificado por la principal.

Para obtener un ejemplo completo de código Liquid que demuestre la herencia de plantillas con las etiquetas block/extend e include, consulte Diseños de página personalizados en Power Pages.

Procedimientos recomendados con plantillas web

Para mejorar la estructura de la plantilla y hacer que las plantillas web se controlen mejor, observe las siguientes instrucciones:

• Elija nombres descriptivos para las plantillas, ya que se hará referencia a ellos o se incluirán en otras plantillas.

• Desglose el diseño de la página y separe el diseño del contenido. Estos diseños son candidatos a plantillas extensibles.

• Compruebe si hay fragmentos repetibles y reutilizables: pueden definirse como subplantillas y utilizarán la etiqueta include.

• Use la etiqueta include para ayudar a reutilizar el diseño y los fragmentos JavaScript de uso común. Haga que sus plantillas de JavaScript sean "inteligentes" mediante los parámetros disponibles en la etiqueta include. Estos fragmentos se insertan en línea.

• Mueva los bloques reutilizables más grandes de JavaScript para separar archivos e insértelos como referencia. El navegador del cliente los carga por separado y se pueden almacenar en caché. Además, puede minificar los scripts cargados externamente, lo que dará como resultado un mejor rendimiento.

• Encuentre las partes de la página que deben traducirse para la implementación multilingüe. Defina estas páginas como contenido de página o fragmentos de contenido.

• Identifique los fragmentos editables. Determine en qué partes de la página web desea que los usuarios sean responsables de la administración y el mantenimiento del contenido.

• Al crear una plantilla, sea generoso con el diseño, pero evite el exceso de líneas en blanco utilizando guiones en sus etiquetas; por ejemplo:

  {%- if username -%}
    Hello, {{ user.firstname}}
  {%- endif -%}
  

• Use la etiqueta comments para describir partes complejas de la plantilla.

• Observe las plantillas que ya están implementadas con el Portal de inicio y busque técnicas de Liquid en Diseños de página personalizados en Power Pages.

Varias plantillas de Liquid ya preparadas se encuentran instaladas cuando aprovisiona un portal de inicio: Plantillas web incorporadas. Sus nombres son fijos y es posible que algunas de estas plantillas no se puedan editar.

Para obtener más información, consulte Información general sobre Liquid.