使用 Frontity 创建无头 WordPress 网站

Frontity 是一个专注于 WordPress 的基于 React 的服务器端动态渲染框架（哇！），它允许我们创建快速、无头的网站。Chris 有一篇 关于 Frontity 的很好的介绍。我想你可以把它想象成 WordPress 的 Next.js。虽然 目前对无头 WordPress 网站的需求可能是一个利基市场，但 Frontity 的 展示页面 表明人们对它充满了期待。

Frontity 的 文档、教程 和 指南 重点介绍了如何创建无头的博客网站，其展示页面列出了 60 多个网站，包括 CNBC Africa、Forbes Africa、Hoffmann Academy、Aleteia、Diariomotor 等。在该列表中，五个无头 WordPress 网站入选为 生产级展示案例研究。

• 

• 

• 

• 

Frontity 的官方网站本身就是一个 非常有趣的生产级用例，它演示了如何成功地将 WordPress 块编辑器链接到 Frontity 的框架。

因此，我将在本文中逐步引导您完成创建 Frontity 网站的步骤，然后在另一篇文章中介绍如何使用和自定义 Frontity 的默认 Mars 主题。我们将从这篇文章开始，在这里我们将介绍在 Frontity 框架上设置无头 WordPress 网站的基础知识。

这不是一个专家指南，而是一个无头 WordPress 网站爱好者学习 Frontity 体验的旅程。有关更详细和权威的指南，请参阅 Frontity 文档。frontity 文档。

先决条件和要求

因为 Frontity 是一个基于 React 的框架，所以我建议您具备 React 和 JavaScript（包括 ES6 特性）的基本知识。Frontity 的 教程文档 详细介绍了一些其他要求，包括

• 精通 HTML 和 CSS
• 使用命令行的经验
• 一个 node.js 服务器
• 当然，还有一个代码编辑器

准备好了吗？让我们开始吧！

首先，让我们了解 Frontity

Chris 已经在这里解释了什么是 Frontity 以及它是如何工作的。Frontity 是一个专注于 WordPress 且有自己观点的 React 框架，它拥有自己的 状态管理器 和 CSS 样式解决方案。最近更新的 Frontity 架构 描述了 Frontity 项目如何在 解耦模式 或 嵌入模式 下运行。

在 解耦模式（见下文）中，Frontity 从 WordPress PHP 服务器获取 REST API 数据，并将最终 HTML 返回给用户作为 同构 React 应用（用于自定义主题）。在此模式下，主域名指向 Frontity，而子域名指向 WordPress 网站。

在 嵌入模式 中，Frontity 主题包（一个同构 React 应用）通过一个必需的 Frontity 嵌入模式插件 替换 WordPress PHP 主题。该插件向 Frontity/Node.js 服务器发出内部 HTTP 请求以检索 HTML 页面。在此模式下，主域名指向 WordPress，网站访问者和内容编辑器都使用相同的域名，而 Frontity 使用辅助域名（即子域名）。

Frontity 的内置 AMP 功能生成简化版的 HTML 页面，以实现更快的服务器端渲染，从而克服了多个 WordPress 请求。它提供了一种更动态的静态站点体验，速度快且具有内置的 服务器扩展性，可以通过 无服务器预渲染（SPR）（也称为 stale-while-revalidate 缓存）技术通过 KeyCDN 和 StackPath 进一步改进。

有关 Frontity 模式，请参阅 Frontity 架构文档。

Frontity 网站安装

要启动我们的项目，我们需要安装一个 Frontity 项目网站和一个用于数据源端点的 WordPress 安装。在以下部分，我们将学习如何设置我们的 Frontity 网站并将其连接到我们的 WordPress 安装。 Frontity 快速入门指南 是一个非常方便的分步指南，以下指南允许我们设置我们的 Frontity 项目。

首先，检查您的机器上是否已安装 Node.js 和 npm。如果没有，请下载并安装它们。

#! check node -- version
node --version
V14.9.0 #! output if installed
#! check npm version
npm --version
6.14.7  #! output if installed
#! to upgrade npm to latest version
npm install npm@latest -g

步骤 1：创建 Frontity 项目

让我们使用 Frontity CLI 运行以下命令来创建一个新的my-frontity项目。

### creating a frontity project
npx frontity create my-frontity

以上代码产生以下输出。

步骤 2：选择 Frontity mars-theme 主题

Frontity 提供了两个主题，twentytwenty-theme 和 mars-theme。对于初学者，Frontity 建议选择 mars-theme 并提供以下输出

如果您回答了电子邮件提示，则应输入有效的电子邮件地址。我发现第一次输入电子邮件很有用，这样我就可以与 Frontity 开发人员保持联系，但此后我没有发现任何用处。

步骤 3：Frontity 项目安装

Frontity 服务器安装项目及其依赖项。如果安装成功，则应显示以下输出

步骤 4：更改目录并重新启动开发服务器

要进入项目文件夹，请使用以下命令更改目录并启动服务器以查看新创建的项目

### change dir to project folder
cd my-frontity

Frontity 开发服务器可以使用以下命令启动

### start development server with npx
npx frontity dev

### starting dev server with yarn
yarn frontity dev

当开发服务器成功完成时，可以在https://#:3000查看项目，并且浏览器中应显示以下屏幕

以上截图显示了一个使用 mars 主题完成的 Frontity 支持的 WordPress 网站前端。该网站尚未连接到我们自己的网站，我们将在下一节中讨论。

第 2 节：WordPress 网站安装

我们需要一个 WordPress 网站作为我们的数据源。我们可以使用已安装的网站，也可以在您的本地机器上安装一个新的测试网站。对于这个项目，我在我的机器上使用 Local 安装了最新版本的 WordPress，并导入了 主题测试数据，其中也包含了块编辑器样式的测试数据。

在最近的 WordPress 版本中，WordPress REST API 已内置到 WordPress 核心，因此我们可以通过在网站 URL 后附加 /wp-json 来检查它是否公开扩展了我们的 wp-content 数据（例如 http//mytestsite.local/wp-json）。这应该会以 JSON 格式返回内容。然后我们就可以继续进行下一步了。

选择永久链接

Frontity 在我们的 WordPress 安装中所需的另一个条件是，需要在**设置 > 永久链接**中激活永久链接（文章名称）。

第 3 节：将 Frontity 项目连接到 WordPress

要将我们的 WordPress 网站连接到 Frontity 项目，我们应该更新 frontity.settings.js 文件

// change source URL in frontity.settings.js
const settings = {
  ...,
  packages: [
    ...,
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          // Change this url to point to your WordPress site.
          api: "http://frontitytest.local/wp-json"
        }
      }
    }
  ]
}

请注意，在更新到我们 WordPress 安装的 URL 时，我们需要将 state.source 对象名称从 url 更改为 api（上面突出显示），并保存我们更新后的文件。重新启动开发服务器，我们将看到 Frontity 网站现在已连接到我们自己的 WordPress 网站。

在上面的截图中，您会注意到菜单项（自然、旅行、日本、关于我们）仍然显示在 Frontity 演示网站中，我们将在下一步中修复此问题。

步骤 1：在 Frontity 网站中更新我们的菜单

WordPress 将菜单项视为私有自定义帖子类型，只有登录 WordPress 的用户才能看到。在 WordPress REST-API 版本 2 发布之前，菜单项不会作为可见端点公开，但可以使用 WP-REST-API V2 菜单 插件扩展已注册的菜单。

由于菜单项很少更改，Frontity Mars 主题 的菜单项通常在 frontity.settings.js 文件中进行硬编码，以存储为状态，然后导出到 index.js 文件。对于这个演示项目，我创建了 WordPress 网站菜单，如 Frontity Mars 主题中使用类别和标签所述。

接下来，让我们根据 Frontity Mars 主题 中的描述，将我们的菜单项添加到 frontity-settings.js 文件中。

// add menu items in frontity-settings.js
{
  name: "@frontity/mars-theme",
  state: {
    theme: {
      menu: [
        ["Home", "/"],
        ["Block", "/category/block/"],
        ["Classic", "/category/classic/"],
        ["Alignments", "/tag/alignment-2/"],
        ["About", "/about/"]
      ],
      featured: {
        showOnList: true,
        showOnPost: true
      }
    }
  }
},

让我们像之前一样保存更新并重新启动开发服务器。我们应该能够在标题部分看到来自我们自己网站的菜单项（块、经典、对齐、关于）。

第 13-16 行定义了我们是否希望在列表（例如索引页面）或帖子（例如单个页面）上显示特色图片。

步骤 2：Frontity 项目文件夹结构

我们的 Frontity 演示 项目（我们将项目文件夹名称从 my-frontity 更改）应该包含两个文件，package.json 和 frontity.settings.js，以及 node_modules/ 和 packages/mars-theme 文件夹。

### File structure
frontity-demo/
|__ node_modules/
|__ package.json
|__ frontity.settings.js
|__ favicon.ico
|__ packages/
    |__ mars-theme/

根据 Frontity 文档 中的描述，对文件/文件夹进行简要说明

• node_modules：安装 Frontity 项目依赖项的位置（不应修改）。
• packages/：安装了 mars-theme 的文件夹。主题文件夹包含 src 文件夹，其中包含自定义包，以及可能来自 Frontity 的一些核心包，可以根据需要进行编辑和自定义。Frontity 中的所有内容都是一个包。
• frontity.setiings.js：这是最重要的文件，其中已填充了应用程序的基本设置。当前这些设置是 Frontity 默认设置，但可以在此文件中配置任何所需的设置和扩展。例如，数据源 URL（例如 WordPress 网站 URL）以及运行项目所需的 包 和库在 Frontity 状态 包下定义。
• package.json：声明应用程序工作所需的依赖项的文件。

我们将在以后的文章中详细介绍 Frontity 主题包和其他依赖项，因为它们需要更深入的解释。

步骤 3：修改样式

Frontity 使用流行的 CSS-in-JS 库 Emotion 为其组件设置样式。Frontity 的默认 mars 主题使用来自 @emotion/syled 的 样式化组件 进行样式设置。样式化组件与 CSS 非常相似。在后面的其他部分，我们将深入探讨 设置 Frontity 项目样式，并以修改整个 mars 主题样式的用例示例为例。

现在，让我们快速演示一下如何更改网站标题和描述的颜色。标题和描述样式在 header.js 组件底部的 Title 和 Description 样式化组件中定义。现在，让我们将标题颜色更改为黄色，将描述颜色更改为某种青绿色（左侧面板）。我们看到更改反映在我们的网站标题中。

第 4 节：将网站部署到 Vercel

Frontity 列出了三个流行的托管服务提供商，用于托管 Frontity 项目，包括 Vercel、Moovweb XDN 和 Heroku。但是，在实践中，大多数 Frontity 项目似乎都托管在 Vercel 上，正如 Chris 所写，“它与 Vercel 完美匹配”。Frontity 强烈推荐 Vercel，并准备了一个方便的 分步部署 指南。

步骤 1：创建 Frontity 项目的生产版本

在开发 Frontity 项目时，我们使用 npx frontity dev 命令进行开发。为了部署，我们应该从 Frontity 项目的根目录创建项目的生产版本。

#! create production version of project
npx frontity build

这将 创建一个构建文件夹，“包含我们的 Frontity 项目（同构）React 应用程序和 Frontity（Node.js）服务器，并且内容将被 npm frontity serve 命令使用。”

步骤 2：在 Vercel 上创建一个帐户

首先，我们应该按照此 注册表单 创建一个 Vercel 帐户，我们可以使用我们的 GitHub 凭据进行操作。我们应该从终端中的 Frontity 项目根文件夹登录

#! login to vercel
npx vercel login

步骤 3：创建 vercel.json 文件

要将我们的站点部署到 Vercel，我们需要在项目根目录下放置以下 vercel.json 文件

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@frontity/now"
    }
  ]
}

步骤 4：部署到 Vercel

最后，让我们使用项目文件夹根目录下的 vercel 命令 部署我们的项目

#! deployment vercel
npx vercel

接下来，我们会收到一些简短的与部署相关的提问

总结

如果您一直在阅读我关于使用 Gatsby 框架构建 WordPress 无头站点的其他文章，我有一个令人钦佩但令人沮丧的体验，主要是因为我作为一人团队学习和维护高级框架的技术技能有限。然后，我在阅读CSS-Tricks 上的一篇文章时偶然发现了Frontity React 框架。

正如我们从本文和Chris 的文章中了解到的那样，考虑到所有因素，使用 Frontity 创建一个 WordPress 无头站点非常简单。我对其简单的设置和简化的 UI 印象深刻，而且它似乎是技术水平较低的用户更好的选择。例如，您无需编写任何查询即可获取所有 WordPress 内容。

在后续文章中，我们将深入探讨默认的Frontity Mars 主题，并学习如何对其进行自定义以使其成为我们自己的主题。

鸣谢与资源

• Frontity，一个用于创建 WordPress 主题的 React 框架（Frontity 博客）
• 使用 Frontity 和 WordPress 构建博客（Frontity 博客）
• Frontity 框架入门（YouTube 视频）