關於 Drupal 9 ColorBox 模塊的綜合教程（以及如何擴展它）

圖像在改善網站的用戶體驗方面發揮著重要作用。 一項研究表明，我們傳遞給大腦的信息中有 90% 是視覺信息。 許多網站單獨圍繞這一理論工作，並用大量富媒體（如圖像和視頻文件）轟炸用戶。 他們中的大多數人都忽略了這些媒體文件的呈現方面，最終導致用戶體驗令人失望。 他們需要的是像 ColorBox 這樣的工具，它是一個非常輕量級的 jQuery 插件，可以讓您優雅直觀地顯示圖像。 樣式和功能可通過 CSS 和 Javascript 進行高度定制。 Drupal ColorBox 模塊兼容 Drupal 6、7、8，現在也兼容 Drupal 9！ 在本文中，您將學習如何為 Drupal 9 配置、實現和進一步擴展 ColorBox 模塊。

Drupal 的 ColorBox

ColorBox 模塊與 ColorBox jQuery 插件集成到 Drupal 中。 該插件是用於 jQuery 的輕量級可定制燈箱。 在用於類似目的的其他競爭對手“盒子”模塊（Thickbox、Lightbox2、Shadowbox、Greybox 等）中，ColorBox 模塊最受歡迎且安裝量最高。 Drupal ColorBox 的使用不僅限於精美地顯示上傳的圖像。 它還支持視頻、pdf、節點、分類、網絡表單、iframe 內容等的樣式。 樣式可以通過 CSS 控制，因此外觀是高度可定制的。 功能也可以通過 JS 文件輕鬆定制，無需接觸 HTML。 它也支持照片分組並預加載即將到來的圖像

安裝 ColorBox 模塊的步驟

1.使用composer安裝ColorBox模塊。

 composer require 'drupal/colorbox:^1.6'
composer require 'drupal/colorbox:^1.6'

2. 下載 ColorBox 插件 1.x。
1.使用Drush命令
（注意：如果您使用 drush 命令安裝 ColorBox 插件，則必須啟用該模塊，然後運行以下命令）

 drush colorbox-plugin
drush colorbox-plugin

2.手動下載ColorBox插件
下載 Colorbox 插件並解壓到 /libraries 中。 確保插件文件的路徑如下所示：

 “/libraries/colorbox/jquery.colorbox-min.js”
“/libraries/colorbox/jquery.colorbox-min.js”

3. 啟用 Drupal ColorBox 模塊。

 drush en -y colorbox
drush en -y colorbox

恭喜！ 您現在可以使用 ColorBox 模塊的功能了。

配置 ColorBox 模塊

通過導航到Configuration -> Media -> Colorbox settings來配置Drupal ColorBox 模塊。

如何使用 ColorBox 創建圖片庫

1. 要製作圖庫，我們首先需要為其中一種內容類型添加一個圖像字段。 選擇標籤名稱，然後單擊保存並繼續按鈕。

2. 下一步是配置字段設置。 我們可以在沒有上傳圖片時添加默認圖片。 用於可訪問性目的的替代文本和標題。 允許的值設置數表示字段的最大上傳限制。 選擇所需的選項，然後單擊保存字段設置按鈕。

3. 然後我們將為此圖像字段設置其他配置，如允許的文件擴展名、文件目錄、最大和最小圖像分辨率、最大上傳大小、圖像的 alt 和標題，然後單擊保存設置。

4. 現在，我們完成了圖像字段的配置。 讓我們為為 ColorBox 創建的圖像字段設置格式選項。 導航到內容類型的管理顯示，然後從下拉列表中將格式選項設置為 ColorBox。 單擊格式選項旁邊的齒輪允許我們自定義顯示的圖像。 更新所有選項後，單擊更新按鈕，然後單擊保存選項。

5. 現在讓我們通過單擊添加內容將一些內容添加到我們的 ColorBox 圖像庫中。 我們可以根據圖像權重更改上傳圖像的順序。 然後點擊保存按鈕。 內容的顯示如下。

6. 最後，單擊任何圖像會在 ColorBox 模式中顯示圖像，如下所示。

您也可以對視頻嵌入字段執行相同操作。

如何與 ColorBox Inline 模塊集成

Colorbox Inline 模塊允許用戶在 ColorBox 中打開頁面上已有的內容。

1.安裝colorbox內聯模塊

composer require 'drupal/colorbox_inline:^1.2'
composer require 'drupal/colorbox_inline:^1.2'

2.使用drush命令啟用模塊/通過drupal UI手動啟用

drush en -y colorbox_inline
drush en -y colorbox_inline

3.使用鏈接在頁面上的ColorBox模式中打開圖像

4. 導航以添加內容 -> 任何具有正文字段的內容類型

將文本格式化程序從基本 html 更改為完整 html

6. 然後點擊保存按鈕。

在上面的例子中，錨標籤的 data-colorbox-inline 屬性也可以包含類名而不是 id。 查看圖像是一個鏈接，用於打開頁面中已經存在的圖像（根據您的項目要求修改更改）。 我們可以使用此模塊以類似的方式呈現任何內容 - 視頻、網絡表單等。

在查看此頁面時，您可以看到帶有圖像的鏈接。 單擊查看圖像鏈接後，將出現一個 ColorBox 彈出窗口，如下圖所示。

如何將 ColorBox 與 ColorBox 加載模塊集成

ColorBox Load 模塊允許用戶使用 Ajax 將內容加載到 ColorBox。 使用此模塊，用戶可以指定一系列路徑，渲染時將打開帶有內容的 ColorBox。 它取決於路徑管理界面的 NG Lightbox 模塊。 此方法可用於渲染節點、頁面、Web 表單等。
安裝 colorbox 加載模塊

composer require 'drupal/colorbox_load:^1.2'
composer require 'drupal/colorbox_load:^1.2'

使用 drush 命令啟用模塊/通過 drupal UI 手動啟用

drush en -y colorbox_load
drush en -y colorbox_load

使用 ColorBox Load 模塊實現登錄彈出窗口。

1. 通過導航到Configuration -> Ng Lightbox (Under Media) 來配置ColorBox 加載模塊。 我們可以配置要為其提供 ColorBox 模式顯示的路徑、ColorBox 模式的寬度、燈箱模式的類和渲染器選項。 （根據需要選擇您的選項）。

2. 現在我們可以通過點擊主頁上的登錄按鈕看到為登錄頁面實現的 Drupal ColorBox 模式。

如何將 ColorBox 與 Drupal 視圖集成

對於某些網站，我們可能需要一個功能來顯示圖像列表的 ColorBox 模式。 這可以在視圖模塊的幫助下完成。
1. 轉到結構 -> 視圖 -> 添加視圖。
2.添加圖像字段查看並相應地配置格式器到ColorBox和其他設置，然後保存視圖。

3. 現在看一下您剛剛創建的視圖（在我的例子中，我創建了一個作為頁面的視圖）。 您可以看到一個圖像列表，當您單擊其中一個圖像時，單個圖像將顯示在 ColorBox 彈出窗口中。