内容片段预览

AEM Headless应用程序支持集成的创作预览。 预览体验将AEM作者的内容片段编辑器与您的自定义应用程序链接(可通过HTTP寻址),允许深层链接进入应用程序,以呈现正在预览的内容片段。

要使用内容片段预览,必须满足多个条件:

  1. 必须将应用程序部署到作者可访问的URL中
  2. 必须将应用程序配置为连接到AEM创作服务(而不是AEM Publish服务)
  3. 应用程序必须设计为可使用的URL或路由 内容片段路径或ID 以选择要显示的内容片段,以便在应用程序体验中预览。

预览URL

预览URL,使用 URL表达式,在内容片段模型的属性上设置。

内容片段模型预览URL

  1. 以管理员身份登录AEM Author服务
  2. 导航到 工具>常规>内容片段模型
  3. 选择 内容片段模型 并选择 属性 形成顶部操作栏。
  4. 使用以下方式输入内容片段模型的预览URL URL表达式
    • 预览URL必须指向连接到AEM Author服务的应用程序的部署。

URL表达式

每个内容片段模型都可以设置预览URL。 可以使用下表中列出的URL表达式,为每个内容片段参数化预览URL。 可以在单个预览URL中使用多个URL表达式。

URL表达式
价值
内容片段路径
${contentFragment.path}
/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
内容片段ID
${contentFragment.id}
12c34567-8901-2aa3-45b6-d7890aa1c23c
内容片段变量
${contentFragment.variation}
main
内容片段模型路径
${contentFragment.model.path}
/conf/wknd-shared/settings/dam/cfm/models/adventure
内容片段模型名称
${contentFragment.model.name}
adventure

示例预览URL:

  • 上的预览URL 冒险 模型可能显示为 https://preview.app.wknd.site/adventure${contentFragment.path} 解析为 https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
  • 上的预览URL 文章 模型可能显示为 https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation} 解析 https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main

应用程序内预览

任何使用配置的内容片段模型的内容片段都具有预览按钮。 预览按钮可打开内容片段模型的预览URL,并将打开的内容片段的值注入到 URL表达式.

“预览”按钮

在预览应用程序中的内容片段更改时,执行硬刷新(清除浏览器的本地缓存)。

React示例

让我们来探索WKND应用程序,它是一个简单的React应用程序,使用AEM Headless GraphQL API显示AEM的冒险。

示例代码位于 Github.com.

URL和路由

用于预览内容片段的URL或路由必须使用进行组合 URL表达式. 在这个启用预览的WKND应用程序版本中,冒险内容片段通过 AdventureDetail 绑定到路由的组件 /adventure<CONTENT FRAGMENT PATH>. 因此,WKND Adventure模型的预览URL必须设置为 https://preview.app.wknd.site:3000/adventure${contentFragment.path} 以解决此路由。

仅当应用程序具有可寻址路由(可填充)时,内容片段预览才有效 URL表达式 以可预览方式在应用程序中呈现内容片段。

  • src/App.js
...
function App() {
  return (
    <Router>
      <div className="App">
        <header>
            <Link to={"/"}>
                <img src={logo} className="logo" alt="WKND Logo"/>
            </Link>
            <hr />
        </header>
        <Routes>
          {/* The route's path must match the Adventure Model's Preview URL expression. In React since the path has `/` you must use wildcards to match instead of the usual `:path` */}
          <Route path='/adventure/*' element={<AdventureDetail />}/>
          <Route path="/" element={<Home />}/>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

显示创作的内容

AdventureDetail 组件只需解析内容片段路径,通过插入预览URL中 ${contentFragment.path} URL表达式,并使用它来收集和渲染WKND Adventure。

  • src/components/AdventureDetail.js
...
function AdventureDetail() {

    // Read the `path` value which is the parameter used to query for the adventure's details
    // since the params value captures the `*` wildcard in `/adventure/*`, or everything after the first `/` in the Content Fragment path.
    const params = useParams();
    const pathParam = params["*"];

    // Add the leading '/' back on
    const path = '/' + pathParam;

    // Query AEM for the Adventures's details, using the Content Fragment's `path`
    const { adventure, references, error } = useAdventureByPath(path);

    // Handle error and loading conditions
    if (error) {
        return <Error errorMessage={error} />;
    } else if (!adventure) {
        return <Loading />;
    }

    return (<div className="adventure-detail">
        ...
        <AdventureDetailRender {...adventure} references={references} />
    </div>);
}
...
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4