改善 Drupal 的佈局構建器體驗

已發表: 2021-03-16

當 Layout Builder 在 Drupal 8.6 中引入並在 Drupal 8.7 中穩定時，它在 Drupal 的生態空間中使用的頁面構建機制中造成了漂移。 Layout builder 與 Paragraphs、Brick、Panels 和 Display Suite 等其他工具形成了激烈的競爭。它獨特的拖放組件和實時預覽的能力對於頁面構建器工具和作者來說是一個真正的讓步。

然而，儘管是用於構建頁面的驚人工具，但它在用於需要更好的創作能力、受限選擇、快速訪問以及更重要的是對不同用戶角色的細化權限的企業應用程序時有其缺點。

在本文中，我將介紹 10 個 Drupal 貢獻的模塊，它們可以與出色的 Layout Builder 模塊結合使用，這將使該工具更具吸引力和權威性。為了增加這種令人敬畏的功能，所有這些模塊也與 Drupal 9 兼容！

這些模塊分為某些類別：

樣式- 能夠訪問編輯器以從可應用於部分和塊的樣式庫中進行選擇。
創作體驗- 增強他們喜愛的編輯的創作體驗。
可重用性- 提供在不同頁面上重用組件或部分以減少頁面構建時間。
快速訪問- 提供對編輯器的快速訪問以執行某些操作從而節省時間。
權限- 根據他們的訪問權限授予對編輯者或其他用戶角色的受限訪問權限。

佈局生成器樣式

佈局生成器樣式是一個強大的 Drupal 模塊，允許您直接從 UI 向塊和部分添加樣式。它可用於為作者提供從後端定義的預設樣式列表中進行選擇的能力。

“樣式”只是將應用的一個或多個 CSS 類的表示。此外，對於塊，會為所選樣式添加塊模板建議。

樣式基本上是包含 CSS 類的配置實體。在配置中添加的類必須在前端主題樣式表中定義，以便它們在應用於特定部分或塊時反映在前端。有一個規定可用於具有可應用於單個塊或部分的多種樣式。

由於樣式存儲為配置，因此可以使用 Drupal 配置管理將它們輕鬆導出到配置文件。

但是，您在添加樣式時必須負責，因為您為作者提供了強大的能力來更改放置在頁面中的組件的樣式。如果計劃不當，事情可能會以相互衝突的風格向南發展。

佈局生成器組件屬性

Layout Builder Component Attributes 模塊為作者提供了類似的規定，但有更多的選擇，它僅適用於放置在佈局中的塊。

通常，作者需要將某些數據屬性或某些 CSS 類/ID 添加到塊中以某種方式呈現數據。有一些模塊可用於此類情況，例如 Block 屬性和 Block 類，但它們要么缺乏 Layout Builder 的支持，要么需要打補丁才能工作。 Layout Builder Component Attributes 模塊提供了將這些詳細信息作為屬性添加到 Layout Builder UI 中開箱即用的塊的選項。

這些模塊提供選項 ID、Class(es)、Styles [塊的內聯樣式]、Data-* 屬性。這些屬性可以添加到 1) 塊（外部）元素、2）塊標題和 3）塊內容（內部）元素。這些選項可針對每種元素類型進行配置，即如果您不希望 ID 字段可用於塊標題，則可以在模塊配置表單中取消選中

“/admin/config/content/layout-builder-component-attributes”

佈局生成器模式

Drupal 的 Layout Builder Modal 模塊使塊配置表單或創建表單（內聯塊的情況下）的 UI 和創作體驗現代化。顯示在畫布外對話框側欄上的表單可能會變得非常麻煩，因為它非常狹窄。尤其是在處理複雜字段、富文本字段、媒體引用等時。畫布外對話框大大降低了可用性，對於此類情況並不理想。

該模塊在一個彈出窗口中打開表單，在那裡有大量的喘息空間和增加的可用性。有可用的配置，您可以在其中設置模式彈出窗口的寬度和高度。您還可以選擇用於模態內容的主題，您可以在其中選擇默認啟用的主題（在上面的屏幕截圖中為 Olivero）和舊的七管理主題。目前，不支持 Claro，但在這方面正在進行工作以使 Claro 作為替代品可用。

總體而言，該模塊極大地增強了編輯器的創作體驗和 Layout Builder 的可用性。

佈局生成器庫

讓我們考慮這樣一種情況，即編輯需要快速建立一個頁面，他們需要根據某些標準（例如，選擇特定分類術語）顯示某些內容塊組件。現在，這可以通過一種困難的方式來完成，即編輯器創建一個登錄頁面，然後為具有相同內容但條件不同的多個頁面一次又一次地創建相同的佈局。或者，使用 Layout Builder 庫模塊。

佈局構建器庫模塊為站點管理員提供了為每個實體類型和捆綁組合創建預定義佈局的能力。現在，這些佈局將在創建登陸頁面內容時可供站點編輯器使用。這將使任務變得更容易和更快，編輯人員不必重複重做相同的任務。該模塊還提供細化權限，以限制編輯人員創建自己的定制佈局，但讓他們能夠在每個內容項的基礎上自定義佈局。

截面庫

類似於上面提到的編輯者可能需要從庫中的現有佈局中進行選擇的情況，可能存在編輯者必須在多個頁面上重用佈局生成器中的某些部分的情況。這就是部分庫發揮作用的地方。使用該模塊，編輯人員可以創建自己的迷你佈局，可以在其他頁面上重複使用。這使他們可以更快地創建頁面，而無需再次重複執行相同的操作。

該模塊與 Layout Builder Library 模塊的主要區別在於後者構建了一個整頁模板並且是基於配置的。部分庫是基於內容的，因此內容編輯器可以在沒有導入/導出配置的情況下動態創建模板，還可以為部分或多個組合部分（頁面）模板構建模板。

兩個模塊之間沒有重疊，可以同時使用。

佈局生成器直接添加

Layout Builder 的主要功能之一是能夠添加內聯塊，這些塊是特定於頁面的不可重用塊。現在，如果您系統中的頁面主要依賴於這些內聯塊作為組件，那麼 Layout Builder Direct Add 可以通過節省幾次點擊來節省一些編輯器的時間。

該模塊簡單地將“添加塊”按鈕替換為系統中可用塊類型的快速下拉按鈕，並帶有“更多”選項，可打開畫布對話框側邊欄。當編輯器從列表中選擇任何塊類型時，它會直接打開塊表單以創建該組件。

Layout Builder 操作鏈接

這個小模塊是一個很好的網站功能。要訪問實體的佈局生成器 UI，編輯器需要訪問該頁面，然後單擊任務欄中的佈局選項卡。佈局生成器操作鏈接向內容概覽頁面中的內容添加佈局選項下拉按鈕。

佈局選項將顯示在所有啟用了佈局生成器的實體類型包中。當內容編輯器想要直接訪問實體的佈局頁面而不先加載其編輯頁面時，此鏈接可以為內容編輯器節省點擊/頁面加載。

佈局生成器限制

開箱即用，Layout Builder 將列出系統中由各種插件和模塊提供的所有可用塊，字段可用作塊，並且有內聯塊選項可用於創建一次性塊。除此之外，其他模塊和主題提供的所有佈局也會在放置部分時列出。這對於編輯者來說可能有點令人困惑和不知所措，並且會帶來可用性問題，因為塊的數量在企業應用程序中會快速增長。

Layout Builder Restrictions 通過提供帶有所需選項的可配置佈局來解決這個問題。只要為任何實體顯示啟用佈局生成器，就會出現這些選項。用於允許列表/拒絕列表塊和佈局的模塊可配置 UI。站點可以允許來自某個提供商的所有選項，或按提供商限制所有選項，或指定單個允許的塊和佈局。站點管理員可以允許/拒絕那些對編輯器構建頁面有用的塊，並且只有那些塊和佈局可供編輯器選擇。

佈局生成器高級權限

儘管 Drupal 為用戶角色提供了強大的權限系統，但可能存在基於角色的更細粒度的權限。當有多個用戶角色與系統和頁面交互時，可能會出現這種情況。

佈局生成器高級權限模塊為站點管理員提供了根據他們的角色提供受限使用權限的能力。這些權限是全局的，適用於啟用了佈局生成器的所有實體類型。為了更進一步並在更粗略的級別上限制訪問，佈局構建器鎖將派上用場，這將在下一節中介紹。

佈局生成器鎖

如上所述，Layout Builder Lock 將為用戶提供更粗略的訪問。它允許管理員鎖定默認佈局的部分，以便用戶在覆蓋單個實體的佈局時無法執行某些操作。

這些鎖定設置將在模塊安裝後可用，並且可用於所有部分。有全局權限可用於管理鎖定功能的訪問。這些是高級編輯功能，應該非常負責任地添加和使用。鎖定一個部分或一個部分內的任何組件意味著該部分對可變性的訪問將非常有限。

快速回顧

佈局構建器樣式- 允許站點構建器從樣式列表中進行選擇以應用於佈局構建器塊和佈局構建器部分。
佈局生成器組件屬性- 允許編輯器向佈局生成器組件（塊）添加 HTML 屬性。
佈局生成器模式- 允許您在佈局生成器 UI 的模式中添加和配置現有塊。
佈局構建器庫- 提供一個佈局庫，允許內容編輯器從預定義佈局列表中進行選擇。
部分庫- 為單個或多個部分創建可重複使用的模板。
佈局生成器直接添加- 用列出自定義塊類型的下拉按鈕替換“添加塊”鏈接。
佈局生成器操作鏈接- 在 Drupal 管理頁面上向啟用佈局生成器的內容添加“佈局”操作鏈接。
佈局生成器限制- 設置哪些塊和哪些佈局應可用於在佈局生成器中放置。
佈局構建器高級權限- 允許通過提供更精細的權限集來詳細控制對佈局構建器頁面的訪問。
佈局生成器鎖定- 允許管理員鎖定默認佈局的部分，以便用戶在覆蓋單個實體的佈局時無法執行某些操作。