无头 WordPress & Astro
WordPress 是一个内容管理系统，它包含自己的前端，但也可以用作无头 CMS，为你的 Astro 项目提供内容。
与 Astro 集成
名为“与 Astro 集成”的章节WordPress 自带一个内置的 WordPress REST API，用于将你的 WordPress 数据连接到 Astro。你也可以选择在你的网站上安装 WPGraphQL 或 Gato GraphQL 来使用 GraphQL。
先决条件
名为“先决条件”的章节要开始，你需要具备以下条件
- 一个 Astro 项目 - 如果你还没有 Astro 项目，我们的安装指南将帮助你快速启动并运行。
- 一个 WordPress 网站 - 你的网站的 REST API 地址是
[YOUR_SITE]/wp-json/wp/v2/，在任何 WordPress 网站上都默认可用。你也可以在本地环境上搭建 WordPress。
设置凭据
名为“设置凭据”的章节默认情况下，你的 WordPress REST API 可用于外部请求获取数据，无需身份验证。这不允许用户修改你的数据或网站设置，并允许你在 Astro 项目中使用你的数据而无需任何凭据。
如果需要，你可以选择要求身份验证。
获取数据
名为“获取数据”的章节通过你网站唯一的 REST API URL 和你的内容路由来获取 WordPress 数据。（对于博客来说，这通常是 posts。）然后，你可以使用 Astro 的 set:html={} 指令来渲染你的数据属性。
例如，要显示文章标题及其内容的列表
---const res = await fetch("https://[YOUR-SITE]/wp-json/wp/v2/posts");const posts = await res.json();---<h1>Astro + WordPress 🚀</h1>{ posts.map((post) => ( <h2 set:html={post.title.rendered} /> <p set:html={post.content.rendered} /> ))}WordPress REST API 包含诸如 _fields 和 _embed 之类的全局参数。
通过此 API 可以获取大量数据，因此你可能只想获取某些字段。你可以通过向 API URL 添加 _fields 参数来限制响应，例如：[YOUR-SITE]/wp/v2/posts?_fields=author,id,excerpt,title,link
该 API 还可以返回与你的文章相关的内容，例如指向父文章的链接或文章评论的链接。你可以向 API URL 添加 _embed 参数（例如 [YOUR-SITE]/wp/v2/posts?_embed），以向服务器表明响应应包含这些嵌入式资源。
使用 WordPress 和 Astro 构建博客
名为“使用 WordPress 和 Astro 构建博客”的章节此示例从 https://norian.studio/dinosaurs/ 的公共 WordPress API 获取数据。这个 WordPress 网站将有关单个恐龙的信息存储在 dinos 路由下，就像博客会将单个博客文章存储在 posts 路由下一样。
此示例展示了如何在 Astro 中重现此网站结构：一个索引页面，列出所有恐龙，并带有指向动态生成的单个恐龙页面的链接。
显示 WordPress 文章列表
名为“显示 WordPress 文章列表”的章节src/pages/index.astro 页面列出了每只恐龙，并附有描述和指向其各自页面的链接。
目录src/
目录pages/
- index.astro
目录dinos/
- [slug].astro
- astro.config.mjs
- package.json
通过 API 获取会返回一个包含以下属性的对象
title.rendered- 包含文章标题的 HTML 渲染结果。content.rendered- 包含文章内容的 HTML 渲染结果。slug- 包含文章的 slug。（这提供了指向动态生成的单个恐龙页面的链接。）
---import Layout from "../layouts/Layout.astro";
let res = await fetch("https://norian.studio/wp-json/wp/v2/dinos");let posts = await res.json();---<Layout title="Dinos!"> <section> <h1>List of Dinosaurs</h1> { posts.map((post) => ( <article> <h2> <a href={`/dinos/${post.slug}/`} set:html={post.title.rendered} /> </h2> <Fragment set:html={post.content.rendered} /> </article> )) } </section></Layout>使用 WordPress API 生成页面
名为“使用 WordPress API 生成页面”的章节src/pages/dinos/[slug].astro 页面为每只恐龙动态生成一个页面。
---import Layout from '../../layouts/Layout.astro';
const { slug } = Astro.params;
let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}`);let [post] = await res.json();
// The getStaticPaths() is required for static Astro sites.// If using SSR, you will not need this function.export async function getStaticPaths() { let data = await fetch("https://norian.studio/wp-json/wp/v2/dinos"); let posts = await data.json();
return posts.map((post) => ({ params: { slug: post.slug }, props: { post: post }, }));}---<Layout title={post.title.rendered}> <article> <h1 set:html={post.title.rendered} /> <Fragment set:html={post.content.rendered} /> </article></Layout>返回嵌入式资源
名为“返回嵌入式资源”的章节_embed 查询参数指示服务器返回相关的（嵌入式）资源。
---const { slug } = Astro.params;
let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}&_embed`);let [post] = await res.json();---返回 _embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url 属性，可用于在每个恐龙页面上显示特色图片。（将 medium 替换为你想要的图片尺寸。）
<Layout title={post.title.rendered}> <article> <img src={post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url} /> <h1 set:html={post.title.rendered} /> <Fragment set:html={post.content.rendered} /> </article></Layout>发布你的站点
名为“发布你的网站”的章节要部署你的网站，请访问我们的部署指南，并按照你首选的托管提供商的说明进行操作。
社区资源
名为“社区资源”的章节- 使用 WordPress 作为无头 CMS 构建 Astro 网站，作者 Chris Bongers。
- 使用 Astro x WordPress 构建，Ben Holmes 的直播。
- 使用 Astro 构建无头 WordPress 网站，作者 Jeff Everhart。
- Astro 与作为 API 的 WordPress，作者 Darko Bozhinovski。
生产站点
名为“生产环境中的网站”的章节以下网站在生产环境中使用 Astro + WordPress
- Dinos!，作者 Anindo Neel Dutta — GitHub 上的源代码
