Cactus 테마에서 게시글 작성하기

출처

Adding posts

아스트로의 콘텐츠 컬렉션을 이용해서 마크다운이나 MDX 파일을 정리합니다. 이 파일들의 frontmatter은 src/content/config.ts에 따라 체크합니다.

src/content/post에 .md(x) 파일을 추가하는 것으로 쉽게 게시글을 추가할 수 있습니다. 이렇게 추가한 게시글은 파일 이름에 따라 slug, url이 결정됩니다.

게시글들에 적용된 아래의 프론트매터 예시는 프론트매터를 구성하는 방법 중에 하나입니다.

아스트로에서 마크다운을 다루는 것에 대해선 이 곳을 참조하면 됩니다.

Frontmatter

Property (* required, 필수 속성)	Description
title *	Self explanatory. Used as the text link to the post, the h1 on the posts’ page, and the pages title property. Has a max length of 60 chars, set in src/content/config.ts. 글을 가리키거나 게시글에서 h1 태그로 표시되거나 글 제목 속성으로 취급된다. 제목 글자 수를 최대 60자로 제한해 놨지만 src/content/config.ts에서 수정할 수 있다.
description *	Similar to above, used as the seo description property. Has a min length of 50 and a max length of 160 chars, set in the post schema. SEO 설명 속성으로 사용된다. 최소 50자 최대 160자로 제한해 놨지만 src/content/config.ts에서 수정할 수 있다.
publishDate *	Again pretty simple. To change the date format/locale, currently en-GB, update the date option in src/site.config.ts. Note you can also pass additional options to the component <FormattedDate> if required. 게시 날짜. 날짜 포맷을 변경하려면 src/site.config.ts의 date 옵션을 변경하면 된다. <FormattedDate> 컴포넌트에 추가 옵션을 전달할 수도 있다.
updatedDate	This is an optional date representing when a post has been updated, in the same format as the publishDate. Note that by providing this field, the sorting function, found in src/utils/post.ts, sortMDByDate will order by this field rather than its published date. 게시글이 업데이트된 날짜를 나타내는 부가적인 필드. publishDate와 같은 형식으로 작성합니다. src/utils/post/.ts에 있는 sortMDByDate는 이 속성이 있는 경우 이 속성을 적용하여 정렬합니다.
tags	Tags are optional with any created post. Any new tag(s) will be shown in yourdomain.com/posts & yourdomain.com/tags, and generate the page(s) yourdomain.com/tags/[yourTag]. 태그는 게시글에 추가할 수 있다. 새로운 태그를 추가하면 yourdomain.com/posts & yourdomain.com/tags에 표시되고 yourdomain.com/tags/[yourTag] 페이지가 생성된다.
coverImage	This is an optional object that will add a cover image to the top of a post. Include both a src: “path-to-image” and alt: “image alt”. You can view an example in src/content/post/cover-image.md. 글 상단에 추가할 수 있는 커버이미지. src: 이미지에 대한 경로 와 alt: 대채 설명말 속성을 포함해야 한다. src/content/post/cover-image.md에서 예시를 볼 수 있다.
ogImage	This is an optional property. An OG Image will be generated automatically for every post where this property isn’t provided. If you would like to create your own for a specific post, include this property and a link to your image, the theme will then skip automatically generating one. 이 속성은 선택적 속성입니다. 이 속성이 제공되지 않은 모든 글에 대해 OG 이미지가 자동으로 생성됩니다. 특정 글에 대해 직접 이미지를 생성하려면 이 속성과 이미지 링크를 포함하는 것으로 테마에서 이미지 자동 생성을 건너뛰게 만들 수 있습니다.
draft	This is an optional property as it is set to false by default in the schema. By adding true, the post will be filtered out of the production build in a number of places, inc. getAllPosts() calls, og-images, rss feeds, and generated page(s). You can view an example in src/content/post/draft-post.md 기본적으로 false값을 가지는 부가적인 속성입니다. 이 속성이 true일 경우, 프로덕션 빌드에서 getAllPosts() 호출, og-이미지, RSS 피드, 생성된 페이지 등 여러 위치에서 게시물이 필터링됩니다. src/content/post/draft-post.md에서 예시를 볼 수 있습니다.

Frontmatter snippet

Astro Cactus includes a helpful VSCode snippet which creates a frontmatter ‘stub’ for a blog post, found here -> .vscode/post.code-snippets.
Astro Cactus 테마에서 글 작성할 때 필요한 frontmatter의 기본 형태를 VSCode 코드조각으로 제공합니다. .vscode/post.code-snippets에서 확인할 수 있습니다.

Start typing the word frontmatter on your newly created .md(x) file to trigger it. Visual Studio Code snippets appear in IntelliSense via (⌃Space) on mac, (Ctrl+Space) on windows.