Skip to content

Latest commit

 

History

History
161 lines (121 loc) · 7.27 KB

decap-cms.mdx

File metadata and controls

161 lines (121 loc) · 7.27 KB
Raw
title description type stub service i18nReady
Decap CMS & Astro
Decap을 CMS로 사용하여 Astro 프로젝트에 콘텐츠 추가
cms
true
Decap CMS
false

import Grid from '/components/FluidGrid.astro'; import Card from '/components/ShowcaseCard.astro'; import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Decap CMS (이전 Netlify CMS)는 오픈 소스 Git 기반 콘텐츠 관리 시스템입니다.

Decap을 사용하면 이미지 최적화 및 콘텐츠 컬렉션을 포함한 Astro의 모든 기능을 최대한 활용할 수 있습니다.

Decap은 승인된 사용자가 배포된 웹 사이트에서 직접 콘텐츠를 관리할 수 있도록 React 앱을 로드할 프로젝트에 경로 (일반적으로 /admin)를 추가합니다. Decap은 변경 사항을 Astro 프로젝트의 소스 저장소에 직접 커밋합니다.

DecapCMS 설치

Astro에 Decap을 추가하는 데는 두 가지 옵션이 있습니다.

  1. 다음 명령을 사용하여 패키지 관리자를 통해 Decap 설치:

    ```shell npm install decap-cms-app ``` ```shell pnpm add decap-cms-app ``` ```shell yarn add decap-cms-app ```

  2. 패키지를 페이지 <body>의 <script> 태그로 가져옵니다.

    <body>
  <!-- 페이지를 빌드하고 Decap CMS를 구동하는 스크립트를 포함합니다. -->
  <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
</body>

구성

1. `public/admin/`에 정적 어드민 폴더를 생성합니다.

  1. public/admin/에 config.yml 파일을 추가합니다.

    • public
      • admin
        • config.yml

  2. 콘텐츠 컬렉션에 대한 지원을 추가하려면 config.yml에서 각 스키마를 구성하세요. 다음 예시에서는 각 항목의 프런트매터 속성에 대한 label을 정의하여 blog 컬렉션을 구성합니다.

    collections:
  - name: "blog" # 경로에 사용됩니다. 예: /admin/collections/blog
    label: "Blog" # UI에 사용됩니다.
    folder: "src/content/blog" # 문서가 저장된 폴더의 경로입니다.
    create: true # 사용자가 이 컬렉션에 새 문서를 만들 수 있도록 허용합니다.
    fields: # 각 문서의 필드는 일반적으로 프런트매터에 있습니다.
      - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Featured Image", name: "thumbnail", widget: "image" }
      - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" }
      - { label: "Body", name: "body", widget: "markdown" }

  3. React 앱에 admin 경로를 추가하세요. 이 파일은 config.yml과 함께 public/admin/index.html일 수도 있고, Astro 경로를 사용하려는 경우 src/pages/admin.astro일 수도 있습니다.

    - public - admin - config.yml - index.html ```html title="/public/admin/index.html" {7, 11} <title>Content Manager</title> <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script> ```

  4. Decap 편집기를 통해 특정 폴더에 미디어 업로드를 활성화하려면 적절한 경로를 추가하세요.

    media_folder: "src/assets/images" # Repo에서 파일이 저장될 위치
public_folder: "src/assets/images" # 업로드된 미디어의 src 속성

전체 지침과 옵션은 Decap CMS 구성 문서를 참조하세요.

사용하기

Decap CMS 편집기를 사용하려면 yoursite.com/admin/으로 이동하세요.

인증

Decap CMS와 Netlify Identity

Decap CMS는 원래 Netlify에서 개발되었으며 Netlify Identity에 대한 최고 수준의 지원을 제공합니다.

Netlify에 배포할 때 Netlify 대시보드를 통해 프로젝트의 Identity를 구성하고 프로젝트의 admin 경로에 Netlify Identity Widget을 포함하세요. 이메일을 통해 새로운 사용자를 초대하려는 경우 선택적으로 사이트 홈페이지에 Identity 위젯을 포함하세요.

Decap CMS와 외부 OAuth 클라이언트

Netlify 이외의 호스팅 제공업체에 배포하는 경우 자체 OAuth 경로를 생성해야 합니다.

Astro에서는 server 또는 hybrid 출력이 활성화된 상태로 구성된 프로젝트의 주문형 렌더링 경로를 통해 이 작업을 수행할 수 있습니다.

커뮤니티에서 관리하는 호환 가능한 OAuth 클라이언트 목록은 Decap의 OAuth 문서를 참조하세요.

커뮤니티 자료

프로덕션 사이트

다음 사이트에서는 프로덕션에 Astro + Decap CMS를 사용합니다.

테마