文档AEMAEM 教程AEM Headless 教程

第5章 — 创作Content Services页面

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 初学者
  • 开发人员

AEM Headless教程的第5章介绍了如何从第4章中定义的模板创建页面。 本章中创建的页面将用作移动设备应用程序的JSON HTTP端点。

NOTE
已预建/content/wknd-mobile/en/api的页面内容架构。 en和api的基页用于架构和组织目的，但不是严格必需的。 如果API内容可能已本地化，则最佳实践是遵循常见的语言副本和多站点管理器页面组织最佳实践，因为API页面可以像任何AEM Sites页面一样进行本地化。

创建事件API页面

  1. 导航到​ AEM > 站点 > WKND Mobile > English >API。

  2. 点按API页面标签，然后点按顶部操作栏中的​ 创建 ​按钮，并在API页面下创建新的Events API页面。

    1. 点按顶部操作栏中的​ 创建
    2. 选择​ 事件API ​模板
    3. 在​ 名称 ​字段中，输入​ 事件
    4. 在​ 标题 ​字段中，输入​ 事件API
    5. 点按顶部操作栏中的​ 创建 ​以创建页面
    6. 点按​ 完成 ​以返回到AEM Sites管理员

https://video.tv.adobe.com/v/28340?quality=12&learn=on

创作事件API页面

NOTE
项目提供CSS以便为创作体验提供一些基本样式。

  1. 通过导航到​ AEM > Sites > WKND Mobile >英语> API，选择​ Events API ​页面，并点按顶部操作栏中的​ 编辑，编辑​ Events API ​页面。

  2. 添加要在应用程序中显示的​ 徽标图像，方法是将其从资产查找器拖放到图像组件占位符上。

    • 使用在/content/dam/wknd-mobile/images/wknd-logo.png找到的提供的徽标。

  3. 添加要在事件上方显示的​ 标记行。

    1. 编辑​ Text ​组件
    2. 输入文本：
      • The WKND is here.

  4. 选择要显示的​ 事件：

    1. 在​ 属性 ​选项卡上设置以下配置：

      • 模型： 事件
      • 父路径： /content/dam/wknd-mobile/en/events
      • 标记： <留空>

    2. 在​ 元素 ​选项卡上设置以下配置：

      • 请删除列出的所有元素，以确保公开事件内容片段的所有元素。

https://video.tv.adobe.com/v/28339?quality=12&learn=on

查看API页面的JSON输出

可以通过请求包含.model.json选择器的页面来查看JSON输出及其格式。

此API的使用者必须充分了解此JSON结构（或架构）。 API使用者必须了解结构的哪些方面是固定的(即 活动API的徽标（图像）和实时标记（文本）是流畅的(即 在内容片段列表组件下列出的事件)。

如果违反了已发布API上的此合同，可能会导致使用应用程序中的行为不正确。

  1. 在新的浏览器选项卡中，使用.model.json选择器请求Events API页面，该选择器会调用AEM Content Services的JSON导出器，并将页面和组件序列化为规范化、定义良好的JSON结构。

    这些页面生成的JSON结构是使用应用程序必须调整的结构。

  2. 请求​ 事件API ​页面作为​ JSON。

    结果应类似于：

AEM Content Services JSON输出

NOTE
可以使用.tidy选择器以​ 整齐（格式化）方式输出此JSON，以便于用户阅读：

下一步

或者，通过AEM包管理器在AEM Author上安装com.adobe.aem.guides.wknd-mobile.content.chapter-5.zip内容包。 此资源包包含本教程及前面章节中概述的配置及内容。

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4