Linux中國

Drupal 中的 Gutenberg 編輯器入門

自 2017 年以來,WordPressGutenberg 插件中的所見即所得編輯器就真的很不錯。但是,Drupal 社區尚未就內容管理系統(CMS)編輯體驗的最佳方法達成共識。但在社區的大量努力下,出現了一個強有力的新選擇,將 Gutenberg 與 Drupal 集成在一起

以前,Drupal 8 中有兩種主要的內容創建方法:

  • 基於段落的方法中,內容是由稱為段落的實體組合而成。目前,大約有 100,000 個網站使用「段落」(Paragraphs)模塊(根據 Drupal 說法)。
  • Layout-Builder 方法使用 Drupal 8.5 附帶的編輯工具。它仍然在改進,但是它是下一個強有力的競爭者,因為它確實與 Drupal 內核很好地集成在一起。由於 Layout-Builder 是 Drupal 的一部分,因此無法獲得使用情況的統計信息。

在 2018 年底,由 Fronkom(一家專註於開源解決方案的挪威數字機構)領導的 Drupal 社區將 WordPress Gutenberg 項目作為貢獻模塊移植到了 Drupal 中。讓我們看一下 Gutenberg 在 Drupal 中的工作方式(包括一些很酷的 Drupal 特有的集成)。

安裝

安裝 Gutenberg 模塊與安裝任何 Drupal 模塊一樣簡單,並且有良好的安裝文檔

配置

Gutenberg 已集成到 Drupal 的默認內容實體創建工作流中。你可以將其用於你選擇的任何內容類型,前提是內容類型至少有一個文本區域欄位,它是 Gutenberg 編輯器輸出的位置。

要在 Drupal 中的內容類型啟用 Gutenberg 項目,你必須進入設置:「結構 -> 內容類型」,並且,從要你想使用 Gutenberg 的內容類型旁邊的下拉框中單擊「編輯」。

![Drupal settings](/data/attachment/album/202006/02/100555c3bzoy1orcsdclkc.png "Drupal settings")

在出現的窗口中,向下滾動並選擇左側的「Gutenberg 體驗」選項卡,你可以在其中找到下面描述的設置。選擇「啟用 Gutenberg 體驗」。

![Drupal Gutenberg settings](/data/attachment/album/202006/02/100557nvv9xwvksxmax92v.png "Drupal Gutenberg settings")

模板

這是 WordPress 開箱即用的很酷的功能之一。它能讓你用 JSON 結構定義新頁面模板。它將使用虛擬佔位符內容預填充所有新創建的文章,這將有助於編輯者正確地構造內容。在上面的截圖中,我添加了一個標題和一個段落。請注意,必須轉義任何雙引號。

模板鎖

此設置允許你定義是否允許用戶刪除佔位符內容,添加新塊或僅編輯現有的預填充內容。

允許的 Gutenberg 和 Drupal 塊

這是 Gutenberg Drupal 側的另一個超酷功能。Drupal 允許用戶創建各種類型的塊來設計頁面。例如,你可以創建一個塊,其中包含五個最新博客的列表、最新評論或用於收集用戶電子郵件的表單。

Gutenberg 與 Drupal 的深度集成允許用戶在編輯時選擇哪些 Drupal 塊可供用戶使用(例如,限制嵌入 YouTube),並將塊用作內聯內容。這是一個非常方便的功能,允許對用戶體驗進行精細控制。

在全新安裝的 Drupal 中,沒有太多的選擇,但站點通常有許多提供各種功能的塊。在下面的截圖中,選擇了「搜索表單」的 Drupal 塊。

![Drupal Gutenberg blocks](/data/attachment/album/202006/02/100600cd00sa1mer1simdi.png "Drupal Gutenberg blocks")

完成配置後,點擊「保存內容類型」。

使用 Drupal Gutenberg 發布內容

啟用 Gutenberg 內容類型後,它將接管大部分編輯體驗。

![Drupal Gutenberg content screen](/data/attachment/album/202006/02/100602mxi9iixtaaraxa4w.png "Drupal Gutenberg content screen")

在主窗口中,你可以看到我在上面的模板配置中添加的虛擬佔位符內容。

特定於 Drupal 的選項

在右側,Drupal 提供了一些欄位和設置。例如,「標題」 欄位是 Drupal 中所需的單獨欄位,因此它不在主頁面上。

在「標題」下面,根據在 Drupal 中安裝的模塊和設置的選項,其他設置可能有所不同。你可以看到「修訂日誌消息」、「菜單設置」、「評論設置」以及添加「URL 別名」。

通常,Drupal 內容類型由多個文本欄位組成,如標記、類別、複選框、圖像欄位等。當你啟用 Gutenberg 內容類型時,這些附加欄位可在「更多設置」選項卡中提供。

你現在可以添加內容 —— 它的工作方式與 WordPress Gutenberg 中的相同,並有額外的添加 Drupal 塊的選項。

在下面的截圖中,你可以看到當我添加一些文本替換佔位符文本、來自 Drupal 的搜索塊、標題、標記和自定義 URL 別名後發生的情況。

![Drupal Gutenberg entering text](/data/attachment/album/202006/02/100606laq91s983am1bt33.png "Drupal Gutenberg entering text")

點擊「保存」後,你的內容將發布。

![Drupal Gutenberg output](/data/attachment/album/202006/02/100609sa3mzdk6k3773z47.png "Drupal Gutenberg output")

就是這樣,它工作良好。

共同工作以獲得更好的軟體體驗

Drupal 中的 Gutenberg 工作良好。這是一個可供選擇的方式,允許編輯者控制網站的外觀,直至最細微的細節。它的採用率正在增長,截至本文撰寫時,已有 1,000 多個安裝,每月有 50 個新安裝。Drupal 集成添加了其他很酷的功能,如細粒度許可權、佔位符內容,以及內聯包含 Drupal 塊的功能,這些功能在 WordPress 插件中沒有。

很高興看到兩個獨立項目的社區共同努力實現為人們提供更好的軟體的共同目標。

via: https://opensource.com/article/20/3/gutenberg-editor-drupal

作者:MaciejLukianski 選題:lujun9972 譯者:geekpi 校對:wxy

本文由 LCTT 原創編譯,Linux中國 榮譽推出


本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive

對這篇文章感覺如何?

太棒了
0
不錯
0
愛死了
0
不太好
0
感覺很糟
0
雨落清風。心向陽

    You may also like

    Leave a reply

    您的電子郵箱地址不會被公開。 必填項已用 * 標註

    此站點使用Akismet來減少垃圾評論。了解我們如何處理您的評論數據

    More in:Linux中國