區塊集合

這是被視為 AEM 產品一部分的區塊集合,建議將其作為您專案中的區塊 Blueprint。

這些區塊來自實際生產AEM專案。 要成為此集合的一部分,區塊需要在許多專案中具有高的使用率,並提供足夠的抽象功能並且足夠寬泛,以便無需變更基礎內容模型即可重複使用。

隨著網站的需求和設計改變,區塊集合也會改變。 新增專案以反映專案的新需求,但也不會移除使用頻率不夠的區塊(已棄用)。

集合中的區塊有幾項技術原則:

  • 直覺式: 直覺式且易於編寫的內容結構
  • 可用: 無相依性,與樣板相容
  • 回應式: 適用於所有中斷點
  • 內容感知: 繼承CSS內容,例如文字和背景顏色
  • 可本地化: 沒有硬式編碼內容
  • 快速: 不會對效能造成負面影響
  • SEO與A11y: SEO友善且可存取

所有區塊都可視為您自己的區塊開發的基礎。 您可能會變更所有 .css.js 程式碼以符合您自己的專案需求。 這些區塊的主要值是所提供的內容結構。

考慮到您的區塊的程式碼將完全適合您的專案,集合中的區塊無意回溯相容於其各自的舊版本,或使其可升級。

樣板

最常用的區塊(以及預設內容型別)會在AEM範本中加以組織,並且是每個AEM專案的一部分。 區塊若要成為樣板的一部分,就必須被所有AEM專案的絕大部分使用。

<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專案。

區塊集合可以是範本程式碼的專案路徑。 同樣地,如果範本中的區塊不再經常使用,則可將其移至此集合。

<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>編寫指令碼,以將模型新增至您的富蘭克林頁面。 這會使用new(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應用程式,而不需要Headless SDK的效能包袱和Headless API的複雜性。</small>

程式碼片段
Shsteimer

動態載入的範本

<small>載入範本專用的CSS和JS,允許範本專用樣式和自動封鎖,而不會將該程式碼混入全域指令碼/樣式中。

注意:由於範本js是在載入區塊之前載入,但在區段/區塊裝飾之後載入,因此自動封鎖必須考慮到這一點(也就是說,建置並裝飾您的區塊,並將它們新增至區段,但不要載入它們)。</small>

程式碼片段
fkakatie

含有連結的影像

預覽

<small>此程式碼片段會將超連結新增至影像。 若要使用,請參閱連結的程式碼片段。 在Wod/GDoc中製作時,請在影像後面立即指定連結url。</small>

區塊
加拉加利

表單區塊

預覽

<small>具有各種功能的表單區塊

  • Google Recaptcha整合

  • Forms中的附件支援。

  • 後處理

    • 電子郵件通知
    • 將資料同步至Marketo或Salesforce。</small>

區塊
Niekraaijmakers

標籤

預覽

<small>Tab區塊,依據scripts.js中自動封鎖的區段。支援Tab區塊中的「巢狀」區塊以及區段中繼資料,例如樣式。

由css部分控制的Tab區塊邏輯</small>

區塊
dave-fink

Image-Compare

預覽

<small>這是一個簡單的內容區塊,可以用滑桿比較兩個影像來顯示或隱藏左側或右側的影像。</small>

區塊
Shsteimer

階層連結

<small>根據上層頁面的頁面標題建立階層連結導覽</small>

程式碼片段
andreituicu

DOM Helpers (React JSX-Like)

預覽

<small>Dom Helpers受到React JSX的啟發,使AEM JS程式碼更簡潔、更容易撰寫、理解和檢閱。 DOM類似語法結構,可在使用100% vanilla JS檢視程式碼時輕鬆地將產生的HTML視覺化,而不需要編譯或外部相依性。 最少的額外負荷(一些ifs和函式呼叫),可讓您維護100 LHS並避免使用字串範本進行DOM操作的陷阱。 可用於轉譯工作表中的動態資料或來自Word檔案的資料。</small>

Sidekick外掛程式
herzog31

區塊與區段排程

預覽

<small>此程式碼可讓您排程區塊或區段。 只要將日期或日期範圍當做列新增到您的區塊或區段中繼資料表格中,您的內容只會顯示在日期之後或範圍內。

這附帶Sidekick擴充功能,可讓您預覽過去或未來的內容。

不適用於機密資料,因為排程內容仍會位於DOM。</small>

其他
博斯卡爾

docxtools:從命令列linux樣式使用多個.docx檔案

<small>這個命令列工具可讓您在.docx檔案的目錄樹狀結構上執行工作,就像使用linux 'grep'或'sed'命令一樣。 目前支援的功能包括: * cat — 將docx檔案的文字內容輸出到主控台* grep — 搜尋檔案文字中的regex *取代/取代連結搜尋並取代word .docx檔案內的文字或超連結注意:此工具是以Rust撰寫,且發行版本提供平台專屬可執行檔。 如果您需要不同的平台Ping David B或協助撰寫PR。</small>

其他
synox

RSS摘要產生器Github工作流程

預覽

<small>此Github工作流程會在每次發佈新頁面時更新RSS摘要XML。 工作流程:

連結

指令碼:

連結

</small>

程式碼片段
ramboz

建立Icon Sprite

預覽

<small>直接在檔案中內嵌SVG圖示的機制,因此可以直接從CSS設定圖示的樣式(大小、顏色等)</small>

其他
vtsaplin

AEM運算式

預覽

<small>AEM運算式可讓使用者透過新增包含引數的簡單運算式,將AEM檔案轉換為範本。 然後,這些運算式會成為顯示動態擷取內容的HTML元素。 也可以使用運算式做為裝飾程式,以樣式化和增加插入點周圍的內容。 這會將運算式變成可重複使用的片段,可放置在頂層AEM區塊中。</small>

程式碼片段
sdmcraft

外部影像

預覽

<small>此程式碼片段示範如何在AEM AEM網頁上使用從外部系統(AEM AEM外部)擷取的影像</small>

其他
synox

使用Excel工作表取代所有.docx檔案中的連結

<small>以遞回方式將Word檔案中的過時連結取代為以Excel工作表為基礎的新連結,且具有對應,通常是redirects.xlsx。</small>

其他
sdmcraft

網頁的視覺比較工具

預覽

<small>這是用於比較網頁的視覺比較工具。 我們經常在工作網站樣式變更時,想要評估該變更對整個網站的影響。 對所有頁面手動執行此動作是一項枯燥乏味的程式。 使用此工具,此工作在很大程度上會自動執行。 提供分支參考和URL清單以進行視覺測試後,它會瀏覽「主要」和「測試」分支上的所有URL,並在基於播放程式的Headless瀏覽器中載入它們、擷取熒幕擷取畫面並記錄差異。 此工具會通知使用者差異,並提供可檢視差異的熒幕擷取畫面位置。</small>

其他
amol-anand

記錄檢視器

預覽

<small>輕鬆檢視AEM Edge Delivery專案的記錄檔</small>

Sidekick外掛程式
usman-khalid

協助工具模式

預覽

<small>此外掛程式在sidekick中新增一個按鈕,以在指定的Franklin頁面上啟用「協助工具模式」,從內容角度稽核頁面,並報告影像上缺少替代文字、易讀性和其他協助工具專案等問題。

也可以擴充以建立自訂檢查,例如,可用來促進正確區塊使用並遵循樣式准則。 在存放庫中,此情形的範例是檢查頁面上是否有太多區塊例項並製作報表。

內容作者可在發佈前透過預檢檢檢視頁面,以及解決任何內容或協助工具的相關問題。</small>

Sidekick外掛程式
Shsteimer

參考檢查

<small>尋找頁面(表單、片段、連結等)所使用的參考 和讓作者按一下即可檢視和編輯。 也可以檢查傳入的參照。</small>

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