Front Matter CMS & Astro

Front Matter CMS는 CMS를 편집기로 가져와 Visual Studio Code, GitPod 등에서 실행됩니다.

Astro와의 통합

이 섹션에서는 Astro 프로젝트에 Front Matter CMS를 추가하는 방법을 살펴보겠습니다.

전제조건

Visual Studio Code
Astro 블로그 템플릿을 사용하여 Front Matter CMS를 시작하기 위한 기본 구성과 샘플 콘텐츠

Front Matter CMS 확장 프로그램 설치

Visual Studio Code 마켓플레이스 - Front Matter에서 확장을 얻거나 다음 링크를 클릭하여 확장을 얻을 수 있습니다: VS Code에서 Front Matter CMS 확장 열기

프로젝트 초기화

Front Matter CMS가 설치되면 활동 표시줄에 새 아이콘이 표시됩니다. 클릭하면 기본 사이드바에 Front Matter CMS 패널이 열립니다. 프로젝트를 초기화하려면 다음 단계를 따르세요.

Front Matter 패널에서 Initialize project 버튼을 클릭하세요.
welcome 화면이 열리고 프로젝트 초기화를 시작할 수 있습니다.
Initialize project의 첫 번째 단계를 클릭하세요.
Astro는 지원되는 프레임워크 중 하나이므로 목록에서 선택할 수 있습니다.
콘텐츠 폴더 (이 경우 src/content/blog 폴더)를 등록하세요.

콘텐츠를 찾거나 생성할 위치를 Front Matter CMS에게 알리려면 폴더 등록이 필요합니다. pages, blog, docs 등과 같은 다양한 유형의 폴더를 가질 수 있습니다.
폴더 이름을 입력하라는 메시지가 표시됩니다. 기본적으로 폴더 이름을 사용합니다.

이름은 새 콘텐츠를 만드는 과정에서 사용됩니다. 예를 들어, 여러 폴더를 등록하면 생성하려는 콘텐츠 유형을 선택할 수 있습니다.
Show the dashboard를 클릭하여 콘텐츠 대시보드를 엽니다.
팁
Front Matter CMS가 초기화되면 다음과 같이 대시보드를 열 수 있습니다.
- 키보드 바인딩 사용: alt + d (Windows 및 Linux) 또는 options + d (macOS)
- 명령 팔레트를 열고 Front Matter: Open dashboard를 검색하세요.
- 패널의 제목 표시줄이나 파일에 있는 Front Matter 아이콘을 클릭합니다.

프로젝트 구성

프로젝트가 초기화되면 프로젝트 루트에 frontmatter.json 구성 파일과 .frontmatter 폴더가 생성됩니다.

Directory.frontmatter/
- Directorydatabase/
  - mediaDb.json
Directorysrc/
- …
astro.config.mjs
frontmatter.json
package.json

콘텐츠 타입 구성

콘텐츠 타입은 Front Matter CMS가 여러분의 콘텐츠를 관리하는 방식입니다. 각 콘텐츠 타입에는 웹 사이트에 사용하려는 콘텐츠 타입별로 정의할 수 있는 일련의 필드가 포함되어 있습니다.

필드는 페이지 콘텐츠의 프런트매터에 해당합니다.

frontmatter.json 파일에서 콘텐츠 타입을 구성할 수 있습니다.

frontmatter.json 파일을 엽니다.
frontMatter.taxonomy.contentTypes 배열을 다음 콘텐츠 타입 구성으로 바꿉니다.

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]

편집기에서 아티클 미리보기

Front Matter CMS 패널에서 Start server 버튼을 클릭하세요. 이 작업은 Astro 로컬 개발 서버를 시작합니다. 실행하고 나면 콘텐츠 대시보드를 열고 아티클 중 하나를 선택한 다음 Open preview 버튼을 클릭하여 편집기에서 아티클를 열 수 있습니다.

새 아티클 만들기

Front Matter CMS Dashboard를 엽니다. 다음과 같이 이 작업을 수행할 수 있습니다.

Front Matter CMS의 콘텐츠 대시보드를 엽니다.
Create content 버튼을 클릭하세요.
Front Matter에서는 아티클 제목을 물어볼 것입니다. 입력하고 엔터를 눌러주세요
새 아티클이 생성되어 편집기에서 열립니다. 아티클 작성을 시작할 수 있습니다.

Markdoc을 Front Matter CMS와 함께 사용하기

Front Matter CMS와 함께 Markdoc을 사용하려면 frontMatter.content.supportedFileTypes에서 이를 구성해야 합니다. 이 설정을 통해 CMS는 어떤 타입의 파일을 진행할 수 있는지 알 수 있습니다.

다음과 같이 설정을 구성할 수 있습니다.

"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]

콘텐츠를 Markdoc로 생성하려면 콘텐츠 타입에 fileType 속성을 지정하세요.

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]