Astro 是一个现代前端框架，可帮助开发人员快速、高效地构建静态网站。借助 Astro，开发人员可以利用 React、Vue.js 和 Svelte 等现代 JavaScript 框架的强大功能来创建动态用户界面，同时在构建过程中生成静态 HTML、CSS 和 JavaScript 文件。
当与作为无头内容管理系统（CMS）的 WordPress 相结合时，Astro 可以实现后台 API 和前端代码的无缝集成，从而高效地开发具有动态内容的静态网站。这种方法有几个好处。
使用 Astro 和 WordPress 后端生成的静态网站具有卓越的性能。它们可以直接从内容交付网络（CDN）提供服务，无需服务器端处理，从而加快了加载速度，带来更流畅的用户体验。
本教程将指导您使用静态网站托管服务托管的 Astro 和 WordPress 后端来建立静态网站。
WordPress 作为无头内容管理系统的作用
像WordPress这样的无头内容管理系统将内容管理和交付层分开。它可以让后台维护内容，而由不同的系统（如 Astro）处理前台。
WordPress 充当内容存储库，向前端提供数据，而前端则通过 API 向用户显示内容。这种架构可以将内容重新用于多种输出，从而提高灵活性，为 WordPress 用户提供熟悉的内容管理体验。
前端与后端分离也为前端设计和内容迁移提供了更大的灵活性。此外，通过应用程序接口（API）实现可访问性还能保护内容的未来性。
设置开发环境
您必须遵循三个步骤来设置环境：
前提条件
要学习本教程，请确保您具备以下条件：
- 对 HTML、CSS 和 JavaScript 有基本了解
- 计算机上安装了 Node.js 和 npm（Node 包管理器）或 yarn
- Kinsta 账户。注册以免费托管一个静态网站，并访问 MyKinsta 面板。
安装 Astro
npm create astro@latest
此步骤会产生配置提示。请根据需要进行设置。
配置新 Astro 项目的说明。
npm run dev 在 http://localhost:4321/ 上启动本地开发服务器。
Astro 安装成功。建立 WordPress 网站
以 Kinsta 为例，请按照以下步骤在 Kinsta 上创建 WordPress 网站。
创建 WordPress 暂存环境
在 Kinsta 安装的每个 WordPress 都可以选择建立一个独立于实际生产网站的免费暂存环境。这非常适合测试新的 WordPress 版本、插件、代码和一般开发工作。
在 Kinsta 上创建 WordPress 暂存环境的步骤如下。
WordPress 暂存环境。
成功创建暂存环境。
将 WordPress 与 Astro 集成
将 WordPress 与 Astro 集成有两种主要方法：REST API 和 GraphQL。本指南使用 GraphQL 方法。
要将 WordPress 与 Astro 集成，您必须：
- 安装 WPGraphQL。
- 将 Astro 连接到 WordPress。
安装 WPGraphQL
首先，在 WordPress 网站上安装 WPGraphQL 插件，然后再使用 GraphQL 将 Astro 连接到该网站。
网站信息页面。
安装 WPGraphQL 插件。{
posts {
nodes {
slug
excerpt
title
}
}
}
该 GraphQL 查询可有效地检索 WordPress 网站中文章的slugs, excerpts, 和 titles 。
运行 GraphQL 查询。
在 GraphiQL IDE 的左侧，您可以看到通过运行 GraphQL 查询返回的帖子列表。你的 WordPress GraphQL 端点可通过 https://your_wordpress_staging_url/graphql 访问。
注：确保在完成所有测试并对网站的性能和功能感到满意后，将 WordPress 网站从暂存环境推送到实时环境。
将 Astro 连接到 WordPress
要将 Astro 连接到 WordPress，请按照以下说明操作：
https://your_wordpress_staging_url/graphql 替换为您的 WordPress 暂存 URL。
interface gqlParams {
query: String;
variables?: object;
}
export async function wpquery({ query, variables = {} }: gqlParams) {
const res = await fetch('https://your_wordpress_staging_url/graphql', {
method: "post",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
query,
variables,
}),
});
if (!res.ok) {
console.error(res);
return {};
}
const { data } = await res.json();
return data;
}
这段代码定义了一个接口 gqlParams 和一个异步函数 wpquery ，以方便对 WordPress 网站进行 GraphQL 查询。
使用 Astro 和 WordPress 开发网站
---
import Layout from "../layouts/Layout.astro";
import { wpquery } from "../graphql/wordPressQuery";
const data = await wpquery({
query: `
{
posts{
nodes{
slug
excerpt
title
}
}
}
`,
});
---
<Layout title="Astro-WordPress Blog Posts">
<main>
<h1><span class="text-gradient">Blog Posts</span></h1>
{
data.posts.nodes.map((post: any) => (
<>
<h2 set:html={post.title} />
<p set:html={post.excerpt} />
</>
))
}
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1rem;
width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
}
</style>
这段代码演示了如何使用 wpquery 函数使用 GraphQL 从 WordPress 网站获取数据，并将其呈现在 Astro 网站上。
npm run dev 启动本地开发服务器，并在 Astro 网站上查看最新的 WordPress 博客文章，网址是 http://localhost:4321/blog。
Astro 项目显示 WordPress 文章。要处理单个博客文章的动态路由，您需要结合使用 Astro 的动态路由和 WordPress GraphQL 的查询变量。通过将文章 ID 或标题作为查询变量，您可以动态生成每篇博客文章的页面内容。这样，您就可以在网站上获得更加个性化的用户体验。
在 Kinsta 上部署静态网站
现在，将代码推送到您喜欢的 Git 提供商（Bitbucket、GitHub 或 GitLab）。然后，按照以下步骤将静态网站部署到 Kinsta：
https://your_kinsta_site_url/blog 访问博客文章。小结
使用 Astro 和 WordPress 可以做更多事情。WordPress API 可用于访问网站中的各种数据，并与 Astro 一起创建独特的用例。
您对无头 WordPress 和 Astro 有什么看法？您探索过它们在创建独特解决方案方面的潜力吗？请在下面的评论区分享您的经验。
