用Frontity创建一个无头的WordPress网站

先决条件和要求

因为Frontity是一个基于React的框架，我建议你有React的工作知识，以及具有ES6特性的JavaScript。Frontity的教程文档详细介绍了一些额外的要求，包括：

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

准备好了吗？我们开始吧

首先，让我们了解一下Frontity

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

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

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

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

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提供了两个主题：twenty-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

当开发服务器成功完成后，可以在http://localhost:3000 ，并应在浏览器中显示以下屏幕，查看该项目。

上面的截图显示了一个已经完成的Frontity驱动的WordPress网站前端的mars-theme。该网站还没有连接到我们自己的网站，我们将在下一节讨论。

第2节：WordPress网站的安装

我们需要一个WordPress站点作为我们的数据源。我们可以使用一个已经安装好的站点，或者在你的本地机器上安装一个新的测试站点。在这个项目中，我在我的机器上安装了最新版本的WordPress，有本地和导入的主题测试数据，其中也包括块状编辑器样式的测试数据。

在最近的WordPress版本中，WordPress的REST API是直接内置于WordPress核心的，所以我们可以通过在我们的网站URL上添加/wp-json （例如：http//mytestsite.local/wp-json ）来检查它是否公开扩展我们的wp-content 数据。这应该会以JSON格式返回内容。然后我们就可以继续了。

选择漂亮的permalinks

Frontity在我们的WordPress安装中需要的另一个条件是，漂亮的permalinks（文章名称）需要在设置>Permalinks中被激活。

第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演示站点上，我们将在下一步中解决这个问题。

第一步：在Frontity网站上更新我们的菜单

WordPress把菜单项当作私人的自定义帖子类型，只有登录了WordPress的人才能看到。在WordPress REST-API第二版发布之前，菜单项不会作为可见的端点暴露出来，但注册的菜单可以使用WP-REST-API V2菜单插件进行扩展。

因为菜单项不经常改变，Frontity Mars主题的菜单项经常被硬编码在frontity.settings.js 文件中，作为状态存储，然后导出到index.js 文件。对于这个演示项目，我按照frontity Mars主题中描述的分类和标签创建了WordPress网站菜单。

接下来，让我们按照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
      }
    }
  }
},

让我们保存我们的更新并像以前一样重新启动开发服务器。我们应该可以在标题部分看到我们自己网站的菜单项（Block, Classic, Alignment, About）。

第13-16行定义我们是想在列表（如索引页）还是在帖子（如单页）上显示特色图片。

第2步：Frontity项目的文件夹结构

我们的 frontity-demo项目（我们把项目文件夹名称从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主题包和其他依赖项，因为它们需要更深入的解释。

第三步：修改样式

Frontity使用流行的CSS-in-JS库Emotion为其组件设计样式。Frontity的默认mars-theme是用@emotion/syled提供的styled组件来设计的。样式化的组件与CSS非常相似。在后面的章节中，我们将深入探讨frontity项目的样式，以及修改整个mars-theme的样式的用例。

现在让我们做一个快速示范，改变我们网站标题和描述的颜色。标题和描述的样式在header.js 组件的底部被定义为标题和描述的样式组件。现在让我们把标题的颜色改为黄色，把描述的颜色改为某种水蓝色（左侧面板）。我们看到这些变化反映在我们的网站标题上。

第4节：将网站部署到Vercel上

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

第一步：创建一个生产版本的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网站是相当简单的，所有的事情都是如此。我对它的简单设置、精简的用户界面印象深刻，另外它似乎是不太懂技术的用户的一个更好的选择。例如，你不用写一个查询就可以得到所有的WordPress内容。

在后续文章中，我们将对默认的Frontity Mars主题进行深入研究，并学习如何定制它，使之成为我们自己的主题。