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 mediante el uso de 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.

Editor de páginas

Tal como se destaca en la figura anterior, 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, haz clic en ícono de Markdown en la barra de herramientas de edición rápida para ver 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

Para administrar la visibilidad de una página en tu portal, debes permitir el acceso a lo siguiente:

Para administrar la visibilidad de una página en tu portal, haz lo siguiente:

  1. Haz clic en Administrar junto al público en el panel derecho del editor de páginas.
  2. Selecciona la configuración de visibilidad. Si te inscribiste en la versión beta de la función de públicos, selecciona una de las siguientes opciones:
    • Pública (visible para todos) para que todos los usuarios vean la página.
    • Usuarios Autenticados para que solo los usuarios registrados vean la página.
    • Públicos seleccionados para seleccionar públicos específicos que tu deseas que vean la página. Consulta Administra los públicos de tu portal.
      Para administrar tus públicos, haz clic en Crear o modificar públicos.

    De lo contrario, selecciona una de las siguientes opciones:
    • Usuarios anónimos para que todos los usuarios vean la página.
    • Usuarios registrados para que solo los usuarios registrados vean la página.
  3. Haga clic en Apply.

Obtén una vista previa del contenido del portal

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

Publica contenido del portal

Para publicar contenido del portal, haz clic en Publicar en el panel derecho. Para anular la publicación del contenido del portal, haz clic en Anular publicación en el panel derecho. Consulta también Publicar el contenido de tu portal.

Elimina una página

Para borrar una página del editor de portales, haz clic en Borrar en el panel derecho del editor de páginas. Se te solicitará que confirmes la operación.