Como desenvolver conteúdo de portal usando o editor de páginas

Esta página se aplica à Apigee e à Apigee híbrida.

Confira a documentação da Apigee Edge.

Com o editor de páginas, você define o conteúdo do portal usando Markdown ou HTML.

Como explorar o editor de páginas

Acesse o editor de páginas clicando no nome de uma página ao visualizar a lista de páginas, conforme descrito em Gerenciamento das páginas no seu portal.

O editor de páginas é aberto:

IU do Console do Cloud

IU clássica

Com o editor de páginas, é possível:

• editar o conteúdo do portal e adicionar componentes do material angular no painel esquerdo;
• usar a barra de ferramentas de edição rápida para aplicar formatos ou inserir tags Markdown rapidamente;
• editar detalhes da página, como nome, caminho e descrição, no painel direito;
• Gerenciar a visibilidade de uma página no painel direito
• visualizar o conteúdo do portal;
• publicar ou cancelar a publicação de uma página (consulte Publicar o conteúdo do seu portal);
• gerenciar a página nos menus de navegação (consulte Configurar a navegação);
• Ver a quantidade de tempo desde a última publicação da página
• Excluir uma página

Como editar o conteúdo no editor de páginas

O Markdown é uma linguagem de formatação prática que usa marcação de texto simples e de fácil leitura e escrita. A sintaxe é especificada com caracteres 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, fornece atalhos para aplicar formatos (como negrito, itálico etc.) ou inserir tags Markdown (como listas, imagens, links etc.).

Para um breve resumo da sintaxe do Markdown, na barra de ferramentas de edição rápida:

IU do Console do Cloud

Clique no ícone Informações.

IU clássica

Clique no ícone .

A referência rápida da sintaxe Markdown é exibida.

Para desfazer ou refazer a última edição, clique em Command+z ou Command+Shift+z, respectivamente.

Observação: ao adicionar links, considere o seguinte:

• Ao adicionar links a outras páginas e imagens no portal, recomendamos usar caminhos relativos, em vez de absolutos, para evitar links corrompidos, caso decida personalizar seu domínio mais tarde.
• Ao adicionar links para seções no portal, inclua o nome da página seguido pela âncora na definição do link. Por exemplo, [Link para a âncora] (pagename#anchorname)

O Markdown é recomendado se você quiser manter o fluxo de trabalho de formatação simples. No entanto, o objetivo dele não é substituir HTML. Há uma grande variedade de formatações que você pode fazer em HTML e que não é possível fazer no Markdown. Por exemplo, você pode especificar uma classe CSS para um elemento em HTML; não é possível fazer isso no Markdown:

   <p class="class1">

Você pode inserir HTML em qualquer lugar do corpo do conteúdo simplesmente inserindo as tags HTML.

Observação: ao usar HTML, observe o seguinte:

• A sintaxe do Markdown não é válida nas tags HTML.
• Adicione uma quebra de linha entre um bloco de texto HTML e o bloco de texto Markdown para segui-lo. Assim, o conteúdo do Markdown é formatado corretamente.

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

Como adicionar componentes do material angular

O material Angular fornece uma biblioteca de componentes de IU de última geração. Os componentes do material Angular permitem construir rapidamente e facilmente interfaces do usuário consistentes, responsivas e acessíveis que usam princípios modernos de design.

Componentes disponíveis

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

Observação: a página inicial do portal de amostra demonstra como alguns desses componentes são usados e renderizados. Um subconjunto dos exemplos na tabela abaixo é baseado no conteúdo da página inicial, com alguns dos estilos removidos para facilitar a leitura.

Componente	Exemplo
botões	O código a seguir cria um botão retangular com elevação. <a mat-raised-button href="quickstart"> Quick Start </a> O código a seguir cria um botão circular com um plano de fundo transparente que inclui o ícone de aviso. A cor do botão é definida usando a 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 a seguir cria um card. Esse card inclui componentes de botão e ícone, além do texto do cabeçalho e corpo. A cor do botão é definida por meio 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 a seguir cria um ícone de verificação. Para ver uma lista completa de ícones compatíveis, consulte Material Design - Ícones. <mat-icon> check_circle </mat-icon>
Barra de ferramentas Google	O código a seguir 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>

Como gerenciar o público de uma página no seu portal

O gerenciamento da visibilidade de uma página no portal é descrito em Como gerenciar a visibilidade de uma página no portal.

Como visualizar o conteúdo do portal

Para visualizar o conteúdo do portal:

1. Acesse o editor de páginas conforme descrito em Gerenciar as páginas no seu portal.

2. Visualize a página.

   IU do Console do Cloud

   1. Clique em Salvar.
   2. Clique em Visualização.

   IU clássica

   1. Clique em Visualizar na barra de ferramentas do editor de páginas.
   2. Navegue por outras páginas no portal para visualizar o conteúdo, conforme desejado.
   Observação: a Apigee recomenda visualizar todo o conteúdo do portal antes de publicá-lo.

Como publicar conteúdo do portal

A publicação e o cancelamento da publicação de conteúdo do portal são descritos em Como publicar o conteúdo do portal.

Excluir uma página

A exclusão de páginas do portal é descrita em Excluir páginas do portal.