使用頁面編輯器開發入口網站內容

本頁內容適用於 Apigee 和 Apigee Hybrid。

查看 Apigee Edge 說明文件。

使用頁面編輯器，以 Markdown 或 HTML 定義入口網站內容。

瀏覽頁面編輯器

如要存取頁面編輯器，請在查看頁面清單時點選頁面名稱，詳情請參閱「管理入口網站中的頁面」。

頁面編輯器隨即開啟：

Cloud 控制台 UI

按一下即可放大圖片

傳統版 UI

頁面編輯器

頁面編輯器可讓您：

在網頁編輯器中編輯內容

Markdown 是一種簡單的格式語言，使用易於讀寫的純文字標記。其語法是使用標點符號字元指定，Markdown 會先轉換為 HTML，再於瀏覽器中顯示。

頁面編輯器頂端的快速編輯工具列提供捷徑，可套用格式 (例如粗體、斜體等) 或插入 Markdown 標記 (例如清單、圖片、連結等)。

如要快速查看 Markdown 語法摘要，請在快速編輯工具列中執行下列操作：

Cloud 控制台 UI

按一下「資訊」圖示 。

傳統版 UI

按一下 圖示。

系統會顯示 Markdown 語法快速參考資料。

如要復原或重做上次的編輯動作，請分別按下 Command+z 或 Command+Shift+z。

如要簡化格式設定工作流程，建議使用 Markdown。不過，這並非要取代 HTML。HTML 可設定的格式種類繁多，Markdown 則無法。舉例來說，您可以在 HTML 中為元素指定 CSS 類別，但無法在 Markdown 中執行這項操作：

   <p class="class1">

只要輸入 HTML 標記，即可在內容主體中插入 HTML。

如要瞭解 HTML 標記，請參閱 HTML5 規格。

新增 Angular Material 元件

Angular Material 提供先進的 UI 元件庫。Angular Material 元件可讓您運用現代設計原則，快速輕鬆地建構一致、具備回應性且易於存取的使用者介面。

可用的元件

入口網站體驗是使用 Angular Material 建構而成，網頁中可使用的 Angular Material 元件有限，詳情請參閱下表。

元件 範例
按鈕 下列程式碼會建立具有高程的矩形按鈕。
<a mat-raised-button
   href="quickstart">
   Quick Start
</a>

下列程式碼會建立包含警告圖示的透明背景圓形按鈕。按鈕顏色是使用警告調色盤定義。

<button mat-icon-button
   color="warn">
   <mat-icon aria-label="Example warning">warning</mat-icon>
</button>
資訊卡 下列程式碼會建立資訊卡。資訊卡包含按鈕和圖示元件，以及標題和內文。按鈕顏色是使用主要調色盤定義。

<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>
圖示 下列程式碼會建立勾號圖示。如需支援的圖示完整清單，請參閱「Material Design - Icons」。
<mat-icon>
   check_circle
</mat-icon>
工具列 下列程式碼會建立簡單的工具列，其中包含文字和購物車圖示。
<mat-toolbar color="primary">
   <span>My Store</span>
   <span class="space-buffer"></span>
   <mat-icon>add_shopping</mat-icon>
</mat-toolbar>

管理入口網站中網頁的顯示設定

如要瞭解如何管理入口網站中網頁的顯示設定，請參閱「管理入口網站中網頁的顯示設定」。

預覽入口網站內容

如要預覽入口網站內容，請按照下列步驟操作：

  1. 如「管理入口網站的網頁」一文所述，存取頁面編輯器。

  2. 預覽頁面。

    Cloud 控制台 UI

    1. 按一下 [儲存]。
    2. 按一下「預覽」。

    傳統版 UI

    1. 按一下頁面編輯器工具列中的「預覽」。
    2. 視需要瀏覽入口網站中的其他頁面，預覽內容。

發布入口網站內容

如要瞭解如何發布及取消發布入口網站內容，請參閱「發布入口網站內容」。

刪除頁面

如要瞭解如何從入口網站刪除頁面，請參閱「從入口網站刪除頁面」。