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 为例）配置本地安装。
为了正常运行，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-app
您可以根据自己的项目选择不同的名称来替换 my-app。
Frontity 提供两种主题： mars-theme 和 twentytwenty-theme。选择推荐的主题完成项目设置。
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）、软件包和运行网站所需的库。
/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”
}
}
}
]
}
state.source 对象名称从 url 改为 api。
注：热重载对 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 网站，然后从菜单中删除指向其他页面的链接：
下一步是配置菜单。
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）：
部署过程可能需要一分钟。部署完成后，Kinsta 会为您的网站提供一个 URL。单击 “Visit App” 查看您的托管网站。
小结
如果您想快速创建博客，使用传统的 WordPress 可能就足够了。不过，如果你想创建自定义博客而不受主题或插件的限制，不妨试试 Frontity。
