Prepr CMS & Astro
Prepr CMS 是一个内置个性化功能的无头 CMS。
与 Astro 集成
段落标题 与 Astro 集成Prepr CMS 提供了一个 GraphQL API 来将你的数据连接到 Astro。
前提条件
段落标题 前提条件要开始使用,你需要具备以下条件:
- 一个新的或现有的配置为 按需渲染 的 Astro 项目。
- 一个免费的 Prepr 账号
- 一个包含现有博客帖子的 Prepr 环境。这些帖子必须包含
title
和content
。其他字段是可选的。
设置凭证
段落标题 设置凭证要将 Prepr 端点添加到你的 Astro 项目中,请在项目的根目录创建一个 .env 文件
(如果还没有的话),并添加以下变量:
你可以从你的 Prepr 账号设置中找到你的 YOUR_PREPR_API_URL
值:
-
前往 Settings (设置) > Access tokens (访问令牌) 查看你的预览和生产访问令牌。
-
使用来自 GraphQL Production 访问令牌的 API URL 值,仅检索你的 Astro 站点已发布的内容项。
配置 Prepr 端点
段落标题 配置 Prepr 端点创建一个新的文件夹 src/lib/
并添加一个名为 prepr.js
的新文件。这是你将配置 Prepr 端点的地方。添加以下代码以从 Prepr CMS 获取你的数据:
你的根目录现在应该包含这些文件:
文件夹lib/
- prepr.js
文件夹src/
- …
- .env
- astro.config.mjs
- package.json
获取数据
段落标题 获取数据你将通过编写查询来与 Prepr 的 GraphQL API 交互来从 Prepr 获取数据。
创建一个 GraphQL 查询来检索你的博客文章:
段落标题 创建一个 GraphQL 查询来检索你的博客文章:-
创建一个新的文件夹
src/queries/
并添加一个名为get-articles.js
的文件。 -
在这个文件中添加以下查询来检索所有文章:
-
要在页面上显示你的博客文章的链接列表,请导入并执行你的查询,包括必要的 Prepr 端点。这样,你就可以访问所有文章的标题和它们的 slugs,并将它们渲染到页面上。(在下一步中,你将为你的博客文章创建独立的页面。)
你的根目录应该包含这些新文件:
文件夹lib/
- prepr.js
文件夹queries /
- get-articles.js
文件夹src/
- …
- .env
- astro.config.mjs
- package.json
创建独立的博客文章页面
段落标题 创建独立的博客文章页面为了为每篇博客文章创建一个页面,你将在一个使用动态路由的 .astro
页面上执行一个新的 GraphQL 查询。这个查询将通过其 slug 获取一个特定的文章,并为每篇独立的博客文章创建一个新页面。
-
在
queries
文件夹中创建一个名为get-article-by-slug.js
的文件,并添加以下内容来查询一个特定文章的 slug,并返回诸如文章的title
和content
等数据:你可以在 Prepr 中使用 Apollo explorer 创建并测试 GraphQL 查询。从 Prepr 的 文章 内容项页面打开 API Explorer。 文章内容存储在一个动态内容字段中。查看 GraphQL 文档以获取更多关于如何获取此字段内的数据的详情。
-
在
src/pages
文件夹中,创建一个名为[…slug].astro
的文件。添加以下代码来导入并执行上一步的查询,并展示检索到的文章:
你的根目录现在应该包含这些新文件:
文件夹lib/
- prepr.js
文件夹queries/
- get-articles.js
- get-article-by-slug.js
文件夹src/
文件夹pages/
- index.astro
- […slug].astro
- .env
- astro.config.mjs
- package.json
现在,当你从博客文章的主列表中点击一篇文章的链接时,你将被带到一个展示其独立内容的页面。
发布你的网站
段落标题 发布你的网站要部署你的 Prepr 博客,请访问我们的部署指南并按照你偏好的托管提供商的说明进行操作。
官方资源
段落标题 官方资源- 按照 Prepr CMS Astro 快速开始 指南,使用 Astro 和 Prepr CMS 创建一个简单的博客。
- 查看 将 Prepr CMS 连接到 Astro 来了解 Astro 和 Prepr CMS 相关资源。