標示、區段、區塊和自動封鎖
為了設計網站及建立功能，開發人員會使用從內容動態轉譯的標籤和DOM。 標籤和DOM的建構方式可允許彈性操作和樣式。 同時，它提供立即可用的功能，讓開發人員不必擔心現代網站的某些方面。
檔案的結構
建構檔案時最重要的一個方面，就是讓貢獻內容的作者可以簡單又直覺地操作。
這表示強烈建議讓作者及早參與此程式。 在許多情況下，好的作法是讓作者將所需進入頁面的內容放入Google Doc或Word檔案中，而不需要任何區塊和區段的概念，然後嘗試進行小的結構變更，只在必要時引入區段和區塊。
檔案在摘要中會遵循下列結構。
在Word或Google Doc檔案中編寫的頁面會使用熟悉的語意模型，例如標題、內文、清單、影像、連結等。 在HTML、Markdown和Google Doc/Word之間共用。 我們稱之為 預設內容. 在理想的情況下，我們會儘可能留下預設內容，因為這是作者處理檔案的正常方式。
除了預設內容之外，我們還提供頁面概念 區段，以水準規則分隔或 --- 將頁面的某些元素群組在一起。 將內容群組在一起可能有語意和設計上的原因。 一個簡單的案例可能是頁面的某個區段具有不同的背景顏色。
除此之外，還有 個區塊 這些區塊是以表格的形式撰寫，其標題會作為識別區塊型別的第一列。 此概念是元件化程式碼的最簡單方法。
區段可包含多個區塊。 區塊絕不可巢狀化，因為這會讓作者很難使用內容。
DOM與標籤
AEM會從提供的內容產生清晰且易於讀取的語意標籤。 您可以使用 檢視來源 功能，並檢視您目前所閱讀頁面的標籤。
使用的JavaScript程式庫 scripts.js 採用標籤並將其增強為DOM，然後用於大多數開發任務，特別是建置區塊。 若要建立易於用於自訂專案程式碼的DOM，最好以兩個步驟的流程來檢視。
在第一個步驟中，我們會建立標示，其中包含看起來類似以下的區段、區塊和預設內容。
在第二個步驟中，上述標籤會增強為下列範例DOM，然後可用於樣式化和新增功能。 從伺服器傳送的標籤與用於大多數開發工作的擴充DOM之間的差異會在下方醒目提示。
其主要內容包括推出包裝函式 <div> 區塊和預設內容，以及動態新增AEM區塊載入器使用的其他實用CSS類別和資料屬性。
部分
區段是作者將預設內容和區塊分組的方法。 大多數的時間區段分頁是根據區段之間的視覺差異（例如頁面某部分具有不同的背景顏色）而引入的。
從開發觀點來看，除了CSS樣式以外，通常沒有太多與區段的互動。
區段可包含稱為的特殊區塊 Section Metadata，會將資料屬性導向至區段。 資料屬性的名稱可由作者選擇，唯一知名的區段中繼資料屬性為 Style 這些類別將轉換為其他CSS類別，並新增至容納區段元素。
區塊和預設內容一律包裝在區段中，即使作者未特別引入分割槽符號。
預設內容
Word檔案、Google檔案、Markdown和HTML之間有各種共用的語意。 例如，有不同層級的標題(如 <h1> - <h6>)、影像、連結、清單(<ul>， <ol>)，強調(<em>， <strong>)等。
我們運用作者的直覺式理解，瞭解如何在他們熟悉的工具中使用這些語意(例如 Word/Google檔案)，並將這些專案對應至Markdown，然後在HTML標籤中轉譯。
開發人員的所有對應都應相對簡單且直覺。 我們在處理影像方面比最簡單的轉譯更進一步。 而不是簡單的 <img> 標籤，完整 <picture> 標籤會以案頭和行動裝置上顯示的不同解析度呈現，支援網頁的現代瀏覽器以及不支援網頁的舊版瀏覽器會以不同格式呈現。
個區塊
大部分專案特定的CSS和JavaScript以區塊形式存在。 作者在其檔案中建立區塊，而開發人員則撰寫對應的程式碼，以CSS和/或裝飾DOM來設定區塊的樣式，以取得區塊的標籤，並將其轉換為所需或方便用於所需樣式和功能的結構。
區塊名稱會同時用作區塊的資料夾名稱，以及在頁面上使用區塊時，由區塊載入器載入的CSS和JavaScript檔案的檔案名稱。 區塊名稱也會當作區塊的CSS類別名稱使用，以允許直覺式的樣式。
JavaScript會載入為模組(ESM)，並匯出預設函式，此函式會在區塊載入過程中執行。
所有區塊層級CSS的適用範圍都應設為區塊，以確保專案的其他部分沒有副作用，這表示區塊中的所有選取器都應加上對應的區塊類別前置詞。 在某些情況下，為選取器使用區塊的包裝函式或包含區段也是合理的。
在JavaScript中的DOM操作和CSS選取器的複雜性之間取得平衡。 不建議使用複雜且脆弱的CSS選取器，同時為每個元素新增類別會使程式碼更複雜，而且會忽略元素的語意。
專案最重要的原則之一，就是要讓作者保持簡單直覺。 複雜的區塊會讓內容難以撰寫，因此開發人員應消化將直覺式撰寫體驗轉譯為版面配置或應用程式邏輯所需的DOM的複雜性，這一點很重要。 將複雜性委派給作者往往是件很誘人的事。 相反地，開發人員應該確保區塊不會變得難以為作者建立。 作者應該永遠能夠直接複製/貼上區塊，並直覺地瞭解其內容。
一個簡單的範例是 欄區塊. 它會根據作者建立的個別例項中的欄數，在JavaScript中新增其他類別。 如此一來，即可靈活使用兩欄與三欄內容的樣式。
區塊可以非常簡單或包含完整應用程式元件或Widget，好讓開發人員將程式碼基底元件化為程式碼的小片段，以便輕鬆管理程式碼，並視需要載入到網頁上。
區塊的內容會以巢狀方式呈現至標籤中 <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 區塊。
此機制也可用來當作包含外部應用程式和視訊、內容片段、模式、表單和其他應用程式元素之內部參照的彈性方式。
您專案的程式碼會自動封鎖中的專案 buildAutoBlocks() 在您的 scripts.js.
請參閱以下自動封鎖範例。