解耦 Drupal 8 和 Gatsby.JS：高速二重奏

已發表: 2022-11-27

我們的團隊喜歡探索和使用開發中的熱門趨勢，其中之一就是解耦 Drupal 架構。 我們之前的文章致力於使用解耦的 Drupal 和 JSON.API，我們今天的故事主角將是“了不起的蓋茨比”。 這聽起來像著名的書英雄嗎？ 不，Gatsby.JS 是一個新的熱門 JavaScript 工具，但它有望同樣出名，值得一百本書！ 在這篇文章中，我們將討論它的工作原理以及使用分離的 Drupal 8 和 Gatsby.JS 的好處。 當然，您始終可以依靠我們的 Drupal 專家來實施這一切。

Gatsby.JS：它是什麼以及它是如何工作的

Gatsby.JS 被定義為一個靜態站點生成器，但它的能力正在接近前端框架。 Gatsby 建立在非常熱門的前端工具之上，其中一些是：

  • React.JS — 用於構建複雜界面的非常流行的 JavaScript 庫
  • GraphQL——超級高效的查詢語言
  • Webpack — 出色的 JavaScript 模塊打包器

Gatsby.JS 旨在構建超快的靜態站點。 它從任何來源獲取數據並使用 GraphQL 生成靜態內容。 目前，有 500 多個源插件可以在特定數據源和 Gatsby 之間建立連接。 來源包括 YouTube、Twitter、Hubspot、Shopify、Trello、Vimeo、Google Sheets、Drupal、WordPress 等內容管理系統。

Gatsby 使用源插件和 GraphQL

解耦 Drupal 8 和 Gatsby.JS：偉大的二重奏及其好處

今天最熱門和最有益的組合之一是 Gatsby 和 Drupal 8。根據分離的或無頭的 Drupal 架構，Drupal 僅用作後端，而 Gatsby.JS 處理表示層。

Drupal 8 和 Gatsby.JS 都是開源的，擁有龐大而活躍的社區和龐大的附加模塊或插件生態系統。 Drupal 8 具有內置的 Web 服務，使集成變得輕而易舉。

是什麼讓這種組合如此有益？ 靜態站點的簡單性和速度與 Drupal 8 CMS 提供的後端的功能和靈活性完美結合。 以下是我們最終獲得的至少一些功能：

  • 無與倫比的速度。 Gatsby.JS 預取網站的所有頁面，而不是每次按需查詢數據庫，這使得導航變得愉快且速度驚人。 Gatsby 是一個靜態 PWA（漸進式 Web 應用程序）生成器。 它僅有效地獲取關鍵的 HTML、CSS 和 JS 文件。
  • 易於設置。 Gatsby 不需要繁瑣的部署和設置過程。 它將您的站點構建為可以在任何地方快速部署的靜態文件。
  • 強大的個性化功能。 Drupal 和 Gatsby 的組合可以提供出色的用戶個性化和身份驗證功能。
  • 很棒的內容編輯。 通常，靜態站點生成器需要在 Markdown 中編寫內容，這對於內容編輯器來說可能很麻煩。 但是使用 Drupal 8 作為後端解決了這個問題！ Drupal 8 內容創建功能對於任何內容編輯器來說都是一種樂趣。

使用解耦的 Drupal 8 和 Gatsby.JS 的示例之一是演示站點 Umami Food Magazine。 該站點建立在帶有 Gatsby.JS 的無頭 Drupal 分發 Contenta CMS 之上。

Umami Food Magazine 使用 Gatsby 2鮮味食品雜誌使用蓋茨比

如果這看起來足夠開胃，請立即聯繫我們的 Drupal 團隊，為您將解耦的 Drupal 8 與 Gatsby.JS 結合起來！ 或者繼續閱讀一些實現細節。

使用 Drupal 8 和 Gatsby.JS 的一些細節

在解耦設置中，Drupal 8 和 Gatsby 站點都需要準備好一起工作。 它們將通過用於 Drupal 的特殊 Gatsby 源插件連接，該插件從安裝了 JSON API 的 Drupal 8 網站獲取數據，包括圖像。

因此有必要安裝和啟用 JSON API 和 JSON API extras 貢獻的 Drupal 模塊，以及在我們的 Drupal 網站上啟用核心序列化模塊。

啟用 JSON API 模塊

我們的下一個目標是配置 - Web 服務 - JSON API 覆蓋。

配置 JSON API

在Settings中，我們需要確保 JSON API 的路徑前綴是/jsonapi 。 這是蓋茨比網站需要知道的。

配置 JSON API

在人員 - 角色 - 權限中，我們將訪問 JSON API 資源列表的權限授予具有所有角色的用戶，包括匿名用戶。

JSON API 的權限

我們的 Drupal 站點已準備好進行 Gatsby 集成，現在我們需要準備 Gatsby 站點。 首先安裝 Gatsby 的 CLI：

npm install --global gatsby-cli

然後我們按照“入門”文檔中的所有站點創建步驟進行操作。 Gatsby 還為站點創建提供了預配置的啟動器。

蓋茨比首發

然後我們使用命令運行 Gatsby，之後 Gatsby 站點應該在 localhost:8000 可用：

蓋茨比發展

然後需要在 Gatsby 站點上安裝上面提到的 Drupal 源插件。 接下來，我們將插件文檔中的一段代碼添加到 gatsby-config.js 文件中。 該 URL 應更改為我們的 Drupal 站點之一。

插件：[
 {
 解決：`gatsby-source-drupal`，
 選項： {
 baseUrl: `https://our-site-name.com/`,
 apiBase: `api`, // 可選，默認為 `jsonapi`
 },
 },
 ]

然後我們配置我們的 Gatsby 站點以準確地從 Drupal 獲取我們需要的內容。 我們需要在 Gatsby 站點的 /src/pages 中創建適當的頁面，並將 React 導入的代碼添加到 JS 文件中。

我們在localhost:8000/___graphql配置 GraphQL 以準確地查詢 Drupal 站點。

最後一個命令就是用 Drupal 數據發布我們的 Gatsby 站點：

蓋茨比構建

這只是讓 Drupal 8 與 Gatsby 一起工作的一個非常簡短的描述。 我們的專家已準備好完全按照您的意願進行設置。

享受解耦的 Drupal 8 和 Gatsby.JS 的結合！

如果您有興趣在現有項目或新項目中使用解耦的 Drupal 8 和 Gatsby.JS，請聯繫我們的 Drupal 開發人員。 我們的 Drupal 8 團隊在第三方集成方面擁有豐富的經驗。 我們會建議您最好的解耦設置，當然，也會順利實施。 讓我們享受最新和最偉大的技術！