เทมเพลตบล็อกพื้นฐาน Nuxt 3 – Bfotool Nuxtjs Base Blog(Vue 3 + TypeScript + Tailwind)

หากคุณกำลังมองหาเทมเพลตเริ่มต้นบล็อก Nuxt 3 ที่ทันสมัย Bfotool Nuxtjs Base Blogคือตัวเลือกที่ยอดเยี่ยม มันเป็นแอปพลิเคชันบล็อกที่ทำงานได้อย่างสมบูรณ์แบบ สร้างขึ้นด้วยNuxt 3, Vue 3, TypeScript และ Tailwind CSSออกแบบมาเพื่อช่วยให้นักพัฒนาสร้างบล็อกระดับมืออาชีพได้อย่างรวดเร็วโดยไม่ต้องมีแบ็กเอนด์ระหว่างการพัฒนา

โปรเจ็กต์นี้ประกอบด้วยเลเยอร์ API จำลองที่ขับเคลื่อนด้วย Axios interceptorsซึ่งจำลองการทำงานของ REST API จริง ทำให้เหมาะอย่างยิ่งสำหรับการเรียนรู้สถาปัตยกรรม Nuxt การสร้างต้นแบบแอปพลิเคชัน หรือการสร้างแพลตฟอร์มบล็อกที่พร้อมใช้งานจริง

คุณสามารถสำรวจที่เก็บโค้ดได้ที่นี่: 👉 https://github.com/bfotool/nuxtjs-base-blog

Bfotool Nuxtjs Base Blog คืออะไร?

Bfotool Nuxtjs Base Blogเป็นเทมเพลตแอปพลิเคชันบล็อกสมัยใหม่ที่สร้างขึ้นโดยใช้เทคโนโลยีฟรอนต์เอนด์ล่าสุด มีอินเทอร์เฟซการเขียนบล็อกที่สมบูรณ์แบบ พร้อมด้วยหน้าโพสต์ หมวดหมู่ ฟังก์ชันการค้นหา และหน้าติดต่อ

โปรเจ็กต์นี้ได้รับการออกแบบด้วยสถาปัตยกรรม Nuxt 3 ที่เรียบง่ายทำให้เข้าใจและต่อยอดได้ง่าย

จุดเด่นที่สำคัญ ได้แก่:

UI บล็อกแบบเต็มรูปแบบพร้อมดีไซน์ที่รองรับการแสดงผลทุกขนาดหน้าจอ
จำลอง REST API สำหรับการพัฒนาโดยไม่ต้องมีแบ็กเอนด์
สร้างขึ้นด้วย Vue 3 Composition API ที่ทันสมัย
การพัฒนาที่ปลอดภัยด้วยประเภทข้อมูลโดยใช้ TypeScript
การกำหนดค่าเมตาที่พร้อมสำหรับ SEO
รองรับธีมสีเข้มและสีอ่อน

คุณสามารถค้นหาแหล่งข้อมูลได้ที่นี่:

👉 https://github.com/bfotool/nuxtjs-base-blog

แม่แบบนี้เหมาะสำหรับ:

บล็อกส่วนตัว
บล็อกของบริษัท
ผลงานของนักพัฒนา
เรียนรู้สถาปัตยกรรมของ Nuxt 3
การสร้างต้นแบบเว็บไซต์เนื้อหาอย่างรวดเร็ว

คุณสมบัติหลัก

หน้าบล็อกที่สมบูรณ์

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

หน้าหลักประกอบด้วย:

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

โครงสร้างนี้มอบประสบการณ์การใช้งานบล็อกที่พร้อมใช้งานสำหรับผู้ใช้

< class="ac-h3"h3>เลเยอร์ API จำลองสำหรับการพัฒนา</class="ac-h3">

หนึ่งในคุณสมบัติที่ทรงพลังที่สุดของโปรเจกต์นี้คือระบบจำลอง API

แทนที่จะเชื่อมต่อกับแบ็กเอนด์จริง โครงการนี้จำลองการตอบสนองของ API โดยใช้Axios interceptors

แนวทางนี้ช่วยให้นักพัฒนาสามารถ:

สร้างฟีเจอร์ฝั่ง frontend โดยไม่ต้องพึ่งพาฝั่ง backend
ทดสอบการแบ่งหน้า การกรอง และการเรียงลำดับ
จำลองความล่าช้าในการตอบสนองของ API จริง
เปลี่ยนไปใช้แบ็กเอนด์จริงได้ง่ายๆ ในภายหลัง

API จำลองนี้ประกอบด้วยเอนด์พอยต์ต่างๆ เช่น:

/posts
/posts/featured
/posts/:slug
/categories
/authors
/contact

เนื่องจาก API ถูกแยกส่วนผ่านคอมโพเนนต์ useApiการเปลี่ยนไปใช้แบ็กเอนด์จริงจึงต้องการการตั้งค่าเพียงเล็กน้อย

สถาปัตยกรรม Nuxt 3 สมัยใหม่

โปรเจ็กต์นี้เป็นไปตามรูปแบบการพัฒนาที่แนะนำของ Nuxt 3ทำให้เป็นแหล่งอ้างอิงที่ดีเยี่ยมสำหรับนักพัฒนาที่กำลังเรียนรู้เฟรมเวิร์กนี้

ลักษณะทางสถาปัตยกรรมที่สำคัญ ได้แก่:

ส่วนประกอบและไฟล์ประกอบที่นำเข้าอัตโนมัติ
การพัฒนาโดยยึด TypeScript เป็นหลัก
เลเยอร์บริการ API ที่ประกอบได้
โครงสร้างโฟลเดอร์แบบแยกส่วน
การกำหนดค่าเมตา SEO
การเปลี่ยนหน้า

แอปพลิเคชันนี้ยังใช้:

useSeoMeta()สำหรับแท็ก SEO
useColorMode()สำหรับการเปลี่ยนธีม
useRoute()และส่วนประกอบอื่นๆ ที่มีอยู่ใน Nuxt

< class="ac-h3"h3>โหมดมืดและการออกแบบที่ตอบสนองต่อทุกอุปกรณ์</ class="ac-h3">

ส่วนติดต่อผู้ใช้รองรับธีมสีเข้มและสีอ่อนโดยใช้@nuxtjs/color-mode.

คุณสมบัติเด่นได้แก่:

การตรวจจับธีมระบบอัตโนมัติ
การสลับธีมด้วยตนเอง
การจัดสไตล์ CSS ของ Tailwind
การออกแบบที่ตอบสนองต่ออุปกรณ์เคลื่อนที่เป็นหลัก

วิธีนี้จะช่วยให้บล็อกทำงานได้อย่างราบรื่นในทุกแพลตฟอร์ม:

เดสก์ท็อป
ยาเม็ด
อุปกรณ์เคลื่อนที่

P class="ac-h3"คุณสมบัติบล็อกที่ทรงพลัง

เทมเพลตบล็อกนี้มีฟีเจอร์ขั้นสูงหลายอย่างที่มักพบในแพลตฟอร์มบล็อกที่ใช้งานจริง

ซึ่งรวมถึง:

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

คุณสมบัติเหล่านี้สร้างประสบการณ์การอ่านที่ทันสมัยสำหรับผู้เยี่ยมชมบล็อก

เทคโนโลยีสแต็ก

โครงการนี้สร้างขึ้นโดยใช้เทคโนโลยีฟรอนต์เอนด์ที่ทันสมัย

ชั้น	เทคโนโลยี
กรอบ	Nuxt 3.15
ไลบรารี UI	วิว 3.5
ภาษา	ไทป์สคริปต์ 5.7
จัดแต่งทรงผม	Tailwind CSS 3.4
การบริหารรัฐ	ปิเนีย
ไคลเอ็นต์ HTTP	แอกซิโอส
ไอคอน	Iconify ผ่านทาง @nuxt/icon
ธีม	@nuxtjs/color-mode
เศษผ้า	อีเอสลินท์
การจัดรูปแบบ	สวยขึ้น

ชุดเทคโนโลยีนี้มอบประสิทธิภาพ ความสามารถในการขยายขนาด และความสามารถในการบำรุงรักษา

ภาพรวมโครงสร้างโครงการ

คลังเก็บข้อมูลนี้มีโครงสร้างที่สะอาดและเป็นระเบียบเรียบร้อย

รายชื่อที่สำคัญได้แก่:

หน้า

ไดเร็กทอรี นี้pagesกำหนดเส้นทางหลัก:

index.vue– หน้าแรก
about.vue– หน้าเกี่ยวกับเรา
contact.vue– แบบฟอร์มติดต่อ
search.vue– อินเทอร์เฟซการค้นหา
blog/[slug].vue– หน้าบทความในบล็อก
blog/category/[slug].vue– หน้าหมวดหมู่

Com class="ac-h3"ponents

ส่วนประกอบ UI ที่สามารถนำกลับมาใช้ซ้ำได้จะถูกจัดกลุ่มเป็นหมวดหมู่ตามหลักตรรกะ:

layout– ส่วนหัวและส่วนท้าย
common– การแบ่งหน้า, ตัวโหลดโครงร่าง, การแจ้งเตือนแบบป๊อปอัพ
blog– ส่วนประกอบเฉพาะของบล็อก เช่น โปสการ์ดและสารบัญ

Comp class="ac-h3"osables

ไดเร็กทอรี composables ประกอบด้วยตรรกะที่สามารถนำกลับมาใช้ซ้ำได้

ส่วนประกอบสำคัญได้แก่:

useApi()– เลเยอร์บริการ API แบบกำหนดประเภท
useDebounce()– ค่าการตอบสนองแบบดีบาวซ์

< class="ac-h3"h3>เลเยอร์ API จำลอง</class="ac-h3">

ไฟล์ระบบจำลองอยู่ในmocksไดเร็กทอรี นั้น

ประกอบด้วย:

handlers.ts– ตัวดักจับคำขอ API
posts.ts– ตัวอย่างบทความในบล็อก
authors.ts– ข้อมูลผู้เขียน
categories.ts– ข้อมูลหมวดหมู่

โครงสร้างนี้ทำให้โครงการสามารถปรับเปลี่ยนและขยายได้ง่าย

วิธีการติดตั้งและเรียกใช้โปรเจ็กต์

ทำตามขั้นตอนเหล่านี้เพื่อเรียกใช้โปรเจ็กต์ในเครื่องของคุณ

ข้อกำหนดเบื้องต้น class="ac-h3"uisites

คุณต้องมี:

Node.js เวอร์ชัน 18.17 หรือใหม่กว่า
npm, yarn หรือ pnpm

โคลนที่เก็บข้อมูล

git clone https://github.com/bfotool/nuxtjs-base-blog.git 
cd nuxtjs-base-blog

ติดตั้งส่วนประกอบที่จำเป็น

npm install

เริ่มเซิร์ฟเวอร์สำหรับการพัฒนา

npm run dev

จากนั้นเปิดเบราว์เซอร์ของคุณที่:

http://localhost:3000

เซิร์ฟเวอร์พัฒนาของ Nuxt จะรีโหลดโดยอัตโนมัติเมื่อไฟล์มีการเปลี่ยนแปลง

การเปลี่ยนจาก Mock API เป็น Real API

หนึ่งในกลยุทธ์การออกแบบที่ดีที่สุดในโครงการนี้คือการสลับใช้งาน API ที่ง่ายดาย

เพื่อเชื่อมต่อระบบแบ็กเอนด์จริง:

ตั้งค่าตัวแปรสภาพแวดล้อม:

NUXT_PUBLIC_USE_MOCK_API=false

กำหนดค่า URL พื้นฐานของ API ของคุณ:

NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com

ตรวจสอบให้แน่ใจว่าการตอบกลับจากแบ็กเอนด์ตรงกับประเภทที่กำหนดไว้ใน:

types/index.ts

ไม่ต้องแก้ไขโค้ดเพิ่มเติมใดๆ

การปรับแต่งบล็อก

นักพัฒนาสามารถปรับแต่งเทมเพลตได้อย่างง่ายดาย

เปลี่ยนธีมหรือสไตล์

แก้ไขการตั้งค่า Tailwind:

tailwind.config.ts

สินค้าสไตล์สากลมีจำหน่ายที่:

assets/css/main.css

แก้ไขเนื้อหาบล็อก

สามารถอัปเดตเนื้อหาจำลองได้ที่:

mocks/posts.ts 
mocks/categories.ts 
mocks/authors.ts

วิธีนี้ช่วยให้คุณสร้างต้นแบบชุดข้อมูลบล็อกต่างๆ ได้อย่างรวดเร็ว

อัปเดตการตั้งค่าแอป

ค่าคงที่ของแอปพลิเคชัน เช่น การนำทาง การสร้างแบรนด์ และลิงก์โซเชียล จะถูกจัดเก็บไว้ใน:

utils/constants.ts

เหตุใดจึงควรใช้เทมเพลตบล็อก Nuxt นี้?

โครงการนี้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับนักพัฒนา เนื่องจากมีคุณสมบัติดังต่อไปนี้:

สถาปัตยกรรม Nuxt 3 ที่สะอาดหมดจด
โครงสร้างโค้ดระดับการผลิต
API จำลองสำหรับการพัฒนาส่วนหน้า(frontend development)
UI ทันสมัยด้วย Tailwind CSS
หน้าเว็บที่พร้อมสำหรับ SEO
ผสานรวมเข้ากับ API จริงได้อย่างง่ายดาย

มันใช้งานได้ทั้งในฐานะโครงการเพื่อการเรียนรู้และเป็นรากฐานของบล็อกที่พร้อมใช้งานจริง

ที่เก็บข้อมูล GitHub

คุณสามารถดูซอร์สโค้ดฉบับเต็มได้ที่นี่: 👉 https://github.com/bfotool/nuxtjs-base-blog

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