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-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）、软件包和运行网站所需的库。
- 要将 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” } } } ] } - 由于网站现在将使用 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。
评论留言