إذا كنت تبحث عن قالب مدونة عصري جاهز للاستخدام مع Nuxt 3 ، فإن قالب Bfotool Nuxtjs Base Blog يُعدّ خيارًا ممتازًا. فهو تطبيق مدونة متكامل الوظائف، مبنيّ باستخدام Nuxt 3 وVue 3 وTypeScript وTailwind CSS ، ومصمم لمساعدة المطورين على إنشاء مدونة احترافية بسرعة دون الحاجة إلى خادم خلفي أثناء التطوير.
يتضمن المشروع طبقة واجهة برمجة تطبيقات وهمية مدعومة بمُعترضات Axios ، والتي تحاكي واجهة برمجة تطبيقات REST حقيقية. وهذا يجعلها مثالية لتعلم بنية Nuxt، أو تصميم نماذج أولية للتطبيقات، أو بناء منصات مدونات جاهزة للإنتاج.
يمكنك استكشاف المستودع هنا: 👉 https://github.com/bfotool/nuxtjs-base-blog
ما هي مدونة Bfotool Nuxtjs Base؟
Bfotool Nuxtjs Base Blog هو قالب تطبيق تدوين حديث مبني باستخدام أحدث تقنيات الواجهة الأمامية. يوفر واجهة تدوين متكاملة مع منشورات، وتصنيفات، ووظيفة بحث، وصفحات اتصال.
تم تصميم المشروع باستخدام بنية Nuxt 3 نظيفة ، مما يجعله سهل الفهم والتوسيع.
تشمل أبرز النقاط ما يلي:
واجهة مستخدم كاملة للمدونة بتصميم متجاوب
واجهة برمجة تطبيقات REST وهمية للتطوير بدون واجهة خلفية
تم بناؤه باستخدام واجهة برمجة تطبيقات Vue 3 Composition API الحديثة
تطوير آمن من حيث أنواع البيانات باستخدام TypeScript
تهيئة البيانات الوصفية المُحسّنة لمحركات البحث
يدعم الوضعين الداكن والفاتح
يمكن العثور على المستودع هنا:
👉 https://github.com/bfotool/nuxtjs-base-blog
هذا القالب مثالي لـ:
المدونات الشخصية
مدونات الشركة
محافظ المطورين
تعلم بنية Nuxt 3
النماذج الأولية السريعة لمواقع المحتوى
الميزات الرئيسية
صفحات مدونة كاملة من الفئة C "ac-h3"
يتضمن القالب مجموعة كاملة من الصفحات المطلوبة عادةً في منصة التدوين.
تشمل الصفحات الرئيسية ما يلي:
الصفحة الرئيسية – تعرض منشورًا رئيسيًا مميزًا، وفلاتر تصنيف، ومنشورات مُرقمة الصفحات
صفحة منشور المدونة – عرض المقال كاملاً مع جدول المحتويات والمنشورات ذات الصلة
صفحة التصنيف – تصفح المنشورات المصنفة حسب التصنيف
صفحة البحث – بحث فوري مع خاصية منع الارتداد
صفحة "نبذة عنا" – عرّف بفريقك أو مهمتك أو علامتك التجارية
صفحة الاتصال – نموذج اتصال مع التحقق من صحة البيانات وإشعارات للتعليقات
صفحة الخطأ – واجهة مستخدم مخصصة لمعالجة الأخطاء
يوفر هذا الهيكل تجربة مدونة جاهزة للاستخدام للمستخدمين.
< class="ac-h3"h3>طبقة واجهة برمجة تطبيقات وهمية للتطوير
من أبرز ميزات هذا المشروع نظام واجهة برمجة التطبيقات الوهمية .
بدلاً من الاتصال بخادم خلفي حقيقي، يقوم المشروع بمحاكاة استجابات واجهة برمجة التطبيقات باستخدام معترضات Axios .
يُمكّن هذا النهج المطورين من:
قم ببناء ميزات الواجهة الأمامية دون الاعتماد على الواجهة الخلفية
اختبار ترقيم الصفحات، والتصفية، والفرز
محاكاة تأخيرات استجابة واجهة برمجة التطبيقات الحقيقية
يمكنك التبديل بسهولة إلى نظام خلفي حقيقي لاحقًا
تتضمن واجهة برمجة التطبيقات الوهمية نقاط نهاية مثل:
/posts/posts/featured/posts/:slug/categories/authors/contact
نظرًا لأن واجهة برمجة التطبيقات(API) يتم تجريدها من خلال المكون القابل للتركيب useApi ، فإن التبديل إلى نظام خلفي حقيقي يتطلب الحد الأدنى من التكوين.
هندسة معمارية حديثة من نوع Nuxt 3
يتبع المشروع أنماط تطوير Nuxt 3 الموصى بها ، مما يجعله مرجعًا رائعًا للمطورين الذين يتعلمون إطار العمل.
تشمل السمات المعمارية الهامة ما يلي:
المكونات والتركيبات المستوردة تلقائيًا
تطوير باستخدام TypeScript أولاً
طبقة خدمة واجهة برمجة التطبيقات القابلة للتكوين
بنية مجلدات معيارية
إعدادات بيانات تحسين محركات البحث
انتقالات الصفحات
يستخدم التطبيق أيضًا ما يلي:
useSeoMeta()لعلامات تحسين محركات البحثuseColorMode()لتغيير السماتuseRoute()وغيرها من المكونات المدمجة في Nuxt
< class="ac-h3"h3>الوضع الداكن والتصميم المتجاوب
تدعم واجهة المستخدم الوضعين الداكن والفاتح باستخدام @nuxtjs/color-mode.
تشمل الميزات ما يلي:
الكشف التلقائي عن سمات النظام
تبديل الوضع اليدوي
تصميم Tailwind CSS
تصميم متجاوب مصمم خصيصًا للأجهزة المحمولة
وهذا يضمن عمل المدونة بسلاسة عبر:
سطح المكتب
أقراص
الأجهزة المحمولة
ميزات مدونة قوية من الفئة P="ac-h3"
يتضمن قالب المدونة العديد من الميزات المتقدمة التي توجد عادةً في منصات التدوين الإنتاجية.
وتشمل هذه:
جدول المحتويات المُنشأ من عناوين Markdown
اقتراحات لمنشورات ذات صلة
الوقت المقدر للقراءة
تصفية الفئات
بحث نصي كامل معطل
ترقيم الصفحات الذكي
إشعارات منبثقة
تحميل مكونات الهيكل العظمي
انتقالات الصفحات المتحركة
تُساهم هذه الميزات في خلق تجربة قراءة عصرية لزوار المدونة.
مجموعة التقنيات
تم بناء المشروع باستخدام مجموعة أدوات الواجهة الأمامية الحديثة.
| طبقة | تكنولوجيا |
|---|---|
| نطاق | Nuxt 3.15 |
| مكتبة واجهة المستخدم | Vue 3.5 |
| لغة | تايب سكريبت 5.7 |
| تصميم | Tailwind CSS 3.4 |
| إدارة الدولة | بينيا |
| عميل HTTP | أكسيوس |
| أيقونات | Iconify عبر @nuxt/icon |
| سمة | @nuxtjs/color-mode |
| إزالة الوبر | ESLint |
| التنسيق | أجمل |
توفر هذه المجموعة من التقنيات الأداء العالي، وقابلية التوسع، وسهولة الصيانة .
نظرة عامة على هيكل المشروع
يتبع المستودع بنية نظيفة ومنظمة.
تشمل الأدلة المهمة ما يلي:
الصفحات
يحدد الدليل pagesالمسارات الرئيسية:
index.vue– الصفحة الرئيسيةabout.vue– صفحة "نبذة عنا"contact.vue– نموذج الاتصالsearch.vue– واجهة البحثblog/[slug].vue– صفحة منشور المدونةblog/category/[slug].vue– صفحة الفئة
مكونات فئة Com="ac-h3"
يتم تجميع مكونات واجهة المستخدم القابلة لإعادة الاستخدام في فئات منطقية:
layout– رأس وتذييل الصفحةcommon– ترقيم الصفحات، ومحملات الهيكل، وإشعارات التنبيهblog– مكونات خاصة بالمدونة مثل البطاقات البريدية وجدول المحتويات
Comp class="ac-h3"osables
يحتوي دليل المكونات على منطق قابل لإعادة الاستخدام.
تشمل المكونات التركيبية المهمة ما يلي:
useApi()– طبقة خدمة واجهة برمجة التطبيقات المكتوبةuseDebounce()– تأخير القيم التفاعلية
< class="ac-h3"h3>طبقة واجهة برمجة التطبيقات الوهمية
يوجد النظام الوهمي داخل mocksالدليل.
يحتوي على:
handlers.ts– معترضات طلبات واجهة برمجة التطبيقاتposts.ts– نماذج من منشورات المدونةauthors.ts– بيانات المؤلفcategories.ts– بيانات الفئات
هذا الهيكل يجعل المشروع سهل التعديل والتوسيع .
كيفية تثبيت المشروع وتشغيله
اتبع هذه الخطوات لتشغيل المشروع محليًا.
Prereq 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
class="ac-h3"تثبيت التبعيات
npm install
بدء تشغيل خادم التطوير
npm run dev
ثم افتح متصفحك على الرابط التالي:
http://localhost:3000
سيتم إعادة تحميل خادم تطوير Nuxt تلقائيًا عند تغيير الملفات.
التبديل من واجهة برمجة التطبيقات الوهمية إلى واجهة برمجة التطبيقات الحقيقية
من أفضل قرارات التصميم في هذا المشروع سهولة التبديل بين واجهات برمجة التطبيقات(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 نظيفة
بنية الكود على مستوى الإنتاج
واجهة برمجة تطبيقات وهمية لتطوير الواجهة الأمامية
واجهة مستخدم عصرية باستخدام Tailwind CSS
صفحات مُهيأة لتحسين محركات البحث
سهولة التكامل مع واجهات برمجة التطبيقات الحقيقية
إنه يصلح كمشروع تعليمي وكأساس لمدونة جاهزة للإنتاج .
مستودع GitHub
يمكنك الاطلاع على الكود المصدري الكامل هنا: 👉 https://github.com/bfotool/nuxtjs-base-blog
إذا وجدت المشروع مفيدًا، فضع علامة نجمة على المستودع وساهم في تحسينه.