astro theme cactus
v5.0.0
Astro Cactus는 Astro 프레임워크로 구축된 간단하고 독창적인 스타터입니다. 이를 사용하여 사용하기 쉬운 블로그나 웹사이트를 만드세요.
Netlify에서 호스팅되는 데모를 확인하세요.
이 템플릿에서 새 저장소를 만듭니다.
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactuspnpm을 원하는 npm/yarn으로 바꾸세요.
| 명령 | 행동 |
|---|---|
pnpm install | 종속성을 설치합니다. |
pnpm dev | localhost:3000 에서 로컬 개발 서버를 시작합니다. |
pnpm build | 프로덕션 사이트를 ./dist/ 로 구축하세요. |
pnpm postbuild | 블로그 게시물의 정적 검색을 구축하는 Pagefind 스크립트 |
pnpm preview | 배포하기 전에 로컬에서 빌드 미리보기 |
pnpm sync | src/content/config.ts 의 구성을 기반으로 유형을 생성합니다. |
src/site.config.ts 편집합니다.astro.config.ts 파일 업데이트/public 폴더 내의 파일 교체 및 업데이트:src/styles/global.css 파일을 수정하세요.src/site.config.ts 에서 찾을 수 있는 어두운(dracula) 테마와 밝은(github-light) 테마가 모두 있습니다. 여기에서 더 많은 테마와 옵션을 찾을 수 있습니다.src/components/SocialList.astro 에서 소셜 링크를 편집하세요. Astro Icon의 지침에 따라 아이콘은 icones.js.org에서 찾을 수 있습니다.src/content/post/ 및 src/content/note/ 내에서 블로그에 대한 게시물 및 메모를 생성/편집합니다. 자세한 내용은 아래를 참조하세요.src/pages/og-image/[slug].png.ts 엽니다. . 이 플레이그라운드를 사용하여 디자인을 도울 수 있습니다.src/content/post/social-image.md 에서 찾을 수 있습니다. 앞부분에 대한 자세한 내용은 여기에서 확인할 수 있습니다.src/styles/global.css 에 있는 글꼴 계열 font-mono 로 설정합니다. 변형 font-mono 제거하여 글꼴을 변경할 수 있으며, 이후 TailwindCSS는 기본적으로 font-sans 글꼴 모음 스택을 사용합니다. 템플릿을 포크한 경우 자신의 프로젝트와 포크를 동기화할 수 있습니다. 변경 내용 취소를 클릭하면 자신의 프로젝트가 손실되므로 변경 사항 취소를 클릭 하지 마세요 .
템플릿 저장소가 있는 경우 여기에 설명된 대로 이 템플릿을 원격으로 추가할 수 있습니다.
이 테마는 콘텐츠 컬렉션을 활용하여 로컬 Markdown 및 MDX 파일을 구성할 뿐만 아니라 스키마 -> src/content/config.ts 사용하여 유형 검사 서문을 구성합니다.
포스트/노트를 추가하는 것은 .md(x) 파일을 src/content/post 및/또는 src/content/note 폴더에 추가하는 것만큼 간단합니다. 이 폴더의 파일 이름은 slug/url로 사용됩니다. 이 템플릿에 포함된 게시물은 머리말을 구성하는 방법의 예입니다. 또한 Astro 문서에는 마크다운 페이지에 대한 자세한 섹션이 있습니다.
| 재산 (* 필수) | 설명 |
|---|---|
| 제목 * | 자명합니다. 게시물에 대한 텍스트 링크, 게시물 페이지의 h1 및 페이지 제목 속성으로 사용됩니다. src/content/config.ts 에 설정된 최대 길이는 60자입니다. |
| 설명 * | 위와 유사하게 SEO 설명 속성으로 사용됩니다. 포스트 스키마에 설정된 최소 길이는 50자, 최대 길이는 160자입니다. |
| 게시일 * | 다시 말하지만 매우 간단합니다. 날짜 형식/로케일(현재 en-GB ) 을 변경하려면 src/site.config.ts 에서 날짜 옵션을 업데이트하세요. 필요한 경우 <FormattedDate> 구성 요소에 추가 옵션을 전달할 수도 있습니다. |
| 업데이트 날짜 | 게시 날짜와 동일한 형식으로 게시물이 업데이트된 시기를 나타내는 선택적 날짜입니다. |
| 태그 | 작성된 게시물에 대한 태그는 선택 사항입니다. 모든 새 태그는 yourdomain.com/posts 및 yourdomain.com/tags 에 표시되고 yourdomain.com/tags/[yourTag] 페이지가 생성됩니다. |
| 표지 이미지 | 게시물 상단에 커버 이미지를 추가하는 선택적 개체입니다. src : " path-to-image " 및 alt : " image alt "를 모두 포함합니다. src/content/post/cover-image.md 에서 예제를 볼 수 있습니다. |
| og이미지 | 이는 선택적 속성입니다. 이 속성이 제공 되지 않은 모든 게시물에 대해 OG 이미지가 자동으로 생성됩니다. 특정 게시물에 대해 자신만의 게시물을 만들고 싶다면 이 속성과 이미지 링크를 포함하세요. 그러면 테마가 자동으로 게시물 생성을 건너뜁니다. |
| 초안 | 이는 스키마에서 기본적으로 false로 설정되므로 선택적 속성입니다. true를 추가하면 게시물이 여러 위치의 프로덕션 빌드에서 필터링됩니다. getAllPosts() 호출, og-images, RSS 피드 및 생성된 페이지. src/content/post/draft-post.md 에서 예제를 볼 수 있습니다. |
| 재산 (* 필수) | 설명 |
|---|---|
| 제목 * | 문자열, 최대 길이는 60자입니다. |
| 설명 | 헤드 메타 설명 속성에 사용됩니다. |
| 게시일 * | 오프셋이 허용되는 ISO 8601 형식입니다. |
Astro Cactus에는 게시물과 노트에 대한 머리말 '스텁'을 생성하는 유용한 VSCode 스니펫이 포함되어 있습니다. 여기에서 찾을 수 있습니다 -> .vscode/post.code-snippets . 새로 생성된 .md(x) 파일에 frontmatter 단어를 입력하면 트리거됩니다. Visual Studio 코드 조각은 Mac에서는 (⌃Space), Windows에서는 (Ctrl+Space)를 통해 IntelliSense에 표시됩니다.
이 통합은 블로그 게시물과 메모를 검색하기 위한 정적 검색 기능을 제공합니다. 현재 형태에서는 페이지 찾기는 사이트가 구축된 후에만 작동합니다. 이 테마는 Astro가 사이트를 구축한 후에 실행되어야 하는 빌드 후 스크립트를 추가합니다. 빌드 및 사후 빌드를 모두 실행하여 로컬로 미리 볼 수 있습니다.
검색 결과에는 게시물과 메모의 페이지만 포함됩니다. 다른/모든 페이지를 포함하려면 src/layouts/BlogPost.astro 및 src/components/note/Note.astro 에 있는 기사 태그에 대한 data-pagefind-body 속성을 제거/재배치하세요.
또한 블로그 게시물의 머리말에 추가된 태그를 기준으로 게시물을 필터링할 수도 있습니다. 이를 제거하려면 src/components/blog/Masthead.astro 의 링크에서 data-pagefind-filter="tag" 데이터 속성을 제거하세요.
이 통합을 포함하지 않으려면 src/components/Search.astro 구성 요소를 제거하고 package.json에서 @pagefind/default-ui 및 pagefind 모두 제거하면 됩니다. 또한 여기에서 postbuild 스크립트도 제거해야 합니다.
여기에 설명된 것처럼 웹 구성 요소 스타일을 지연 로딩하여 CSS의 초기 CSS 페이로드를 줄일 수 있습니다.
귀하가 작성한 추세와 인기 게시물/페이지를 이해하기 위해 귀하의 블로그/웹사이트에 대한 방문자 수를 추적할 수 있습니다. vercel, netlify, cloudflare와 같은 웹 호스트를 포함하여 사용할 수 있는 공급자가 많이 있습니다.
일부 사람들이 사용하거나 사용하지 않을 수 있는 사용 사례 및/또는 옵션이 많기 때문에 이 테마/템플릿에는 특정 솔루션이 포함되어 있지 않습니다.
웹사이트를 설정할 때 src/layouts/Base.astro 에서 찾을 수 있는 스니펫을 웹사이트의 HEAD 태그 안에 포함하라는 요청을 받을 수 있습니다. 또는 src/components/BaseHead.astro 에 코드 조각을 추가할 수 있습니다.
Astro 문서에는 다양한 플랫폼과 그 특이성에 Astro 사이트를 배포하는 방법에 대한 훌륭한 섹션과 분석이 있습니다.
기본적으로 사이트는 /dist 디렉터리에 구축됩니다(위의 명령 섹션 참조).
이 테마는 Hexo Theme Cactus에서 영감을 받았습니다.
MIT
