ธีมบล็อกที่เรียบง่ายที่สร้างด้วย Astro การสร้างเริ่มต้นที่ง่ายและรวดเร็วสำหรับทุกคนที่ต้องการเริ่มต้นบล็อกของตนเอง
ดูการสาธิต · รายงานข้อผิดพลาด · คุณสมบัติคำขอ
แรงจูงใจ
คุณสมบัติที่สำคัญ
สาธิต
เริ่มต้นอย่างรวดเร็ว
คำสั่ง
การกำหนดค่าเว็บไซต์ของคุณ
การกำหนดค่าไซต์ ลิงก์โซเชียลมีเดีย และลิงก์ Navbar
การเพิ่มโพสต์และโครงการ
การสนับสนุนหลายภาษา
ปรับใช้
ฟังก์ชั่นพิเศษ
เครดิต
แม้ว่าจะมีธีมบล็อกอยู่มากมายอยู่แล้ว แต่ฉันอยากได้ธีมที่ให้ความรู้สึกถึงเทอร์มินัล/dev และฟีเจอร์บางอย่างที่ธีมอื่นไม่มี
แอสโตร v4 เร็ว
คลาสยูทิลิตี้ TailwindCSS
มาร์กอัป HTML เชิงความหมายที่เข้าถึงได้
ตอบสนองและเป็นมิตรกับ SEO
การสนับสนุนหลายภาษา
โหมดมืด / สว่างโดยใช้ตัวแปร Tailwind และ CSS
โพสต์ปักหมุดและโครงการ
การรวม Astro Assets เพื่อภาพที่ปรับให้เหมาะสม
โพสต์ MD และ MDX
การแบ่งหน้า
ฟีด RSS อัตโนมัติ
แผนผังเว็บไซต์ที่สร้างขึ้นโดยอัตโนมัติ
ส่วนประกอบไอคอน Astro Icon svg
ปุ่มกลับไปด้านบน
ตรวจสอบการสาธิตที่นี่
สร้าง repo ใหม่จากเทมเพลตนี้
# npm 7+ npm create astro@latest -- --template kirontoo/astro-theme-cody # pnpm pnpm dlx create-astro --template kirontoo/astro-theme-cody
(กลับไปด้านบน)
คำสั่งทั้งหมดถูกรันจากรูทของโปรเจ็กต์ จากเทอร์มินัล:
สั่งการ | การกระทำ |
---|---|
pnpm install | ติดตั้งการพึ่งพา |
pnpm run dev | เริ่มเซิร์ฟเวอร์ dev ในเครื่องที่ localhost:4321 |
pnpm run build | สร้างไซต์การผลิตของคุณเป็น ./dist/ |
pnpm run preview | ดูตัวอย่างงานสร้างของคุณภายในเครื่องก่อนที่จะปรับใช้ |
pnpm run astro ... | รันคำสั่ง CLI เช่น astro add , astro check |
pnpm run astro -- --help | รับความช่วยเหลือในการใช้ Astro CLI |
(กลับไปด้านบน)
การกำหนดค่าไซต์ ลิงก์โซเชียลมีเดีย และลิงก์ Navbar ของคุณทั้งหมดอยู่ภายใน src/consts.ts
ที่นั่น คุณสามารถกำหนดค่าชื่อเริ่มต้น คำอธิบาย ภาษา โปรไฟล์ ลิงก์โซเชียลมีเดีย และลิงก์แถบนำทางที่มองเห็นได้
ธีมนี้ใช้คอลเลกชั่นเนื้อหาเพื่อจัดระเบียบไฟล์ Markdown และ/หรือ MDX รวมถึงการตรวจสอบประเภทส่วนหน้าด้วยสคีมา -> src/content/config.ts
คุณสามารถดูตัวอย่างโพสต์บล็อกได้ใน src/content/blog
และตัวอย่างโปรเจ็กต์ใน src/content/project
คุณสมบัติ (* = จำเป็น) | คำอธิบาย |
---|---|
ชื่อ * | ชื่อโพสต์ของคุณ จำกัดจำนวนอักขระได้สูงสุด 150 ตัว |
คำอธิบาย * | คำอธิบายสั้น ๆ เกี่ยวกับโพสต์ของคุณ ซึ่งจะใช้สำหรับ SEO ด้วย มีความยาวสูงสุด 250 ตัวอักษร |
ผับเดท * | วันที่เผยแพร่ |
อัปเดตวันที่ | วันที่ที่ไม่บังคับซึ่งแสดงถึงเวลาที่โพสต์ได้รับการอัปเดต โปรดทราบว่าวันที่นี้จะถูกนำมาใช้แทนวันที่เผยแพร่เพื่อสั่งซื้อโพสต์เมื่อมีข้อมูล |
ฮีโร่อิมเมจ | ภาพปกเสริมสำหรับการโพสต์ของคุณ รวมคุณสมบัติ src และ alt ตรวจสอบ src/content/blog/first-post.md เพื่อดูตัวอย่าง |
ogImage | รูปภาพเสริมที่ใช้สำหรับ SEO |
แท็ก | ใช้แท็กเสริมเพื่อจัดระเบียบโพสต์ของคุณเป็นหมวดหมู่หรือหัวข้อ แท็กทั้งหมดจะแสดงใน yourdomain.com/tags |
ชุด | ใช้ซีรีส์เสริมเพื่อจัดระเบียบโพสต์ของคุณเป็นชุดโพสต์ ซีรีส์ทั้งหมดจะแสดงใน yourdomain.com/series |
ร่าง | บูลีนที่เป็นทางเลือก ลบโพสต์จากการเผยแพร่ |
คำสั่ง | ค่าตัวเลขเสริมตั้งแต่ 1 - 5 เพื่อปักหมุดบางโพสต์ไว้ด้านบน จำกัดโพสต์ปักหมุดเพียง 5 โพสต์เท่านั้น |
ซ่อน | บูลีนที่เป็นทางเลือก ซ่อนโพสต์ในหน้า /blog จะยังคงปรากฏใน /archive |
คุณสมบัติ (* = จำเป็น) | คำอธิบาย |
---|---|
ชื่อ * | ชื่อโครงการของคุณ จำกัดจำนวนอักขระได้สูงสุด 150 ตัว |
คำอธิบาย * | คำอธิบายสั้นๆ เกี่ยวกับโครงการของคุณ ซึ่งจะใช้สำหรับ SEO ด้วย |
ผับเดท * | วันที่เผยแพร่ |
ฮีโร่อิมเมจ | ภาพหน้าปกเพิ่มเติมสำหรับโครงการของคุณ รวมคุณสมบัติ src และ alt ตรวจสอบ src/pages/projects/project-1.md เพื่อดูตัวอย่าง |
ogImage | รูปภาพเสริมที่ใช้สำหรับ SEO |
สแต็ค * | รายการเทคโนโลยีที่โครงการของคุณใช้ซึ่งจะแสดงผลเป็นไอคอน ธีมนี้ใช้ไลบรารี SVG Logos คุณสามารถใช้ icones.js.org เพื่อค้นหาไอคอนที่คุณต้องการ |
แพลตฟอร์ม | เชื่อมโยงไปยังเว็บไซต์หรือการสาธิต |
เว็บไซต์ | เชื่อมโยงไปยังเว็บไซต์หรือการสาธิต |
GitHub | ลิงก์ repo GitHub ของคุณ |
ร่าง | บูลีนที่เป็นทางเลือก ลบโปรเจ็กต์จากการเผยแพร่ |
คำสั่ง | ค่าตัวเลขเสริมตั้งแต่ 1 - 5 เพื่อปักหมุดบางโปรเจ็กต์ไว้ที่ด้านบน จำกัดโพสต์ปักหมุดเพียง 5 โพสต์เท่านั้น |
(กลับไปด้านบน)
ดูวิกิเพื่อตั้งค่าการสนับสนุนหลายภาษาสำหรับบล็อกของคุณ
Astro มอบเอกสารที่ดีเยี่ยมสำหรับการปรับใช้เว็บไซต์ Astro ของคุณบนแพลตฟอร์มต่างๆ คุณสามารถหาได้ที่นี่
ลองดู Astro Recipes เพื่อเพิ่มฟังก์ชันอื่นๆ เช่น ฟีด RSS
ธีมนี้มีพื้นฐานมาจากธีม Astro Cactus และ Hugo Risotto
(กลับไปด้านบน)