qwind
1.0.0
Qwind เป็นเทมเพลตโอเพ่นซอร์สฟรีสำหรับสร้างเว็บไซต์ของคุณโดยใช้ Qwik + Tailwind CSS พร้อมที่จะเริ่มโครงการใหม่และออกแบบโดยคำนึงถึงแนวปฏิบัติที่ดีที่สุด
- https://qwind.pages.dev/
โครงการนี้ใช้ Qwik กับ QwikCity QwikCity เป็นเพียงชุดเครื่องมือพิเศษที่อยู่ด้านบนของ Qwik เพื่อให้ง่ายต่อการสร้างไซต์เต็มรูปแบบ รวมถึงการกำหนดเส้นทางตามไดเร็กทอรี เค้าโครง และอื่นๆ อีกมากมาย
ภายในเทมเพลต Qwind คุณจะเห็นโฟลเดอร์และไฟล์ต่อไปนี้:
/
├── adaptors/
| └── static/
| └── vite.config.ts
├── public/
│ ├── favicon.svg
│ ├── manifest.json
│ └── robots.txt
├── src/
│ ├── assets/
│ │ ├── images/
| | └── styles/
| | └── global.css
│ ├── components/
│ │ ├── atoms/
│ │ ├── core/
│ │ ├── icons/
| | └── widgets/
| | ├── Hero.tsx
| | ├── Features.tsx
| | └── ...
│ ├── content/
│ | └── blog/
│ | ├── post-slug-1.md
│ | ├── post-slug-2.md
│ | └── ...
│ ├── routes/
│ | ├── blog/
│ | ├── index.tsx
| | ├── layout.tsx
| | ├-- service-worker.ts
│ | └-- ...
│ ├── config.mjs
│ ├── entry.dev.tsx
│ ├── entry.preview.tsx
│ ├── entry.ssr.tsx
│ └── root.tsx
├── package.json
└── ...
src/routes : จัดเตรียมการกำหนดเส้นทางตามไดเร็กทอรี ซึ่งอาจรวมลำดับชั้นของไฟล์เลย์เอาต์ layout.tsx และไฟล์ index.tsx เป็นเพจ นอกจากนี้ ไฟล์ index.ts ยังเป็นจุดสิ้นสุดอีกด้วย โปรดดูเอกสารการกำหนดเส้นทางสำหรับข้อมูลเพิ่มเติม
src/components : ไดเร็กทอรีที่แนะนำสำหรับส่วนประกอบ
public : เนื้อหาคงที่ใดๆ เช่น รูปภาพ สามารถวางไว้ในไดเร็กทอรีสาธารณะได้ โปรดดูไดเรกทอรีสาธารณะของ Vite สำหรับข้อมูลเพิ่มเติม
ผู้เชี่ยวชาญ qwik ปรุงรส? ลบไฟล์นี้ อัปเดต
config.mjsและเนื้อหา มีความสุข!
คำสั่งทั้งหมดถูกรันจากรูทของโปรเจ็กต์ จากเทอร์มินัล:
| สั่งการ | การกระทำ |
|---|---|
npm install | ติดตั้งการพึ่งพา |
npm run dev | เริ่มเซิร์ฟเวอร์ dev ภายในเครื่องที่ 127.0.0.1:5173/ |
npm run build | สร้างไซต์การผลิตของคุณเป็น ./dist/ |
npm run preview | ดูตัวอย่างงานสร้างของคุณภายในเครื่องก่อนที่จะปรับใช้ |
npm run fmt | จัดรูปแบบโค้ดด้วย Prettier |
npm run lint | วิ่งเอสลินท์ |
npm run qwik ... | รันคำสั่ง CLI เช่น qwik add , qwik build |
ไฟล์การกำหนดค่าพื้นฐาน: ./src/config.mjs
export const SITE = {
name : "Example" ,
origin : "https://example.com" ,
basePathname : "/" , // Change this if you need to deploy to Github Pages, for example
trailingSlash : true , // Generate permalinks with or without "/" at the end
} ;คุณสามารถสร้างบิลด์การผลิตที่ได้รับการปรับปรุงด้วย:
npm run build ตอนนี้เว็บไซต์ของคุณพร้อมที่จะใช้งานแล้ว ไฟล์ที่สร้างขึ้นทั้งหมดจะอยู่ที่โฟลเดอร์ dist ซึ่งคุณสามารถปรับใช้โฟลเดอร์กับบริการโฮสติ้งที่คุณต้องการได้
โคลนพื้นที่เก็บข้อมูลนี้ในบัญชี GitHub ของตัวเองและปรับใช้กับ Netlify:
โคลนพื้นที่เก็บข้อมูลนี้ในบัญชี GitHub ของตัวเองและปรับใช้กับ Vercel:
หากคุณมีความคิด ข้อเสนอแนะ หรือพบข้อบกพร่องใดๆ อย่าลังเลที่จะเปิดการสนทนา ปัญหา หรือสร้างคำขอดึงข้อมูล นั่นจะเป็นประโยชน์มากสำหรับเราทุกคน และเรายินดีที่จะรับฟังและดำเนินการ
สร้างขึ้นครั้งแรกโดย onWidget และดูแลโดยชุมชนผู้มีส่วนร่วม
Qwind ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT — ดูรายละเอียดในไฟล์ใบอนุญาต
