Desarrollar el contenido del portal con el editor de páginas

Esta página se aplica a Apigee y Apigee Hybrid.

Consulta la documentación de Apigee Edge.

Con el editor de páginas, puedes definir el contenido del portal mediante Markdown o HTML.

Explorar el editor de páginas

Para acceder al editor de páginas, haz clic en el nombre de una página cuando veas la lista de páginas, tal como se describe en el artículo Gestionar las páginas de tu portal.

Se abrirá el editor de páginas:

Interfaz de usuario de Cloud Console

Haz clic para ver una imagen más grande

Interfaz clásica

Editor de páginas

El editor de páginas te permite hacer lo siguiente:

Editar contenido en el editor de páginas

Markdown es un lenguaje de formato sencillo que utiliza marcas de texto sin formato fáciles de leer y escribir. Su sintaxis se especifica mediante signos de puntuación. El código Markdown se convierte en HTML antes de renderizarse en tu navegador.

La barra de herramientas de edición rápida situada en la parte superior del editor de páginas ofrece combinaciones de teclas para aplicar formatos (como negrita, cursiva, etc.) o insertar etiquetas de Markdown (como listas, imágenes, enlaces, etc.).

Para ver un resumen rápido de la sintaxis de Markdown, en la barra de herramientas de edición rápida, haz lo siguiente:

Interfaz de usuario de Cloud Console

Haz clic en el icono Información.

Interfaz clásica

Haz clic en el icono .

Se muestra la guía de referencia rápida de la sintaxis de Markdown.

Para deshacer o rehacer la última edición, pulsa Comando + Z o Comando + Mayús + Z, respectivamente.

Te recomendamos que uses Markdown si quieres que tu flujo de trabajo de formato sea sencillo. Sin embargo, no está pensado para sustituir el HTML. En HTML puedes aplicar una gran variedad de formatos que no están disponibles en Markdown. Por ejemplo, puedes especificar una clase CSS para un elemento en HTML, pero no en Markdown:

   <p class="class1">

Puedes insertar HTML en cualquier parte del cuerpo del contenido. Para ello, solo tienes que introducir las etiquetas HTML.

Para obtener información sobre las etiquetas HTML, consulte la especificación de HTML5.

Añadir componentes de Angular Material

Angular Material ofrece una biblioteca de componentes de interfaz de usuario de vanguardia. Los componentes de Angular Material te permiten crear de forma rápida y sencilla interfaces de usuario coherentes, adaptables y accesibles utilizando principios de diseño modernos.

Componentes disponibles

La experiencia del portal se basa en Angular Material, y en las páginas se puede usar un conjunto limitado de componentes de Angular Material, que se resumen en la siguiente tabla.

Componente Ejemplo
Botones El siguiente código crea un botón rectangular con elevación.
<a mat-raised-button
   href="quickstart">
   Quick Start
</a>

El siguiente código crea un botón circular con un fondo transparente que incluye el icono de advertencia. El color del botón se define mediante la paleta de colores de advertencia.

<button mat-icon-button
   color="warn">
   <mat-icon aria-label="Example warning">warning</mat-icon>
</button>
Tarjeta El siguiente código crea una tarjeta. La tarjeta incluye componentes de botón e icono, así como texto de encabezado y de cuerpo. El color del botón se define mediante la paleta de colores 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>
Icono El siguiente código crea un icono de marca de verificación. Para ver una lista completa de los iconos compatibles, consulta Material Design - Icons.
<mat-icon>
   check_circle
</mat-icon>
Barra de herramientas El siguiente código crea una barra de herramientas sencilla con texto y un icono de carrito de la compra. 
<mat-toolbar color="primary">
   <span>My Store</span>
   <span class="space-buffer"></span>
   <mat-icon>add_shopping</mat-icon>
</mat-toolbar>

Gestionar la visibilidad de una página de tu portal

En el artículo Gestionar la visibilidad de una página en el portal se explica cómo gestionar la visibilidad de una página en el portal.

Previsualizar el contenido del portal

Para previsualizar el contenido del portal, haz lo siguiente:

  1. Accede al editor de páginas como se describe en Gestionar las páginas del portal.

  2. Previsualiza la página.

    Interfaz de usuario de Cloud Console

    1. Haz clic en Guardar.
    2. Haz clic en Vista previa.

    Interfaz clásica

    1. En la barra de herramientas del editor de páginas, haga clic en Vista previa.
    2. Desplázate por otras páginas del portal para previsualizar el contenido, si quieres.

Publicar contenido del portal

En Publicar el contenido del portal se explica cómo publicar y dejar de publicar contenido del portal.

Eliminar una página

En el artículo Eliminar páginas del portal se explica cómo eliminar páginas del portal.