Drupal 段落模塊的終極教程

在過去的幾個月裡，我們與越來越多的 Drupal 8 站點合作。 這些項目都有一個共同點……他們使用 Drupal Paragraphs 模塊。

Paragraphs 是 Drupal 8 中一個非常流行的處理內容的模塊。

段落的工作方式與內容字段類似，但也為內容的設計、佈局和分組提供了廣泛的選項。

如果您想學習段落，這是終極指南！ 閱讀、觀看並遵循本教程的所有 10 個部分。 到最後，您也將在所有網站上使用 Paragraphs！

第1部分。 為什麼使用 Drupal 段落模塊？

段落類型可以是任何東西，從簡單的文本塊或圖像到復雜且可配置的幻燈片。

最終用戶可以在預定義的段落類型之間動態選擇，而不是將所有內容放在一個所見即所得的正文字段中。 您可以創建多個高級功能，最終用戶可以選擇他們想要使用的一項。

這使用戶更容易添加高級內容。 例如，用戶可能了解如何將拉引號添加到內容正文中，但它可能最終不會居中或格式正確。 他們可能還想做一些更複雜的事情，例如在文章中包含一個標註框，但不知道如何添加所需的樣式。

Drupal 段落模塊可以使非技術用戶更易於管理此類過程，同時還使開發人員能夠在主題級別控制此類特殊格式元素的格式和外觀。

在實踐中，段落允許我們像內容字段一樣插入元素，但不是在任何給定內容的主體周圍添加這些元素，而是將它們有效地插入到整個主體中。

對於本指南，我們假設我們正在創建一個名為“Life Advice for Free”的網站，該網站以文章的形式提供信息內容。 如果您願意，您可以在任何其他開發網站上跟進，並根據需要進行微調。

第2部分。 安裝 Drupal 段落模塊

我們建議對該項目使用空白的 Drupal 8 測試站點。

• 單擊此處下載段落模塊。
• 段落還需要實體參考修訂模塊。
• 下載這兩個模塊並將它們放在 /modules 目錄中後，為您的站點安裝它們。

第 3 部分。 創建你的第一個段落

Paragraphs 允許我們創建所謂的“Paragraphs 類型”，在我們的例子中，它將共同替換我們想要使用這些 Paragraphs 類型的任何給定內容類型的 Body 字段。

為了開始利用 Paragraphs，您必須首先創建至少一個 Paragraphs 類型，然後必須將該 Paragraphs 類型添加到內容類型。 這個過程一開始看起來很混亂，但是一旦你設置了一個或兩個段落類型就很容易熟悉了。

在我們的演示中，我們將用一些段落類型替換默認文章內容類型的正文字段。

重要提示：如果您在已經有文章類型內容的站點上進行測試，請不要刪除文章內容類型的正文字段，因為我們將在此演示中執行此操作。 如果這樣做，您將丟失網站上所有文章的正文。 如果您在已使用文章內容類型的站點上工作，您應該創建一個新的內容類型來測試段落模塊。

在我們的“免費生活建議”網站上，我們將通過編輯文章內容類型開始配置段落。

• 轉到結構 > 內容類型。
• 單擊文章行中的“管理字段”按鈕。
• 您現在將位於文章內容類型的“管理字段”頁面上。 在此頁面上，單擊正文行上“編輯”按鈕旁邊的下拉箭頭，然後單擊刪除。
• 在下一頁確認刪除。

現在我們將創建我們的第一個段落類型。

• 導航到結構 > 段落類型。
• 單擊“添加段落類型”。
• 在下一頁上，我們需要為此段落類型提供一個標籤。 對於我們的演示，我們將其稱為“正文文本”，因為我們將使用它作為我們內容的正文。
• 單擊“保存和管理字段”。
• 在此“管理字段”頁面上，單擊“添加字段”。
• 在下面的“添加新字段”下拉列表中，向下滾動，然後在“文本”下選擇“文本（格式化、長、帶摘要）”。 這類似於文章內容類型經常使用的默認正文字段——帶有所見即所得編輯器的長格式文本區域。
• 在下面的“添加字段”頁面上，我們也會將此特定字段標記為“正文”。
• 單擊“保存並繼續”。
• 接下來我們進入該字段的“字段設置”選項卡。 對於這些字段中的任何一個，我們可以指定允許的值數量。 對於某些字段允許超過 1 個值可能很有用——尤其是那些接受單獨的離散信息片段的字段，例如日期、圖像文件或用於名稱等信息的短格式文本字段——但對於長格式文本區域，通常不需要提供額外的值，因為段落可以簡單地一個接一個地放置在單個文本區域中。 在此示例中，讓我們將默認設置保留為“有限”和 1。
• 單擊“保存字段設置”。
• 在下面的“正文文本的正文設置”頁面上，我們可以保留所有默認值。 請注意，用戶仍然可以使用文本區域的 WYSIWYG 編輯器通常使用的所有格式選項。 我們不會從他們那裡拿走任何東西。 相反，我們要做的是為他們提供一種額外的改進方法，將某些類型的元素添加到他們的內容中。
• 點擊“保存設置”。
• 您現在將在新的段落類型中看到您的新字段：

• 在下一頁上，單擊“管理顯示”選項卡。
• 目前，此段落類型只有一個字段——正文文本字段。 我們不希望標籤與該字段中的文本一起出現，因此在該字段的標籤列下選擇“隱藏”。 格式應保持為默認值。
• 點擊“保存”。

現在我們需要將此段落類型添加到文章內容類型，以便該內容類型能夠使用它。 以下是我們的做法：

• 導航到結構 > 內容類型。
• 單擊文章內容類型的“管理字段”。
• 點擊“添加字段”。
• 要在此字段中使用我們的新段落類型，請打開“選擇字段類型”下拉列表並選擇“參考修訂”下的“段落”。
• 選擇“段落”後，提供標籤“正文”，因為這是我們用作內容正文的內容。
• 單擊“保存並繼續”。
• 在下一頁上，“要引用的項目類型”應設置為“段落”。
• “允許的值數應為“無限制”。 通過選擇“無限”，我們可以根據需要多次插入我們配置的段落類型提供的這個特殊字段。 當我們開始在內容正文中插入文本以外的其他內容時，這將變得很有幫助。
• 單擊“保存字段設置”。
• 在下面的“文章正文設置”頁面上，我們需要使我們之前創建的段落類型可用於該字段。 為此，請選中頁面底部附近“類型”下“正文”旁邊的框。 這就是我們如何使特定段落類型在此字段中可用。 當我們向我們的網站添加更多段落類型時，我們可以返回並將這些類型也提供給該字段。

• 單擊“保存設置”，該站點應將您帶回內容類型的“管理字段”頁面。

現在我們已經用我們的新 Body 字段替換了以前的（默認）Body 字段，它利用了段落，特別是我們創建的“正文文本”段落類型。 現在我們將配置更多設置，使其以我們想要的方式顯示。

• 首先，我們將單擊“管理表單顯示”選項卡，以便我們可以將新的正文字段放在文章內容創建頁面上的顯眼位置。
• 在此頁面上，向下滾動以找到我們的新 Body 字段，並將其拖到列表頂部附近，就在 Title 下方。
• 點擊“保存”。

現在我們需要確保新的段落類型在站點訪問者的適當位置可用。

• 單擊“管理顯示”。
• 同樣，您會在底部找到 Body。 將其拖動到頂部附近，就在圖像下方。 我們將該圖像字段視為我們文章的大型介紹性或引導性圖像，而不是內容本身的一部分。
• 點擊“保存”。

至此，我們已經使用這個新的段落字段完成了文章內容類型的設置。 現在是時候創建一些內容來測試它了。

• 轉到您網站的內容頁面，然後單擊“添加內容”。
• 點擊“文章”。
• 您可以為文章輸入任何標題。 對於這個例子，讓我們稱我們的文章為“如何結交 100 個朋友”。
• 現在，到 Body 字段，您可能已經註意到它看起來略有不同，儘管它仍然使用與以前一樣的 WYSIWYG 編輯器相同的長格式字段。 現在的不同之處在於我們有一個包含 Body 字段，該字段當前包含一個 Body 文本字段。 在正文文本字段下方，您應該會看到一個“添加正文文本”按鈕，它允許我們添加多個字段。 在這一點上，這將是不必要的，因為當前使用的長文本字段非常適合輸入長、多段文本，所以當我們可以在同一字段中添加更多文本時，我們不需要添加額外的字段. 不過，稍後我們會看到，當您在站點上實現了多個段落類型時，能夠添加額外的段落字段變得非常有用。 現在，只需在正文文本字段中輸入一兩段文本即可。

保存您的文章並以任何訪問者看到的方式查看頁面。

此時，使用段落的新正文看起來與使用默認正文字段的文章沒有什麼不同。 不過，有了 Paragraphs，我們很快就可以讓我們的內容創建者在內容中添加其他元素，而無需知道如何正確設置樣式。

第 4 部分。 將您的 CSS 添加到段落中

使段落如此有用的很大一部分原因是我們可以為特定的內容內元素編寫 CSS，這樣內容創建者就不必嘗試使用 WYSIWYG 編輯器或內聯 CSS 自己手動設置這些元素的樣式。 這意味著我們將定制我們網站的主題，以使這些元素完全按照我們想要的方式顯示。

在許多實際情況下，您可能會使用自己的自定義主題或子主題，在這種情況下，您可以自由編輯它。 在本教程中，我們將為默認的 Bartik 主題創建一個快速簡單的子主題，這樣我們就可以遵循最佳實踐並添加自己的 CSS，而無需自己編輯 Bartik。 （我們避免直接編輯 Bartik 或任何其他核心或貢獻主題，因為如果我們這樣做，然後稍後將發布的更新應用到該主題，我們自己的修改將丟失。）如果您不熟悉創建子主題，那沒關係。 我們並沒有深入研究這個過程，而是創建了主題的直接副本，然後我們將對其進行一些細微的改動。 這是一個簡單的過程。

• 要創建子主題，您首先需要訪問託管站點的服務器，然後導航到站點的根目錄。
• 在那裡，打開“主題”目錄。 這是放置所有自定義和貢獻的主題和子主題的地方。 在這個“主題”目錄中，創建一個名為“custombartik”的新文件夾，然後導航到這個新目錄。

現在我們需要在這個新目錄中添加幾個文件。 第一個是主題的信息文件。 打開您用於 Web 開發的任何代碼編輯軟件。 這些信息文件需要幾條信息：項目名稱（我們的主題名稱）、項目類型（在本例中為“主題”）、基本主題的機器名稱（如果這是子主題）（如我們的主題） is)、簡短描述和構建主題的 Drupal 的主要版本（7.x、8.x 等）。 我們將以以下形式輸入此信息（輸入您所看到的所有內容）：

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme core: 8.x

確保基本主題名稱“bartik”保持大寫——它是我們需要的區分大小寫的機器可讀名稱。 輸入此信息後，將文件另存為“custombartik.info.yml”。 請務必將其保存為與您創建的文件夾完全相同的名稱，後跟“.info.yml”。

現在我們需要創建主題的庫文件，我們將告訴 Drupal 在哪裡可以找到主題的 CSS 以及這是什麼版本的主題。 可以提供更多信息，但這就是我們所需要的。

• 打開一個新文件。 在此文件中，請密切注意此處的縮進。 每個縮進應該是兩個空格的製表符。
• 準確輸入以下信息：

 global-css:  version: 0.1  css:    theme:      css/style.css: {}

• 將此文件另存為“custombartik.libraries.yml”。 這個文件本質上告訴網站這是主題的 0.1 版本（我們可以給它任何版本號），並且在我們的主題目錄（“custombartik”）中的 css/style.css 中會有一個樣式表。

現在我們需要回到我們的信息文件，告訴 Drupal 使用“global-css”容器下的信息來找到我們的樣式表。

• 打開您的 custombartik.info.yml 文件，在“core: 8.x”行下添加一個空白行，然後添加以下信息行，再次保持縮進與下面顯示的完全相同：

 libraries:  - custombartik/global-css

整個文件現在應該如下所示：

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme. core: 8.x libraries:  - custombartik/global-css

此時，我們準備將這兩個文件添加到我們的主題中。

• 將您的 custombartik.info.yml 和 custombartik.libraries.yml 文件上傳或複製到您的 custombartik 文件夾中。
• 現在在您的 custombartik 文件夾中添加一個名為“css”的文件夾。
• 繼續創建一個名為“style.css”的空白文件並將其上傳到此目錄。 這將是我們的樣式表。
• 但是，在我們創建樣式表之前，請導航到您網站的“外觀”頁面。
• 滾動到頁面底部，在“未安裝的主題”部分下，您應該會看到您的自定義 Bartik 主題。 如果您沒有看到它，請確保您的 custombartik 文件夾及其所有文件都存在於您站點文件系統的主題文件夾中。
• 單擊自定義主題下的“安裝並設置為默認值”，以便您的網站開始使用您的主題。
• 完成後，導航到您的主頁，它應該看起來幾乎與 Drupal 的默認 Bartik 主題完全一樣，除了您可能會看到一個損壞的圖像圖標代替 Drupal 徽標。 主題看起來就像 Bartik，因為我們創建的是 Bartik 的子主題，尚未進行自定義。 如果您的網站看起來不像 Bartik，尤其是如果它看起來像沒有 CSS 樣式的純 HTML，請返回您的兩個 .yml 文件並確保它們看起來與上面打印的完全一樣。

最後，為了修復損壞的徽標圖像，我們將直接從 Bartik 複製徽標到我們的子主題中。 這沒關係，因為我們實際上並沒有改變 Bartik 中的任何內容。

• 導航到您網站的根目錄，然後轉到 core/themes/bartik。 在這裡，您會看到一個名為“logo.svg”的文件。
• 將此文件複製到您的子主題（“custombartik”目錄）中。
• 在您的網站上，導航到配置 > 性能，然後單擊“清除所有緩存”。 現在徽標應該出現在您的網站上。

第 5 部分。 樣式化你的段落字段

現在我們有了一個可以安全編輯的子主題，我們可以開始為段落控制的內容元素設置樣式規則。 在我們這樣做之前，我們應該創建一個需要特殊樣式規則的新 Paragraphs 類型。 我們將按照我們在文章中間插入居中圖像的字段的示例。

• 導航到結構 > 段落類型。
• 單擊“添加段落類型”。
• 我們將此標籤設置為“居中圖像”。
• 單擊“保存和管理字段”。
• 在下一頁上，單擊“添加字段”，然後在“添加新字段”下選擇“圖像”。
• 我們也會將此字段標記為“居中圖像”。
• 單擊“保存並繼續”。
• 在下一頁，我們可以保留所有默認值，因此單擊“保存字段設置”。
• 然後，在“居中圖像的居中圖像設置”頁面上，我們將添加一些簡單的限制。 將最大圖像分辨率設置為 650x450，將最小分辨率設置為 50x50。 將最大上傳大小設置為 1 MB，然後單擊“保存設置”。 這些特定設置不是段落類型正常工作所必需的； 我們將它們包括在內只是為了模仿現實世界的場景。

• 現在單擊“管理顯示”選項卡，將居中圖像標籤設置為“隱藏”，然後單擊“保存”。

此時，我們需要將此段落類型添加到我們在文章內容類型中的段落字段中。

• 轉到結構 > 內容類型。
• 點擊“文章”旁邊的“管理字段”。

您可能會想在這里為我們新的“居中圖像”段落類型單擊“添加字段”，但請記住，這將與我們的自定義正文字段混合。 因此，相反，我們將在我們創建的 Body 字段中添加 Centered image。

• 單擊“正文”旁邊的“編輯”，然後滾動到頁面底部。
• 在這裡，您將在我們的“正文”段落類型下方看到“居中圖像”。
• 選中“居中圖像”旁邊的框以使其可用於該字段，然後保存您的設置。

現在我們將使用該字段添加圖像。

• 導航到您的內容頁面，然後編輯您的“如何結交 100 個朋友”文章。
• 假設我們想在文章中間的某個地方添加一個居中的圖像。 在正文文本字段下方，您將再次看到“添加正文文本”按鈕，用於在此正文字段中添加另一個正文文本字段。 但是，如果您單擊此按鈕旁邊的下拉箭頭，您會看到“居中圖像”現在也可用。 單擊此按鈕，並在此處選擇要上傳的圖像文件。 然後提供一些替代文本，因為這是必需的。

現在我們已將圖像添加到我們的內容中，但目前它位於所有文本下方。 這是我們將使用額外的正文文本字段的地方。

• 點擊“添加正文”。 現在我們有一個從上到下的正文文本字段、一個居中的圖像和另一個正文文本字段。 請注意，儘管此時您不需要這樣做，但您可以通過各個段落字段左上角的拖放箭頭自由移動它們。 要使居中的圖像夾在文章文本之間，只需轉到第一個正文文本字段，選擇您希望出現在圖像之後的任何文本，然後從字段中剪切該文本。 然後向下滾動並將剪切的文本粘貼到第二個正文文本字段（在您的圖像之後）。
• 點擊“保存”。

當您現在查看您的文章時，它看起來仍然不太正確。 由於我們還沒有向我們的主題添加任何樣式規則，因此圖像可能會向左浮動（默認情況下），而不是居中。 但是，它應該出現在第一個正文文本字段的文本之後和第二個正文文本字段的文本之前。 現在我們有一篇文章可以測試一些自定義樣式規則。

第 6 部分。 使用 CSS 控制段落

我們現在將轉到我們的自定義子主題，開始為我們創建的 Paragraphs 字段的輸出設置樣式。 現在，我們將專門針對“居中圖像”字段，而不是內容類型中包含的段落字段。 我們這樣做是因為我們希望這個字段在任何時候都居中，無論它在哪裡。 因此，通過直接為“居中圖像”設置規則，我們避免為多個上下文設置不必要的多個規則。

但是，我們確實需要以“node”類為目標，因為默認情況下，該字段將在“node”類下設置一些樣式。 因此，我們必須覆蓋這些規則。

• 在 custombartik/css/style.css 打開你的“custombartik”子主題的樣式表。
• 該文件應該仍然是空的，但現在我們將開始向它添加規則。 我們暫時保持簡單。 將以下代碼行添加到您的樣式表中：

 .node .field--name-field-centered-image {  float: none;  text-align: center; } .node .field--name-field-centered-image img {  max-width: 100%;  max-height: 450px; }

使用第一組規則，我們只是在其字段類中將圖像水平居中並確保沒有文本或其他任何東西漂浮在它旁邊。 第二組規則不是絕對必要的，但它是一些通用代碼，以確保圖像最終不會比它們與內容區域相關的更大。

• 一旦你把它添加到你的 style.css 文件中，保存你的更改（從這裡開始，如果你沒有直接在服務器上編輯，任何在子主題中保存更改的引用也假設上傳或以其他方式複製文件到你的服務器上您的測試站點所在的位置）。
• 然後在您的站點上，導航到配置 > 性能，然後單擊“清除所有緩存”以在您的站點上加載主題更改。
• 導航回您在其中添加要居中的圖像的文章（如果您已經打開頁面，則刷新頁面）。

通過“居中圖像”段落類型放置的圖像現在應該居中，沒有任何文本浮動到它的任何一側。 我們可能還想添加更多樣式，但出於本教程的目的，我們已經完成了我們此時想要做的事情——確保該字段的輸出由 CSS 嚴格控制，以便用戶添加內容不必使用所見即所得編輯器或其他內聯樣式方法自行設置任何樣式。

第 7 部分。 具有多個字段的段落

我們還可以創建本身由多個字段組成的段落類型。

例如，我們可以創建一個“帶標題的居中圖像”類型，而不是“居中圖像”類型，該類型由圖像上傳字段和該類型的任何單個元素的隨附文本字段組成。 這也有助於我們減輕那些向網站添加內容的佈局負擔，以便我們可以在主題級別控制內容顯示。

讓我們創建這個“帶有標題的居中圖像”類型來練習創建多字段段落類型的過程。 如您所料，此過程將類似於創建單字段類型。

• 導航到結構 > 段落類型，然後單擊“添加段落類型”。
• 將此類型標記為“帶標題的居中圖像”，然後單擊“保存和管理字段”。
• 點擊“添加字段”。

由於我們之前創建的“居中圖像”字段正是我們想要的新段落類型的圖像部分的內容，因此我們可以重用前一個字段，而不是創建新字段。 因此，不要在“添加字段”頁面的“添加新字段”下選擇任何內容。

• 在“重新使用現有字段”下，選擇“圖像：field_centered_image”。
• 保留“居中圖像”標籤，然後單擊“保存並繼續”。
• 我們確實需要在下一頁上為圖像的大小範圍配置設置。 讓我們再次輸入 650x450 像素的最大圖像分辨率和 50x50 像素的最小值。 將最大上傳大小設置為 1 MB。
• 點擊“保存設置”。

現在我們將添加另一個字段。 請記住，我們仍在新段落類型的設置中，所以一旦我們添加了第二個字段，“帶標題的居中圖像”將是一種具有兩個字段的類型。

• 單擊“添加字段”，然後添加“文本（純文本）”類型的新字段。
• 將此字段標記為“標題”。
• 單擊“保存並繼續”。
• 一些較長的字幕可能需要超過默認的 255 個字符限制，因此將此字段的最大長度更改為 500。將允許的值數量保持在“有限”和 1，並保存設置。
• 以下字幕設置默認值都很好，因此也請保存該頁面上的設置。

現在我們的新 Paragraphs 類型擁有它需要的所有字段，所以讓我們控制顯示。

• 單擊“管理顯示”選項卡，以便我們可以刪除在這種情況下不需要的字段標籤。
• 在兩個字段的“標籤”列下選擇“隱藏”，然後單擊“保存”。
• 如果這兩個字段亂序，我們將重新排列它們，使標題字段位於圖像字段之後，但由於我們最後添加了標題字段，它應該已經位於圖像字段之後，就像我們希望的那樣.

現在我們將新類型添加到我們的文章內容類型。

• 導航到結構 > 內容類型，然後單擊文章的“管理字段”。 就像我們將第一個“居中圖像”段落類型添加到內容類型時一樣，我們將在自定義正文字段中添加這個新的段落類型，而不是完全添加一個新字段。
• 在文章的“管理字段”頁面上，單擊正文的“編輯”。
• 滾動到頁面底部，然後選中“帶標題的居中圖像”旁邊的框，以使該類型在此正文字段中可用。
• 點擊“保存設置”。
• 現在，向網站添加文章的人可以使用這種新的段落類型。

讓我們繼續使用這個字段創建一篇新文章，然後我們將添加我們的樣式來控制它的顯示。

• 導航到內容頁面，單擊“添加內容”，然後單擊“文章”。
• 讓我們把這篇文章稱為“學習演奏樂器可以改善你的生活”。
• 單擊“添加正文”開始在文章中添加一些文本。 在此字段中輸入一兩段文字。
• 然後，在正文文本字段下方，單擊“添加正文文本”旁邊的下拉箭頭，然後選擇新可用的“添加帶標題的居中圖像”選項。 請注意，我們現在看到了兩個用於數據輸入的字段，正如我們所期望的那樣——屬於此段落類型的“居中圖像”和“標題”字段。
• 將任何圖像上傳到圖像字段並提供一些替代文本。
• 然後輸入，“Les Paul 是搖滾樂中最具傳奇色彩的吉他之一。”

現在我們將在圖片和標題之後添加文章的其餘部分文本。

• 在圖像和標題段落類型下，再次單擊“添加正文”。
• 添加另一段或兩段文本。
• 最後，單擊“保存並發布”。

目前，我們的“居中圖像和標題”的顯示應該是正確的一半。 由於我們重用了之前的“居中圖像”字段，因此圖像本身應該已經居中，就像之前僅包含圖像的字段一樣居中。 當然，標題文本還沒有任何 CSS 規則，因此它會顯示為左對齊，並且看起來就像文章其餘部分的文本一樣。 因此，我們需要在主題中添加一些規則來設置標題文本的樣式。

這一次，在編寫我們的 CSS 時，我們將定位整個“帶標題的居中圖像”段落類型，然後深入到該類中的標題字段，而不是像我們之前使用的那樣定位獨立於其容器的標題文本居中的圖像。 我們將採用這種方法，因為我們可能希望在其他地方重用此標題文本字段，並且在某些情況下，我們可能希望它的樣式與它在此中的方式不同（例如左對齊或右對齊而不是居中對齊）特定的段落類型。

我們將我們的標題文本居中，因為它的相應圖像居中，並且為了提供此文本和文章文本之間的視覺區別，我們將使其變為粗體（斜體也可以提供這種效果）。

• 將以下代碼行添加到您的樣式表中，並保存您的更改：

{codecitation}.paragraph--type--centered-image-with-caption .field--name-field-caption { font-weight: bold; 文本對齊：居中； {代碼引用}

• 然後，要查看我們在站點上的更改，請導航到配置 > 性能，並清除所有緩存。
• 返回並刷新最近創建的文章，您應該會看到新的樣式規則生效。 標題文本現在應該是粗體並在圖像下方居中。

我們當然可以對這個 Paragraphs 類型整體應用一些樣式。 這樣做的一個原因是將圖像/標題元素與周圍的文本分開，並在視覺上清楚地表明它應該被視為一個單一的單元。

• 將以下代碼添加到您的樣式表中，並保存您的更改：

{codecitation}.paragraph--type--centered-image-with-caption {border: 2px gray solid; 邊距：4px 0； 填充：4px； }

現在再次清除您網站的緩存，並刷新文章頁面。 圖片和標題應該看起來大致相同； 但是，現在整個圖像/字幕單元被灰色邊框包圍，並且頂部和底部的邊距很小。 我們可以做更多的事情來改善這裡的美感（並且邊框可能不是必需的），但這證明了我們為段落類型的單個組件以及整個段落類型提供樣式的能力。

現在，如果非技術用戶正在向站點添加內容並想要包含帶有標題的大而居中的圖像，他們所要做的就是在編輯文章時選擇此段落字段，上傳圖像，然後將文本輸入標題字段。 格式將被自動應用。

第 8 部分。 在段落中使用整個節點

至此，我們已經看到了 Paragraphs 基本用法的一些示例。 現在我們將處理一個更高級的示例：使用段落將整個節點放置在一段內容的主體內。 一個用例是將相關但獨立的補充信息放在您的一篇文章中（類似於您可能會在雜誌文章中看到的“您知道嗎？”部分）。

對於我們的示例，我們假設我們希望可以選擇將我們稱之為“信息框”的內容添加到我們的文章中，我們將通過放置一個標題為“豎琴簡史”的簡短內容來做到這一點”在我們之前創建的關於學習演奏樂器的文章中。

首先，我們需要為這些“信息框”創建一個內容類型。

• 導航到結構 > 內容類型，然後單擊“添加內容類型”。
• 我們將給這個內容類型命名為“信息框”。
• 對於描述，請寫“用於補充文章的簡短信息”。
• Click the “Display settings” tab, and uncheck “Display author and date information” because we don't want author and date information showing up within our Info box content.
• All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”
• On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

• Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
• Give this type the label “Info box.”
• On the “Manage fields” page, click “Add field".
• Beneath “Add a new field,” select “Content,” found under the “Reference” header.
• For the label, write “Info box,” and save.
• All defaults are fine on the next page, so click “Save field settings” there.
• On the next settings page, scroll down until you see the “Reference type” settings.
• Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
• Back on the “Manage fields” page, click the “Manage display” tab.
• As we've been doing so far, we'll remove the label, so select “Hidden” under the label column for the Info box field.
• Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
• Click “Save.”

It's time to make this Paragraphs type available to our Article content type.

• Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
• As we've been doing, click “Edit” for the Body field.
• Scroll down and check the box next to “Info box” under the “Paragraph types” header.
• 保存您的設置。

With the structure side of this implementation complete, we'll now create some content to test it out. We'll start by adding our site's first “Info box.”

• Navigate to the “Content” page, and click “Add content.”
• Choose Info box.
• For the title, enter “A Short History of the Harp.”
• Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don't want the latter to appear on the homepage; we want them only placed within other articles. So, let's quickly edit the view for our homepage to exclude these pieces of content.

• You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
• Navigate to Structure > Views, and edit the “Frontpage” view.
• On the view's settings page, next to the “Filter criteria” header, click “Add.”
• Select “Content type,” and then click “Apply (all displays).”
• For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
• Back at the view's settings page, click “Save.”
• Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we'll add our Info box to the “Learning to Play an Instrument” article.

• Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
• Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
• Select it to include that Info box in the body of this article.

With the Info box now included in our Body, we need to place it where we want it.

• Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we'll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

• So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
• Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
• Paste the cut text into the newly created (currently empty) Body text field.
• Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
• Click “Save and keep published”.

Upon viewing the article, you'll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type's “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won't go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer's (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

• Begin by navigating to your site's Extend page.
• Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
• Then, if prompted, click “Continue.”

Let's use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

• Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
• Give it the label “Pros and cons,” and add a field.
• For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
• Save and continue, and keep all of the default settings through the next two pages.
• You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
• Save, and continue through the subsequent settings pages, once again keeping all default settings.
• Once you're back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

• We have a handful of options here, and for our Pros and cons lists, we'll select “Two column.”
• Then click “Save,” and you'll be taken back to the “Manage display” page.
• Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
• Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

• Navigate to Structure > Content types, and click “Manage fields” for Article.
• Edit the Body field, scroll to the bottom of that field's settings.
• Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. 然後保存。

Now we're ready to begin using this “Pros and cons” Paragraphs type. Let's use it in a new article.

• Create a new article called “Swimming Is a Great Way to Stay in Shape.”
• Add two or so paragraphs of Body text to this article.
• Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
• Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you'd like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
• If you'd like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
• Click “Save and publish.”

Viewing the article, you'll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won't take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Part #10. Permissions for the Paragraphs Module

At this point, we've set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. 這是重要的一步。 Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We'll start by giving everyone permission to view Paragraphs content.

• 導航到您網站的人員頁面，然後單擊“權限”選項卡。
• 向下滾動，直到看到“段落類型權限”部分。 在此標題下，找到“正文文本：查看內容”，然後選中匿名用戶和經過身份驗證的用戶的複選框。
• 對我們創建的所有其他段落類型的“查看內容”權限執行相同操作：居中圖像、帶標題的居中圖像、信息框以及優缺點。
• 點擊“保存權限”。

此時，所有用戶都可以查看所有 Paragraphs 內容。 隨時註銷並以匿名訪問者身份查看該網站以進行確認。

現在為那些將在我們網站上添加和編輯內容的人創建一個新角色。

• 導航到人員，單擊“角色”選項卡，然後單擊“添加角色”。
• 將此角色稱為“內容創建者”。
• 返回角色頁面，單擊內容創建者角色旁邊的下拉箭頭，然後選擇“編輯權限”。
• 我們需要為該角色的用戶授予相當多的權限。 其中一些與段落無關，但無論如何我們都將它們包括在內以模仿真實世界的場景。 此外，如果新角色沒有在實踐中擁有的所有權限，則很難可靠地測試新角色。 另請注意，我們授予這些權限的前提是我們的內容創建者都在內部工作。 也就是說，我們沒有大量經過技術驗證但仍然是偽匿名用戶在我們的網站上創建內容，因此我們確實認為我們可以安全地授予這些用戶執行諸如使用完整 HTML 文本格式之類的操作的權限，這在其他案件會引起一些安全問題。

以下是內容創建者角色應授予的權限列表：

評論

• 編輯自己的評論
• 發表評論
• 跳過評論批准
• 查看評論

接觸

• 查看網站範圍的聯繫表
• 使用用戶的個人聯繫表格

篩選

• 使用基本 HTML 文本格式
• 使用完整的 HTML 文本格式
• 使用受限 HTML 文本格式

節點

• 訪問內容概覽頁面
• 管理內容
• 查看自己未發布的內容
• 還原所有修訂
• 查看所有修訂
• 查看自己未發布的內容
• 文章：編輯任何內容
• 文章：編輯自己的內容
• 文章：還原修訂
• 文章：查看修訂
• 信息框：創建新內容
• 信息框：編輯任何內容
• 信息框：編輯自己的內容
• 信息框：還原修訂
• 信息框：查看修訂

段落類型權限

授予此部分中的所有權限，“繞過段落類型內容訪問控制”除外。

搜索

• 使用高級搜索
• 使用搜索

系統

• 使用管理頁面和幫助
• 在維護模式下使用站點
• 查看管理主題

分類

• 編輯標籤中的術語

工具欄

• 使用管理工具欄

用戶

• 查看用戶信息

完成後請確保單擊“保存權限”。

關於我們在此處授予和未授予的一些權限的幾點說明：我們未授予管理 Paragraphs 類型的權限，因為我們不希望他們創建新的 Paragraphs 類型或更改現有 Paragraphs 類型的工作方式。 他們將簡單地使用我們作為開發人員為他們創建的段落類型輸入信息。 此外，雖然在某些情況下避免授予非管理角色刪除內容的能力是明智的（在大多數情況下，他們可以取消發佈內容就足夠了，刪除內容使其不可恢復），我們確實需要授予他們權限刪除“段落類型權限”下的段落類型內容。 這是必要的，因為如果他們無法刪除此類內容，並且如果他們不小心單擊通過段落類型添加了他們在給定文章中實際上不需要的任何內容，他們將無法刪除該單元文章內容。 這類似於禁止使用 Backspace 鍵。

為了測試我們的新權限，我們將創建一個內容創建者角色的新用戶，並以該用戶身份完成添加新文章的過程。

• 導航到人員，然後單擊“添加用戶”。
• 創建一個名為 Mary 的用戶（您可以跳過電子郵件地址），並使用您可以輕鬆記住的密碼。
• 確保用戶的狀態被標記為“活動”，最重要的是，確保您檢查了該用戶的“內容創建者”角色。
• 然後點擊“創建新帳戶”。
• 註銷，然後以 Mary 身份重新登錄。 如果權限分配正確，您應該可以訪問管理工具欄。
• 如果您沒有看到管理鏈接（“內容”、“結構”等），請單擊工具欄中的“管理”。
• 然後導航到內容，並添加一條類型為文章的新內容。 是
• 你可以把這篇文章命名為“西蘭花對你很好”。
• 添加一個正文文本字段，然後輸入一些文本。
• 然後，您應該檢查並嘗試添加我們創建的每種段落類型的內容：居中圖像、帶標題的居中圖像、信息框以及優缺點。
• 完成此操作後，保存文章並查看它。 這個完整的過程應該與我們作為站點管理員時所做的相同，然後您應該能夠毫無問題地查看所有內容。

如果您沒有添加其中一項或多項的選項，或者您在嘗試添加時遇到其他問題，則在將一項或多項必要權限授予內容創建者角色時，您可能錯過了一項或多項必要權限。 返回內容創建者的權限，並確保您授予他們上面列出的所有權限，尤其是“段落類型權限”標題下的權限。

結束段落教程

一旦您確認可以使用段落內容作為內容創建者來創建和查看內容，您就完成了本教程。 此時，您應該了解為什麼以及如何使用“段落”模塊。

回顧一下，這個模塊的用處在於它能夠讓我們定義特殊的文章內容組件，例如補充信息框和帶有標題的居中圖像，而不會強迫內容創建者嘗試自己設置樣式。

使用段落，他們只是被要求為我們文章的這些部分提供內容，作為開發人員，我們可以編寫站點範圍的規則（使用 CSS）來說明內容的顯示方式。 這使得非技術用戶的內容創建過程更容易，並且使此類內容的外觀對於技術用戶和非技術用戶來說更加一致。