使用WordPress數據創建蓋茨比網站

本教程建立在上一篇文章的基礎上，提供了整合蓋茨比和WordPress的詳細演練。蓋茨比（Gatsby）的速度和安全利益吸引了WordPress用戶，提供了一種利用這些優勢的方法，同時保留熟悉的WordPress內容管理經驗。

本指南側重於實際實施，從各種資源中汲取利用並應對潛在的挑戰。請注意，WPGRAPHQL和GATSBY CLI是積極開發的，這意味著版本的兼容性至關重要。該項目利用WPGRAPHQL 0.8.3， gatsby-source-wpgraphql 2.5.1和GATSBY CLI 2.12.21。始終請參閱官方文檔以獲取最新更新。

有幾個出色的蓋茨比起步劑，包括亞歷山大·斯帕拉托（Alexandra Spalato）的gatsby-wordpress-theme-blog ，扎克·戈登（Zac Gordon）和穆罕默德·穆辛（Muhammad Muhsin）的twenty-nineteen-gatsby-theme 。

先決條件

跟隨，您需要：

• 基本的反應和JavaScript知識。許多在線資源提供介紹性指南。
• 掌握了蓋茨比動態頁面創建機制。全面的教程很容易獲得。
• 一個工作的WordPress安裝。有很多指南可以協助設置。

利用現有資源

該項目受益於先前的蓋茨比經驗和可重複使用的組件（版式，佈局等）。包括關鍵資源：

• 亨里克·沃思（Henrik Wirth）的綜合蓋茨比WordPress入門指南。
• 傑森·倫斯托夫（Jason Lenstorf）的jamstack遷移教程。
• 穆罕默德·穆辛（Muhammad Muhsin）的指南關於載入二十個主題的指南。

該教程反映了Henrik Wirth的結構，省略了諸如圖像處理和ACF柔性內容之類的高級功能。

項目階段：

1. WordPress和Gatsby設置
2. 內容遷移
3. 導航實施
4. 博客文章顯示
5. 樣式和部署

階段1：設置WordPress和Gatsby

首先建立一個WordPress站點（現有或新的，甚至是本地安裝）開始。該項目使用二十個主題。

安裝必需插件

安裝WPGRAPHQL（對於GraphQL API）和WPGRAPHIQL（可選，但有助於測試查詢）。這些插件可能在WordPress插件目錄中不可用；直接從github下載並手動安裝。 WPGRAPHIQL在WordPress儀表板中提供了方便的測試接口。

蓋茨比站點初始化

使用默認啟動器創建本地蓋茨比網站：

蓋茨比新的wordpress-gatsby https://github.com/gatsbyjs/gatsby-starter-default

啟動開發服務器（ gatsby develop ），然後訪問localhost:8000的入門頁面。

安裝並配置gatsby-source-graphql插件插件：

紗線添加gatsby-source-graphql＃或npm安裝-Save gatsby-source-raphql

配置gatsby-config.js ：

 Module.exports = {
  插件：[
    {
      決心：“蓋茨比 - 蘇格拉夫Ql”，
      選項： {
        鍵入：“ wpgraphql”，
        fieldname：“ wpcontent”，
        URL：“ https：//tinjurewp.com/wp-gatsby/graphql”，//或使用環境變量
      }，，
    }，，
  ]，，
};

考慮使用dotenv模塊進行環境變量來管理敏感數據。

重新啟動服務器後，可以通過https://localhost:8000/__graphql/訪問WPGRAPHQL API。

階段2：遷移WordPress內容

Gatsby通過使用GraphQl查詢數據在構建過程中創建頁面。這涉及使用Gatsby的onCreateNode和createPages API。

內容準備

將帖子和頁面添加到您的WordPress網站。從Gatsby pages文件夾中刪除index.js和page-2.js以避免衝突。

模板創建

為帖子（ /src/templates/post/index.js ）創建模板和頁面（ /src/templates/page/index.js ）：

 // src/templates/post/index.js（示例）
從“反應”中導入反應；
從“ ../../../components/layout”導入佈局;
從“ ../.././components/seo”導入SEO;

const post =（{pageContext}）=> {
  const post = pageContext.post;
  返回 （
    <layout>
      <seo title="{post.title}"></seo>
      <h1 id="post-title">{post.title}</h1>
      <div dangerouslysetinnerhtml="{{" __html: post.content></div>
    </layout>
  ）；
};

導出默認帖子；

createPages API實現

使用Gatsby的createPages API從WordPress數據中生成頁面。這涉及GraphQl查詢和數據映射。 （請參閱鏈接的GitHub存儲庫中的完整代碼）。

第三階段：實施導航

WordPress的導航管理允許創建菜單。本節重點是將主要菜單移植到Gatsby。

WordPress中的菜單創建

在WordPress中創建一個名為“主”的菜單，將鏈接添加到主頁，示例頁面和其他相關內容。

GraphQl查詢

查詢菜單項使用GraphiQl：

查詢myquery {
  menuitems（其中：{位置：primary}）{
    節點{
      標籤
      URL
      標題
      目標
    }
  }
}

組件創建

創建菜單項（ MenuItem.js ）和菜單本身（ Menu.js ）的組件，處理從絕對路徑到相對路徑的URL轉換。 （請參閱鏈接的GitHub存儲庫中的完整代碼）。

集成菜單

將Menu組件添加到Layout組件中。實施一個UniversalLink組件來處理內部和外部鏈接。

第4階段：顯示博客文章

該階段著重於創建博客文章模板和分頁的組件。

全局變量

創建一個globals.js文件以管理blogURI之類的設置。

博客模板

創建一個博客模板（ /src/templates/post/blog.js ）以顯示帖子，利用PostEntry和Pagination組件。

發布輸入組件

創建一個PostEntry部件以顯示單個帖子，包括特色圖像和摘錄。

圖像組件

創建一個Image組件來處理特色圖像，包括後備圖像。

分頁部分

創建一個Pagination組件，用於通過分頁的帖子導航。

重構createPages和createPosts

rebactor createPages.js和createPosts.js使用GraphQl片段來改善代碼組織和可維護性。 （請參閱鏈接的GitHub存儲庫中的完整代碼）。

第5階段：樣式和部署

本節涵蓋了樣式和部署策略。

造型

使用SASS或其他首選方法進行樣式。考慮使用@wordpress/block-library合併WordPress塊樣式。

部署

利用NetLify或其他平台進行連續部署。考慮使用jamstack部署插件進行由WordPress更改觸發的自動部署。

該綜合指南為整合蓋茨比和WordPress提供了堅實的基礎。請記住，請諮詢鏈接的GitHub存儲庫以獲取完整的代碼示例和更多詳細信息。該過程涉及多個步驟，需要對Gatsby和WordPress有很好的了解。但是，結果是一個快速，安全且可維護的網站。

以上是使用WordPress數據創建蓋茨比網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！