如何使用 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 框架有任何疑问吗？ 在下面的评论部分让我们知道！