nextjs blog theme

بداية مدونة قابلة للتخصيص باستخدام:

• next.js v15 (جهاز توجيه الصفحات)
• Tailwind V3.x
• NetLify Visual Editor
• دعم MDX مدمج
• يتضمن التصميم الحديث مع السمات المظلمة والخفيفة

خذ جاندر في العرض التوضيحي.

انقر هنا لمشاهدة تجول القالب!

جدول المحتويات:

• ابدء
  • إعداد محليا
  • باستخدام المعالج
• تكوين المدونة
• إضافة منشورات جديدة
• 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. ثم افتح نافذة طرفية جديدة في نفس دليل المشروع وقم بتشغيل خادم NetLify Visual Editor Dev:

npm install -g @stackbit/cli
stackbit dev

هذا يخرج عنوان URL الخاص بـ NetLify Visual Editor. افتح هذا أو تسجيل أو تسجيل الدخول ، وسيتم توجيهك إلى محرر NetLify المرئي لمشروعك الجديد.

الخطوات التالية

فيما يلي بعض الاقتراحات حول ما يجب القيام به بعد ذلك إذا كنت جديدًا على محرر NetLify Visual:

• تعلم نظرة عامة على NetLify Visual Editor
• تحقق من الوثائق المرجعية لمحرر المحرر المرئي NetLify

الاختبار

وشملت الاختبار الافتراضي

لقد قمنا بتضمين بعض الأدوات التي تساعدنا على الحفاظ على هذه القوالب. يستخدم هذا القالب حاليًا:

• تجديد - لتحديث تبعياتنا بانتظام

إذا لم يكن فريقك مهتمًا بهذه الأدوات ، فيمكنك إزالتها بسهولة!

إزالة التجديد

من أجل الحفاظ على تحديث مشروعنا مع التبعيات ، نستخدم أداة تسمى Renovate. إذا لم تكن مهتمًا بهذه الأدوات ، فقم بحذف ملف renovate.json وارتكاب ذلك على فرعك الرئيسي.

يدعم

إذا تعثرت على طول الطريق ، فاحصل على المساعدة في منتديات الدعم لدينا.