hello astro

สวัสดี-astro

Hello Astro เป็นธีมเริ่มต้นอเนกประสงค์ Astro เต็มรูปแบบที่เขียนด้วย Typescript และ TailwindCSS รองรับหน้าและโพสต์บล็อกที่ใช้ Markdown และ MDX

Hello Astro สามารถใช้กับสิ่งใดสิ่งหนึ่งหรือทั้งหมดต่อไปนี้:

• ไซต์องค์กร/การตลาด
• บล็อก
• เว็บไซต์เอกสาร
• เว็บไซต์ผลงานที่รองรับแกลเลอรี่ภาพ

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

• @astrojs/mdx
• @astrojs/markdoc
• @astrojs/แผนผังเว็บไซต์
• @astrojs/rss
• @astrojs/tailwind
• @astrojs/alpinejs
• ไอคอนโหราศาสตร์
• astro-seo
• astro-หุ่นยนต์-txt

นอกจากนี้ ภาพประกอบ SVG และ PNG ที่มาจาก Undraw

โปรเจ็กต์นี้เริ่มแรกเริ่มต้นจากการเป็นพอร์ตเปลือยของ hello-gatsby-starter แต่ตอนนี้มีคุณสมบัติเพิ่มเติม (โหมดสว่าง/มืด หน้าหมวดหมู่ การค้นหา ไดอะแกรม คณิตศาสตร์ และอื่นๆ อีกมากมาย!)

คุณสมบัติ

• บล็อกที่มีคุณลักษณะครบถ้วนพร้อมส่วนหน้า (ชื่อเรื่อง คำอธิบาย ผู้แต่ง วันที่ รูปภาพ แท็ก)
• ประสิทธิภาพสูงค่าใช้จ่ายต่ำพร้อม Javascript ขั้นต่ำ (AlpineJS)
• การค้นหาหน้าบล็อกโดยใช้ไคลเอนต์ข้อความแบบเต็มผ่าน lunrjs (ดัชนีการค้นหาโหลดเฉพาะเมื่อเรียกใช้การค้นหาครั้งแรกบนหน้าเท่านั้น)
• หน้าดัชนีและหน้าแต่ละหน้าสำหรับผู้เขียน หมวดหมู่ และแท็ก รวมถึงการแบ่งหน้า
• รองรับฟีด RSS แผนผังเว็บไซต์ และ robots.txt
• การออกแบบ SVG (unDraw, รูปแบบฮีโร่, Iconify)
• รองรับการเน้นไวยากรณ์โค้ด
• รองรับ SEO เต็มรูปแบบ รวมถึง Open Graph, Twitter Cards และ Schema.org ผ่าน JSON-LD
• รองรับโหมด UI แบบสว่างและมืดอย่างเต็มรูปแบบ รวมถึงการตั้งค่าระบบต่อไปนี้ ตามคำแนะนำของ TailwindCSS
• หน้าข้อผิดพลาด 404 ที่กำหนดเอง
• แสดงสมการทางคณิตศาสตร์โดยใช้ KaTeX ผ่าน remark-math/rehype-katex (อยู่ใน $ ... $ หรือ $$ ... $$ )
• แสดงไดอะแกรม Mermaid, Markmap, PlantUML (เขียนเป็นบล็อกโค้ดพร้อมภาษา mermaid , markmap และ plantuml )
• แสดงแผนที่ที่พิกัดทางภูมิศาสตร์และระดับการซูมโดยใช้ส่วนประกอบ Map (ต้องรวม extra: ['map'] เป็นส่วนสำคัญในการโหลดเนื้อหา CSS/JS สำหรับเพจ)
• คำนวณและแสดงเวลาในการอ่านโพสต์บนบล็อก
• เนื้อหา CSS/JS ของไลบรารีภายนอกโหลดเมื่อจำเป็นต่อเพจและต่อแพ็คเกจเท่านั้น - ไม่มีการขยายที่ไม่จำเป็น
• แกลเลอรี่รูปภาพและไลท์บ็อกซ์โดยใช้ PhotoSwipe (รวมถึงการแสดงแท็ก EXIF)
• ส่วนประกอบแบบหมุนโดยใช้ Swiper
• หน้าเอกสารประกอบ (จำลองตาม astro docs เริ่มต้น แต่ใช้ Tailwind)

แพ็คเกจภายนอก

การเริ่มต้นใช้แพ็คเกจภายนอกต่อไปนี้:

• แอสโตร
• TypeScript
• TailwindCSS และ TailwindUI
• สร้างสัญลักษณ์
• รูปแบบฮีโร่
• ยกเลิกการวาดภาพประกอบ
• MDX และมาร์กดาวน์
• Schema.org และ JSON สำหรับการเชื่อมโยงข้อมูล ตรวจสอบประเภทโดยใช้ schema-dts
• เปิดกราฟที่ใช้โดย Facebook
• การ์ดทวิตเตอร์
• อัลไพน์JS
• ค้นหาข้อความแบบเต็มในท้องถิ่นโดยใช้ Lunr
• สมการทางคณิตศาสตร์โดยใช้ KaTeX ผ่าน remark-math และ rehype-katex
• ไดอะแกรมโดยใช้ Mermaid, Markmap และ PlantUML
• เปิดแผนที่ถนนโดยใช้แผ่นพับ
• เวลาอ่านหนังสือ
• PhotoSwipe
• exifr
• สไวเปอร์
• หมายเหตุ อิโมจิ

มันเป็นไปตามสถาปัตยกรรม JAMstack ด้วยการสร้างเวอร์ชันคงที่จากที่เก็บ Git โดยอัตโนมัติ การสาธิตถูกปรับใช้บนหน้า Github

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

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

 /
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   ├── image.png
│   │   └── gallery/
│   │       └── gallery-name/
│   │           └── image.jpg
│   ├── components/
│   │   └── header.astro
│   ├── content/
│   │   ├── blog/
│   │   |   └── 2022-08-01-post.md
│   │   ├── doc/
│   │   |   └── documentation-page.md
|   │   └── config.ts
│   ├── layouts/
│   │   ├── base.astro
│   │   ├── blog.astro
│   │   └── doc.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── contact.astro
│   └── config.ts
└── package.json

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

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

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

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

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

- คำสั่ง

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

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

ประวัติการเผยแพร่

• 1.0.0: การเปิดตัวครั้งแรก
• 1.0.1: ย้ายรูปภาพโซเชียลไปที่ src ปรับปรุงการประมวลผลภาพหน้าปก
• 1.0.2: อัปเกรดแพ็คเกจเป็นเวอร์ชันล่าสุด
• 1.1.0: อัปเดตเป็น astro v2.x ตอนนี้ใช้งานได้กับโหนด 18 และ 19
• 2.0.0: เวอร์ชันใหม่รองรับคอลเลกชัน Astro! ชี้แจงด้วยว่านี่เป็นธีมอเนกประสงค์ ขณะนี้การค้นหามีทั้งหน้า Markdown และ MDX!
• 2.0.1: อัปเดตภาพหน้าจอ และหน้า Landing Page ที่ได้รับการปรับปรุง
• 2.1.0: อัปเดตเป็นแพ็คเกจล่าสุด ลิงก์ dev แบบคงที่ คุณลักษณะที่แบ็คพอร์ตจากบล็อกส่วนตัว รวมถึงลิงก์ถัดไป/ก่อนหน้า การสนับสนุนแกลเลอรีรูปภาพใน Markdown และการควบคุมการแบ่งหน้าที่ได้รับการปรับปรุง
• 2.2.0: แก้ไขข้อผิดพลาดของขุย แผนที่ที่ปรับใช้ใหม่ ไลท์บ็อกซ์และภาพหมุนเพื่อใช้แพ็คเกจแผ่นพับ โฟโต้ไวป์ และสไวเปอร์ แทนที่จะใช้ CDN ภายนอก
• 2.2.1: อัปเดตเป็น astro 2.0.10 ปัญหาการโหลดสินทรัพย์ถาวรพร้อมฐาน
• 2.3.0: ลบเค้าโครงออกจากเนื้อหาบล็อกและเอกสาร
• 2.4.0: ตอนนี้ @astrojs/images รองรับ svg แล้ว ดังนั้นจึงไม่จำเป็นต้องมีการจัดการพิเศษ
• 2.4.1: ใช้ frontmatter ที่แสดงผลสำหรับบล็อกและโพสต์เอกสาร แก้ไขปัญหาไดอะแกรมไม่แสดงผล
• 2.4.2: แพ็คเกจที่อัปเดต
• 3.0.0: การอัปเดตครั้งใหญ่:
  • ใช้การสนับสนุนสินทรัพย์ที่ปรับให้เหมาะสม Astro ใหม่
  • โลโก้แอสโตรใหม่
  • การกรองโพสต์แบบร่างที่ปรับให้เหมาะสม
  • ทำความสะอาดแกลเลอรีแล้ว
  • แก้ไขข้อผิดพลาด SEO
  • ทำความสะอาดข้อผิดพลาดผ้าสำลี
  • ย้ายผู้เขียนและหมวดหมู่ไปยังคอลเลกชันและใช้ Referential Integrity ตาม Astro 2.5.0
  • แปลงลิงก์โซเชียลเป็นการรวบรวมข้อมูล (ต้องใช้ Astro >2.5.0)
  • อัปเดต favicon และข้อมูลเมตาของส่วนหัว
  • ปรับปรุงการค้นหาเพื่อรวมเอกสารประกอบ
• 3.1.0: การอัปเดตการปรับปรุง:
  • ย้ายตัวจัดการแพ็คเกจจากเส้นด้ายไปยัง pnpm
  • ฐานอ้างอิงสำหรับลิงก์ส่วนหัว
  • เพิ่ม eslint และสวยยิ่งขึ้นด้วยปลั๊กอิน
  • แก้ไขข้อผิดพลาดแอตทริบิวต์รูปภาพในองค์ประกอบ seo
  • อัปเดต tsconfig ให้ตรงกับ astro เข้มงวด
  • อัปเดตลิงก์ Katex CSS
  • แก้ไขผู้เขียนไม่ปรากฏในการ์ดบล็อก
  • เพิ่มการสนับสนุน Markdoc
• 3.1.1: การอัปเดตเล็กน้อย:
  • ขี้เกียจโหลดรูปภาพ
  • สนับสนุนอิโมจิ Github ผ่านหมายเหตุอิโมจิ
• 3.1.2: การแก้ไขเล็กน้อย:
  • ตรวจสอบหมวดหมู่ที่เป็นโมฆะ
  • ปรับปรุงหน้าการติดต่อเล็กน้อย
  • ปรับปรุงการประมวลผลถัดไป/ก่อนหน้า
  • แพ็คเกจที่อัปเดต
  • ลดขนาดของปุ่มค้นหาเพื่อรองรับความกว้างขั้นต่ำ
  • เปลี่ยนตัวเลือกรูปภาพสำหรับหน้าจากวัตถุบรรจุเป็นวัตถุปก
  • แก้ไขเว็บไซต์ webmanifest
• 3.1.3: การแก้ไขเล็กน้อย:
  • อัปเกรดเป็น @astrojs/markdoc 0.4.x และ astro ล่าสุด
  • แก้ไขการประกาศอุปกรณ์ประกอบฉากใน [slug] .astro
  • ปิดการใช้งานไฟล์ตัวอย่าง Markdoc เนื่องจากปัญหานี้: withastro/astro#7520
• 3.1.4: การปรับปรุงเล็กน้อย:
  • การประมวลผลภาพแบบครบวงจรสำหรับ svg และบิตแมป
  • เปิดใช้งาน ViewTransitions
• 3.1.5: การปรับปรุงเล็กน้อย:
  • อัปเกรดแพ็คเกจเป็นเวอร์ชันล่าสุด
  • แก้ไขข้อผิดพลาดการตรวจสอบ astro เล็กน้อย
• 3.2.0: การปรับปรุงที่สำคัญ:
  • อัปเดตเป็น Astro 3.x
  • ใช้นโยบายการรักษาความปลอดภัยของเนื้อหาที่ได้รับอนุญาต
• 3.2.1: การปรับปรุงเล็กน้อย:
  • อัปเดตแพ็คเกจ แก้ไขข้อผิดพลาดในการตรวจสอบ astro
• 3.2.2: การปรับปรุงเล็กน้อย:
  • แพ็คเกจที่อัปเดต
  • แก้ไขประเภทการส่งคืน json.ts สำหรับการค้นหา
• 3.2.3: การบำรุงรักษา:
  • แก้ไขนางเงือก v9 ไม่ทำงานอีกต่อไปโดยอัปเกรดเป็นนางเงือกเวอร์ชันล่าสุด
  • อัพเกรดแพ็คเกจ
• 3.2.4: การปรับปรุงเล็กน้อย:
  • อัปเกรดเป็น Astro 4.x
• 3.2.5: การปรับปรุงเล็กน้อย:
  • อัพเกรดแพ็คเกจ
  • ลบ นางเงือก.เริ่มต้น()
• 3.2.6: การบำรุงรักษา:
  • ปิดการใช้งาน ViewTransition เนื่องจากใช้งานไม่ได้กับนางเงือก
• 3.3.0: การบำรุงรักษา:
  • อัปเกรดเป็นแพ็คเกจล่าสุดและ astro-icon 1.x
• 3.3.1: การบำรุงรักษา:
  • อัปเกรดเป็นแพ็คเกจล่าสุดและแก้ไขข้อผิดพลาดในการตรวจสอบ astro
• 3.3.2: การบำรุงรักษา:
  • อัปเกรดเป็นแพ็คเกจล่าสุด
  • แก้ไขการค้นหาไม่ทำงานเนื่องจากการตรวจสอบอัลไพน์ที่เข้มงวดมากขึ้น
  • ย้ายไปยัง astro tsconfig.json มาตรฐาน
  • แก้ไขข้อผิดพลาดในการตรวจสอบ astro
• 3.4.0: การเปลี่ยนแปลงเล็กน้อย:
  • แพ็คเกจที่อัปเดต
  • แทนที่ไอคอนฮีโร่เป็นเวอร์ชัน 2
  • ปรับปรุง RSS และดัชนีการค้นหาเพื่อรวมชื่อผู้เขียนและอีเมล
  • ทำให้ BlogHero ยอมรับโพสต์เป็นอุปกรณ์ประกอบฉากแทนที่จะเป็นส่วนหน้า
  • ย้ายหน้า Markdown ไปยังการรวบรวมเนื้อหา
  • ประเภท Frontmatter ที่ถูกกำจัด
• 4.0.0: การเปลี่ยนแปลงที่สำคัญ:
  • แพ็คเกจที่อัปเดต
  • ลบ @types/photoswipe และ photoswipe tsconfig แล้ว
  • ย้ายไปที่สคีมา RSS
  • ฟังก์ชัน getPosts()
  • แท็กสคีมา
  • ลิงก์แถบด้านข้างที่สร้างขึ้นโดยอัตโนมัติ
  • ปรับปรุง RSS และข้อมูลเมตาการค้นหา