复查网站页
Café Supremo 营销网站应用程序有三个页面：HOME、MENU 和 BLOG。
主页
主页显示市场营销活动，如广告和促销。
网站上提供的项目将在主页上发布详细信息和链接。顶部有一个带有更多按钮的促销，单击此按钮后，将打开描述项的页面。在促销下，现在有三个广告带有商店按钮。在主页末尾，将显示最新的博客，并在单击时打开相应的博客详细信息页。
插图 home_page.png 的说明
让我们浏览主页，了解如何在 Oracle Visual Builder 中的 Cafe-Supremo 应用程序中使用组件交换中的 Oracle Content Management 组件。
具有适当设置的内容列表组件用于在主页上显示内容。
例如，让我们查看页面顶部使用的内容列表组件的配置。
插图 home_page_component.png 的说明
在此组件的“属性”窗格中指定了以下关键设置，以便在顶部显示促销。
- ID - 资产的唯一 API ID。
- Content Server - 默认值
- 通道标记 - 默认值
- 内容类型 - 促销
- 布局 - 促销默认值
- 最大项数 - 1
- 起始项 - 1
促销内容类型用于此组件。要显示的项数限制为一个。“更多”按钮配置为指向对应的详细信息页。事件处理程序设置为配置此更多按钮以打开相应的促销详细资料页。在组件的属性中，在“事件”选项卡上，事件设置配置为定义事件和操作链（操作序列），指定发生指定事件时发生的情况，即单击页上的项时发生的情况（例如“更多”按钮）。事件监听程序是在“事件监听程序”选项卡上为此页定义的，用于监听事件并启动在“操作”选项卡上定义的操作链。
在操作选项卡上，定义与内容列表项的事件选项卡上定义的事件关联的操作以及操作链。操作是操作链的一部分。例如，在操作选项卡上，单击为第一个内容列表定义的第一个操作时，可以查看其配置。在图表部分中，单击导航促销详细资料（这是导航操作）时，您将看到属性窗格中的目标字段设置为促销详细资料，以便在用户单击促销上的更多按钮时导航到详细资料页。
“促销详细信息”页面配置了内容占位符组件以动态显示内容项。因此，当用户单击更多按钮时，“促销详细信息”页面上的内容占位符组件会自动加载关联内容项的详细信息。
同样，我们有一个博客详细信息页面，用于在用户单击主页末尾显示的博客时显示相应的博客文章。
这些 Oracle Content Management 组件可以从组件交换中拖放到 Web 站点应用程序页，然后根据您的需要配置相应的设置。
插图 component_exchange e.png 的说明
例如，要了解如何将内容项添加到主页，请参阅此解决方案手册的“自定义”部分。
同样，还有两个内容列表组件用于在促销下显示广告和博客。
这些组件根据其设置，从先前在 Oracle Content Management 中创建的资料档案库中动态提取内容，然后在主页上显示该内容。
MENU 页
MENU 页面列出目录中的所有菜单项。
此页面显示三个选项卡：COFFEE、TEA 和 TREATS。每个选项卡都显示该类别下可用的不同种类项。例如，在 "COFFEE" 选项卡下，类（如 CLASSIC ESPRESSO、SUPREMO CAPPUCCINO、COLD PRESS COFFEE 和 BLACK SUPREMO）显示有关每种类型的信息。有些项目也有视频。在这些选项卡下，不同的 Café Supremo combos 显示详细信息，包括描述每个 combos 中可用项的图像。
在菜单页上，使用的一些关键组件是选项卡栏和内容列表。这些组件已与相应的设置一起使用，用于在菜单页上显示内容。“内容列表”组件来自组件交换。
例如，让我们查看页面顶部使用的内容列表组件之一的配置。
插图 menu_page_component.png 的说明
在此组件的“属性”窗格中指定了以下关键字设置以显示内容项（菜单项）。
- ID - 资产的唯一 API ID。
- Content Server - 默认值
- 通道标记 - 默认值
- 内容类型 - MenuItem
- 布局 - MenuItem - 默认
- 最大项数 - 10
- 起始项 – 1
- 附加查询字符串 - fields.menuitem_category eq "COFFEE"
MenuItem 内容类型用于此组件。要显示的项数限制为十。对于第一个选项卡（COFFEE 选项卡），“附加查询字符串”字段设置为 fields.menuitem_category eq "COFFEE"。同样，它也为其他选项卡设置。“附加查询字符串”字段用于指定其他查询参数以进一步细化显示的菜单项列表。
同样，另一个内容列表组件与相应的设置一起使用，以显示 Supremo 咖啡馆中提供的组合菜单项。
通过组件交换中的组件，这些页可以通过从 Oracle Content Management 中的资料档案库中动态提取内容并在 Oracle Visual Builder 中的应用程序中显示内容来具有丰富的内容。
BLOG 页
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 中），并立即提供给用户。