区块集合

这是视为 AEM 产品一部分的区块集合,建议作为项目中区块的蓝图。

这些块来自实际的生产AEM项目。 要成为此收藏集的一部分,块需要在多个项目中具有高利用率,并提供足够的抽象功能并具有足够的通用性,以便不必更改底层内容模型即可重复使用。

随着网站需求和设计的变化,网站块收藏也会发生变化。 将添加一些内容以反映项目的新需求,但也会删除(弃用)使用频率不高的块。

收藏集中的块没有几个技术原则:

  • 直观: 直观且易于编写的内容结构
  • 可用: 无依赖项,与样板兼容
  • 响应式: 适用于所有断点
  • 上下文感知: 继承CSS上下文,例如文本和背景颜色
  • 可本地化: 无硬编码内容
  • 快速: 不会对性能产生负面影响
  • SEO和A11y: SEO友好且易于访问

可以将所有块视为您自己的块开发的基础。 您很可能将更改所有 .css.js 代码以满足您自己的项目需求。 这些块的主要值是它们提供的内容结构。

考虑到块的代码将完全适合您的项目,因此集合中的块无意向后兼容各自的旧版本或使其可升级。

样板

最常用的块(以及默认内容类型)在AEM样板中进行整理,并且是每个AEM项目的一部分。 要使一个块成为样板的一部分,它必须被所有AEM项目的绝大多数使用。

<h3>标题</h3>

默认内容

不同级别的标题提供了文档的语义骨干

<h3>文本</h3>

默认内容

包含丰富语义格式选项的正文或副本

<h3>图像</h3>

默认内容

图片使您的内容栩栩如生

<h3>列表</h3>

默认内容

无论在哪里需要,都有排序和未排序的列表

<h3>链接</h3>

默认内容

引用其他网站或您自己的内容

<h3>按钮</h3>

默认内容

行动号召按钮等

<h3>代码</h3>

默认内容

突出显示内容中预先格式化的代码段

<h3>区域</h3>

默认内容

将页面上的内容分组为多个部分

<h3>图标</h3>

默认内容

使用图标让您的内容更有趣

<h3>英雄</h3>

区块

页面顶部的英雄待遇

<h3></h3>

区块

以响应式方式处理多列布局的灵活方式

<h3>卡片</h3>

区块

包含或不包含图像和链接的卡片列表

<h3>页眉</h3>

区块

灵活的标题和导航示例

<h3>页脚</h3>

区块

简单可扩展的页脚块

<h3>元数据</h3>

根据需要将元数据添加到页面

<h3>区域元数据</h3>

突出显示或构建部分中的所有内容

区块集合

块集合包含常用块,但这些块不太常见,不能被视为样板。 作为经验法则,要包含在块集合中,必须在超过一半的所有AEM项目上使用块。

块集合可以是样板代码的输入路径。 同样,如果样板中的某个块不再经常使用,则可以将其移至此收藏集。

<h3>嵌入</h3>

区块

将社交媒体内容嵌入到AEM页面的简单方法

<h3>片段</h3>

区块

在多个页面之间共享内容片段

<h3></h3>

区块

一种将表格数据组织成行和列的方法

<h3>视频</h3>

区块

直接从AEM显示和播放视频

<h3>可折叠项</h3>

区块

可切换以显示相关完整内容的描述性标签栈

<h3>痕迹导航</h3>

块加载项

显示当前页面在导航层次结构中的位置的页面标题和相关链接的列表

<h3>轮盘</h3>

区块

一种动态显示工具,可平滑过渡一系列包含可选文本内容的图像

<h3>表单</h3>

区块

分组在一起的一组输入控件,使用户能够提交信息

<h3>引用</h3>

区块

在文档中显示报价或特定段落(或“拉引号”)的突出显示

<h3>搜索</h3>

区块

允许用户通过输入搜索词查找网站内容

<h3>选项卡</h3>

区块

将信息分段到多个带标签(或“带标签”)的面板中

<h3>模态</h3>

自动阻止

在其他网站内容上方显示的弹出窗口

块收集根据AEM社区的反馈不断演变。 如果您认为某个块应包含在块集合中,请与您的AEM联系人联系。 当前要包含在块集合中的候选项包括:

  • 同意横幅

如果您迫切需要尚未包含在集合中的块,则在GitHub上相对容易找到具有针对上述所有候选项目的示例实施的AEM项目。

阻止群

通过分组活动,我们希望为充满热情的开发人员社区提供一个展示他们在AEM站点上构建的内容的地方。 它还可让其他人避免重新进行规划,重新使用这些社区构建的块/代码片段/集成,并根据需要调整代码以适应他们自己的项目。

注意:虽然我们喜欢并支持我们的AEM开发人员社区,但Adobe不负责维护或更新显示在块交易方中的代码。 请自行决定使用代码。

如果您是AEM开发人员并希望提交您的cool块/代码片段或集成,请输入您的提交内容 使用此表单.

代码段
汉内索洛

模态

预览

<small>编写脚本以将模态添加到富兰克林页面。 这会使用新的(ish)本机对话框元素。

您可以在此处查看它的实际操作情况:

链接

</small>

代码段
msagolj

视频自动播放

<small>要在不同浏览器之间自动播放视频,需要设置一组属性。 请务必完全按此方式将videoTag.muted = true ,否则它将不会在chrome中播放。 例如 setAttribute('muted', true)不起作用。</small>

Sidekick插件
迪兰德帕斯

Sidekick 库

预览

<small>Sidekick库是内容的一个扩展,它使开发人员能够为AEM Sidekick作者创建UI驱动的工具。 它包括一个内置的区块插件,可以以直观的方式向作者显示所有区块的列表,从而使作者无需记住或搜索区块的每个变体。开发人员还可以为sidekick库编写自己的插件。</small>

代码段
davidnuescheler

基于JSON的元数据CSP

<small>此方法采用的方法是,将CSP设置为仅通过线路传输一次,然后在客户端进行缓存。 允许在易于读取的JSON文件中管理CSP</small>

生成工具
萨基奥罗斯

SASS + AEM

<small>在AEM中进行本地开发时,为CSS进行SASS编译</small>

代码段
布于语

ffetch

<small>ffetch是JavaScript获取函数周围的一个小包装器,可帮助您在构建可组合应用程序时处理AEM Content API。 使用它,可以轻松地从AEM索引获取内容、应用延迟分页、跟踪指向页面的链接,甚至拉取页面元数据。 利用这种方法,您可以轻松创建Headless应用程序,而无Headless SDK的性能包袱和Headless API的复杂性。</small>

代码段
施泰默

动态加载的模板

<small>加载特定于模板的CSS和JS,从而允许模板特定的样式和自动阻止,而无需将该代码混入全局脚本/样式中。

注意:由于模板js在加载块之前加载,但在修饰节/块之后加载,因此需要在完成自动阻止时记住这一点(即,构建和修饰块,并将它们添加到节,但不要加载它们)。</small>

代码段
fkakatie

带链接的图像

预览

<small>此代码片段会将超链接添加到图像。 要使用它,请参阅链接的代码段。 在Wod/GDoc中进行创作时,请指定紧跟图像后面的链接URL。</small>


加拉加里

表单块

预览

<small>具有各种功能的表单块

  • Google Recaptcha集成

  • Forms中的附件支持。

  • 后处理

    • 电子邮件通知
    • 将数据同步到Marketo或Salesforce。</small>


涅克拉艾马克斯

选项卡

预览

<small>制表符块基于scripts.js中自动阻止的节。支持在制表符块中“嵌套”块以及节元数据,例如样式。

部分由css控制的选项卡块逻辑</small>


戴夫 — 芬克

Image-Compare

预览

<small>这是一个简单的内容块,用于比较两个图像以及一个滑块来显示或隐藏左侧或右侧图像。</small>


施泰默

痕迹导航

<small>根据父页面的页面标题创建痕迹导航导航</small>

代码段
安德烈图伊库

DOM帮助程序(React JSX-Like)

预览

<small>Dom帮助程序受React JSX启发,旨在使AEM JS代码更加简洁、易于编写、理解和审查。 使用100%原型JS查看代码时,DOM类似语法结构,可轻松可视化生成的HTML,而无需编译或外部依赖项。 最大限度地减少开销(几个ifs和函数调用),使您能够维护100 LHS,并避免使用字符串模板进行DOM操作的隐患。 既可用于渲染工作表中的动态数据,也可用于渲染来自Word文档的数据。</small>

Sidekick插件
herzog31

分块和分区计划

预览

<small>此代码允许您计划块或分区。 您只需将日期或日期范围作为行添加到块或节元数据表中,您的内容将仅在日期之后或范围内显示。

这附带了一个Sidekick扩展,允许您预览过去或未来的内容。

不适用于机密数据,因为计划内容仍将位于DOM中。</small>

其他
博斯卡尔

docxtools:使用命令行linux样式中的多个.docx文件

<small>此命令行工具允许您对.docx文件的目录树执行任务,就像使用linux“grep”或“sed”命令一样。 目前支持的有: * cat — 将docx文件的文本内容输出到控制台* grep — 在文档文本中搜索正则表达式*替换/替换链接搜索并替换word .docx文件中的文本或超链接注意:该工具以Rust编写,发行版本提供特定于平台的可执行文件。 如果您需要其他平台ping David B或投稿PR。</small>

其他
synox

RSS馈送生成器Github工作流

预览

<small>每次发布新页面时,此Github工作流都会更新RSS源XML。 工作流:

链接

脚本:

链接

</small>

代码段
朗博兹

创建图标Sprite

预览

<small>一种直接在文档中内联SVG图标的机制,以便可以直接从CSS(大小、颜色等)为图标设置样式</small>

其他
vtsaplin

AEM表达式

预览

<small>AEM表达式允许用户通过添加带有参数的简单表达式将AEM文档转换为模板。 然后,这些表达式会成为显示动态获取的HTML的内容元素。 也可以使用表达式作为修饰符,以围绕插入点来样式化和增加内容。 这会将表达式转换为可重复使用的片段,这些片段可以放置在顶级AEM块中。</small>

代码段
sdmcraft

外部图像

预览

<small>此代码片段演示了在AEM AEM网页上使用从外部系统(AEM AEM外部)获取的图像的机制</small>

其他
synox

使用Excel工作表替换所有.docx文件中的链接

<small>使用基于Excel工作表的新链接以递归方式替换Word文档中的过时链接,并带有映射,通常是redirects.xlsx。</small>

其他
sdmcraft

网页的可视化比较工具

预览

<small>这是一个用于比较网页的可视比较工具。 通常,在处理站点样式更改时,我们希望评估该更改对整个站点的影响。 对所有页面手动执行此操作是一个枯燥的过程。 通过使用该工具,可以在很大程度上自动完成这项任务。 在向其提供分支引用和URL列表以进行可视化测试后,它会检查“主”和“测试”分支上的所有URL,并将其加载到基于播放权的无头浏览器中,拍摄屏幕快照并记录差异。 该工具会告知用户这些差异,并提供可查看这些差异的屏幕截图位置。</small>

其他
阿南

日志查看器

预览

<small>轻松查看AEM Edge Delivery项目的日志</small>

Sidekick插件
乌斯曼 — 哈立德

辅助功能模式

预览

<small>此插件在Sidekick中添加了一个按钮,用于在给定的Franklin页面上启用“辅助功能模式”,该模式从内容角度审核页面,并报告图像上缺少替换文本、可读性易读性和其他辅助功能项目等内容。

创建自定义检查也是可扩展的,例如,可用于促进正确块使用并遵循样式准则。 在存储库中,有一个示例说明了这一点,该示例会检查页面上是否有过多块实例并报告这些实例。

内容作者可以使用它来查看页面,并在发布之前作为印前检查来处理任何内容或辅助功能相关问题。</small>

Sidekick插件
施泰默

引用检查

<small>查找页面(表单、片段、链接等)使用的引用 并为作者提供了一键访问权,以便查看和编辑。 还可以检查传入的引用。</small>

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec