Desarrolla el contenido del portal mediante 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 con Markdown o HTML.

Explora el editor de páginas

Para acceder al editor de páginas, haz clic en el nombre de una página cuando consultes la lista de páginas, como se describe en Administra las páginas de tu portal.

Se abrirá el editor de páginas:

IU de la consola de Cloud

Haz clic para obtener una imagen más grande

IU clásica

Editor de páginas

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

Edita el contenido en el editor de páginas

Markdown es un lenguaje de formato simple que usa un lenguaje de marcado de texto sin formato que es fácil de leer y escribir. Su sintaxis se especifica mediante caracteres de puntuación. Markdown se convierte a HTML antes de procesarse en tu navegador.

En la barra de herramientas de edición rápida en la parte superior del editor de páginas, se proporcionan accesos directos para aplicar formatos (como negrita, cursiva, y demás) o insertar etiquetas de Markdown (como listas, imágenes, vínculos, y demás).

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

IU de la consola de Cloud

Haz clic en el ícono de Información.

IU clásica

Haz clic en el ícono .

Se muestra la referencia rápida de la sintaxis de Markdown.

Para deshacer o rehacer la última edición, haz clic en Comando + Z o en Comando + Mayúsculas + Z, respectivamente.

Se recomienda usar Markdown si deseas mantener tu flujo de trabajo de formato simple. Sin embargo, no tiene como objetivo reemplazar a HTML. Existe una amplia variedad de formatos que puedes realizar en HTML y que no puedes realizar en Markdown. Por ejemplo, puedes especificar una clase de CSS para un elemento en HTML, pero no puedes hacerlo en Markdown:

   <p class="class1">

Puedes insertar HTML en cualquier lugar dentro del cuerpo del contenido con solo ingresar las etiquetas HTML.

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

Agrega componentes de material angular

El material angular proporciona una biblioteca avanzada de componentes de IU. Los componentes de material angular te permiten crear interfaces de usuario coherentes, receptivas y accesibles con rapidez que usen principios de diseño modernos.

Componentes disponibles

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

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

Mediante el siguiente código, se crea un botón circular con un fondo transparente en el que se incluye el ícono de advertencia. El color del botón se define mediante el uso de la paleta de colores para mensajes de advertencia.

<button mat-icon-button
   color="warn">
   <mat-icon aria-label="Example warning">warning</mat-icon>
</button>
Tarjeta Mediante el siguiente código, se crea una tarjeta. En la tarjeta, se incluyen componentes de botones y de íconos, además de texto de cuerpo y de encabezado. El color del botón se define mediante el uso de 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>
Ícono Mediante el siguiente código, se crea un ícono de marca de verificación. Para obtener una lista completa de los íconos compatibles, consulta Material Design: íconos.
<mat-icon>
   check_circle
</mat-icon>
Barra de herramientas Mediante el siguiente código, se crea una barra de herramientas simple con texto y un ícono de carrito de compras. 
<mat-toolbar color="primary">
   <span>My Store</span>
   <span class="space-buffer"></span>
   <mat-icon>add_shopping</mat-icon>
</mat-toolbar>

Administra la visibilidad de una página en tu portal

En Administra la visibilidad de una página en tu portal, se describe cómo administrar la visibilidad de una página en tu portal.

Obtén una vista previa del contenido del portal

Para obtener una vista previa del contenido del portal, haz lo siguiente:

  1. Accede al editor de páginas como se describe en Administra las páginas de tu portal.

  2. Obtén una vista previa de la página.

    IU de la consola de Cloud

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

    IU clásica

    1. Haz clic en Vista previa en la barra de herramientas del editor de páginas.
    2. Navega por otras páginas en tu portal para obtener una vista previa del contenido, según lo desees.

Publica contenido del portal

En Publica el contenido de tu portal, se describe cómo publicar y anular la publicación del contenido del portal.

Elimina una página

En Borra páginas del portal, se describe cómo borrar páginas del portal.