创作和发布简介 author-content-publish

了解用户如何更新网站内容非常重要。在本章中,我们将采用​ 内容作者 ​的角色,对上一章生成的网站做一些编辑更新。在本章的最后,我们将发布这些更改,以了解如何更新上线网站。

先决条件 prerequisites

这是一个多段式教程,并且假设您已完成创建网站一章中概述的步骤。

目标 objective

  1. 了解 AEM Sites 中​ 页面 ​和​ 组件 ​的概念。
  2. 了解如何更新网站内容。
  3. 了解如何将更改发布到上线网站。

创建一个新页面 create-page

网站通常分为多个页面,以形成一种多页面体验。AEM 以相同的方式组织内容的结构。接下来,为网站创建一个新页面。

  1. 登录上一章中使用的 AEM 作者 ​服务。

  2. 在 AEM 开始屏幕中,点击​ 网站 > WKND 网站 > 英语 > 文章

  3. 在右上角点击​ 创建 > 页面

    创建页面

    现在会打开​ 创建页面 ​向导。

  4. 选择​ 文章页面 ​模板,然后点击​ 下一步

    AEM 中的页面是基于页面模板创建的。页面模板一章详细介绍了页面模板。

  5. 在​ 属性 ​中输入​ 标题“Hello World”。

  6. 将​ 名称 ​设置为 hello-world,然后点击​ 创建

    初始页面属性

  7. 在弹出的对话框中点击​ 打开,打开新创建的页面。

创作组件 author-component

AEM 组件可以被看作是网页的小型模块化构建基块。将 UI 分解为逻辑分块或组件,可以更轻松地进行管理。为了重复使用组件,组件必须是可配置的。这个操作通过作者对话框进行。

AEM 提供一组可立即用于生产的核心组件核心组件 ​的范围从文本图像等基本元素到轮播等更复杂的 UI 元素。

接下来,使用 AEM 页面编辑器创作几个组件。

  1. 导航到上一个练习中创建的 Hello World 页面。

  2. 确保您处于​ 编辑 ​模式,在左侧边栏中点击​ 组件 ​图标。

    页面编辑器侧边栏

    现在会打开组件库,其中列出了可用在页面上的可用组件。

  3. 向下滚动,将一个​ 文本 (v2) 组件​ 拖放 ​到页面的主要可编辑区域中。

    拖放文本组件

  4. 点击​ 文本 ​组件使其突出显示,然后点击​ 扳手 ​图标 扳手图标 ,打开组件的对话框。输入一些文本,然后保存对话框的更改。

    富文本组件

    文本 ​组件现在应该在页面上显示富文本。

  5. 重复上述步骤,但现在将​ 图像 (v2) 组件的一个实例拖到页面上。打开​ 图像 ​组件的对话框。

  6. 在左边栏中点击​ 资产 ​图标 资产图标 ,切换到​ 资产查找器

  7. 将图像​ 拖放 ​到组件的对话框中,然后点击​ 完成,保存更改。

    在对话框中添加资产

  8. 观察页面上的一些组件,例如​ 标题导航搜索,都是固定的。这些区域被配置为页面模板的一部分,不能在单个页面上更改。下一章将详细讨论这个问题。

请随意尝试使用一些其他组件。关于每个核心组件的文档请参阅此处。关于页面创作的详细视频系列请参阅此处

发布更新 publish-updates

AEM 环境分为​ 作者服务 ​和​ 发布服务。在本章中,我们对​ 作者服务 ​上的网站做了一些更改。为了让网站访问者能够看到这些更改,我们需要将更改发布到​ 发布服务

高级示意图

从作者到发布的高级示意内容流程图

1. 内容作者更新网站内容。这些更新可以被预览、查看并被批准推送上线。

2. 发布内容。可以按需发布,也可以计划在未来的某个日期发布。

3. 网站访问者将看到发布服务上反映的变化。

发布更改

接下来,我们来发布更改。

  1. 从 AEM 开始屏幕导航至​ 网站,然后选择 WKND 网站

  2. 在菜单栏中点击​ 管理发布

    管理发布

    由于这是一个全新的网站,我们希望发布所有页面,可以使用管理发布向导来准确定义需要发布的内容。

  3. 在​ 选项 ​中保留​ 发布 ​默认设置,计划​ 现在 ​发布。单击​ 下一步

  4. 在​ 范围 ​中选择 WKND 网站,然后点击​ 包括子设置。在对话框中勾选​ 包括子项。取消勾选其余的复选框,确保发布整个网站。

    更新发布范围

  5. 点击​ 已发布引用 ​按钮。在对话框中,验证已勾选所有内容。这包括​ 标准网站模板 ​以及网站模板生成的一些配置。点击​ 完成,进行更新。

    发布引用

  6. 最后,勾选 WKND 网站 ​旁边的复选框,然后点击右上角的​ 下一个

  7. 在​ 工作流 ​步骤,输入一个​ 工作流标题。这可以是任何文本,以后可能用作审核记录的一部分。输入“初次发布”,然后点击​ 发布

工作流步骤初次发布

查看已发布的内容 publish

接下来,导航到发布服务查看更改。

  1. 获取发布服务 URL 的一个简单方法是复制作者 URL,然后将 author 词替换为 publish。例如:

    • 作者 URL - https://author-pYYYY-eXXXX.adobeaemcloud.com/
    • 发布 URL - https://publish-pYYYY-eXXXX.adobeaemcloud.com/
  2. /content/wknd.html 添加到发布 URL,使最终 URL 如下所示:https://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd.html

    note note
    NOTE
    如果您在网站创建过程中提供了一个唯一名称,应更改 wknd.html 以匹配您的网站名称。
  3. 导航到发布 URL,您会看到该网站,但没有任何 AEM 创作功能。

    已发布网站

  4. 使用​ 导航 ​菜单,点击​ 文章 > Hello World,导航到之前创建的 Hello World 页面。

  5. 返回到 AEM 作者服务,在页面编辑器中再做一些内容更改。

  6. 在页面编辑器中点击​ 页面属性 ​图标 > 发布页面,就可以直接从页面编辑器中发布这些更改

    直接发布

  7. 返回到​ AEM 发布服务,查看更改。您很可能​ 不会 ​立即看到更新。这是因为 AEM 发布服务 ​包括通过 Apache Web 服务器和内容传递网络进行的缓存。默认情况下,HTML 内容被缓存约 5 分钟。

  8. 如果要绕过缓存进行测试/调试,只需添加一个查询参数,例如 ?nocache=true。URL 类似这样:https://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd/en/article/hello-world.html?nocache=true。有关缓存策略和可用配置的更多详细信息请参阅此处

  9. 您还可以在 Cloud Manager 中找到发布服务的 URL。导航到 Cloud Manager 程序 > 环境 > 环境

    查看发布服务

    在​ 环境分区 ​中,您可以找到​ 创作 ​和​ 发布 ​服务的链接。

恭喜! congratulations

祝贺您创作并发布了对 AEM 网站的更改!

后续步骤 next-steps

在实际实施中,通常是在网站创建之前使用模型和 UI 设计进行网站规划。阅读使用 Adobe XD 进行 UI 规划,了解如何使用 Adobe XD UI 套件来设计和加速您的 Adobe Experience Manager Sites 实施。

您想继续探索 AEM Sites 的功能吗?请直接前往页面模板一章,了解页面模板与页面之间的关系。

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9