Développer le contenu du portail à l'aide de l'éditeur de page

Cette page s'applique à Apigee et à Apigee hybrid.

Consultez la documentation d'Apigee Edge.

L'éditeur de page vous permet de définir le contenu de votre portail à l'aide de Markdown ou HTML.

Explorer l'éditeur de page

Pour accéder à l'éditeur de pages, cliquez sur le nom d'une page lorsque la liste des pages est affichée, comme décrit dans la section Gérer les pages de votre portail.

L'éditeur de page s'ouvre :

Interface utilisateur de la console Cloud

Cliquez pour agrandir l'image

UI classique

Éditeur de page

L'éditeur de page vous permet de :

Modifier le contenu dans l'éditeur de page

Markdown est un langage de mise en forme simple qui utilise un balisage en texte brut facile à lire et à écrire. Sa syntaxe est spécifiée au moyen de caractères de ponctuation. Markdown est converti au format HTML avant son affichage dans votre navigateur.

La barre d'outils de modification rapide en haut de l'éditeur de page propose des raccourcis permettant d'appliquer des formats (gras, italique, etc.) ou d'insérer des balises Markdown (listes, images, liens, etc.).

Pour obtenir un bref résumé de la syntaxe Markdown, dans la barre d'outils de modification rapide :

Interface utilisateur de la console Cloud

Cliquez sur l'icône Informations.

UI classique

Cliquez sur l'icône .

L'aperçu rapide de la syntaxe Markdown s'affiche.

Pour annuler ou rétablir la dernière modification, utilisez le raccourci clavier Cmd+Z ou Ctlr+Maj+Z, respectivement.

Le format Markdown est recommandé si vous souhaitez que votre workflow de mise en forme reste simple. Il ne s'agit toutefois pas de HTML. Vous pouvez effectuer une grande variété de mises en forme au format HTML dans Markdown. Par exemple, vous pouvez spécifier une classe CSS pour un élément en HTML. Vous ne pouvez pas effectuer cette opération dans Markdown :

   <p class="class1">

Vous pouvez insérer du code HTML n'importe où dans le corps du contenu : il vous suffit de saisir les balises HTML.

Pour en savoir plus sur les balises HTML, consultez la spécification HTML5.

Ajouter des composants matériels Angular

Le matériel Angular fournit une bibliothèque de composants d'interface utilisateur aux performances optimales. Les composants matériels Angular vous permettent de créer rapidement et facilement des interfaces utilisateur cohérentes, réactives et accessibles grâce à des principes de conception modernes.

Composants disponibles

L'expérience de portail est conçue à l'aide de matériels Angular, et un ensemble limité de composants matériels Angular peuvent être utilisés dans les pages, comme résumé dans le tableau suivant.

Composant Exemple
Boutons Le code suivant crée un bouton rectangulaire avec élévation.
<a mat-raised-button
   href="quickstart">
   Quick Start
</a>

Le code suivant crée un bouton circulaire avec un arrière-plan transparent qui contient l'icône d'avertissement. La couleur du bouton est définie à l'aide de la palette de couleurs chaudes.

<button mat-icon-button
   color="warn">
   <mat-icon aria-label="Example warning">warning</mat-icon>
</button>
Fiche Le code suivant crée une fiche. La fiche inclut des composants bouton et des icônes, ainsi qu'un titre et un corps de texte. La couleur du bouton est définie à l'aide de la palette de couleurs primaires.

<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>
Icône Le code suivant crée une icône de coche. Pour obtenir la liste complète des icônes compatibles, consultez la page Material Design – Icônes.
<mat-icon>
   check_circle
</mat-icon>
Barre d'outils Le code suivant crée une barre d'outils simple avec du texte et une icône de panier. 
<mat-toolbar color="primary">
   <span>My Store</span>
   <span class="space-buffer"></span>
   <mat-icon>add_shopping</mat-icon>
</mat-toolbar>

Gérer la visibilité d'une page dans votre portail

Pour savoir comment gérer la visibilité d'une page dans votre portail, consultez Gérer la visibilité d'une page dans votre portail.

Prévisualiser le contenu du portail

Pour prévisualiser le contenu du portail :

  1. Accédez à l'éditeur de pages, comme décrit dans Gérer les pages de votre portail.

  2. Prévisualisez la page.

    Interface utilisateur de la console Cloud

    1. Cliquez sur Enregistrer.
    2. Cliquez sur Aperçu.

    UI classique

    1. Cliquez sur Aperçu dans la barre d'outils de l'éditeur de page.
    2. Parcourez les autres pages de votre portail pour prévisualiser le contenu comme vous le souhaitez.

Publier le contenu du portail

La publication et l'annulation de la publication du contenu du portail sont décrites dans Publier le contenu de votre portail.

Supprimer une page

La suppression de pages du portail est décrite dans Supprimer des pages de votre portail.