astrowind
1.0.0
- ธีม Astro ที่ติดดาว และ แยก มากที่สุดในปี 2022 และ 2023 -
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 ค้นหาไฟล์ .astro หรือ .md ในไดเร็กทอรี src/pages/ แต่ละหน้าจะแสดงเป็นเส้นทางตามชื่อไฟล์
ไม่มีอะไรพิเศษเกี่ยวกับ src/components/ แต่นั่นคือสิ่งที่เราต้องการใส่ส่วนประกอบ Astro/React/Vue/Svelte/Preact
สินทรัพย์คงที่ใดๆ เช่น รูปภาพ สามารถวางไว้ในไดเร็กทอรี public/ หากไม่ต้องการการแปลงใดๆ หรือในไดเร็กทอรี assets/ หากนำเข้าโดยตรง
นักบินอวกาศผู้ช่ำชอง? ลบไฟล์นี้
README.mdอัปเดตsrc/config.yamlและเนื้อหา มีความสุข!
คำสั่งทั้งหมดถูกรันจากรูทของโปรเจ็กต์ จากเทอร์มินัล:
| สั่งการ | การกระทำ |
|---|---|
npm install | ติดตั้งการพึ่งพา |
npm run dev | เริ่มเซิร์ฟเวอร์ dev ในเครื่องที่ localhost:4321 |
npm run build | สร้างไซต์การผลิตของคุณเป็น ./dist/ |
npm run preview | ดูตัวอย่างงานสร้างของคุณภายในเครื่องก่อนที่จะปรับใช้ |
npm run check | ตรวจสอบโครงการของคุณเพื่อหาข้อผิดพลาด |
npm run fix | เรียกใช้ Eslint และจัดรูปแบบโค้ดด้วย Prettier |
npm run astro ... | รันคำสั่ง CLI เช่น astro add , astro preview |
ไฟล์การกำหนดค่าพื้นฐาน: ./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 — ดูไฟล์ใบอนุญาตสำหรับรายละเอียด
