astrowind
1.0.0
? 2022년과 2023년에 가장 많이 출연하고 분기된 Astro 테마입니다 . ?
AstroWind 는 Astro 5.0 + Tailwind CSS를 사용하여 웹사이트를 만들 수 있는 무료 오픈 소스 템플릿입니다. 새 프로젝트를 시작할 준비가 되었으며 웹 모범 사례를 고려하여 설계되었습니다.
? https://astrowind.vercel.app/
우리는 AstroWind 2.0 과 함께 흥미진진한 여정을 시작하고 있으며 여러분도 그 여정의 일부가 되기를 바랍니다! 우리는 현재 이 새 버전을 개발하기 위한 첫 번째 단계를 수행하고 있으며 귀하의 통찰력은 매우 중요합니다. 토론에 참여하고 AstroWind 의 미래를 형성하는 데 도움이 되는 피드백, 아이디어 및 제안을 공유하세요. 함께 AstroWind 2.0을 더욱 향상시켜 보세요!
토론에서 피드백을 공유해 주세요!
AstroWind는 Astro 5.0 + Tailwind CSS를 사용하여 웹사이트를 만드는 데 빠른 액세스를 제공하려고 합니다. 단순성, 모범 사례 및 고성능에 초점을 맞춘 무료 테마입니다.
바닐라 자바스크립트는 기본 기능을 제공하는 데에만 사용되므로 각 개발자는 사용할 프레임워크(React, Vue, Svelte, Solid JS...)와 목표에 접근하는 방법을 결정할 수 있습니다.
이 버전에서 템플릿은 output 구성, static , hybrid 및 server 의 모든 옵션을 지원하지만 블로그는 prerender = true 에서만 작동합니다. 우리는 다음 버전을 작업 중이며 SSR과 완벽하게 호환되도록 만드는 것을 목표로 하고 있습니다.
AstroWind 템플릿 내부에는 다음 폴더와 파일이 표시됩니다.
/
├── public/
│ ├── _headers
│ └── robots.txt
├── src/
│ ├── assets/
│ │ ├── favicons/
│ │ ├── images/
│ │ └── styles/
│ │ └── tailwind.css
│ ├── components/
│ │ ├── blog/
│ │ ├── common/
│ │ ├── ui/
│ │ ├── widgets/
│ │ │ ├── Header.astro
│ │ │ └── ...
│ │ ├── CustomStyles.astro
│ │ ├── Favicons.astro
│ │ └── Logo.astro
│ ├── content/
│ │ ├── post/
│ │ │ ├── post-slug-1.md
│ │ │ ├── post-slug-2.mdx
│ │ │ └── ...
│ │ └-- config.ts
│ ├── layouts/
│ │ ├── Layout.astro
│ │ ├── MarkdownLayout.astro
│ │ └── PageLayout.astro
│ ├── pages/
│ │ ├── [...blog]/
│ │ │ ├── [category]/
│ │ │ ├── [tag]/
│ │ │ ├── [...page].astro
│ │ │ └── index.astro
│ │ ├── index.astro
│ │ ├── 404.astro
│ │ ├-- rss.xml.ts
│ │ └── ...
│ ├── utils/
│ ├── config.yaml
│ └── navigation.js
├── package.json
├── astro.config.ts
└── ...
Astro는 src/pages/ 디렉터리에서 .astro 또는 .md 파일을 찾습니다. 각 페이지는 파일 이름을 기반으로 하는 경로로 노출됩니다.
src/components/ 에는 특별한 것이 없지만 Astro/React/Vue/Svelte/Preact 구성 요소를 여기에 두는 것이 좋습니다.
이미지와 같은 정적 자산은 변환이 필요하지 않은 경우 public/ 디렉터리에 배치할 수 있고, 직접 가져온 경우에는 assets/ 디렉터리에 배치할 수 있습니다.
? 노련한 우주비행사?
README.md파일을 삭제하세요.src/config.yaml및 내용을 업데이트합니다. 재미있게 보내세요!
모든 명령은 프로젝트 루트의 터미널에서 실행됩니다.
| 명령 | 행동 |
|---|---|
npm install | 종속성을 설치합니다. |
npm run dev | localhost:4321 에서 로컬 개발 서버를 시작합니다. |
npm run build | 프로덕션 사이트를 ./dist/ 로 구축하세요. |
npm run preview | 배포하기 전에 로컬에서 빌드 미리보기 |
npm run check | 프로젝트에 오류가 있는지 확인하세요. |
npm run fix | Eslint를 실행하고 Prettier로 코드 형식을 지정하세요. |
npm run astro ... | astro add , astro preview 와 같은 CLI 명령 실행 |
기본 구성 파일: ./src/config.yaml
site :
name : ' Example '
site : ' https://example.com '
base : ' / ' # Change this if you need to deploy to Github Pages, for example
trailingSlash : false # Generate permalinks with or without "/" at the end
googleSiteVerificationId : false # Or some value,
# Default SEO metadata
metadata :
title :
default : ' Example '
template : ' %s — Example '
description : ' This is the default meta description of Example website '
robots :
index : true
follow : true
openGraph :
site_name : ' Example '
images :
- url : ' ~/assets/images/default.png '
width : 1200
height : 628
type : website
twitter :
handle : ' @twitter_user '
site : ' @twitter_user '
cardType : summary_large_image
i18n :
language : en
textDirection : ltr
apps :
blog :
isEnabled : true # If the blog will be enabled
postsPerPage : 6 # Number of posts per page
post :
isEnabled : true
permalink : ' /blog/%slug% ' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
robots :
index : true
list :
isEnabled : true
pathname : ' blog ' # Blog main path, you can change this to "articles" (/articles)
robots :
index : true
category :
isEnabled : true
pathname : ' category ' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
robots :
index : true
tag :
isEnabled : true
pathname : ' tag ' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
robots :
index : false
isRelatedPostsEnabled : true # If a widget with related posts is to be displayed below each post
relatedPostsCount : 4 # Number of related posts to display
analytics :
vendors :
googleAnalytics :
id : null # or "G-XXXXXXXXXX"
ui :
theme : ' system ' # Values: "system" | "light" | "dark" | "light:only" | "dark:only" 글꼴 모음, 색상 또는 추가 요소를 사용자 정의하려면 다음 파일을 참조하십시오.
src/components/CustomStyles.astrosrc/assets/styles/tailwind.css다음을 사용하여 최적화된 프로덕션 빌드를 만들 수 있습니다.
npm run build 이제 웹사이트를 배포할 준비가 되었습니다. 생성된 모든 파일은 dist 폴더에 있으며, 이 폴더를 원하는 호스팅 서비스에 배포할 수 있습니다.
자신의 GitHub 계정에 이 저장소를 복제하고 Netlify에 배포합니다.
자신의 GitHub 계정에서 이 저장소를 복제하고 Vercel에 배포합니다.
아이디어나 제안이 있거나 버그를 발견한 경우 자유롭게 토론이나 문제를 열거나 끌어오기 요청을 작성하세요. 이는 우리 모두에게 매우 유용할 것이며 우리는 기꺼이 듣고 조치를 취할 것입니다.
처음에는 onWidget에 의해 생성되고 기여자 커뮤니티에 의해 유지관리됩니다.
AstroWind 는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.
