astro theme cactus
v5.0.0
Astro Cactus เป็นสตาร์ทเตอร์ที่เรียบง่ายซึ่งสร้างขึ้นด้วยเฟรมเวิร์ก Astro ใช้เพื่อสร้างบล็อกหรือเว็บไซต์ที่ใช้งานง่าย
ลองชมการสาธิตที่โฮสต์บน Netlify
สร้าง repo ใหม่จากเทมเพลตนี้
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactusแทนที่ pnpm ด้วยตัวเลือก npm / เส้นด้ายที่คุณเลือก
| สั่งการ | การกระทำ |
|---|---|
pnpm install | ติดตั้งการพึ่งพา |
pnpm dev | เริ่มเซิร์ฟเวอร์ dev ในเครื่องที่ localhost:3000 |
pnpm build | สร้างไซต์การผลิตของคุณเป็น ./dist/ |
pnpm postbuild | สคริปต์ Pagefind เพื่อสร้างการค้นหาแบบคงที่ของโพสต์ในบล็อกของคุณ |
pnpm preview | ดูตัวอย่างงานสร้างของคุณภายในเครื่องก่อนที่จะปรับใช้ |
pnpm sync | สร้างประเภทตามการกำหนดค่าของคุณใน src/content/config.ts |
src/site.config.ts สำหรับข้อมูลเมตาพื้นฐานของไซต์astro.config.ts/public :src/styles/global.css ด้วยสไตล์แสงและสีเข้มของคุณเองsrc/site.config.ts คุณสามารถค้นหาธีมและตัวเลือกเพิ่มเติมได้ที่นี่src/components/SocialList.astro เพื่อเพิ่ม/แทนที่โปรไฟล์สื่อของคุณ สามารถพบได้ที่ไอคอน @ icones.js.org ตามคำแนะนำของ Astro Iconsrc/content/post/ & src/content/note/ ด้วยไฟล์ .md/mdx ดูด้านล่างสำหรับรายละเอียดเพิ่มเติมsrc/pages/og-image/[slug].png.ts ไปที่ฟังก์ชันมาร์กอัปซึ่งคุณสามารถแก้ไข html/tailwind-classes ได้ตามความจำเป็น . คุณสามารถใช้สนามเด็กเล่นนี้เพื่อช่วยในการออกแบบของคุณได้src/content/post/social-image.md ข้อมูลเพิ่มเติมเกี่ยวกับ frontmatter สามารถพบได้ที่นี่font-mono ซึ่งอยู่ในไฟล์ css โกลบอล src/styles/global.css คุณสามารถเปลี่ยนแบบอักษรได้โดยลบรูปแบบ font-mono ออก หลังจากนั้น TailwindCSS จะใช้ค่าเริ่มต้นเป็นสแต็กตระกูลฟอนต์ font-sans หากคุณได้แยกเทมเพลต คุณสามารถซิงค์ทางแยกกับโปรเจ็กต์ของคุณเองได้ โดย อย่า ลืมคลิกละทิ้งการเปลี่ยนแปลง เพราะคุณจะสูญเสียการเปลี่ยนแปลงของคุณเอง
หากคุณมีที่เก็บเทมเพลต คุณสามารถเพิ่มเทมเพลตนี้เป็นรีโมตได้ ตามที่อธิบายไว้ที่นี่
ธีมนี้ใช้คอลเลกชั่นเนื้อหาเพื่อจัดระเบียบไฟล์ Markdown และ MDX ในเครื่อง รวมถึงการตรวจสอบประเภทส่วนหน้าด้วยสคีมา -> src/content/config.ts
การเพิ่มโพสต์/โน้ตนั้นง่ายดายเพียงแค่เพิ่มไฟล์ .md(x) ของคุณลงในโฟลเดอร์ src/content/post และ/หรือ src/content/note ซึ่งชื่อไฟล์จะถูกใช้เป็น slug/url โพสต์ที่มาพร้อมกับเทมเพลตนี้มีไว้เป็นตัวอย่างในการจัดโครงสร้างส่วนหน้าของคุณ นอกจากนี้ เอกสาร Astro ยังมีส่วนรายละเอียดในหน้ามาร์กดาวน์
| คุณสมบัติ (* จำเป็น) | คำอธิบาย |
|---|---|
| ชื่อ * | อธิบายตนเอง ใช้เป็นลิงก์ข้อความไปยังโพสต์ h1 บนหน้าโพสต์ และคุณสมบัติชื่อหน้า มีความยาวสูงสุด 60 ตัวอักษร ตั้งค่าเป็น src/content/config.ts |
| คำอธิบาย * | คล้ายกับข้างต้น ใช้เป็นคุณสมบัติคำอธิบาย seo มีความยาวขั้นต่ำ 50 และความยาวสูงสุด 160 ตัวอักษร ซึ่งตั้งค่าไว้ในสคีมาของโพสต์ |
| วันที่เผยแพร่ * | ค่อนข้างเรียบง่ายอีกครั้ง หากต้องการเปลี่ยนรูปแบบวันที่/สถานที่ปัจจุบัน en-GB ให้อัปเดตตัวเลือกวันที่ใน src/site.config.ts โปรดทราบว่าคุณยังสามารถส่งตัวเลือกเพิ่มเติมไปยังส่วนประกอบ <FormattedDate> ได้ หากจำเป็น |
| อัปเดตวันที่ | นี่เป็นวันที่ที่ไม่บังคับซึ่งแสดงเมื่อมีการอัปเดตโพสต์ ในรูปแบบเดียวกับวันที่เผยแพร่ |
| แท็ก | แท็กเป็นทางเลือกสำหรับโพสต์ที่สร้างขึ้น แท็กใหม่ใด ๆ จะแสดงใน yourdomain.com/posts & yourdomain.com/tags และสร้างเพจ yourdomain.com/tags/[yourTag] |
| ภาพปก | นี่เป็นออบเจ็กต์เสริมที่จะเพิ่มภาพหน้าปกที่ด้านบนของโพสต์ รวมทั้ง src : " path-to-image " และ alt : " image alt " คุณสามารถดูตัวอย่างได้ใน src/content/post/cover-image.md |
| ogImage | นี่คือคุณสมบัติทางเลือก รูปภาพ OG จะถูกสร้างขึ้นโดยอัตโนมัติสำหรับทุกโพสต์ที่ ไม่ได้ ระบุคุณสมบัตินี้ หากคุณต้องการสร้างโพสต์ของคุณเองสำหรับโพสต์ใดโพสต์หนึ่ง โดยรวมคุณสมบัตินี้และลิงก์ไปยังรูปภาพของคุณ ธีมจะข้ามการสร้างหนึ่งโพสต์โดยอัตโนมัติ |
| ร่าง | นี่เป็นคุณสมบัติที่ไม่บังคับเนื่องจากตั้งค่าเป็นเท็จตามค่าเริ่มต้นในสคีมา โดยการเพิ่ม true โพสต์จะถูกกรองออกจากรุ่นที่ใช้งานจริงในหลายๆ แห่ง inc การโทร getAllPosts(), og-images, ฟีด rss และเพจที่สร้างขึ้น คุณสามารถดูตัวอย่างได้ใน src/content/post/draft-post.md |
| คุณสมบัติ (* จำเป็น) | คำอธิบาย |
|---|---|
| ชื่อ * | สตริง ความยาวสูงสุด 60 ตัวอักษร |
| คำอธิบาย | เพื่อใช้สำหรับคุณสมบัติคำอธิบายเมตาส่วนหัว |
| วันที่เผยแพร่ * | รูปแบบ ISO 8601 พร้อมการชดเชยที่อนุญาต |
Astro Cactus มีข้อมูลโค้ด VSCode ที่เป็นประโยชน์ซึ่งสร้าง 'stub' ส่วนหน้าสำหรับการโพสต์และบันทึกย่อ ซึ่งพบได้ที่นี่ -> .vscode/post.code-snippets เริ่มพิมพ์คำ frontmatter ในไฟล์ .md(x) ที่คุณสร้างขึ้นใหม่เพื่อทริกเกอร์ ตัวอย่างโค้ด Visual Studio ปรากฏใน IntelliSense ผ่าน (⌃Space) บน mac (Ctrl+Space) บน windows
การบูรณาการนี้นำเสนอคุณลักษณะการค้นหาแบบคงที่สำหรับการค้นหาโพสต์และบันทึกย่อของบล็อก ในรูปแบบปัจจุบัน pagefind ใช้งานได้เมื่อมีการสร้างไซต์แล้วเท่านั้น ธีมนี้เพิ่มสคริปต์หลังการสร้างที่ควรรันหลังจาก Astro ได้สร้างไซต์แล้ว คุณสามารถดูตัวอย่างในเครื่องได้โดยการรันทั้ง build && postbuild
ผลการค้นหาจะรวมเฉพาะหน้าจากโพสต์และบันทึกย่อเท่านั้น หากคุณต้องการรวมหน้าอื่นๆ/ทั้งหมดของคุณ ให้ลบ/เปลี่ยนตำแหน่งแอตทริบิวต์ data-pagefind-body ไปยังแท็กบทความที่พบใน src/layouts/BlogPost.astro และ src/components/note/Note.astro
นอกจากนี้ยังช่วยให้คุณสามารถกรองโพสต์ตามแท็กที่เพิ่มไว้ส่วนหน้าของโพสต์ในบล็อก หากคุณต้องการลบสิ่งนี้ ให้ลบแอตทริบิวต์ data-pagefind-filter="tag" ออกจากลิงก์ใน src/components/blog/Masthead.astro
หากคุณไม่ต้องการรวมการบูรณาการนี้ เพียงลบส่วนประกอบ src/components/Search.astro และถอนการติดตั้งทั้ง @pagefind/default-ui & pagefind จาก package.json คุณจะต้องลบสคริปต์หลังการสร้างออกจากที่นี่ด้วย
คุณสามารถลดเพย์โหลด CSS เริ่มต้นของ CSS ของคุณได้ ดังที่แสดงไว้ที่นี่ โดยการโหลดสไตล์ส่วนประกอบของเว็บแบบ Lazy Loading
คุณอาจต้องการติดตามจำนวนผู้เยี่ยมชมบล็อก/เว็บไซต์ของคุณ เพื่อทำความเข้าใจแนวโน้มและโพสต์/เพจยอดนิยมที่คุณสร้างขึ้น มีผู้ให้บริการหลายรายที่สามารถใช้ได้ รวมถึงโฮสต์เว็บ เช่น vercel, netlify และ cloudflare
ธีม/เทมเพลตนี้ไม่มีวิธีแก้ปัญหาเฉพาะ เนื่องจากมีกรณีการใช้งานและ/หรือตัวเลือกมากมายที่บางคนอาจใช้หรือไม่ใช้ก็ได้
คุณอาจถูกขอให้รวมข้อมูลโค้ดไว้ในแท็ก HEAD ของเว็บไซต์ของคุณเมื่อตั้งค่า ซึ่งสามารถพบได้ใน src/layouts/Base.astro หรือคุณสามารถเพิ่มข้อมูลโค้ดใน src/components/BaseHead.astro
Astro docs มีส่วนที่ดีและมีรายละเอียดเกี่ยวกับวิธีการปรับใช้ไซต์ Astro ของคุณบนแพลตฟอร์มต่างๆ และลักษณะเฉพาะของไซต์เหล่านั้น
ตามค่าเริ่มต้น ไซต์จะถูกสร้างขึ้น (ดูส่วนคำสั่งด้านบน) ไปยังไดเร็กทอรี /dist
ธีมนี้ได้รับแรงบันดาลใจจาก Hexo Theme Cactus
เอ็มไอที
