nextjs netlify blog template

Next.js เทมเพลตบล็อกสำหรับ Netlify เป็นแผ่นหม้อไอน้ำสำหรับการสร้างบล็อกที่มีเฉพาะสแต็ค netlify

มีบางส่วนหรือแบบฝึกหัดสำหรับการรวมกันของ next.js และ netlify บน gitHub ทรัพยากรเหล่านี้มีเอกสารและการสอนที่ดีเพื่อเริ่มต้นต่อไป js และ netlify อย่างรวดเร็ว แต่มันง่ายเกินไปที่จะสร้างบล็อกที่มีคุณสมบัติมาตรฐานเช่นการติดแท็ก

เทมเพลตบล็อก next.js สำหรับ NetLify ได้ใช้คุณสมบัติมาตรฐานเหล่านี้สำหรับการสร้างบล็อกโดยใช้เฉพาะ Next.js และ Netlify Stacks

การสาธิต

ปรับใช้กับสภาพแวดล้อมของคุณโดยคลิกที่นี่:

หรือเข้าถึงเว็บไซต์สาธิตต่อไปนี้:

next.js บล็อกเทมเพลตสำหรับ netlify

คุณสมบัติ

• การติดแท็ก : จัดเนื้อหาตามแท็ก
• ผู้แต่ง : แสดงชื่อผู้แต่งที่เขียนโพสต์
• การแบ่งหน้า : จำกัด จำนวนโพสต์ต่อหน้า
• CMS : สร้างด้วย CMS เพื่ออนุญาตให้แก้ไขเนื้อหาด้วยวิธีที่เร็วที่สุด
• SEO Optimized : ข้อมูลเมตาในตัวเช่น JSON-LD
• รหัสย่อ : ขยายการเขียนเนื้อหาด้วยส่วนประกอบปฏิกิริยาเช่นรหัสย่อของ WordPress

การพึ่งพาอาศัยกัน

• ตัวพิมพ์ใหญ่
• next.js
• ทำให้เป็นตะลึง
• MDX

เริ่มต้น

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

 npx create-next-app your-blog --example "https://github.com/wutali/nextjs-netlify-blog-template"

หลังจากนั้นตั้งค่าโครงการของคุณตามบล็อก NetLify:

คู่มือทีละขั้นตอน: การปรับใช้บน netlify

การปรับแต่ง

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

หน้าสไตล์โดยธีมที่กำหนดเอง

ซอร์สโค้ดทั้งหมดที่เกี่ยวข้องกับบล็อกอยู่ภายใต้ส่วนประกอบและไดเรกทอรีหน้า คุณสามารถแก้ไขได้อย่างอิสระหากคุณต้องการใช้ธีมการออกแบบของคุณ ส่วนประกอบทั้งหมดใช้รูปแบบ-JSX และ CSS-modules เพื่อกำหนดสไตล์ของพวกเขา แต่คุณสามารถเลือกไลบรารีสไตล์สำหรับการออกแบบธีมของคุณ

แผนผังไดเรกทอรีที่มีซอร์สโค้ดบล็อกมีการอธิบายไว้ด้านล่าง:

 meta: yaml files defining metadata like authors or tags
public: images, favicons and other static assets
src
├── assets: other assets using inside of components
├── components: pieces of components consisting of pages
├── content: mdx files for each post page
├── lib: project libraries like data fetching or pagination
└── pages: page components managing by Next.js

การจัดระเบียบเนื้อหาตามหมวดหมู่

ข้อมูลเมตาหมวดหมู่ที่เชื่อมโยงกับเนื้อหามีความสัมพันธ์แบบเดียวกันกับผู้เขียน จากนั้นอ้างอิงการใช้งานเหล่านี้เพื่อเพิ่มข้อมูลเมตาใหม่:

• สาธารณะ/ผู้ดูแลระบบ/config.yml: คำจำกัดความข้อมูลเมตาของผู้แต่งสำหรับ Netlify CMS
• src/lib/uadors.tsx: ดึงข้อมูลเมตาและกำหนดฟังก์ชั่นยูทิลิตี้สำหรับส่วนประกอบ
• Meta/Authors.yml: เนื้อหาผู้แต่งที่จัดการโดย Netlify CMS
• src/ส่วนประกอบ/postlayout.tsx: แสดงเนื้อหาผู้เขียนสำหรับแต่ละหน้า

คุณเข้าใจว่าพวกเขามีสี่ขั้นตอนในการเพิ่มข้อมูลเมตาหมวดหมู่ในโครงการของคุณหลังจากที่คุณอ่านซอร์สโค้ดด้านบน:

1. กำหนดเมตาดาต้าหมวดหมู่ในไฟล์กำหนดค่า NetLify ด้านบนด้านบน
2. สร้างไฟล์ว่างที่มีชื่อด้วย categories.yml ภายใต้ไดเรกทอรี Meta
3. สร้างโมดูลใหม่สำหรับการดึงข้อมูลเมตาหมวดหมู่
4. แสดงข้อมูลเมตาหมวดหมู่บน src/ส่วนประกอบ/postlayout.tsx หรือส่วนประกอบอื่น ๆ ที่คุณต้องการ

มันคือทั้งหมดที่คุณต้องทำ หลังจากนั้นคุณสามารถเข้าถึง Netlify CMS และสร้างหมวดหมู่ใหม่ได้ตลอดเวลา

การตั้งค่าสถานที่สำหรับ Netlify CMS

แก้ไข config.yml และ index.html ภายใต้ไดเรกทอรีสาธารณะ/ผู้ดูแลระบบตามคำแนะนำต่อไปนี้:

Netlify CMS - ตัวเลือกการกำหนดค่า #Locale

การอ้างอิง

• เอกสาร Netlify CMS
• การสร้างบล็อก Markdown ด้วย 9.4 ถัดไปและ netlify
• The Hugo Theme - Codex
• next.js เทมเพลตเริ่มต้นสำหรับ typeScript
• การสร้างบล็อกด้วย nextjs และ netlify cms
• Unicons

ใบอนุญาต

มิกซ์