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

本頁適用於 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。不過，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 - 圖示」。
<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. 瀏覽入口網站的其他頁面，視需要預覽內容。

發布入口網站內容

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

刪除網頁

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