複查網站頁面
Café Supremo 行銷網站應用程式有三個頁面：HOME、MENU 和 BLOG。
首頁
首頁會顯示行銷活動，例如廣告與促銷。
網站上可用的項目會在首頁上宣告詳細資訊和連結。頂端有一個促銷具有更多按鈕，按一下該按鈕即可開啟描述該項目的頁面。促銷下方有三種廣告，分別有「立即購物」按鈕。首頁結尾會顯示最新的部落格，按一下即可開啟對應的部落格詳細資訊頁面。
home_page.png 圖解描述
讓我們逐步瀏覽首頁，瞭解如何在 Oracle Visual Builder 的 Cafe-Supremo 應用程式中使用元件交換的 Oracle Content Management 元件。
具有適當設定值的「內容清單」元件可用來在首頁中顯示內容。
例如，查看頁面頂端使用之「內容清單」元件的組態。
下列主要設定會在此元件的「屬性」窗格中指定，以在頂端顯示促銷。
- ID -資產的唯一 API ID。
- Content Server -預設值
- 通道權杖-預設值
- 內容類型-促銷
- 版面配置-促銷預設值
- 項目數上限- 1
- 開始項目- 1
此元件中使用「促銷」內容類型。要顯示的項目數目限制為一。其他按鈕設定為指向對應的詳細資訊頁面。設定事件處理程式來設定此更多按鈕，以開啟對應的最新明細頁面。在元件的特性中，事件設定值在事件頁籤上設定為定義事件和動作鏈 (一系列動作)，指定發生指定事件時會發生的情況，亦即按一下頁面上的項目時會發生什麼情況 (例如其他按鈕)。您可以在「事件監聽器」頁籤上定義此頁面的事件監聽器，以監聽事件及啟動在動作頁籤上定義的動作鏈結。
在「動作」頁籤上，與在內容清單項目的事件頁籤上定義的事件相關的動作，以及動作鏈結。動作是動作鏈的一部分。例如，在「動作」頁籤上，當您按一下為第一個內容清單定義的第一個動作時，即可檢視其組態。在「圖表」區段中，當您按一下「瀏覽」最新的明細 (亦即導覽動作) 時，您會看到特性窗格中的「目標」欄位已設為最新，因此會在使用者按一下促銷上的「更多」按鈕時瀏覽至明細頁面。
最新的詳細資訊頁面有一個設定為動態顯示內容項目的「內容預留位置」元件。因此，當使用者按一下更多按鈕時，最新詳細資訊頁面上的「內容預留位置」元件會自動載入相關內容項目的詳細資訊。
同樣地，我們還有一個部落格詳細資料頁面，用來在使用者按一下首頁結尾顯示的部落格時顯示對應的部落格文章。
這些 Oracle Content Management 元件可以從元件交換拖放至網站應用程式頁面，然後根據您的需求設定適當的設定值。
例如，若要瞭解如何將內容項目新增至首頁，請參閱此解決方案播放書的「自訂」區段。
同樣地，還有兩個內容清單元件可用來在促銷下方顯示廣告與部落格。
這些元件會根據其設定值，從您先前在 Oracle Content Management 中建立的儲存區域動態擷取內容，然後在首頁中顯示該內容。
MENU 頁面
「功能表」頁面會列出目錄中的所有功能表項目。
此頁面顯示三個頁籤：COFFEE、TEA 以及 TREATS。每個頁籤都會顯示該類別下可用的不同項目品質。例如，在 COFFEE 頁籤下，CLASSIC ESPRESSO、SUPREMO CAPPUCCINO、COLD PRESS COFFEE 及 BLACK SUPREMO 等各種相關資訊都會顯示。某些項目也有影片。在這些頁標下方，不同的 Café Supremo 組合會顯示詳細資料，包含描述每個組合中可用項目的影像。
在功能表頁面上，部分使用的主要元件為「頁籤列」和「內容清單」。這些元件已與適當的設定值搭配使用，可在功能表頁面上顯示內容。「內容清單」元件來自元件交換。
例如，查看頁面頂端使用的其中一個「內容清單」元件的組態。
此元件的「特性」窗格中指定了下列主要設定值，以顯示內容項目 (功能表項目)。
- ID -資產的唯一 API ID。
- Content Server -預設值
- 通道權杖-預設值
- 內容類型- MenuItem
- 版面配置- MenuItem -預設值
- 項目數上限- 10
- 開始項目- 1
- 其他查詢字串- fields.menuitem_category eq "COFFEE"
此元件中使用 MenuItem 內容類型。要顯示的項目數目限制為十。如果是第一個頁籤 (COFFEE 頁籤)，其他查詢字串欄位會設為 fields.menuitem_category eq "COFFEE"。同樣地，它也會針對其他頁籤設定。「其他查詢字串」欄位用於指定其他查詢參數，以進一步縮小所顯示功能表項目清單的範圍。
同樣地，另一個「內容清單」元件與適當的設定值搭配使用，以顯示 Café Supremo 中可用的組合功能表項目。
元件交換的元件可讓這些頁面透過從 Oracle Content Management 的儲存區域動態擷取內容，並在 Oracle Visual Builder 的應用程式中顯示它們，來擁有豐富的內容。
部落格頁面
BLOG 頁面可用來顯示不同類別的部落格文章。
blog_page.png 圖解描述
此頁面有四個不同部落格類別的頁籤，例如 HOW TO、DRINKS、PEOPLE 以及 RECIPES。每個頁籤都會顯示該特定類別可用的部落格項目，以及影像、部落格標題和發佈日期等詳細資訊。當使用者按一下部落格項目時，部落格文章頁面會在同一個視窗中開啟。
具有適當設定值的頁籤列和內容清單等元件可用來在部落格頁面上顯示內容。「內容清單」元件來自元件交換。
頁籤列元件已設定適當的設定值，可在部落格頁面上將四個類別顯示為頁籤。此元件的「特性」窗格中指定了下列主要設定值，以便將四個部落格類別顯示為頁籤。
- ID -資產的唯一 API ID。
- 選擇項目-指定所選項目的索引鍵。
- 頁籤-指定四個類別的頁籤資訊，第一個頁籤設為預設頁籤。
- 邊緣-頂端
這些頁籤所需的變數特性是在「變數」頁籤上設定。
讓我們瞭解「內容清單」元件的組態。此元件的「特性」窗格中指定了下列主要設定，以顯示部落格項目。
- ID -資產的唯一 API ID。
- Content Server -預設值
- 通道權杖-預設值
- 內容類型-部落格
- 版面配置-部落格-預設
- 清單- threeColumns
- 項目數上限- 10
- 開始項目- 1
- 其他查詢字串- fields.blog_category eq "HOW TO"
部落格內容類型已用於此元件中。要顯示的項目數目限制為十。如果是第一個頁籤 (HOW TO 頁籤)，其他查詢字串欄位會設為 fields.menuitem_category eq "HOW TO"。同樣地，它也會針對其他頁籤設定。事件處理程式設定為定義與內容清單項目相關聯的動作和事件，以指定使用者按一下部落格項目時會發生的狀況。在元件的特性中，事件設定值是在事件頁籤上設定為定義事件，以及指定發生指定事件時會發生什麼動作鏈結，亦即，按一下頁面上的項目時會發生什麼情況。您可以在「事件監聽器」頁籤上定義此頁面的事件監聽器，以監聽事件及啟動在動作頁籤上定義的動作鏈結。
在「動作」頁籤上，與在內容清單項目的事件頁籤上定義的事件相關的動作，以及動作鏈結。動作是動作鏈的一部分 (一系列的動作)。例如，在動作頁籤上，當您按一下第一個動作時，可以檢視其組態。在「圖表」區段中，當您按一下瀏覽部落格詳細資訊 (即導覽動作) 時，您會看到特性窗格中的目標欄位設為部落格詳細資訊，讓使用者在部落格頁面上按一下部落格項目時瀏覽至對應的部落格文章頁面 (部落格詳細資訊)。
部落格詳細資訊頁面有一個設定為動態顯示內容項目的「內容預留位置」元件。因此，當使用者按一下部落格項目時，部落格詳細資訊頁面上的內容預留位置元件會自動載入相關內容項目的詳細資訊。
網站應用程式發布後，新增與發布新的部落格文章 (部落格內容項目) 時 (在 Oracle Content Management Web 介面中)，這些部落格文章會動態提取至網站應用程式的部落格頁面 (在 Oracle Visual Builder 中)，並立即提供給使用者使用。