标记、部分、区块和自动屏蔽

为了设计网站和创建功能，开发人员使用从内容中动态呈现的标记和 DOM。标记和 DOM 的构建方式有助于灵活操作和设置样式。同时，还提供开箱即用的功能，因此开发人员不必担心现代网站的某些方面。

文档结构

构造文档时，最重要的一个方面是使它对于将贡献内容的作者变得简单而直观。

这意味着，强烈建议让作者尽早参与该过程。 在很多情况下，好的做法是让作者将需要继续处理的内容放入Google Doc或Word文档中，而无需任何块和节的概念，然后尝试进行小的结构性更改，只在必要时引入节和块。

文档在摘要中遵循以下结构。

在Word或Google Doc文档中创作的页面使用易于理解的语义模型，例如标题、正文文本、列表、图像、链接等。 在HTML、Markdown和Google Doc/Word之间共享。 我们称之为​ 默认内容。 在理想情况下，应尽可能多地保留所创作的默认内容，因为这是作者处理文档的自然方式。

除了默认内容外，我们还定义了页面​ 部分 ​的概念（用水平规则分隔）或---的概念，用于将页面的某些元素组合在一起。 将内容分组可能既有语义原因，也有设计原因。 一个简单的例子可能是页面的某个部分具有不同的背景颜色。

此外，还有​ 块 ​的概念，这些块被创作为表，其标题作为标识块类型的第一行。 此概念是将代码组件化的最简单方法。

部分可以包含多个块。 块绝不应嵌套，因为这样会使得内容很难用于作者。

DOM与标记

AEM会根据提供给它的内容生成清晰易读的语义标记。 您可以使用​ 查看源 ​功能轻松访问它，并查看当前所读页面的标记。

scripts.js中使用的JavaScript库采用标记，并将其增强为一个DOM，然后用于大多数开发任务，特别是构建块。 要创建易于用于自定义项目代码的DOM，最好将其视为两个步骤的过程。

在第一步中，我们创建标记，其中包含看起来类似于此内容的部分、块和默认内容。

在第二步中，上述标记被扩充为以下示例DOM，然后该示例可用于样式化和添加功能。 下面重点介绍了从服务器交付的标记与用于大多数开发任务的增强DOM之间的区别。

它主要包括为块和默认内容引入包装器<div>，以及动态添加AEM块加载器使用的其他有用的CSS类和数据属性。

区域

区域是作者对默认内容和块进行分组的方法。 大多数时间分区界限的引入是基于分区之间的视觉差异，例如页面某部分的不同背景颜色。

从开发角度来看，除了CSS样式以外，通常没有太多与区段的交互。
节可以包含名为Section Metadata的特殊块，这将导致节的数据属性。 数据属性的名称可由作者选择，唯一已知的部分元数据属性为Style，该属性将转换为添加到包含部分元素的其他CSS类。

块和默认内容始终包装在分区中，即使作者未专门引入分区界限也是如此。

默认内容

Word文档、Google Docs、Markdown和HTML之间共享了多种语义。 例如，有不同级别的标题(如 <h1> - <h6>)、图像、链接、列表(<ul>、<ol>)、强调(<em>、<strong>)等。

我们利用作者对如何在他们熟悉的工具中使用这些语义的直观理解(例如 Word/Google文档)，并将这些文档映射到Markdown，然后在HTML标记中呈现它们。

对于开发人员而言，所有映射都应相对简单直观。 我们在处理图像方面比最简单的翻译更进一步。 呈现的完整<picture>标记不是简单的<img>标记，而是桌面和移动设备上显示所需的多种不同分辨率，以及支持Web的现代浏览器和不支持Web的旧版浏览器的不同格式。

块

大多数项目特定的CSS和JavaScript都位于块中。 作者在其文档中创建块，开发人员编写相应的代码以使用CSS设置块的样式和/或修饰DOM以采用块的标记并将其转换为所需样式和功能所需或方便的结构。

块名称会用作块的文件夹名称，也会用作块加载程序在页面上使用块时加载的CSS和JavaScript文件的文件名。 块名称还用作块上的CSS类名称，以便进行直观的样式。

JavaScript将作为模块(ESM)加载，并导出作为块加载的一部分执行的默认函数。

应将所有块级别CSS的作用范围限定为块，以确保项目的其他部分没有副作用，这意味着块中的所有选择器都应使用相应的块类作为前缀。 在某些情况下，也可以将块的包装器或包含部分用于选择器。

JavaScript中的DOM操作与CSS选择器的复杂性之间存在平衡。 不建议使用复杂的易碎的CSS选择器，同时向每个元素添加类会增加代码的复杂性，并且会忽略元素的语义。

项目最重要的原则之一就是要让作者简明而直观。 由于复杂的块使得内容难以创作，因此开发人员务必要将直观的创作体验转换为布局或应用程序逻辑所需的DOM。 将复杂性赋予作者常常是件诱人的事。 相反，开发人员应确保块不会变得难以为作者创建。 作者应始终能够简单地复制/粘贴块并直观地了解其内容。

一个简单的示例是列块。 它会根据作者创建的相应实例中的列数在JavaScript中添加其他类。 这使得它能够使用两列而不是三列的灵活内容样式。

块可以非常简单或包含完整的应用程序组件或小组件，并且为开发人员提供了一种方法，使其代码库组件化为代码的小块，这些代码块可以轻松管理并根据需要加载到网页上。

块的内容在标记中呈现为作者输入的行和列的嵌套<div>标记。 最简单的情况是，一个块只有一个单元格。

<div class=”blockname”>
  <div>
     <div>
      <p>Hello, World.</p>
     </div>
  </div>
</div>

作者可以临时方式将块添加到其页面，只需在第一行或表标题中添加具有块名称的表即可。 某些块也会自动加载。 需要在网站的每个页面上出现的header和footer块就是一个很好的例子。

阻止选项

如果您需要某个块的外观或行为因特定情况而略有不同，但其差异不足以使其成为新的块，则可以允许作者将​ 块选项 ​添加到括号中的块中。 这些选项会将修改的类添加到块中。 例如，表头中的Columns (wide)将生成以下标记。

<div class=”columns wide”>

块选项也可以包含多个单词。 例如，Columns (super wide)将使用连字符连接。

<div class=”columns super-wide”>

如果块选项以逗号分隔（如Columns (dark, wide)），则将它们添加为单独的类。

<div class=”columns dark wide”>

自动阻止

在理想情况下，大部分内容是在块之外创作的，因为将表引入文档会增加读取和编辑的难度。 相反，块为开发人员提供了一个很好的机制来保持其代码的组织性。

一种经常使用的机制称为自动阻止​ ​。 自动阻止将默认内容和元数据转换为块，作者无需实际创建它们。 在加载块之前，自动阻止会在页面修饰过程中非常早期发生，这是一种以编程方式创建块的DOM结构的做法，就像从服务器获取标记一样。

自动阻止通常与元数据一起使用，特别是template属性。 如果页面具有通用模板，即它们共享特定的页面设计或功能，这通常是自动阻止的好机会。

一个很好的示例是博客帖子的文章标题。 它可能包含有关作者、博客文章标题、主页图像以及发布日期的信息。 自动块（例如article-header块）不会让作者将包含所有这些信息的块放在一起，而是会根据<h1>、第一个图像、博客作者和发布日期元数据以编程方式添加到页面中。

这允许内容作者将信息保留在其自然位置，即块外的文档结构。 同时，开发人员可以将所有布局和样式信息保存在块中。

另一个非常常见的用例是在文档中将块包裹在链接周围。 一个很好的示例是，作者通过简单地包含链接来链接到YouTube视频，而开发人员希望将视频的所有代码内联嵌入到embed块中。

此机制也可以作为一种灵活的方式使用，以包含对视频、内容片段、模式、表单和其他应用程序元素的外部应用程序和内部引用。

项目代码自动阻止scripts.js中buildAutoBlocks()中的生活。

请参阅以下自动阻止示例。