Prepr CMS 与 Astro

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

与 Astro 集成

Prepr CMS 提供了一个 GraphQL API 来将您的数据连接到 Astro。

先决条件

要开始使用，您需要以下内容

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

设置凭据

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

PREPR_ENDPOINT=YOUR_PREPR_API_URL

您可以在 Prepr 帐户设置中找到您的 YOUR_PREPR_API_URL 值

转到 设置 > 访问令牌 以查看您的预览和生产访问令牌。
使用 GraphQL Production 访问令牌中的 API URL 值，以便仅为您的 Astro 站点检索已发布的内容项。

配置 Prepr 端点

创建一个新文件夹 src/lib/ 并添加一个名为 prepr.js 的新文件。您将在这里配置 Prepr 端点。添加以下代码以从 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
}

您的根目录现在应包含以下这些文件

目录src/
- 目录lib/
  - prepr.js
.env
astro.config.mjs
package.json

获取数据

您将通过编写查询与 Prepr 的 GraphQL API 交互来获取数据。

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

创建一个新文件夹 src/queries/ 并添加一个名为 get-articles.js 的文件。

将以下查询添加到此文件中以检索所有文章

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

要在页面上显示博客文章的链接列表，请导入并执行您的查询，包括必要的 Prepr 端点。然后，您将可以访问所有文章的标题及其 slug 以在页面上渲染。（在下一步中，您将为您的博客文章创建单独的页面。）

---
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>

您的根目录现在应包含以下这些新文件

目录src/
- 目录lib/
  - prepr.js
- 目录pages/
  - index.astro
- 目录queries /
  - get-articles.js
.env
astro.config.mjs
package.json

创建独立的博客文章页面

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

在 queries 文件夹中创建一个名为 get-article-by-slug.js 的文件，并添加以下内容以按其 slug 查询特定文章并返回文章的 title 和 content 等数据

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

export default GetArticleBySlug

在 src/pages 文件夹中，创建一个名为 […slug].astro 的文件。添加以下代码以导入并执行上一步中的查询，并显示检索到的文章

---
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>

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

目录src/
- 目录lib/
  - prepr.js
- 目录pages/
  - index.astro
  - […slug].astro
- 目录queries/
  - get-articles.js
  - get-article-by-slug.js
.env
astro.config.mjs
package.json