Prepr CMS 和 Astro

Prepr CMS 是一个具有内置个性化功能的无头 CMS。

¥Prepr CMS is a headless CMS with built-in personalization.

与 Astro 集成

¥Integrating with Astro

Prepr CMS 提供 GraphQL API 将你的数据连接到 Astro。

¥Prepr CMS provides a GraphQL API to connect your data to Astro.

先决条件

¥Prerequisites

要开始，你需要以下内容：

¥To get started, you will need the following:

为按需渲染配置的新或现有 Astro 项目。
免费 Prepr 账户
具有现有博客文章的 Prepr 环境。这些帖子必须包含 title 和 content。其他字段为可选。

设置凭据

¥Setting up credentials

要将 Prepr 端点添加到你的 Astro 项目，请在项目的根目录中创建一个 .env file（如果尚不存在），并添加以下变量：

¥To add the Prepr endpoint to your Astro project, create a .env file in the root of your project if one does not already exist and add the following variable:

PREPR_ENDPOINT=YOUR_PREPR_API_URL

你将从 Prepr 账户设置中找到你的 YOUR_PREPR_API_URL 值：

¥You will find your YOUR_PREPR_API_URL value from your Prepr account settings:

Go to Settings > Access tokens to view both your Preview and Production access tokens.
Use the API URL value from the GraphQL Production access token to only retrieve published content items for your Astro site.

配置 Prepr 端点

¥Configuring the Prepr endpoint

创建一个新文件夹 src/lib/ 并添加一个名为 prepr.js 的新文件。这是你将配置 Prepr 端点的地方。添加以下代码以从 Prepr CMS 获取你的数据：

¥Create a new folder src/lib/ and add a new file called prepr.js. This is where you will configure the Prepr endpoint. Add the following code to fetch your data from Prepr CMS:

export async function Prepr(query, variables) {
    const response = await fetch(import.meta.env.PREPR_ENDPOINT, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query, variables }),
    })
    return response
}

你的根目录现在应该包含以下文件：

¥Your root directory should now include these files:

Directorylib/
- prepr.js
Directorysrc/
- …
.env
astro.config.mjs
package.json

获取数据

¥Fetching data

你将通过编写查询来与其 GraphQL API 交互，从而从 Prepr 获取数据。

¥You will fetch your data from Prepr by writing queries to interact with its GraphQL API.

创建 GraphQL 查询以检索你的博客文章：

¥Create a GraphQL query to retrieve your blog articles:

Create a new folder src/queries/ and add a file named get-articles.js.

Add the following query to this file to retrieve all articles:

const GetArticles = `
query {
    Articles {
      items {
        _id
        _slug
        title
    }
  }
}
`
export default GetArticles

To display a linked list of your blog posts on a page, import and execute your query, including the necessary Prepr endpoint. You will then have access to all your posts titles and their slugs to render to the page. (In the next step, you will create individual pages for your blog posts.)

---
import Layout from '../layouts/Layout.astro';
import { Prepr } from '../lib/prepr.js';
import GetArticles from '../queries/get-articles.js';

const response = await Prepr(GetArticles)
const { data } = await response.json()
const articles = data.Articles
---

<Layout title="My blog site">
  <h1>
    My blog site
  </h1>
  <ul>
    {
      articles.items.map((post) => (
        <li>
          <a href={post._slug}>{post.title}</a>
        </li>
      ))
    }
  </ul>
</Layout>

你的根目录应包含这些新文件：

¥Your root directory should include these new files:

Directorylib/
- prepr.js
- Directoryqueries /
  - get-articles.js
Directorysrc/
- …
.env
astro.config.mjs
package.json

创建单独的博客文章页面

¥Creating individual blog post pages

要为每个博客文章创建一个页面，你将在动态路由 .astro 页面上执行新的 GraphQL 查询。此查询将根据其 slug 获取特定文章，并为每个单独的博客文章创建一个新页面。

¥To create a page for each blog post, you will execute a new GraphQL query on a dynamic routing .astro page. This query will fetch a specific article by its slug and a new page will be created for each individual blog post.

Create a file called get-article-by-slug.js in the queries folder and add the following to query a specific article by its slug and return data such as the article title and content:

const GetArticleBySlug = `
query ($slug: String) {
   Article (slug: $slug) {
     _id
     title
     content {
       __typename
       ... on Text {
         body
         text
       }
       ... on Assets {
         items {
           url
         }
       }
     }
   }
}`

export default GetArticleBySlug

Inside the src/pages folder, create a file called […slug].astro. Add the following code to import and execute the query from the previous step and display the retrieved article:

---
import Layout from '../layouts/Layout.astro';
import {Prepr} from '../lib/prepr.js';
import GetArticleBySlug from '../queries/get-article-by-slug.js';

const { slug } = Astro.params;
const response = await Prepr(GetArticleBySlug, {slug})
const { data } = await response.json()
const article = data.Article
---

<Layout title={article.title}>
  <main>
    <h1>{article.title}</h1>
    {
      article.content.map((content) => (
        <div>
          {
            content.__typename === "Assets" &&
            <img src={content.items[0].url} width="300" height="250"/>
          }
          {
            content.__typename === 'Text' &&
            <div set:html={content.body}></div>
          }
        </div>
      ))
    }
  </main>
</Layout>

你的根目录现在应该包含这些新文件：

¥Your root directory should now include these new files:

Directorylib/
- prepr.js
- Directoryqueries/
  - get-articles.js
  - get-article-by-slug.js
Directorysrc/
- Directorypages/
  - index.astro
  - […slug].astro
.env
astro.config.mjs
package.json

现在，当你单击博客文章主列表中的文章链接时，你将被带到一个包含其单独内容的页面。

¥Now, when you click an article link from the main list of blog posts, you will be taken to a page with its individual content.

发布你的网站

¥Publishing your site

要部署你的 Prepr 博客，请访问我们的部署指南并按照你首选的托管服务提供商的说明进行操作。

¥To deploy your Prepr blog, visit our deployment guides and follow the instructions for your preferred hosting provider.

官方资源

¥Official Resources

按照 Prepr CMS Astro 快速入门指南使用 Astro 和 Prepr CMS 创建一个简单的博客。
查看将 Prepr CMS 连接到 Astro 以了解 Astro 和 Prepr CMS 资源的概述。