SAP 电商云 Spartacus UI 有状态 的 url 和 title 属性的赋值代码

有状态的 URL
Spartacus 为店面的每一部分提供了一个带有状态地址的 URL。这使用户可以更轻松地浏览店面,还允许网络爬虫对每个页面进行索引。因此,可以通过社交媒体、机器人和搜索索引共享更多页面。
一个例子:

为了为所有内容提供有状态的 URL,Spartacus 允许深层链接来寻址任何页面。URL 路由配置还可以考虑多站点上下文,以便可以启动和缓存店面特殊变体的有状态 URL。
可配置的 URL
您可以使用 pageLabel 字段(位于 CMS 后端中)的配置内容页面的 URL 。这些页面标签无法本地化。
您可以在 Spartacus 中为非 content page 配置 URL。这些主要与产品和类别页面(catagory page)有关。您可以将产品名称等属性配置为 URL 的一部分。例如,产品页面的默认配置是 storefront.com/product/1234,但您可以配置 URL 以包含与产品相关的数据,例如产品或类别标题。
可配置的 URL 通常有助于改进 SEO,但也可用于帮助将现有解决方案迁移到 Spartacus:客户可以保留其现有 URL,并在 Spartacus 中配置等效 URL。
注:产品代码用于从后端解析产品数据。URL 的其余部分可以配置用于 SEO 目的。
注意:有些客户的产品标题带有无法使用的特殊字符(例如,代码或标题中有斜线)。这可能需要在 URL 中使用属性之前或之后对其进行特殊处理。请注意,Spartacus 不包括处理特殊字符的功能。
可索引页面
服务器端渲染 (SSR) 是一种在服务器端渲染 JavaScript 逻辑,然后在响应中提供丰富内容的技术。SSR 响应包含网络爬虫从响应中索引或检索数据所需的完整 HTML。
SSR 由 Spartacus 提供,并计划成为 Commerce Cloud 中的默认部署选项。
结构化数据 (schema.org)
结构化数据是一种描述网站页面内容的标准化方式,使网络爬虫和搜索引擎更容易理解。Spartacus 原生支持各种模式。
HTML 标签
搜索引擎、社交平台和爬虫使用 HTML 标签,尤其是元标签,将页面元数据索引到他们的平台中。Spartacus 提供了多种解析元标记的方法。
HTML title 的赋值代码位置:

运行时的调试:

再研究 27 行的 pageMetaService 的 getMeta 方法调用。

当 meta$ 被 subscribe 后,依次执行下列逻辑:
this.cms.getCurrentPage();
this.getMetaResolver
this.resolve
每一步骤的输出都是下一步骤的输入。
读取当前页面的方法:从 ngrx store 里读取:


读取回来的 page 数据:

每种不同的页面,都有对应类型的 resolver:


因为我当前打开的是 product page,所以返回的是 product page meta resolver:

动态调用 resolveTitle 方法:

从代码能看到业务逻辑:

产品页面的 title 属性,值来自产品名称,产品种类和产品制造商三者的连接。
版权声明: 本文为 InfoQ 作者【Jerry Wang】的原创文章。
原文链接:【http://xie.infoq.cn/article/5876675a6dd387347f557469f】。文章转载请联系作者。
评论