digital garden
v0.7.2
ภาพหน้าจอเพิ่มเติมที่นี่
เทมเพลตบล็อกโอเพนซอร์ส (สวนดิจิตอล) สำหรับนักพัฒนาโดยใช้เราเตอร์แอป Next.js, MDX, ContentLayer, Tailwind CSS, @Shadcn/UI, ไอคอนลูไซด์และอื่น ๆ
หากคุณรักเทมเพลตนี้และ/หรือใช้โปรดให้ดาวบน GitHub สิ่งนี้จะช่วยให้ผู้คนค้นพบมันมากขึ้นจึงช่วยปรับปรุงเทมเพลต
หมายเหตุ: โครงการนี้มีการพัฒนาอยู่เสมอและยังห่างไกลจากความสมบูรณ์แบบหรือทำ ฉันมักจะเปิดรับข้อเสนอแนะและการมีส่วนร่วม อย่าลังเลที่จะเปิดปัญหาหรือการประชาสัมพันธ์หากคุณมีความคิดหรือข้อเสนอแนะใด ๆ คุณยังสามารถดูแผนงานสำหรับคุณสมบัติที่วางแผนไว้หากคุณต้องการมีส่วนร่วม
ในฐานะนักพัฒนาที่สร้างเนื้อหาฉันต้องการมีบล็อกและสวนดิจิตอลที่ฉันสามารถแบ่งปันความคิดและความคิดของฉันกับโลก ตอนนี้ยังไม่มี "โซลูชันที่สมบูรณ์แบบ" สำหรับเรื่องนี้ในปัจจุบัน ด้วย Analytics, SEO, การสมัครสมาชิกอีเมล, เครื่องมือที่ทันสมัย, การออกแบบที่เรียบง่าย, ฯลฯ เราต้องสร้างหนึ่งตั้งแต่เริ่มต้นใช้เทมเพลตการออกแบบและรหัสคุณสมบัติหรือใช้เครื่องมือ CMS/No-Code
ดังนั้นฉันจึงตัดสินใจสร้างวิธีแก้ปัญหาที่ฉันจะใช้ตัวเอง นี่คือผลลัพธ์
หากคุณต้องการดูว่าฉันตั้งค่าเทมเพลตนี้สำหรับสวนดิจิตอลของฉันเองได้อย่างไรคุณสามารถตรวจสอบการกระทำนี้ด้วยการเปลี่ยนแปลงทั้งหมด
pnpm installutils/metadata.ts ด้วยข้อมูลและการตั้งค่าทั่วไปของคุณutils/uses-data.ts ด้วยซอฟต์แวร์และฮาร์ดแวร์ที่คุณใช้utils/projects-data.ts ด้วยโครงการของคุณutils/navigation-links.ts ด้วยลิงก์ที่คุณต้องการในการนำทางcontent/pages/now ด้วยความพร้อมของคุณcontent/pages/about กับชีวภาพของคุณpnpm devเปิด http: // localhost: 3000 ในเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์
คุณสามารถเขียนเนื้อหาใน Markdown หรือ MDX เนื้อหาอยู่ใน content/ และจัดระเบียบในโฟลเดอร์ โฟลเดอร์ pages มีหน้า โฟลเดอร์โพ posts มีบล็อกโพสต์ โฟลเดอร์ projects มีโครงการ
หน้ารายการแก้ไขจะทำในโฟลเดอร์ lib
/uses - lib/uses-data.ts/projects - lib/projects-data.ts/social - lib/social-data.ts Frontmatter ใช้เพื่อกำหนดข้อมูลเมตาสำหรับหน้าและโพสต์ มันอยู่ที่ด้านบนของไฟล์และเขียนใน Yaml คุณสามารถกำหนดฟิลด์ต่อไปนี้:
title - ชื่อของหน้า/โพสต์description - คำอธิบายของหน้า/โพสต์publishedDate - วันที่โพสต์ (ไม่ได้ใช้ในหน้า)lastUpdatedDate - วันที่ของหน้า/โพสต์tags - รายการแท็กสำหรับโพสต์ คุณสามารถเพิ่มแท็กใหม่ได้โดยเพิ่มลงในรายการ tagOptions (ไม่ได้ใช้ในหน้า)series - ชุดของโพสต์ ซีรีส์มีชื่อเรื่องและหมายเลขคำสั่งซื้อสำหรับโพสต์ (ไม่ได้ใช้ในหน้า)author - ผู้เขียนโพสต์ ผู้เขียนมีชื่อและรูปภาพ (ไม่ได้ใช้ในหน้า)status - ไม่ว่าจะเป็นหน้า/โพสต์ที่เผยแพร่หรือร่างคุณสามารถปรับใช้โครงการด้วย Vercel หรือผู้ให้บริการโฮสติ้งอื่น ๆ หากคุณต้องการใช้ Vercel คุณสามารถใช้ปุ่มที่ด้านบนของ readme นี้
package.json ข้อมูลผู้แต่ง JSONNEXT_PUBLIC_BASE_URL บน vercel เพื่อชี้ไปที่ URL รากของเว็บไซต์ของคุณ โครงการนี้ใช้อินเตอร์เป็นตัวอักษรเริ่มต้น คุณสามารถเปลี่ยนได้ใน app/layout.tsx โดยใช้แพ็คเกจ next/fonts
โครงการใช้สี tailwind และ @shadcn/ui config ปรับแต่งสีบน globals.css
มีองค์ประกอบลายเซ็นที่จะใช้ในส่วนท้าย คุณสามารถแก้ไขลายเซ็นบน components/signature.tsx ฉันใช้ Figma เพื่อเขียนลายเซ็นด้วยตัวอักษร Caveat และส่งออกเป็น SVG คุณสามารถทำเช่นเดียวกันและอัปเดต SVG ในส่วนประกอบ
รูปภาพและไฟล์สื่ออื่น ๆ อยู่ใน public/ ไดเรกทอรี คุณสามารถใช้พวกเขาในเนื้อหาของคุณโดยใช้ /<filename>.<ext> เส้นทาง
นี่คือการสอนอย่างรวดเร็วเกี่ยวกับวิธีการสร้างอวตารที่คล้ายกันใน Figma ภายในไม่ถึง 2 นาที https://youtu.be/ny-vaeehjkm
คุณสามารถเปลี่ยนข้อมูลเมตาและรายละเอียดของผู้เขียนใน utils/metadata.ts สิ่งนี้จะถูกใช้รอบ ๆ ไซต์สำหรับชื่อเรื่องลิงค์สังคมที่จับสังคม SEO ฯลฯ
คุณสามารถแก้ไขลิงก์การนำทางใน lib/navigation-links.ts
คุณสามารถแก้ไขลิงก์โซเชียลใน lib/social-data.ts นอกจากนี้คุณยังสามารถเพิ่มลิงก์โซเชียลใหม่โดยเพิ่มลงในไฟล์และใช้ชื่อแพลตฟอร์มเป็นคีย์และ URL เป็นค่า ส่วนประกอบ SocialButton จะเพิ่มไอคอนสำหรับแพลตฟอร์มโดยอัตโนมัติหากรองรับใน Simple-Icons
ในการกำหนดค่าคุณจะต้องเปิดใช้งานบนแผงควบคุมโครงการ Vercel โดยเลือกโครงการของคุณจากนั้นคลิกแท็บ Analytics และคลิกเปิดใช้งานจากกล่องโต้ตอบ
อูมามิเป็นโซลูชันการวิเคราะห์เว็บที่ง่ายใช้งานง่ายพร้อมตัวเลือกการโฮสต์ตนเอง! คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเว็บไซต์ของ Umami (คำแนะนำ: บนรถไฟคุณสามารถโฮสต์ตัวเองได้ว่ามันมีต้นทุนต่ำหรือแม้กระทั่งฟรี)
กำหนดค่า: ตั้งค่า NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID ตัวแปรสภาพแวดล้อมในไฟล์ .env.local ของคุณและบนแผงควบคุม Vercel
น่าเชื่อถือเป็นทางเลือกที่เรียบง่ายน้ำหนักเบาและโอเพ่นซอร์สสำหรับ Google Analytics คุณสามารถอ่านเพิ่มเติมเกี่ยวกับมันได้ในเว็บไซต์ที่เป็นไปได้
กำหนดค่า: ตั้งค่า NEXT_PUBLIC_PLAUSIBLE_DOMAIN & NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL ตัวแปรสภาพแวดล้อมในไฟล์ .env.local ของคุณและบนแผงควบคุม Vercel ของคุณ หากคุณกังวลเกี่ยวกับตัวบล็อกโฆษณาคุณสามารถพร็อกซีสคริปต์ที่เป็นไปได้ผ่านโดเมนของคุณเอง คุณสามารถอ่านเพิ่มเติมได้ที่นี่
Google Analytics เป็นบริการ Web Analytics ที่นำเสนอโดย Google ที่ติดตามและรายงานปริมาณการเข้าชมเว็บไซต์ปัจจุบันเป็นแพลตฟอร์มในแบรนด์แพลตฟอร์มการตลาดของ Google คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเว็บไซต์ของ Google Analytics
กำหนดค่า: SET NEXT_PUBLIC_GOOGLE_ANALYTICS_ID ตัวแปรสภาพแวดล้อมในไฟล์ .env.local ของคุณและบนแผงควบคุม Vercel
การสนับสนุนผู้ให้บริการการวิเคราะห์อื่น ๆ กำลังดำเนินการอยู่ อย่าลังเลที่จะเปิดปัญหาหากคุณมีคำแนะนำหรือการประชาสัมพันธ์หากคุณต้องการนำไปใช้ด้วยตัวเอง
MailerLite เป็นเครื่องมือการตลาดผ่านอีเมลที่เรียบง่ายสำหรับธุรกิจทุกประเภท คุณสามารถอ่านเพิ่มเติมได้บนเว็บไซต์ MailerLite
กำหนดค่า: ตั้ง EMAIL_API_BASE , EMAIL_API_KEY และ EMAIL_GROUP_ID ตัวแปรสภาพแวดล้อมในไฟล์ .env.local ของคุณและบนแผงควบคุม Vercel
การสนับสนุนผู้ให้บริการจดหมายข่าวรายอื่นกำลังดำเนินการอยู่ อย่าลังเลที่จะเปิดปัญหาหากคุณมีคำแนะนำหรือการประชาสัมพันธ์หากคุณต้องการนำไปใช้ด้วยตัวเอง
คุณสามารถเลือกระหว่าง 3 ตัวแปรฮีโร่ที่แตกต่างกันเพื่อใช้ใน app/(site)/page.tsx โดยการเปลี่ยนองค์ประกอบฮีโร่ที่นำเข้า
HeroSimple - ส่วนฮีโร่ที่มีศูนย์กลางที่เรียบง่ายพร้อมรูปภาพชื่อและคำบรรยายHeroVideo - 2 คอลัมน์ฮีโร่คอลัมน์ที่มีวิดีโอฝังอยู่ด้านหนึ่งและชื่อและคำบรรยายอีกด้านหนึ่งHeroImage - 2 คอลัมน์ฮีโร่คอลัมน์พร้อมรูปภาพด้านหนึ่งและชื่อและคำบรรยายอีกด้านหนึ่งHeroMinimal - ชื่อส่วนฮีโร่ขนาดเล็กชื่อและตำแหน่งงาน ฉันขอแนะนำให้เพิ่มประสิทธิภาพรูปภาพอย่างรวดเร็วด้วย ImageOptim ติดตั้งบน Mac ของคุณจากนั้นเปิดโฟลเดอร์ public ใน Finder เลือกรูปภาพทั้งหมดคลิกขวาและเลือก "เปิดด้วย> imageoptim" สิ่งนี้จะเพิ่มประสิทธิภาพรูปภาพทั้งหมดในโฟลเดอร์
หมายเหตุ: อย่าหักโหม คุณสามารถทำให้ภาพดูไม่ดีด้วยอัลกอริทึมการบีบอัดที่สูญเสีย
สร้าง PR และเพิ่มบล็อกของคุณในรายการนี้หากคุณใช้เทมเพลต!
robots.txt & sitemap.xml โครงการนี้มาจากนักพัฒนาสำหรับนักพัฒนา ยินดีต้อนรับการมีส่วนร่วมทั้งหมด! โปรดอย่าลังเลที่จะ:
developdevelop สาขาการมีส่วนร่วมใด ๆ ที่คุณทำจะอยู่ภายใต้ใบอนุญาตซอฟต์แวร์ MIT ในระยะสั้นเมื่อคุณส่งการเปลี่ยนแปลงรหัสการส่งของคุณจะถูกเข้าใจว่าอยู่ภายใต้ใบอนุญาต MIT เดียวกันที่ครอบคลุมโครงการ จรรยาบรรณสามารถพบได้ที่นี่
หากคุณรักเทมเพลตนี้และ/หรือใช้โปรดให้ดาวบน GitHub
