使用WordPress和Frontity构建无头博客

WBOLT_COM 3 月 30, 2024 84 0

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 数据

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",
},
},
//…
};

如果重新启动服务器，就可以查看更改：

Frontity 网站更新了页眉

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,
},
},
},
},
//…
};

您网站的菜单现在应该是这样的：

已更新菜单链接的 Frontity 网站

您可以拥有的页面数量不受限制。您甚至可以添加类别或标签！

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 背景更新为绿色

将 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）：