Desenvolver conteúdo do portal através do editor de páginas

Esta página aplica-se ao Apigee e ao Apigee Hybrid.

Ver documentação do Apigee Edge.

Com o editor de páginas, define o conteúdo do portal através de Markdown ou HTML.

Explorar o editor de páginas

Aceda ao editor de páginas clicando no nome de uma página quando estiver a ver a lista de páginas, conforme descrito no artigo Gerir as páginas no seu portal.

O editor de páginas é aberto:

O editor de páginas permite-lhe:

• Edite o conteúdo do portal e adicione componentes do Angular Material no painel do lado esquerdo
• Use a barra de ferramentas de edição rápida para aplicar formatos ou inserir etiquetas Markdown rapidamente
• Edite os detalhes da página, como o nome, o caminho e a descrição, no painel direito
• Gerir a visibilidade de uma página no painel direito
• Pré-visualize o conteúdo do portal
• Publicar ou anular a publicação de uma página (consulte a secção Publique o conteúdo do seu portal)
• Gerir a página nos menus de navegação (consulte o artigo Configure a navegação)
• Veja o tempo decorrido desde a última publicação da página
• Elimine uma página

Editar conteúdo no editor de páginas

A linguagem de remarcação é uma linguagem de formatação simples que usa remarcação de texto simples fácil de ler e escrever. A respetiva sintaxe é especificada através de carateres de pontuação. O Markdown é convertido em HTML antes da renderização no navegador.

A barra de ferramentas de edição rápida na parte superior do editor de páginas oferece atalhos para aplicar formatos (como negrito, itálico, etc.) ou inserir etiquetas Markdown (como listas, imagens, links, etc.).

Para um resumo rápido da sintaxe Markdown, na barra de ferramentas de edição rápida, clique no ícone Informações.

É apresentada a referência rápida da sintaxe Markdown.

Para anular ou refazer a última edição, prima Command+z ou Command+Shift+z, respetivamente.

Nota: quando adicionar links, tenha em atenção o seguinte:

• Quando adicionar links a outras páginas e imagens no seu portal, recomendamos que use caminhos relativos em vez de caminhos absolutos para evitar links danificados se decidir personalizar o seu domínio mais tarde.
• Quando adiciona links a secções no portal, tem de incluir o nome da página seguido da âncora na definição do link. Por exemplo, [Link to anchor] (pagename#anchorname)

Recomendamos o Markdown se quiser manter o fluxo de trabalho de formatação simples. No entanto, não se destina a substituir o HTML. Pode fazer uma grande variedade de formatações em HTML que não pode fazer em Markdown. Por exemplo, pode especificar uma classe CSS para um elemento em HTML. Não pode fazê-lo em Markdown:

   <p class="class1">

Pode inserir HTML em qualquer parte do corpo do conteúdo, bastando introduzir as etiquetas HTML.

Nota: quando usar HTML, tenha em atenção o seguinte:

• A sintaxe Markdown não é válida em etiquetas HTML.
• Tem de adicionar uma quebra de linha entre um bloco de texto HTML e o bloco de texto Markdown que se segue para que o conteúdo Markdown seja formatado corretamente.

Para obter informações sobre etiquetas HTML, consulte a especificação HTML5.

Adicionar componentes do Angular Material

O Angular Material oferece uma biblioteca de componentes da IU de vanguarda. Os componentes do Angular Material permitem-lhe criar de forma rápida e fácil interfaces de utilizador consistentes, responsivas e acessíveis, usando princípios de design modernos.

Componentes disponíveis

A experiência do portal é criada com o Angular Material, e pode ser usado um conjunto limitado de componentes do Angular Material nas páginas, resumidos na tabela seguinte.

Nota: a página inicial no portal de exemplo demonstra como alguns destes componentes são usados e renderizados. Um subconjunto dos exemplos na tabela seguinte baseia-se nos conteúdos da página inicial, com alguns dos estilos removidos para facilitar a leitura.

Componente	Exemplo
Botões	O código seguinte cria um botão retangular com elevação. <a mat-raised-button href="quickstart"> Quick Start </a> O código seguinte cria um botão circular com um fundo transparente que inclui o ícone de aviso. A cor do botão é definida através da paleta de cores de aviso. <button mat-icon-button color="warn"> <mat-icon aria-label="Example warning">warning</mat-icon> </button>
Cartão	O código seguinte cria um cartão. O cartão inclui componentes de botões e ícones, bem como um título e texto do corpo. A cor do botão é definida através da paleta de cores principal. <mat-card href="apis"> <mat-card-header color="primary"> <mat-icon> class </mat-icon> <h1> APIs </h1> </mat-card-header> <mat-card-content> <p class="home-page-card-content-text"> Learn about and try our APIs. </p> </mat-card-content> <mat-card-actions> <button mat-button> View APIs </button> </mat-card-actions> </mat-card>
Ícone	O código seguinte cria um ícone de marca de verificação. Para ver uma lista completa dos ícones suportados, consulte Material Design – Ícones. <mat-icon> check_circle </mat-icon>
Barra de ferramentas	O código seguinte cria uma barra de ferramentas simples com texto e um ícone de carrinho de compras. <mat-toolbar color="primary"> <span>My Store</span> <span class="space-buffer"></span> <mat-icon>add_shopping</mat-icon> </mat-toolbar>

Gerir a visibilidade de uma página no seu portal

A gestão da visibilidade de uma página no seu portal é descrita no artigo Gerir a visibilidade de uma página no seu portal.

Pré-visualizar conteúdo do portal

Para pré-visualizar o conteúdo do portal:

1. Aceda ao editor de páginas, conforme descrito em Gerir as páginas no seu portal.

2. Pré-visualize a página.

   1. Clique em Guardar.
   2. Clique em Pré-visualizar.
   Nota: a Apigee recomenda que pré-visualize todo o conteúdo do portal antes de o publicar.

Publicar conteúdo do portal

A publicação e a anulação da publicação de conteúdo do portal são descritas no artigo Publicar o conteúdo do portal.

Eliminar uma página

A eliminação de páginas do portal é descrita no artigo Eliminar páginas do seu portal.