astro ink

Astro Ink เป็นธีมแบบมินิมอลที่สร้างขึ้นเพื่อตอบสนองความต้องการบล็อกแบบมาร์กดาวน์แบบมินิมอล มันมาพร้อมกับส่วนประกอบ Astro พื้นฐานเกือบทั้งหมดที่คุณอาจต้องการในขณะที่สร้างบล็อกส่วนตัวน้ำหนักเบา มีประสิทธิภาพ และเน้นไปที่การจัดส่ง Javascript น้อยลงตามค่าเริ่มต้น

ได้รับแรงบันดาลใจอย่างมากจากธีม Ink ของ Hugo และมุ่งมั่นที่จะคงความสว่างไว้ ในขณะเดียวกันก็เป็นพื้นฐานสำหรับบล็อกที่สวยงามและเรียบง่าย

คุณสมบัติ

• Minimal, Crisp, Markdown-Blog Ready อัปเดตเป็น Astro ล่าสุดเสมอ (ปัจจุบันคือรุ่น 2.x ) ภายใต้ประทุน
• Svelte Ready - ด้วยความพยายามที่จะคงน้ำหนักเบา มีประสิทธิภาพ และเข้าถึงได้มากขึ้นจาก POV ของ Astro Svelte จึงใช้สำหรับส่วนประกอบแบบโต้ตอบ เช่น ตัวสลับธีม
• โมดูลาร์ - โครงสร้างเป็นแบบโมดูลาร์สูง โดยส่วนประกอบต่างๆ ทำหน้าที่ได้เพียงงานเดียวและทำงานได้ดีเพียงงานเดียว
• Astro 2.0 Content Collection + Dynamic Pages - พร้อมด้วย Next.js เช่นเดียวกับไดนามิกเพจ เพื่อรองรับระบบการจำแนกตามแท็กพร้อมผลลัพธ์แบบแบ่งหน้า กำหนดค่าได้ทั้งหมด
• โหมดมืดและรหัสสี - รองรับโหมดมืดและโหมดสี 6+ โหมดที่เลือกโดยใช้ tailwind.config.js คุณสามารถส่ง THEME_KEY ด้วย dev หรือ build script/commands เช่น THEME_KEY=purpleheart astro build/dev เพื่อเปลี่ยนธีมสีที่ใช้อยู่ ธีมที่มีอยู่ทั้งหมดสามารถพบได้ใน tailwind.theme.config.js หากต้องการปรับแต่งส่วนบล็อก ให้เพิ่มคลาส prose-{color} ของ Tailwind Typography ตามที่อ้างอิงไว้ที่นี่
• Netlify CMS - เพิ่ม/แก้ไข/อัปเดตโพสต์ทั้งหมดในไดเร็กทอรี /blog โดยไปที่ your-site.netlify.com/admin เช่น astro-ink.netlify.app/admin ด้วยข้อมูลรับรอง Netlify ของคุณ ต้องการ Netlify Identity (https://app.netlify.com/sites/your-site/settings/identity#registration ) และ Git Gateway (https://app.netlify.com/sites/your-site/settings/identity #services) เปิดใช้งานแล้ว
• โพสต์ในอนาคต (พร้อม Github Actions) - สร้างโพสต์ในไดเร็กทอรี /src/drafts โดยมี date ในอนาคตในรูปแบบ YYYY-MM-DD และปล่อยให้ Github Action ที่สร้างขึ้นเป็นพิเศษดูแลการเผยแพร่อัตโนมัติในวันที่คุณระบุ คุณสามารถกำหนดค่าช่วงเวลาการตรวจสอบได้ใน Github Action
• การค้นหาฝั่งไคลเอ็นต์ - อนุญาตให้ผู้ใช้ของคุณเข้าถึงบล็อกโพสต์ของคุณได้อย่างรวดเร็วด้วยการค้นหาฝั่งไคลเอ็นต์ Lunr.js
• ดูผลงานเคาน์เตอร์ Redis/Upstash Redis - กำหนดค่าโฮสต์ Redis ของคุณ วาง URL การเชื่อมต่อไว้ในคอนโซลของผู้ให้บริการโฮสติ้งของคุณ (Vercel, Netlify ฯลฯ) หรือในไฟล์ .env (การพัฒนาในเครื่อง) ยกเลิกการใส่ความคิดเห็นโค้ดการเชื่อมต่อที่นี่และปรับใช้ ไซต์ของคุณขับเคลื่อนด้วยตัวนับจำนวนการดูแบบไดนามิก ดู .env.example เพื่อทำความเข้าใจค่าสภาพแวดล้อมต่างๆ ที่คุณต้องกำหนดค่า
• หน้าสื่อพร้อมการสนับสนุนช่อง YT - แสดงเนื้อหาช่อง YT ของคุณบนหน้าสื่อได้อย่างง่ายดายโดยเพียงแค่ใส่รหัสช่องของคุณลงในค่าคงที่ ytChannelId ของไฟล์กำหนดค่า อีกทางเลือกหนึ่ง ปิดการใช้งานภาพขนาดย่อจากรายการวิดีโอของช่อง YT ของคุณโดยตั้งค่า USE_MEDIA_THUMBNAIL เป็น false
• การ์ดผู้เขียน - เพิ่มการ์ดผู้เขียนตามโพสต์หรือทั่วทั้งไซต์ได้อย่างง่ายดาย โดยมีปุ่มติดตาม Twitter โดยตั้งค่า USE_AUTHOR_CARD ให้เป็น true ภายในไฟล์กำหนดค่า
• การซ้อนทับรูปภาพที่มีธีม - คุณสามารถเลือกเปิดใช้งานการซ้อนทับที่สามารถเพิ่มการไล่ระดับสีที่มีธีมที่สวยงามที่ด้านบนของรูปภาพโพสต์ของคุณโดยตั้งค่า USE_POST_IMG_OVERLAY ให้เป็น true ภายในไฟล์กำหนดค่า

จะเริ่มต้นอย่างไร?

เพียงโคลนเทมเพลตนี้ และเริ่มทำงานจากโคลนของคุณ คุณมีคำสั่ง NPM ทั่วไปทั้งหมดตามที่คุณต้องการ เช่น dev , build ฯลฯ โปรดดูที่ package.json เพื่อดูรายการคำสั่งที่มีอยู่ทั้งหมด

หมายเหตุ: ใช้ npx degit one-aalam/astro-ink เพื่อโคลนเทมเพลตโดยไม่มีประวัติ git ใด ๆ

หมายเหตุ: เทมเพลตนี้สร้างเอาต์พุต server (พร้อมใช้ SSR) ตามค่าเริ่มต้น หากคุณต้องการบิลด์ static

• เปลี่ยน output เป็น static จาก server ใน astro.config.js
• ถอด adapter: vercel()
• ลบ API ตัวนับมุมมอง
• ตั้งค่า USE_VIEW_STATS เป็น false ภายใน config.ts

หมายเหตุ: ก่อนที่จะรัน npm run dev เป็นครั้งแรก -

• สร้างไฟล์ .env โดยเรียกใช้ mv .env.example .env (หากคุณใช้ Linux distro หรือ Mac)
• ตั้งค่าตัวแปร SITE_URI เป็น SITE_URI=http://localhost:4321 ( โดยที่ 4321 เป็นพอร์ตที่โครงการของคุณกำลังทำงานอยู่ )

สร้างด้วยหมึก Astro

• jamesperkins.dev - เว็บไซต์ส่วนตัวของนักพัฒนา YouTube ผู้สอน James R Perkins
• highlandcows.github.io บล็อกส่วนตัวของ Nick Jacob

รู้จักเว็บไซต์ที่สร้างด้วย Astro Ink หรือไม่? แจ้งให้เราทราบบน Twitter

ต้องการเรียนรู้ Astro ในขณะที่สร้าง Ink ไหม?

ธีมนี้เริ่มแรกสร้างขึ้นด้วยอัลฟ่าตัวแรก และจากนั้นเป็นเวอร์ชันเบต้าของ Astro Framework หากคุณเพิ่งเริ่มต้นด้วย Astro คุณสามารถเรียนรู้ Astro ได้จริงในขณะที่สร้างธีมนี้โดยติดตามชุดบล็อกที่ฉันเขียนซึ่งจะสอนคุณเกี่ยวกับ Astro!

ตรงไปที่ aalam.in/blog และรู้

• วิธีการตั้งค่า Astro และเรียกใช้งานด้วยค่าเริ่มต้นที่จำเป็นสำหรับการออกแบบ การสร้างต้นแบบ และการปรับใช้ส่วนเพิ่ม
• การจัดการส่วนประกอบการนำเสนอและการสร้างเพจ Astro
• การป้อนข้อมูลภายในและข้อมูลระยะไกลไปยังหน้า Astro
• นำเสนอการโต้ตอบที่คุณไม่สามารถทำได้โดยปราศจากมันใน Astro
• การสร้างเพจไดนามิกที่ขับเคลื่อนด้วยข้อมูลและผลลัพธ์แบบแบ่งหน้าใน Astro
• เขียนเนื้อหาไซต์ Astro ของคุณด้วย CMS ที่ใช้ Git