nextjs blog theme

ตัวเริ่มต้นบล็อกที่ปรับแต่งได้โดยใช้:

• next.js v15 (เราเตอร์หน้า)
• tailwind v3.x
• Netlify Visual Editor
• การสนับสนุน MDX ในตัว
• รวมถึงการออกแบบที่ทันสมัยด้วยธีม Dark & Light

ใช้ห่านตัวกันที่การสาธิต

คลิกที่นี่เพื่อดูคำแนะนำเทมเพลต!

สารบัญ:

• เริ่มต้น
  • ตั้งค่าในพื้นที่
  • ใช้ตัวช่วยสร้าง
• การกำหนดค่าบล็อก
• การเพิ่มโพสต์ใหม่
• Netlify Visual Editor
• การทดสอบ
  • รวมการทดสอบเริ่มต้น
  • ลบการปรับปรุงใหม่

เริ่มต้น

---

คุณสามารถเริ่มต้นกับโครงการนี้ได้สองวิธี: ในพื้นที่หรือใช้ตัวช่วยสร้างการตั้งค่า

ตั้งค่าในพื้นที่

หากคุณกำลังทำอยู่ในเครื่องให้เริ่มด้วยการคลิกที่ปุ่มใช้แม่แบบนี้บน GitHub สิ่งนี้จะสร้างที่เก็บใหม่ด้วยไฟล์เทมเพลตนี้ในบัญชี GitHub ของคุณ เมื่อทำเสร็จแล้วให้โคลนที่เก็บใหม่ของคุณและนำทางไปยังอาคารของคุณ

จากนั้นคุณสามารถติดตั้งการพึ่งพาของโครงการได้โดยการรัน:

yarn install

ในที่สุดคุณสามารถเรียกใช้โครงการของคุณในพื้นที่ด้วย:

yarn run dev

เปิดเบราว์เซอร์ของคุณและเยี่ยมชม http: // localhost: 3000 โครงการของคุณควรทำงาน!

ใช้ตัวช่วยสร้างการตั้งค่า

ผ่านตัวช่วยสร้างการตั้งค่าคุณสามารถสร้างบล็อกของคุณในไม่กี่คลิกและปรับใช้เพื่อ netlify

การกำหนดค่าบล็อก

การกำหนดค่าขึ้นอยู่กับตัวแปรสภาพแวดล้อมเพื่อให้ง่ายต่อการรวมเข้ากับแพลตฟอร์ม Jamstack ใด ๆ เช่น NetLify

นี่คือตัวแปรที่คุณสามารถแก้ไขได้:

ตัวแปร	คำอธิบาย	ตัวเลือก
BLOG_NAME	ชื่อบล็อกของคุณแสดงด้านล่างอวตาร
BLOG_TITLE	ส่วนหัวหลัก ( h1 ) ในหน้าแรก
BLOG_FOOTER_TEXT	ข้อความในส่วนท้าย
BLOG_THEME	ธีมที่จะผ่านไปยัง tailwind	ค่าเริ่มต้น
BLOG_FONT_HEADINGS	ตระกูลฟอนต์สำหรับหัว HTML ทั้งหมดจาก h1 ถึง h6	sans-serif (ค่าเริ่มต้น), serif, monospace
BLOG_FONT_PARAGRAPHS	ครอบครัวฟอนต์สำหรับองค์ประกอบ HTML อื่น ๆ ทั้งหมด	sans-serif (ค่าเริ่มต้น), serif, monospace

ตัวแปร Env ทั้งหมดสามารถกำหนดค่าผ่านตัวช่วยสร้างหรือผ่านการตั้งค่าตัวแปรสภาพแวดล้อมของโครงการ คุณสามารถทำได้ใน netlify dashaboard ของคุณ (การตั้งค่าไซต์/การสร้าง & ปรับใช้/ตัวแปรสภาพแวดล้อม/สภาพแวดล้อม)

bejamas_env-vars_short.mp4

[Alt: วิดีโอคำแนะนำของการแก้ไข env vars]

หากการตั้งค่าตัวแปรสภาพแวดล้อมไม่ใช่ถ้วยชาของคุณค่าเริ่มต้นสามารถเปลี่ยนแปลงได้ใน utils/global-data.js นอกจากนี้คุณยังสามารถลบตัวแปรและข้อมูลบล็อกฮาร์ดรหัสที่ใช้ตัวแปรเหล่านี้ในฐานรหัส

• BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS ใช้ใน tailwind-preset.js
• BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT ใช้ใน pages/index.js & pages/posts/[slug].js ผ่านวัตถุ globalData

การเพิ่มโพสต์ใหม่

โพสต์ทั้งหมดจะถูกเก็บไว้ในไดเรกทอรี /posts ในการสร้างโพสต์ใหม่ให้สร้างไฟล์ใหม่ด้วยส่วนขยาย .mdx

เนื่องจากโพสต์ถูกเขียนในรูปแบบ MDX คุณสามารถผ่านอุปกรณ์ประกอบฉากและส่วนประกอบได้ นั่นหมายความว่าคุณสามารถใช้ส่วนประกอบ React ภายในโพสต์ของคุณเพื่อให้มีการโต้ตอบมากขึ้น เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำในเอกสาร MDX เกี่ยวกับเนื้อหา

nextjs-bejamas-blog_new-post.mp4

[Alt: วิดีโอคำแนะนำของการเพิ่มโพสต์บล็อกใหม่]

Netlify Visual Editor

เทมเพลตนี้ได้รับการกำหนดค่าให้ทำงานกับแหล่งที่มาของการแก้ไขภาพและ GIT

พัฒนาด้วย Netlify Visual Editor ในพื้นที่

กระบวนการพัฒนาทั่วไปคือการเริ่มต้นด้วยการทำงานในพื้นที่ โคลนที่เก็บนี้จากนั้นเรียกใช้ npm install ในไดเรกทอรีราก

เรียกใช้เซิร์ฟเวอร์การพัฒนา next.js:

cd nextjs-blog-theme
npm run dev

ติดตั้ง NetLify Visual Editor CLI จากนั้นเปิดหน้าต่างเทอร์มินัลใหม่ในไดเรกทอรีโครงการเดียวกันและเรียกใช้เซิร์ฟเวอร์ DEV Editor Netlify Visual Editor:

npm install -g @stackbit/cli
stackbit dev

สิ่งนี้จะส่งออก URL Editor Visual Editor ของคุณเอง เปิดสิ่งนี้ลงทะเบียนหรือลงชื่อเข้าใช้และคุณจะถูกส่งไปยังเครื่องมือแก้ไขภาพของ NetLify สำหรับโครงการใหม่ของคุณ

ขั้นตอนต่อไป

ต่อไปนี้เป็นคำแนะนำบางประการเกี่ยวกับสิ่งที่ต้องทำต่อไปหากคุณยังใหม่กับการแก้ไขภาพรวม Netlify:

• เรียนรู้ภาพรวมตัวแก้ไขภาพ NetLify
• ตรวจสอบเอกสารอ้างอิงของ Editor Visual Editor

การทดสอบ

รวมการทดสอบเริ่มต้น

เราได้รวมเครื่องมือบางอย่างที่ช่วยให้เรารักษาแม่แบบเหล่านี้ แม่แบบนี้ใช้ในปัจจุบัน:

• ปรับปรุง - เพื่ออัปเดตการอ้างอิงของเราเป็นประจำ

หากทีมของคุณไม่สนใจเครื่องมือนี้คุณสามารถลบออกได้อย่างง่ายดาย!

ลบการปรับปรุงใหม่

เพื่อให้โครงการของเราทันสมัยอยู่กับการพึ่งพาเราใช้เครื่องมือที่เรียกว่าการปรับปรุงใหม่ หากคุณไม่สนใจเครื่องมือนี้ให้ลบไฟล์ renovate.json และมอบสิ่งนั้นให้กับสาขาหลักของคุณ

สนับสนุน

หากคุณติดอยู่ระหว่างทางขอความช่วยเหลือในฟอรัมการสนับสนุนของเรา