Frontity 是一個先進的伺服器端框架，設計用於使用 WordPress 和 React 快速構建現代網站。
它通過 REST API 從 WordPress 獲取資料，然後使用 React 生成最終顯示在瀏覽器中的 HTML。您可以像往常一樣使用 WordPress 內容管理系統，而無需使用 Frontity。WordPress 中的任何更改都會熱過載到 Frontity 網站上，確保前端的實時更新。
本文將指導你如何將 Frontity 與無頭 WordPress 網站整合，並逐步概述如何在伺服器上部署由 Frontity 驅動的網站。
前提條件
要跟上本教程，您需要：
- 具有使用 HTML、CSS 和 JavaScript 的經驗
- 充分了解 React
- 在開發環境中安裝 Node 和 npm
瞭解無頭 WordPress
傳統的 WordPress 將內容管理和顯示整合到一個平臺中。您可以通過 WordPress 面板新增內容，並通過 WordPress 主題或外掛顯示內容。
這種方法雖然有效，但也有侷限性–可用的主題可能限制性過強，缺乏跨多個網站傳輸內容的本地支援，而且嚴重依賴外掛來實現額外功能，可能會降低網站的執行速度。
無頭 WordPress 通過將 WordPress 內容管理系統與其表現層分離來解決這些問題。在這種設定中，WordPress 仍是內容管理的後臺系統，但您可以通過 REST API 或 WPGraphQL 獲取其內容，並使用 Frontity 等工具構建您的網站前端。
這種方法具有顯著的優勢：
- 速度：您可以使用更高效的現代網路技術來優化速度。
- 可擴充套件性：由於可以獨立擴充套件內容管理系統和前端，因此更容易管理流量激增。
- 靈活性：您可以使用任何前端技術，建立自定義的動態使用者體驗，而不受 WordPress 主題和外掛的限制。
設定開發環境
要開始使用 Frontity，首先需要安裝一個活動的 WordPress。Frontity 預設會為你建立的每個新專案提供一個 WordPress 演示網站。不過，讓我們使用本地環境軟體（以 DevKinsta 為例）配置本地安裝。
- 訪問 DevKinsta 下載頁面，選擇適合你作業系統的安裝程式。
- 下載完成後，開啟檔案並按照提示進行安裝。
- 如果這是您在 DevKinsta 的第一個網站，請單擊 New WordPress site。如果不是，請單擊右上角的 Add site，然後選擇新建 WordPress 站點選項。
- 填寫您的 WordPress 網站名稱、管理員使用者名稱和密碼。
- 單擊 “Create Site” 建立站點。
- 在網站的儀表板上，單擊 “WP Admin” 在瀏覽器上開啟 WordPress 管理面板。或點選 Open Site，在瀏覽器上檢視實時網站。
為了正常執行，Frontity 要求你的 WordPress 安裝啟用漂亮永久連結。在 WordPress 面板中，導航到 “設定“>”固定連結“，然後選擇 “文章名” 以啟用它。
WordPress 安裝現在包含 REST API。將 /wp-json 追加到你的實時網站的 URL 中檢視。
您看到的 JSON 資料應如下所示：
WordPress REST API JSON 資料。
這是您的 Frontity 網站將作為資料來源使用的 API。
將 Frontity 與 WordPress 和 React 整合
按照以下步驟將 Frontity 與 WordPress 和 React 整合。
- 開啟終端，導航到要建立專案的目錄，然後執行以下命令：
npx frontity create my-appnpx frontity create my-app
npx frontity create my-app
您可以根據自己的專案選擇不同的名稱來替換
my-app。 - 然後，選擇一個主題：
Frontity 提供兩種主題：mars-theme和twentytwenty-theme。選擇推薦的主題完成專案設定。 - 導航至新目錄。在終端中輸入以下命令，在本地執行專案：
npm frontity devnpm frontity dev
npm frontity dev
此操作將建立一個開發伺服器，監聽埠為 3000。如果在瀏覽器上開啟 http://localhost:3000，就會看到一個預填充了 Frontity 演示內容的網頁，與下圖類似：
預設情況下，在 frontity.setting.js 檔案中，
state.source.url設定為 https://test.frontity.org/（帶有您網站正在使用的內容的 WordPress 演示網站）。你要修改該值，使其指向你的 WordPress 網站。frontity.settings.js 檔案是你的應用程式的大部分設定所在，包括資料來源 URL（你的 WordPress URL）、軟體包和執行網站所需的庫。
- 要將 Frontity 與你的 WordPress 網站連線起來，請從 DevKinsta 複製你網站的 URL，並在其中新增
/wp-json，然後將其用於 frontity.settings.js 中的state.source值。此外，將state.frontity.url值改為你的網站主頁。const settings = {...,state: {frontity: {url: "http://your-site-url.com",...},},packages: [...,{name: "@frontity/wp-source",state: {source: {// Change this url to point to your WordPress site.api: “http://your-site-url.com/wp-json”}}}]}const settings = { ..., state: { frontity: { url: "http://your-site-url.com", ... }, }, packages: [ ..., { name: "@frontity/wp-source", state: { source: { // Change this url to point to your WordPress site. api: “http://your-site-url.com/wp-json” } } } ] }const settings = { ..., state: { frontity: { url: "http://your-site-url.com", ... }, }, packages: [ ..., { name: "@frontity/wp-source", state: { source: { // Change this url to point to your WordPress site. api: “http://your-site-url.com/wp-json” } } } ] } - 由於網站現在將使用 WordPress REST API，因此請將
state.source物件名稱從url改為api。 - 現在，重啟 Frontity 網站。它將顯示來自 WordPress 網站的內容：
注：熱過載對 frontity.settings.js 中的更改不起作用，因此必須重啟開發伺服器。除了選單外，一切都應該正常工作，因為選單指向的是你尚未建立的頁面。下一節將介紹如何設定頁面。
使用 Frontity、WordPress 和 React 構建無頭部落格
1. 重新命名部落格
進入 frontity.settings.js 檔案，更改部落格的 name, url, title, 和 description。
const settings = {
name: "my-travel-blog",
state: {
frontity: {
url: "http://your-site-url.com",
title: "My Travel Blog",
description: "Travel Smart, Live Fully",
},
},
//…
};
如果重新啟動伺服器，就可以檢視更改：
2. 為網站新增頁面
網站現在有自然、旅遊、日本和關於頁面的連結，所有這些連結都指向不存在的頁面。
比方說，你只想要 “About Us” 頁面。在這種情況下，您可以將其新增到 WordPress 網站，然後從選單中刪除指向其他頁面的連結：
- 在 WordPress 儀表盤的左側選單中，單擊 “Pages“。這將帶您進入頁面部分，在這裡您可以看到所有現有頁面。
- 在頂部單擊 “Add New” 開啟頁面編輯器。
- 輸入 “About” 作為標題，然後使用區塊編輯器為頁面新增內容。
- 最後點選 Publish。
下一步是配置選單。
Frontity mars-theme 在 frontity.settings.js 中對選單項進行了硬編碼，並將其匯出到 index.js。About us 頁面已有一個連結，因此只需刪除 frontity.settings.js 檔案中的自然、旅行和日本連結即可。
const settings = {
//…
packages: [
{
name: "@frontity/mars-theme",
state: {
theme: {
menu: [
["Home", "/"],
["About Us", "/about-us/"],
],
featured: {
showOnList: false,
showOnPost: false,
},
},
},
},
//…
};
您網站的選單現在應該是這樣的：
您可以擁有的頁面數量不受限制。您甚至可以新增類別或標籤！
3. 自定義主題
mars-theme 位於專案的 packages/mars-theme 目錄中。在該目錄中，你會發現一個包含 components 資料夾的 src 資料夾。要自定義主題，可以新增、修改或刪除這些元件。
值得注意的是，mars-theme 元件使用 Emotion 庫進行樣式設計，這意味著它們具有附加樣式。這使得追蹤與每個元件相關的樣式變得更加容易。
例如，假設你想更改標題的背景，在 src/components 資料夾中找到 index，然後查詢 HeadContainer 樣式。然後，將背景顏色調整為 green 或任何你喜歡的顏色：
const HeadContainer = styled.div` display: flex; align-items: center; flex-direction: column; background-color: green; `;
儲存更改後，Frontity 將重新載入網站，頁首的變化如圖所示：
將 header 背景更新為綠色。
您還可以對元件進行許多其他更改。您可以新增動畫，使網站更具活力，改變網站佈局，甚至新增新的元件。
將 Frontity 網站部署到伺服器
在將 Frontity 網站部署到伺服器之前，你需要將網站從 DevKinsta 推送到 Kinsta WP 託管，以啟用公共訪問。
1. 訪問 DevKinsta 文件並按照說明在 Kinsta WP 上託管你的 DevKinsta 網站。然後，您可以新增一個域或使用預設域。
接下來，用新的 URL 更新 frontity.settings.js 中的資料來源 URL：
const settings = {
...,
packages: [
...,
{
name: "@frontity/wp-source",
state: {
source: {
// Change this url to point to your WordPress site.
api: “https://your-hosted-site-url.com/wp-json”
}
}
}
]
}
您將從 Git 倉庫部署網站，因此請記得將程式碼推送到 Git 提供商（Bitbucket、GitHub 或 GitLab）：
- 導航至 MyKinsta 面板。
- 使用您首選的 Git 提供商授權 Kinsta。
- 在左側邊欄選擇 Applications，然後單擊 Add application。
- 選擇要部署的版本庫和分支。
- 為應用程式指定一個唯一的名稱，並選擇 Data center 位置。
- 選擇 Standard build machine 配置和推薦的 Nixpacks 選項來配置構建環境。
- 新增計費詳細資訊，然後單擊 “Create application“。
部署過程可能需要一分鐘。部署完成後，Kinsta 會為您的網站提供一個 URL。單擊 “Visit App” 檢視您的託管網站。
小結
如果您想快速建立部落格，使用傳統的 WordPress 可能就足夠了。不過，如果你想建立自定義部落格而不受主題或外掛的限制，不妨試試 Frontity。
評論留言