標記、區段、區塊和自動進行區塊

為了設計網站和建立功能，開發人員會使用從內容動態轉譯的標記和 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中新增其他類別。 如此一來，即可靈活使用兩欄與三欄內容的樣式。

區塊可以非常簡單或包含完整應用程式元件或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區塊中，就是很好的範例。

此機制也可用來當作包含外部應用程式和視訊、內容片段、模式、表單和其他應用程式元素之內部參照的彈性方式。

您專案的程式碼會在您scripts.js的buildAutoBlocks()中自動封鎖生命。

請參閱以下自動封鎖範例。