컨텐츠로 건너뛰기

Prepr CMS & Astro

Prepr CMS는 개인화 기능이 내장된 헤드리스 CMS입니다.

Prepr CMS는 데이터를 Astro에 연결하기 위한 GraphQL API를 제공합니다.

시작하려면 다음이 필요합니다.

Astro 프로젝트에 Prepr 엔드포인트를 추가하려면 프로젝트 루트에 .env 파일이 없는 경우 이를 생성하고 다음 변수를 추가하세요.

.env
PREPR_ENDPOINT=YOUR_PREPR_API_URL

Prepr 계정 설정에서 YOUR_PREPR_API_URL 값을 확인할 수 있습니다.

  1. Settings > Access tokens로 이동하여 미리보기 및 프로덕션 액세스 토큰을 모두 확인하세요.

  2. Astro 사이트에 게시된 콘텐츠 항목만 검색하려면 GraphQL Production 액세스 토큰의 API URL 값을 사용하세요.

새 폴더 src/lib/를 만들고 prepr.js라는 새 파일을 추가합니다. 여기에서 Prepr 엔드포인트를 구성합니다. 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
}

이제 루트 디렉터리에 다음 파일이 포함되어야 합니다.

  • 디렉터리lib/
    • prepr.js
  • 디렉터리src/
  • .env
  • astro.config.mjs
  • package.json

GraphQL API와 상호 작용하는 쿼리를 작성하여 Prepr에서 데이터를 가져옵니다.

GraphQL 쿼리를 생성하여 블로그 아티클을 검색합니다.

섹션 제목: GraphQL 쿼리를 생성하여 블로그 아티클을 검색합니다.
  1. src/queries/라는 새 폴더를 만들고 get-articles.js라는 파일을 추가합니다.

  2. 모든 아티클을 검색하려면 이 파일에 다음 쿼리를 추가합니다.

    src/queries/get-articles.js
    const GetArticles = `
    query {
    Articles {
    items {
           _id
            _slug
            title
    }
    }
    }
    `
    export default GetArticles
  3. 블로그 게시물의 링크된 목록을 페이지에 표시하려면 필요한 Prepr 엔드포인트를 포함한 쿼리를 가져와 실행하세요. 그러면 모든 게시물 제목과 해당 슬러그에 액세스하여 페이지에 렌더링할 수 있습니다. (다음 단계에서는 블로그 게시물에 대한 개별 페이지를 생성합니다.)

    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>

루트 디렉터리에는 다음과 같은 새 파일이 포함되어야 합니다.

  • 디렉터리lib/
    • prepr.js
    • 디렉터리queries /
      • get-articles.js
  • 디렉터리src/
  • .env
  • astro.config.mjs
  • package.json

개별 블로그 게시물 페이지 생성

섹션 제목: 개별 블로그 게시물 페이지 생성

각 블로그 게시물에 대한 페이지를 생성하려면 동적 라우팅 .astro 페이지에서 새 GraphQL 쿼리를 실행합니다. 이 쿼리는 슬러그를 통해 특정 아티클을 가져오고 개별 블로그 게시물에 대해 새 페이지가 생성됩니다.

  1. queries 폴더에 get-article-by-slug.js라는 파일을 만들고 다음을 추가하여 해당 슬러그로 특정 아티클을 쿼리하고 아티클의 titlecontent와 같은 데이터를 반환합니다.

    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. src/pages 폴더에 [...slug].astro 파일을 생성합니다. 다음 코드를 추가하여 이전 단계에서 쿼리를 가져와 실행하여 검색된 아티클을 표시합니다.

    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>

이제 루트 디렉터리에 다음과 같은 새 파일이 포함되어야 합니다.

  • 디렉터리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 블로그를 배포하려면 배포 가이드를 방문하여 선호하는 호스팅 제공업체의 지침을 따르세요.

더 많은 CMS 안내서

기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티