컨텐츠로 이동

Front Matter CMS & Astro

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

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

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

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 폴더)를 등록하세요.

  • 폴더 이름을 입력하라는 메시지가 표시됩니다. 기본적으로 폴더 이름을 사용합니다.

  • Show the dashboard를 클릭하여 콘텐츠 대시보드를 엽니다.

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

  • 디렉터리.frontmatter/
    • 디렉터리database/
      • mediaDb.json
  • 디렉터리src/
  • astro.config.mjs
  • frontmatter.json
  • package.json

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

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

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

  • frontmatter.json 파일을 엽니다.
  • frontMatter.taxonomy.contentTypes 배열을 다음 콘텐츠 타입 구성으로 바꿉니다.
frontmatter.json
"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와 함께 사용하기

섹션 제목: Markdoc을 Front Matter CMS와 함께 사용하기

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

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

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

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

frontmatter.json
"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
}
]
}
]

더 많은 CMS 안내서