Prepr CMS & Astro
Prepr CMS는 개인화 기능이 내장된 헤드리스 CMS입니다.
Astro와 통합
섹션 제목: Astro와 통합Prepr CMS는 데이터를 Astro에 연결하기 위한 GraphQL API를 제공합니다.
전제조건
섹션 제목: 전제조건시작하려면 다음이 필요합니다.
- 주문형 렌더링을 위해 구성된 신규 또는 기존 Astro 프로젝트.
- 무료 Prepr 계정
- 기존 블로그 게시물이 포함된 Prepr 환경. 이러한 게시물에는
title
및content
가 포함되어야 합니다. 다른 필드는 선택사항입니다.
자격 증명 설정
섹션 제목: 자격 증명 설정Astro 프로젝트에 Prepr 엔드포인트를 추가하려면 프로젝트 루트에 .env 파일
이 없는 경우 이를 생성하고 다음 변수를 추가하세요.
Prepr 계정 설정에서 YOUR_PREPR_API_URL
값을 확인할 수 있습니다.
-
Settings > Access tokens로 이동하여 미리보기 및 프로덕션 액세스 토큰을 모두 확인하세요.
-
Astro 사이트에 게시된 콘텐츠 항목만 검색하려면 GraphQL Production 액세스 토큰의 API URL 값을 사용하세요.
Prepr 엔드포인트 구성
섹션 제목: Prepr 엔드포인트 구성새 폴더 src/lib/
를 만들고 prepr.js
라는 새 파일을 추가합니다. 여기에서 Prepr 엔드포인트를 구성합니다. Prepr CMS에서 데이터를 가져오려면 다음 코드를 추가하세요.
이제 루트 디렉터리에 다음 파일이 포함되어야 합니다.
Directorylib/
- prepr.js
Directorysrc/
- …
- .env
- astro.config.mjs
- package.json
데이터를 가져오기
섹션 제목: 데이터를 가져오기GraphQL API와 상호 작용하는 쿼리를 작성하여 Prepr에서 데이터를 가져옵니다.
GraphQL 쿼리를 생성하여 블로그 아티클을 검색합니다.
섹션 제목: GraphQL 쿼리를 생성하여 블로그 아티클을 검색합니다.-
src/queries/
라는 새 폴더를 만들고get-articles.js
라는 파일을 추가합니다. -
모든 아티클을 검색하려면 이 파일에 다음 쿼리를 추가합니다.
-
블로그 게시물의 링크된 목록을 페이지에 표시하려면 필요한 Prepr 엔드포인트를 포함한 쿼리를 가져와 실행하세요. 그러면 모든 게시물 제목과 해당 슬러그에 액세스하여 페이지에 렌더링할 수 있습니다. (다음 단계에서는 블로그 게시물에 대한 개별 페이지를 생성합니다.)
루트 디렉터리에는 다음과 같은 새 파일이 포함되어야 합니다.
Directorylib/
- prepr.js
Directoryqueries /
- get-articles.js
Directorysrc/
- …
- .env
- astro.config.mjs
- package.json
개별 블로그 게시물 페이지 생성
섹션 제목: 개별 블로그 게시물 페이지 생성각 블로그 게시물에 대한 페이지를 생성하려면 동적 라우팅 .astro
페이지에서 새 GraphQL 쿼리를 실행합니다. 이 쿼리는 슬러그를 통해 특정 아티클을 가져오고 개별 블로그 게시물에 대해 새 페이지가 생성됩니다.
-
queries
폴더에get-article-by-slug.js
라는 파일을 만들고 다음을 추가하여 해당 슬러그로 특정 아티클을 쿼리하고 아티클의title
및content
와 같은 데이터를 반환합니다.Prepr의 Apollo explorer를 사용하여 GraphQL 쿼리를 생성하고 테스트할 수 있습니다. Prepr의 Article 콘텐츠 항목 페이지에서 API explorer를 엽니다. Article 콘텐츠는 Dynamic content field에 저장됩니다. 이 필드에서 데이터를 가져오는 방법에 대한 자세한 내용은 GraphQL 문서를 확인하세요.
-
src/pages
폴더에[...slug].astro
파일을 생성합니다. 다음 코드를 추가하여 이전 단계에서 쿼리를 가져와 실행하여 검색된 아티클을 표시합니다.
이제 루트 디렉터리에 다음과 같은 새 파일이 포함되어야 합니다.
Directorylib/
- prepr.js
Directoryqueries/
- get-articles.js
- get-article-by-slug.js
Directorysrc/
Directorypages/
- index.astro
- […slug].astro
- .env
- astro.config.mjs
- package.json
이제 블로그 게시물의 기본 목록에서 기사 링크를 클릭하면 개별 콘텐츠가 포함된 페이지로 이동합니다.
사이트 게시
섹션 제목: 사이트 게시Prepr 블로그를 배포하려면 배포 가이드를 방문하여 선호하는 호스팅 제공업체의 지침을 따르세요.
공식 자료
섹션 제목: 공식 자료- Prepr CMS Astro 빠른 시작 가이드를 따라 Astro와 Prepr CMS로 간단한 블로그를 만들어보세요.
- Astro 및 Prepr CMS 리소스에 대한 개요는 Prepr CMS를 Astro에 연결을 확인하세요.