如何使用 Faust.js 創建無頭 WordPress 網站（分 9 步）

如果您需要無頭運行 WordPress，則必須具備高質量的框架。 但是，即使在現代框架的幫助下，您仍可能難以有效地預覽您的內容。

這就是 Faust.js 的用武之地。這個新框架利用了 Next.js 和 React 的強大功能，並將其與方便的後期預覽功能相結合。 使用 Faust.js，您可以在點擊Publish之前查看您的內容，這與傳統的 WordPress 網站完全相同。

在本文中，我們將探討為什麼您可能希望將 Faust.js 用於您的下一個無頭 WordPress 項目。 然後我們將向您展示如何設置這個新框架並構建一個簡單的前端。 讓我們開始吧！

為什麼您可能想要運行無頭 WordPress 網站

典型的內容管理系統 (CMS) 由前端和後端組成，WordPress 也不例外。 但是，可以無頭運行 WordPress。

“head”是指表示層，而“body”是存儲和創作內容的地方。 通過從後端（主體）中移除前端（頭部），您可以無頭運行 WordPress。

對於無頭項目，您將繼續使用熟悉的 WordPress 儀表板和工具。 但是，您可以自由設計自己的前端，而不受 WordPress 通常的限制。 這使您可以完全控制內容的顯示方式。

創建自己的前端可能是一個令人興奮的前景，但並不是特別簡單。 幸運的是，有一些工具可以為您完成大部分繁重的工作。

許多無頭 CMS 用戶選擇借助 Frontity、Gatsby 框架或基於 React 的 Next.js 等工具。 然而，傳統上很難在無頭網站上預覽帖子和頁面，即使使用框架也是如此。 這就是 Faust.js 的用武之地：

該框架建立在 Next.js 和 React 之上，力求提供與傳統 WordPress 一致的發布體驗。 為了實現這一點，Faust.js 提供了無縫的內容預覽。

Faust.js 還使用 GraphQL 客戶端。 這使您能夠查詢 WordPress WPGraphQL API，而無需提前知道 GraphQL 查詢。

此外，Faust.js 提供了用於驗證 WordPress 後端的內置機制。 這使得使用無頭 CMS 構建封閉式內容和電子商務網站變得容易。

如何使用 Faust.js 創建無頭 WordPress 網站（分 9 步）

現在我們已經介紹了 Faust.js 是什麼以及它的一些主要優點，讓我們看看如何開始使用這個框架。 以下是如何使用 Faust.js 創建一個無頭 CMS，分九個步驟。

第 1 步：準備您的開發環境

在開始之前，您需要安裝 Node.js 和 Node Package Manager (NPM)。 您還需要安裝 WordPress，您可以在本地或 Web 服務器上託管。

您還將使用一些 WordPress 插件。 首先，WPGraphQL 插件會將 WordPress 轉換為 GraphQL API，供您的項目使用。

您還需要 WPE Headless。 該插件提供了一些額外的功能，有助於確保 WordPress 作為無頭 CMS 正常運行。 您可以下載此插件的最新版本，然後將其上傳到您的 WordPress 儀表板。

為了幫助您開始使用 Faust.js 框架，您將使用 create-next-app 啟動項目。 這會生成一個引導的 Next.js 應用程序，其中包含所有必要的配置和文件。 然後，您可以將其用作無頭 Faust.js 項目的基礎。

您可以使用與 NPM 捆綁在一起的 npx 工具安裝 create-next-app。 在本地終端或命令提示符窗口中，運行以下命令：

 npx create-next-app faust-headless-demo

這將在您計算機的本地用戶目錄中創建一個faust-headless-demo項目。 此過程完成後，終端將提示您使用以下命令啟動 Next.js 應用程序：

 cd faust-headless-demo npm run dev

恭喜——您剛剛成功創建了 Next.js 項目！ 要查看此應用程序，請在瀏覽器中訪問“http://localhost:3000”：

您現在應該看到 Next.js 起始站點。 如果遇到錯誤消息，請嘗試重新運行npm run dev命令，這可能會解決問題。

第 2 步：設置 TypeScript

Faust.js 使用 TypeScript，它是 JavaScript 的類型化超集，增加了編譯時類型檢查。 這使您能夠在編譯時捕獲錯誤，而不是等到運行時。 要安裝 TypeScript，請在終端中運行以下命令：

 npm install --save-dev @types/react npm install typescript --save-dev

現在，您需要生成一個tsconfig.json文件。 此文件指定運行項目所需的編譯器選項：

 npx tsc --init

設置好 TypeScript 後，您需要將一些 JavaScript 文件轉換為 TypeScript 格式。 導航到本地用戶目錄，該目錄應該包含一個新的faust-headless-demo目錄：

在faust-headless-demo中，打開pages目錄。 您現在可以將_app.js文件重命名為_app.tsx ，並將其內容替換為以下內容：

 import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;

接下來，將pages/index.js重命名為pages/index.tsx 。 您的 Next.js 應用現在已為 TypeScript 正確配置。

第 3 步：創建可重用的 React 組件

此時，您可以通過顯示一些虛擬內容來測試您的項目。 在本地 pages 目錄中，創建一個posts.tsx文件：

在此文件中，您將輸入一些文本。 如果您的瀏覽器中出現以下內容，您將知道您的 Next.js 應用程序配置正確：

 export default function PostsPage() { return <h1>The posts page</h1>; }

在瀏覽器中，導航到“http://localhost:3000/posts”。 您現在應該看到這個虛擬內容：

一旦你驗證了你的設置，下一步就是創建一個基本的 React 組件。 您最終將使用此組件來顯示所有 WordPress 帖子的列表。

將所有 React 組件添加到專用目錄是最佳實踐。 考慮到這一點，導航到項目的根目錄並創建一個組件文件夾：

在此目錄中，創建一個post.tsx文件。 React 組件可以通過組件 props 從父組件接收數據。 在本例中，您將把每篇文章的標題和內容傳遞給文章組件。

在 TypeScript 中，您可以通過創建一個接口來映射您想要傳遞的數據來實現這一點。 在您的posts.tsx文件中，添加以下內容：

 export interface PostProps { title: string; content: string; } export default function Post(props: PostProps) { const { title, content } = props; return ( <article> <h1>{title}</h1> <p>{content}</p> </article> ); }

你現在有了一個可重用的 React 組件。 下一步是在您的帖子頁面中使用此組件。

第 4 步：顯示帖子列表

首先，打開pages/posts.tsx文件。 此時，您只需提供一些假數據，您將以列表格式顯示：

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod, lacus felis tincidunt ante, sit amet eleifend metus enim in orci. Vivamus tincidunt eleifend leo, at scelerisque lacus viverra ac.', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.', }, ]; export default function PostsPage() { return <h1>My posts page</h1>; }

您可以通過遍歷帖子數組來創建帖子列表。 這需要您為每個項目呈現一個 Post 組件：

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod....', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor...', }, ]; export default function PostsPage() { return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

保存您的更改，然後關閉此文件。 然後，轉到“http://localhost:3000/posts”：

此選項卡現在應該顯示虛假帖子列表。 將 Faust.js 連接到 WordPress 後端后，您將使用此 React 組件來顯示您網站的真實帖子列表。

第 5 步：配置 Faust.js 框架

您終於可以設置 Faust.js 框架了。 首先，通過運行以下命令安裝生產和開發依賴項：

 npm install --save-prod @faustjs/core @faustjs/next npm install --save-dev @gqty/cli dotenv

然後導航到項目的根目錄。 在這個文件夾中，創建一個新的faust.config.js文件：

您將使用此文件將 Faust.js 連接到您的 WordPress 後端。 您現在可以輸入以下代碼：

 import { config as coreConfig } from '@faustjs/core'; if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) { console.error( 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?', ); } /** * @type {import("@faustjs/core").Config} */ export default coreConfig({ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL, apiClientSecret: process.env.WP_HEADLESS_SECRET, });

在此目錄中，您還需要創建一個.env.local文件。 這將保存您的所有環境變量：

在.env.local中，添加以下代碼。 確保用您自己的 URL 替換您的站點：

 NEXT_PUBLIC_WORDPRESS_URL=http://your-site.com WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

您還需要將YOUR_PLUGIN_SECRET替換為您網站的無頭密碼。 您可以通過導航到 WordPress 儀表板中的設置 > 無頭來找到此信息：

Faust.js 將使用這個無頭密鑰來驗證其對 WordPress 的請求。 這使您可以在前端預覽草稿內容。

第 6 步：為 Faust.js 配置 GraphQL 客戶端

Faust.js 使用 GQty 作為其 GraphQL 客戶端。 要配置 GQty，請在項目的根目錄中創建一個gqty.config.js文件：

您現在可以打開此文件進行編輯。 在gqty.config.js中，複製並粘貼以下內容：

 require('dotenv').config(); /** * @type {import("@gqty/cli").GQtyConfig} */ const config = { react: false, scalarTypes: { DateTime: 'string' }, introspection: { endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`, headers: {}, }, destination: './client/index.ts', subscriptions: false, javascriptOutput: false, }; console.log(`Using "${config.introspection.endpoint}" to generate schema...`); module.exports = config;

下一步是創建一個 GQty 客戶端，您將使用它來查詢您網站的數據。 在項目的根目錄中，創建一個新的客戶端目錄。 在此文件夾中，創建一個包含以下代碼的index.ts文件：

 import type { IncomingMessage } from 'http'; import { getClient } from '@faustjs/next'; import { generatedSchema, scalarsEnumsHash, GeneratedSchema, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; export const client = getClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, }); export function serverClient(req: IncomingMessage) { return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({ schema: generatedSchema, scalarsEnumsHash, context: req, }); } export * from './schema.generated';

您現在可以保存更改並關閉index.ts文件。 現在您已經準備好所有部分，您可以生成 GraphQL 模式了。

第 7 步：運行生成腳本

下一步是將生成腳本添加到您的package.json文件中。 該腳本將根據您的 WordPress 站點的結構生成必要的架構。

要添加此腳本，請導航到項目的根文件夾並打開package.json文件。 您現在可以將生成腳本添加到第一個代碼塊：

 { "name": "fause-headless-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", //Add the following// "generate": "gqty generate" },

在運行此腳本之前，您需要為您的網站臨時啟用 Public Introspection。 在 WordPress 儀表板中，導航到GraphQL > Settings 。 然後滾動到Enable Public Introspection並選中其隨附的複選框：

單擊保存更改。 您現在可以通過在終端中輸入以下命令來運行生成腳本：

 npm run generate

該腳本將創建一個client/schema.generated.ts文件。 此時，您可以在 WordPress 儀表板中禁用 Public Introspection。

第 8 步：定義 FaustProvider 組件和 Hook

現在，您需要使用內置的<FaustProvider>組件來包裝 Next.js 應用程序。 這個 React 高階組件將為 Faust.js 提供獲取和緩存數據所需的上下文。

為此，請打開項目的pages/_app.tsx文件。 然後，您可以將其內容替換為以下內容：

 import '../faust.config'; import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; import { FaustProvider } from '@faustjs/next'; import { client } from '../client'; function MyApp({ Component, pageProps }: AppProps) { return ( <FaustProvider client={client} pageProps={pageProps}> <Component {...pageProps} /> </FaustProvider> ); } export default MyApp;

您現在已準備好從 WordPress 後端查詢數據。 您將使用usePosts掛鉤，它提供了一個標準接口，可從無頭 WordPress API 檢索帖子列表。

打開pages/posts.tsx目錄並刪除所有樣板Lorem Lipsum代碼。 然後你可以實現usePosts鉤子：

 import { client } from '../client'; import Post from '../components/post'; export default function PostsPage() { const { usePosts } = client; const posts = usePosts()?.nodes; return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

您生成的架構文件導出 Post 類型。 這意味著您可以使用此類型來定義 Post 組件道具。 要接受 Post 道具，請打開components/post.tsx文件並添加以下內容：

 import { Post as PostType } from '../client'; export interface PostProps { post: PostType; } export default function Post(props: PostProps) { const { post } = props; return ( <article> <h1>{post.title()}</h1> <div dangerouslySetInnerHTML={{ __html: post.content() }} /> </article> ); }

您可以指定是否要接收呈現的內容或原始內容。 在上面的代碼中，您選擇了渲染內容。

第 9 步：將 Faust.js 連接到您的 WordPress 網站

最後一步是在您的數據和 Post 組件之間創建一個鏈接。 這需要您在posts.tsx文件中添加一行代碼：

 … .... …. {posts.map((post) => ( //Add the following line// <Post key={post.id} post={post} /> ))} </div> ); }

進行這些更改後，在瀏覽器中加載“http://localhost:3000/posts”。 您現在應該會看到 WordPress 網站上所有帖子的列表：

如果您的帖子沒有出現，請通過關閉終端來終止正在運行的進程。 然後打開一個新窗口並使用更改目錄命令，使終端指向您本地的 Faust.js 項目（例如： cd /Users/username/faust-headless-demo ）。 然後您可以啟動開發服務器 ( npm run dev )，並嘗試刷新“http://localhost:3000/posts”頁面。

結論

許多無頭 WordPress 開發人員選擇使用框架。 但是，當需要預覽您的內容時，許多框架會強制您登錄外部站點或在框架內查看預覽頁面。

Faust.js 旨在提供一致、無縫的預覽體驗。 設置此框架後，您將能夠使用熟悉的 WordPress 工作流程查看您的內容。 您還可以訪問熟悉的 React 和 Node.js 工具集。

您對 Faust.js 框架有任何疑問嗎？ 在下面的評論部分讓我們知道！