Criar modelos da Web

• 12 minutos

Para criar modelos de página personalizados, você pode usar a linha Modelo da Web, que é um modelo de layout, basicamente. Por exemplo, se um modelo da Web incluir HTML estático, esse HTML será renderizado como está na saída da página que usa esse modelo. O real poder dos modelos da Web é a capacidade de conter um código Liquid, que adiciona recursos de processamento ao conteúdo estático, incluindo acesso a dados do Dataverse.

Modelo da Web é uma tabela simples que contém as seguintes colunas:

• Nome: quando um modelo é incluído em outro conteúdo ou estendido por outros modelos, ele é mencionado por esse nome.

• Site: linha do site em que o modelo é usado.

• Origem: o conteúdo de origem do modelo. Pode ser um texto estático, um fragmento de HTML ou, na maioria das vezes, um layout usando Liquid.

• Tipo MIME: define o tipo MIME (Multipurpose Internet Mail Extensions) que o servidor envia ao cliente quando o modelo é renderizado. Se não for fornecido um valor, ele será considerado text/html, que é um tipo padrão para páginas HTML. Você pode criar um modelo da Web que renderizará o conteúdo especializado. Por exemplo, você pode criar um modelo da Web que retorne alguns dados do Microsoft Dataverse no formato json. Nesse caso, o tipo MIME será definido como application/json.

Gerenciamento de modelos da Web

As implementações do Liquid nos sites do Power Pages contêm várias Marcas de modelo que ajudam a gerenciar modelos e promover a capacidade de reutilização.

Marca FetchXML

A marca fetchxml permite aos usuários consultar dados do Dataverse e renderiza os resultados em uma página.

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

A variável varResults contém os resultados da consulta.

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

Marca Comment

Com a marca comment, qualquer conteúdo no bloco não será renderizado, e o código Liquid não será executado. Essa marca é útil para incluir comentários estendidos em modelos complexos e para remover comentários temporariamente de blocos de código durante a solução de problemas.

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

A lógica anterior gera o seguinte resultado:

Este é um comentário.

Marca Raw

A marca raw permite a saída de código Liquid em uma página sem que ele seja analisado e implementado. Essa marca é útil para gerar conteúdo que usa sintaxe conflitante do lado do cliente, como handlebars. Também é útil quando o conteúdo da página precisa incluir fragmentos de código Liquid, como um artigo da base de dados de conhecimento que discute o uso da linguagem Liquid e inclui exemplos.

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

A lógica anterior gera o seguinte resultado:

Olá, {{ user.fullname }}. Prazer em conhecê-lo(a).

Observe como user.fullname é processado explicitamente em vez de ser processado como uma instrução Liquid e convertido no nome real do usuário.

Marca Include

A marca include inclui o conteúdo de um modelo em outro, por nome. Essa marca permite a reutilização de fragmentos de modelo comuns em vários locais, como a renderização de links sociais. O modelo incluído tem acesso a variáveis que estão definidas no modelo pai, e é possível passar parâmetros.

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

Essa lógica inclui a saída gerada pelo modelo Breadcrumbs que terá uma variável separator definida como o símbolo do colchete angular direito (>).

Marca Block

Usando a marca block, você pode definir um bloco em um modelo, que define uma região que pode ser substituída pelos modelos que estendem o modelo atual.

Marca Extend

Quando usada com a marca block, a extend é responsável pela herança do modelo. Essa marca permite que vários modelos usem um layout compartilhado durante a substituição de áreas específicas do layout pai. Quando extend é usada, deve ser o primeiro conteúdo no modelo e só pode ser seguida por uma ou mais marcas block.

Modelo base

A lógica do modelo base é a seguinte:

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

Modelo filho

A lógica do modelo filho é a seguinte:

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

O modelo filho gera a seguinte saída:

<div>
  Hello
  Power Pages websites
</div>

O uso típico das marcas extend e block é separar os modelos de layout e conteúdo. Os modelos pai ou base geralmente definem um layout de página amplo, como se fosse uma coluna única ou uma página de duas colunas. Os modelos filho que estendem a base só podem definir o conteúdo dos blocos conforme especificado pelo pai.

Para obter um exemplo de código Liquid abrangente que demonstra a herança do modelo com as marcas block/extend e include, consulte Layouts de página personalizados no Power Pages.

Práticas recomendadas para modelos da Web

Para melhorar a estrutura do modelo e tornar os modelos da Web mais gerenciáveis, siga estas diretrizes:

• Escolha nomes descritivos para seus modelos, pois eles serão referenciados ou incluídos como parte de outros modelos.

• Divida o layout da página e separe o layout do conteúdo. Esses layouts são candidatos a modelos extensíveis.

• Procure fragmentos repetíveis e reutilizáveis; eles podem ser definidos como submodelos e usarão a marca include.

• Use a marca include para ajudar a reutilizar o layout e os fragmentos de JavaScript comumente usados. Torne os modelos de JavaScript "inteligentes" usando parâmetros que estão disponíveis na marca include. Esses fragmentos são inseridos embutidos.

• Mova blocos maiores e reutilizáveis de JavaScript para separar arquivos e insira-os como referência em vez disso. O navegador do cliente os carrega separadamente e eles podem ser armazenados em cache. Além disso, você pode minimizar scripts carregados externamente, o que resultará em melhor desempenho.

• Encontre partes da página que precisam ser traduzidas para implementação multilíngue. Defina essas páginas como conteúdo de página ou trechos de conteúdo.

• Identifique fragmentos editáveis. Determine em quais partes da página da Web você deseja que os usuários sejam responsáveis pelo gerenciamento e pela manutenção de conteúdo.

• Seja generoso com o layout ao criar um modelo, mas evite o excesso de linhas em branco usando hifens em marcas; por exemplo:

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

• Use a marca comments para descrever partes complexas do modelo.

• Estude modelos que já estão implantados no portal do iniciante e procure por técnicas de Liquid em Layouts de página personalizados no Power Pages.

Vários modelos Liquid prontos para uso são instalados quando você provisiona um portal do iniciante: Modelos da Web integrados. Seus nomes são fixos, e alguns desses modelos podem não estar disponíveis para edição.

Para obter mais informações, consulte Visão geral do Liquid.