區塊集合
這是被視為 AEM 產品一部分的區塊集合,建議將其作為您專案中的區塊 Blueprint。
這些區塊來自實際生產環境的AEM專案。 要成為此集合的一部分,區塊需要在許多專案中具有高的使用率,並提供足夠的抽象功能並且足夠寬泛,以便無需變更基礎內容模型即可重複使用。
隨著網站的需求和設計改變,區塊集合也會改變。 新增專案以反映專案的新需求,但也不會移除使用頻率不夠的區塊(已棄用)。
集合中的區塊有幾項技術原則:
- 直覺式: 直覺式且容易編寫的內容結構
- 可用: 沒有相依性,與樣版相容
- 回應式: 適用於所有中斷點
- 內容感知: 繼承CSS內容,例如文字和背景顏色
- 可當地語系化: 沒有硬式編碼內容
- 快速: 沒有負面效能影響
- SEO與A11y: SEO友善且可存取
所有區塊都可視為您自己的區塊開發的基礎。 您可能會變更所有.css
和.js
程式碼以滿足您自己的專案需求。 這些區塊的主要值是所提供的內容結構。
考慮到您的區塊的程式碼將完全適合您的專案,集合中的區塊無意回溯相容於其各自的舊版本,或使其可升級。
樣板
最常用的區塊(以及預設內容型別)會在AEM範本中加以組織,並且是每個AEM專案的一部分。 區塊若要成為樣板的一部分,就必須為絕大多數AEM專案所使用。
AEM Boilerplate中所有區塊的程式碼基底是開放原始碼,可以在GitHub adobe/aem-boilerplate上找到
使用下方的sidekick資料庫可探索AEM Boilerplate中的區塊,請使用copy
按鈕將對應的內容結構複製到剪貼簿,然後貼到檔案中以檢視內容結構。
<h3>標題</h3> 預設內容 不同層級的標題會提供檔案的語意骨幹 |
<h3>文字</h3> 預設內容 內文或附有RTF語意格式選項的副本 |
<h3>影像</h3> 預設內容 圖片讓您的內容栩栩如生 |
<h3>清單</h3> 預設內容 有順序且無順序的清單(無論何時需要) |
<h3>連結</h3> 預設內容 參考其他網站或您自己的內容 |
<h3>按鈕</h3> 預設內容 行動號召按鈕等 |
<h3>代碼</h3> 預設內容 在您的內容中反白標示預先格式化的程式碼片段 |
<h3>部分</h3> 預設內容 將您頁面上的內容分組為區段 |
<h3>圖示</h3> 預設內容 使用圖示讓您的內容更加有趣 |
<h3>Hero</h3> 區塊 頁面頂端的英雄處理 |
<h3>欄</h3> 區塊 以回應式方式處理多欄配置的彈性方式 |
<h3>卡片</h3> 區塊 包含或不包含影像和連結的卡片清單 |
<h3>頁首</h3> 區塊 彈性的標題和導覽範例 |
<h3>頁尾</h3> 區塊 簡易可擴充的頁尾區塊 |
<h3>中繼資料</h3> 視需要新增中繼資料至您的頁面 |
<h3>章節中繼資料</h3> 反白顯示或建構區段中的所有內容 |
區塊集合
區塊集合包含常用的區塊,但不太常見而被視為樣板。 做為經驗法則,若要在區塊集合中納入,一個區塊必須用於一半以上的AEM專案。
區塊集合可以是範本程式碼的專案路徑。 同樣地,如果範本中的區塊不再經常使用,則可將其移至此集合。
AEM區塊集合中所有區塊的程式碼基底是開放原始碼,可以在GitHub adobe/aem-block-collection上找到
您可以使用下方的sidekick資料庫探索AEM區塊集合中的區塊,使用copy
按鈕將對應的內容結構複製到剪貼簿,然後貼到檔案中以檢視內容結構。
<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網站上建立哪些內容的地方。 此外,也讓其他人可避免重整旗鼓,重複使用這些社群建立的區塊/程式碼片段/整合,並視需要調整程式碼,以符合他們自己的專案。 請參閱封鎖合作對象,瞭解其提供的一切。
注意:雖然我們熱愛並支援我們的AEM開發人員社群,但Adobe對於維護或更新顯示於封鎖派對中的程式碼不負任何責任。 請自行決定使用程式碼。