ดาวน์โหลด astro portfolio - astro portfolio ดาวน์โหลดซอร์สโค้ด

astro portfolio

หมวดหมู่อื่นๆ

0.0.2

ดาวน์โหลด

- นี่เป็นเทมเพลตฟรีสำหรับสร้างเว็บไซต์พอร์ตโฟลิโอของคุณโดยใช้ Astro 4.0 + Tailwind CSS

โหมดมืด

โหมดแสง

รายงานประภาคาร

สารบัญ

สาธิต
คุณสมบัติ
โครงสร้างโครงการ
คำสั่ง
มีส่วนร่วม
เครดิต

สาธิต

- https://astro-fe-portfolio.netlify.app/

คุณสมบัติ

✔️บูรณาการกับ Tailwind CSS (@astrojs/tailwind) รองรับ โหมด Dark

✔️ใช้การผสานรวมต่อไปนี้:

@astrojs/mdx
@astrojs/รูปภาพ
@astrojs/tailwind - พร้อมปลั๊กอินการเรียงลำดับคลาสที่สวยกว่า
@astro-ไอคอน
@astro-seo
@astro-navbar

✔️(@Playwright) การทดสอบ e2e ได้รับการตั้งค่าแล้ว

บล็อกที่มีส่วนหน้า (ชื่อเรื่อง คำอธิบาย ผู้เขียน วันที่ รูปภาพ แท็ก) และฟีด RSS แผนผังเว็บไซต์ และ robots.txt

หน้าข้อผิดพลาด 404

โครงสร้างโครงการ

ภายในโปรเจ็กต์ Astro ของคุณ คุณจะเห็นโฟลเดอร์และไฟล์ต่อไปนี้:

 /
├── public/
│   └── favicon.ico
|   ├── hero.png
|   └── ...
├── src/
|   ├── assets/
|   |   ├── images/
│   │   |   ├── hero.png
|   |   |   └── ...
│   ├── components/
│   │   ├── ui/
│   │   |   ├── BackToTop.astro
|   |   |   └── ...
│   │   ├── About.astro
│   │   ├── Contact.astro
|   |   └── ...
│   ├── content/
│   │   ├── projects/
│   │   │   ├── project-1.md
│   │   │   ├── project-1.md
│   │   │   └── ...
│   │   └-- config.ts
│   ├── layouts/
│   │   ├── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   ├── tests/
│   │   ├── index.spec.ts
├── package.json
├── astro.config.mjs
└── ...

Astro ค้นหาไฟล์ .astro , .md หรือ .mdx ในไดเร็กทอรี src/pages/ แต่ละหน้าจะแสดงเป็นเส้นทางตามชื่อไฟล์

src/components/ เป็นที่ที่เราใส่ส่วนประกอบ Astro ใดๆ และ src/layouts/ ในทำนองเดียวกันสำหรับเค้าโครง

สามารถวางรูปภาพใน src/images/

เนื้อหาบล็อกและเอกสารประกอบถูกสร้างขึ้นเป็นคอลเลกชันของไฟล์ Markdown หรือ MDX ใน src/content

สินทรัพย์คงที่ใดๆ เช่น ภาพสามารถนำไปไว้ที่ public/ directory ได้

คำสั่ง

คำสั่งทั้งหมดถูกรันจากรูทของโปรเจ็กต์ จากเทอร์มินัล:

สั่งการ	การกระทำ
`yarn`	ติดตั้งการพึ่งพา
`yarn dev`	เริ่มเซิร์ฟเวอร์ dev ในเครื่องที่ `localhost:3000`
`yarn build`	สร้างไซต์การผลิตของคุณเป็น `./dist/`
`yarn preview`	ดูตัวอย่างงานสร้างของคุณภายในเครื่องก่อนที่จะปรับใช้
`yarn astro ...`	รันคำสั่ง CLI เช่น `astro add` , `astro preview`
`yarn astro --help`	รับความช่วยเหลือในการใช้ Astro CLI
`yarn test:e2e`	เรียกใช้การทดสอบนักเขียนบทละคร

มีส่วนร่วม

หากคุณมีความคิด ข้อเสนอแนะ หรือพบข้อบกพร่องใดๆ อย่าลังเลที่จะเปิดการสนทนา ปัญหา หรือสร้างคำขอดึงข้อมูล นั่นจะเป็นประโยชน์มากสำหรับเราทุกคน และเรายินดีที่จะรับฟังและดำเนินการ