SvelteKit 和無頭 headless WordPress 整合

Bernd Dittrich
Bernd Dittrich 640

近一年時間以來,Headless 無頭 WordPress 已經成為網頁開發領域的一大趨勢,前端和後端的分離可以帶來更精細的控制、全通路應用以及這項新技術的一些有趣的用法。

許多開發人員一直喜歡嘗試 Vue.js 和 React.js 等框架,甚至 Django 和 Ruby on Rails等 Web 框架,但這些框架通常與 WordPress 幾乎不相容。

有許多類似的框架可以很好地與無頭 headless WordPress 配合使用,但 SvelteKit 是一個特殊的框架, UI 框架是專門為透過簡潔、優雅的程式碼​​使開發 Web 應用程式變得更加容易而建構的,它可以輕鬆地簡化通常在解耦環境中不能很好地發揮作用的功能。

有興趣了解更多嗎 ? 讓我們回顧一些無頭 headless WordPress 基礎知識,然後我們將教您有關 SvelteKit 的所有資訊以及如何讓它在您的環境中運行。

什麼是無頭 Headless WordPress ?

您可能已經知道 WordPress 前端和後端之間的差異,後端是所有底層 CMS 操作的所在:您建立文章和頁面、安裝外掛程式、設計主題和更改設定。

另一方面,前端基本上是向訪客顯示的網站,WordPress 除了佈景主題和外掛之外,還使用 get_posts() 等各種函數來提取和顯示所需的資料。

例如:以主頁上顯示的「最近的文章」小工具為例子,使用類似的功能,它可以從後端存取資料並在公共前端顯示您的最新文章。

Sveltekit Related Articles

WordPress 的後端和前端緊密相連,並且在許多方面相互依賴才能發揮作用,但這並不意味著它們是不可分割的。

這就是「無頭 Headless WordPress」概念的由來:透過它,您可以分離或脫鉤 WordPress 後端,然後,您可以自由地將其連接到您想要使用的任何前端技術,不僅僅是 PHP,還包括任何 Web 開發框架,甚至是應用程式。

它具有允許您跨多個管道使用 WordPress CMS 的附加功能,將您的部落格文章或其他 CMS 專案移植到多個網站、行動應用程式以及您想要的任何位置。

總體而言,無頭 Headless WordPress 使您能夠更好的控制 CMS,並能夠利用通常與其不相容的技術,它還使您不必從頭開始編寫整個應用程式,您可以使用 WordPress 的內建 CMS 來完成部分工作。

什麼是 REST API ?

要讓無頭 Headless WordPress 正常運作,您需要使用 API 或應用程式介面連接您的應用程式, API 允許兩個不同的應用程式相互連接,在本例中是 WordPress 後端和您的自訂前端應用程式。

雖然 API 類型有很多種,但 REST API 是 WordPress 內建的一種,這允許外部應用程式安全地從 WordPress 後端檢索數據,而無需透過管理介面。

REST API 用於各種官方 WordPress 功能,包括區塊編輯器,大多數需要 API 才能運行的佈景主題和外掛程式都使用此功能。

這也適用於無頭 Headless 應用程式,其中許多使用 REST API 與 WordPress 交互,從後端檢索資料並透過前端應用程式動態呈現它。

REST API 提供代表不同 WordPress 資源的端點,例如:文章、頁面、使用者、類別等,存取這些允許您在前端顯示此數據。

但是,雖然您可以使用 REST API,但 SvelteKit 的許多功能主要依賴不同的技術:GraphQL。

什麼是 GraphQL ?

Sveltekit Graphql

GraphQL 本身不是 API,而是 API 查詢語言,與傳統的 REST API (客戶端通常必須向不同端點發出多個請求才能取得相關資料) 不同,GraphQL 可讓您在單一請求中擷取所有資料。

整體而言,GraphQL 旨在讓您在快速且優化的框架中進行更簡潔的查詢。它也比 REST API 更容易學習且複雜度更低。

由於這些原因,許多無頭 WordPress 框架使用 GraphQL 而不是 REST API 或與 REST API 一起使用。雖然 GraphQL 不像 REST API 那樣與 WordPress 捆綁在一起,但您可以使用一些外掛程式將此功能引入 CMS。

由於優化的框架,您可以避免數據獲取不足和過度獲取。您可以在單一查詢中獲取所需的確切數據,這在您的網路和伺服器上要容易得多。

什麼是 SvelteKit ?

Sveltekit Headless Wordpress

SvelteKit 是一個基於 Svelte 建構的 Web 框架,Svelte 是一個功能類似 Next.js 或React 的開源前端框架,它的構建是為了簡化創建 Web 應用程式的過程,雖然它不是專門為無頭 WordPress 構建的,但這只是許多可能的應用程式之一。

SvelteKit 是基於 HTML、CSS 和 Javascript 建構的,這使得它超級易於使用並且與框架無關,因此您可以將它與其他框架一起使用來創建完全動態的前端應用程式或建立靜態網站。

Svelte 於 2016 年推出,至今仍在積極更新,幾年後,在 2020 年 Web 框架 SvelteKit 出現了。

為什麼 SvelteKit 應該用於無頭 Headless WordPress

無頭 Headless WordPress 有幾個方面可能會讓人難以使用,由於 SvelteKit 的簡約設計,這些問題被最小化,並使無頭 Headless WordPress 設定更加順利。

以下只是 SvelteKit 提供的一些功能:

  • 僅限 JavaScript:與其他框架不同,您幾乎不需要擔心依賴關係和令人困惑的設定,通常,需要零配置,SvelteKit 可以在任何可以運行 Javascript 的地方工作。
  • 框架不可知:由於其簡單性,SvelteKit 可以與其他框架很好地配合,將任何技術引入您的無頭 WordPress 應用程式中。
  • 可擴展:如果 SvelteKit 在您的環境中無法完美工作,則可以非常輕鬆地擴展它並修復在您的設定中無法正常工作的任何內容。
  • 輕易易學:SvelteKit 只依賴 Javascript、HTML 和 CSS,與傳統框架相比,它非常輕量,並且非常易於使用,使用緊湊簡潔的元件創建乾淨、優雅、簡單的程式碼。
  • 數據獲取變得簡單:GraphQL 與 SvelteKit 配合得很好,簡化了從 WordPress 取得資料的過程,讓您進行更簡潔、更有效率的查詢。
  • 身份驗證很容易:SvelteKit 最近實現了 NextAuth.js 支援,在易於安裝的同時確保您的資料安全。
  • 伺服器端渲染 (SSR) 和靜態網站產生 (SSG):SvelteKit 不僅適用於靜態網站或動態應用程式,您可以使用此框架輕鬆完成任一操作,因為提供了多個頁面呈現選項,並且可以輕鬆完成靜態網站生成。
  • 網站地圖:如果您曾經絞盡腦汁試圖在無頭 Headless 網站上獲取可用的網站地圖,那麼您並不孤單,SvelteKit 可讓您使用端點動態渲染網站地圖。
  • 熱鬧的社區:有許多 SvelteKit 粉絲使用該軟體開發應用程式,如果您需要幫助或想討論該框架,可以在網路和社交媒體上輕鬆找到它們,甚至還有一個擁有超過 6 萬人會員的Discord 伺服器。

如何使用 SvelteKit 建立無頭 Headless WordPress 網站

準備好開始了嗎 ? 本指南將引導您完成在本機環境中設定 WordPress、在電腦上安裝 SvelteKit 以及完成後將無頭 Headless WordPress 執行個體部署到 Kinsta

讓我們開始吧。

步驟 1. 設定 WordPress 網站

有幾種方法可以在您的電腦上設定本機 WordPress 實例,如果您已有 Kinsta 帳戶,則可以使用 MyKinsta 儀表板建立網站或使用 Kinsta API 進行設定。

在本教程中,我們將使用 DevKinsta,一個本地 WordPress 開發工具包,您無需擁有 Kinsta 託管即可使用 DevKinsta – 它完全免費。

從上面的鏈接下載 DevKinsta。如果您需要安裝說明或想要了解相關知識,請參閱DevKinsta 文件

安裝並設定 DevKinsta 後,請依照下列步驟建立本機 WordPress 環境。

Sveltekit Devkinsta

如果您想要變更 PHP 版本、多網站等設置,請建立新的 WordPress 網站自訂網站。

輸入您的網站名稱、使用者名稱、密碼和任何其他信息,然後按一下「建立網站」,稍等片刻,DevKinsta 正在設定您的本機 WordPress 環境。

您將進入「網站資訊」畫面。記下您的網站主機,因為這是您開啟網站時造訪的本機 URL。

點擊「開啟網站」並導航至 http://<yoursite>.local/wp-admin,或只需點擊 WP Admin 直接開啟該頁面,使用您之前輸入的憑證登入。

步驟 2. 準備 WordPress 進行無頭 Headless 部署

在全新的管理主畫面上,您需要執行一些額外的步驟來準備 WordPress 安裝以實現無頭 Headless。

SvelteKit 的許多功能都依賴 GraphQL 來運行,因此您需要安裝 WPGraphQL,該外掛程式可讓您使用 GraphQL 框架連接到無頭 Javascript 技術,例如 NextJS、Gatsby,當然還有 SvelteKit。

Sveltekit Wpgraphql

透過導航至外掛程式 > 新增外掛程式並安裝 WPGraphQL 來完成此操作,這會將GraphiQL IDE 新增到您的管理欄,您可以使用它在 WordPress 中編寫 GraphQL 查詢。

Sveltekit Graphiql Ide

您還需要修復您的永久連結,WordPress 預設情況下帶有普通的永久鏈接,由於 Next.js 中的限制,它無法與REST 依賴的 JSON API 或 SvelteKit 本身一起使用。

前往「設定」>「永久連結」,然後關閉「普通」永久連結,嘗試文章名稱永久連結。

Sveltekit Permalinks

要檢查它是否有效,請將「/wp-json」附加到本地網站的 URL,您應該會看到您的網站內容輸出為 JSON 資料。

稍後,您需要使用完整的網站重新導向外掛程式,例如:Redirection 或 All In One SEO Pro,將您的 URL 指向您建立的前端應用程式,準備好將使用者重定向到 SvelteKit 應用程式後,安裝並設定重定向外掛。

至此,您就完成了並準備安裝 SvelteKit。

步驟 3. 設定您的 SvelteKit 環境

首先,SvelteKit 有一些基本的系統需求,包括 Node 18.13 或更高版本,由於該框架非常輕巧,因此它幾乎可以在任何系統上運行,確保你已經與 Node 一起安裝了 npm,否則它將無法運作。

現在您可以在系統上安裝 SvelteKit,該文件提供了完整的示範,但以下是基礎知識。

首先,讓我們使用 create-svelte 套件安裝 Svelte,您可以隨意命名您的專案「my-svelte-app」,此命令將建立一個 Svelte 應用程式,其中所有基本設定都已準備就緒。

npm create svelte my-svelte-app

您將看到各種提示,回答「是」或「否」來建立您的 SvelteKit 環境。

您需要安裝一些 npm 軟體包,因此請使用此命令存取專案的根目錄,將「my-svelte-app」替換為您命名的任何名稱。

cd my-svelte-app/

然後執行此命令來安裝所需的軟體包:

npm install

最後,使用以下命令運行開發伺服器:

npm run dev

伺服器啟動後,您可以透過以下 URL 檢查正在進行的應用程式:http://localhost:3000

現在,您可能想要切換到靜態渲染器來產生靜態 SvelteKit 站點,而不是使用預設頁面渲染器。

這樣,SvelteKit 應該已成功設置,您可以開始建立無頭網站。

步驟 4. 使用 GraphQL 連接 SvelteKit 和 WordPress

當您嘗試 GraphQL 和 SvelteKit 環境時,請記住這些提示。

閱讀 Svelte / SvelteKit 的介紹,以充分了解框架的功能,本教程是互動的,你可以自己嘗試程式碼。

如果您在手動設定 GraphQL API 時遇到問題,您可能想要安裝 SvelteKit GraphQL 套件。

作為 WPGraphQL 的一部分,您也可以透過標準外掛附帶的 wp-graphql-gutenberg使用 Gutenberg 區塊。

雖然您可以在一定程度上將 REST API 與 SvelteKit 結合使用,但 GraphQL 的擴充功能最適合此框架,如果您更喜歡使用 REST API,請查看GitHub 上的 SvelteKit headless WordPress 示範,該示範使用 REST API 連接兩個平台。

您還應該閱讀有關加載資料和路由以整合 SvelteKit 和 WordPress 的內容,有很多方法可以連接到 WordPress 並建立無頭 Headless 應用程式。

步驟 5. 將 WordPress 和 SvelteKit 部署到 Kinsta

設定無頭環境並準備好部署後,您需要執行兩個單獨的步驟:部署 WordPress 並將前端推送到靜態網站。

WordPress 部分非常簡單。在 DevKinsta 的「網站資訊」頁面上,您應該會看到「推送到暫存」按鈕。您需要使用 Kinsta 憑證登錄,但之後一切就完成了。

至於您的 SvelteKit 應用程序,這也非常簡單。 Kinsta 提供免費的靜態網站託管,它適用於大多數在 SvelteKit 中建立的應用程式。以下是具體操作方法:

– 將您的 SvelteKit 應用程式推送到 Bitbucket、GitHub 或 GitLab。
– 建立 Kinsta 帳戶並登入 MyKinsta 儀表板。
– 登入您選擇的 Git 帳戶並授權 Kinsta。
– 在 MyKinsta 中,按一下靜態站點,然後按一下新增站點
– 選擇應用程式的儲存庫,然後新增正確的建置設定。
– 點選建立網站

如果您建立了一個靜態網站無法滿足其需求的複雜應用程序,您可能希望使用 Kinsta 的應用程式託管進行部署。

無論哪種方式,您的無頭 Headless 網站現已部署,您已準備好展示您全新的無頭 Headless WordPress 應用程式。

結論

如今,無頭 Headless WordPress 已成為一件流行,但設定它並不總是那麼容易。 SvelteKit 是專門為使 Web 開發更乾淨、更輕鬆而構建的,該框架非常適合無頭 Headless WordPress 設定。

現在您已經知道如何建立本機 WordPress 執行個體、使用 SvelteKit 以及部署到 Kinsta,您已經準備好將無頭 Headless WordPress 提升到新的水準。

無論您是建立靜態網站還是動態 Web 應用程序,SvelteKit 都非常適合該任務,Kinsta 的應用程式託管或免費靜態託管是託管它的最佳場所,這要歸功於其基於 Google Cloud 和 Cloudflare 構建的閃電般的基礎設施。

Please rate Stellar
0 / 5 5 Votes 5

Your page rank:

Your Mastodon Instance