تخطَّ إلى المحتوى

Prepr CMS & Astro

هذا المحتوى لا يتوفر بلغتك بعد.

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

Integrating with Astro

Section titled Integrating with Astro

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

Prerequisites

Section titled Prerequisites

To get started, you will need the following:

Setting up credentials

Section titled Setting up credentials

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:

.env
PREPR_ENDPOINT=YOUR_PREPR_API_URL

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

  1. Go to  Settings > Access tokens to view both your Preview and Production access tokens.

  2. Use the API URL value from the GraphQL Production access token to only retrieve published content items for your Astro site.

Configuring the Prepr endpoint

Section titled Configuring the Prepr endpoint

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:

src/lib/prepr.js
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

Section titled Fetching data

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

Create a GraphQL query to retrieve your blog articles:

Section titled Create a GraphQL query to retrieve your blog articles:

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

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

    src/queries/get-articles.js
    const GetArticles = `
    query {
        Articles {
          items {
            _id
            _slug
            title
        }
      }
    }
    `
    export default GetArticles

  3. 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.)

    src/pages/index.astro
    ---
    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

Section titled Creating individual blog post pages

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.

  1. 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:

    src/lib/queries/get-article-by-slug.js
    const GetArticleBySlug = `
    query ($slug: String) {
       Article (slug: $slug) {
         _id
         title
         content {
           __typename
           ... on Text {
             body
             text
           }
           ... on Assets {
             items {
               url
             }
           }
         }
       }
    }`
    

    export default GetArticleBySlug

  2. 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:

    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>

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

Section titled Publishing your site

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

Official Resources

Section titled Official Resources

المزيد من أدلة أنظمة إدارة المحتوى