stablo

قالب مدونة Stablo - Next.js & Sanity CMS

Stablo هو قالب مدونة Jamstack تم تصميمه باستخدام Next.js و Tailwind CSS & Sanity CMS بواسطة Web3Templates. إنه يأتي مع إصدار مجاني ومحترف.

التثبيت ↓

عرض مباشر

الإصدار المجاني التجريبي →

Pro Prose Demo →

سمات

ميزة	نسخة مجانية	نسخة محترفة
Next.js v13	✅	✅
/دليل التطبيق	✅	✅
Tailwind CSS	✅	✅
CMS العقلانية (V3)	✅	✅
بناء على الطلب		✅
تحديث تلقائي مشاركات جديدة	قائم على الوقت	✅
مستجيب للهاتف المحمول	✅	✅
وضع الظلام والضوء	✅	✅
صفحة الاتصال العاملة	✅	✅
أرشيف (ترقيم الصفحات)	✅	✅
صفحات الفئة		✅
صفحات المؤلف		✅
صفحة البحث		✅
الصفحة الرئيسية - الافتراضي	✅	✅
الصفحة الرئيسية - بديلة		✅
الصفحة الرئيسية - الحد الأدنى		✅
الصفحة الرئيسية - Lifestlye		✅
الصفحة الرئيسية - عمودان		✅
منشور المدونة - الافتراضي	✅	✅
منشور المدونة - الحد الأدنى		✅
منشور المدونة - Lifestlye		✅
منشور المدونة - مع الشريط الجانبي		✅
6 أشهر دعم		✅
تحديثات مجانية	✅	✅
رخصة	GPL-2.0	تجاري
التسعير	حر	49 دولار
	نشر مجانًا	شراء المحترف

انقر فوق الزر أعلاه للحصول على نقرة واحدة لاستنساخ ونشر لهذا القالب. اقرأ دليل البدء السريع أدناه.

معاينة قالب

عقل معاينة CMS

تثبيت

الخطوة 1: نشر في Vercel

استخدم زر النشر أدناه. سيتيح لك نشر المبتدئ باستخدام Vercel بالإضافة إلى توصيله باستوديو العقل الخاص بك باستخدام تكامل Vercel العقلاني.

سوف يقوم النشر أعلاه بتكوين ما يلي تلقائيًا:

• إنشاء مستودع جديد في جيثب
• إنشاء مشروع عقلانية
• تثبيت تكامل العقل في Vercel
• إضافة إعدادات CORS و API المطلوبة في المشروع
• نشر واجهة إلى Vercel

بدلاً من ذلك ، يمكنك النشر في خدمات أخرى مثل NetLify أو CloudFlare Pages أو AWS Amplify.

الخطوة 2: إعداد المشروع محليًا.

بمجرد نشر موقع الويب ، سيبدو فارغًا أو لم يتم تكوينه بشكل صحيح. هذا متوقع. نحن بحاجة إلى القيام ببعض الخطوات الإضافية لجعلها كما رأينا في العرض التوضيحي.

أولاً ، استنساخ مستودع github الذي تم إنشاؤه في جهازك المحلي. استخدم بنية الأوامر التالية. تأكد من أن المحطة في المجلد الصحيح قبل تنفيذ هذا الأمر.

git clone https://github.com/ < usename > / < repo > .git your-project-name

بمجرد استنساخ ، قم بتشغيل الأمر التالي من دليل الجذر للمشروع. سيؤدي هذا إلى ربط مشروع Vercel الخاص بك.

npx vercel link

الآن ، قم بتشغيل الأمر التالي لسحب متغيرات .env إلى نظامك المحلي.

npx vercel env pull

الآن يمكنك أن ترى أنه تم إنشاء ملف .env.local جديد. إذا لم ينجح هذا ، فيمكنك أيضًا إعادة تسمية .env.local.example إلى .env.local وإضافة معرف مشروع العقل يدويًا.

الآن ، يمكنك فتح محرر التعليمات البرمجية (إن لم يكن بالفعل) نحن نفضل VSCODE. تشغيل الأمر في المحطة المتكاملة داخل محرر الكود.

npm install
# or
yarn install
# or
pnpm install

نحن نفضل pnpm لحفظ مساحة القرص الخاصة بك.

الخطوة 3: استيراد بيانات العرض التجريبي (اختياري)

لتبدو مثل ما رأيته في العرض التوضيحي ، مع كل المحتوى والصور ، اتبع الخطوات أدناه:

1. إذا لم تكن قد قمت بتثبيت @sanity/cli قم بتثبيته على مستوى العالم أولاً.

npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli

ثم تسجيل الدخول إلى العقل باستخدام أمر sanity login

 sanity login

الآن ، ستتمكن من استيراد محتوى العرض التجريبي عن طريق تشغيل أمر sanity-import . توجد الملفات في /lib/sanity/data/production.tar.gz وسيتم تحميلها تلقائيًا عن طريق تشغيل الأمر أدناه.

npm run sanity-import
# or
pnpm sanity-import

الخطوة 4: أنهيها!

الآن ، قم بتشغيل مشروعك باستخدام الأمر أدناه.

npm run dev
# or
pnpm dev

الآن يجب أن يكون مشروعك قد انتهى وسيتم تشغيل الواجهة الأمامية لـ NEXT.JS على http: // localhost: 3000.

يمكن الوصول إلى استوديو Sanity باستخدام http: // localhost: 3000/studio أو يمكنك تشغيله على https: // localhost: 3333 server باستخدام الأمر التالي.

npm run sanity
# or
pnpm sanity

الخطوة 5

بمجرد إجراء جميع التغييرات المذكورة أعلاه ، تأكد من إعادة النشر إلى Vercel مرة أخرى لرؤية جميع التغييرات في الإنتاج.

يمكنك git push التغييرات ويجب أن يؤدي تلقائيًا إلى نشر جديد. إذا لم يكن الأمر كذلك ، يمكنك أيضًا النشر إلى Vercel باستخدام الأمر التالي.

 npx vercel --prod

التثبيت اليدوي

نوصيك باستخدام خيار النقر بنقرة واحدة أعلاه. لسبب ما ، إذا لم تتمكن من استخدام الخطوات التالية لتثبيتها يدويًا.

الخطوة 1. استنساخ الريبو

استنساخ github repo أو استخدم الملفات التي تم تنزيلها في الجهاز المحلي الخاص بك.

الخطوة 2. الإعداد .env المتغيرات.

افتح مجلد المشروع وإعادة تسمية .env.local.example وضعت في مجلد الجذر في .env.local وأضف معرف مشروع العقل الخاص بك. يمكنك إنشاء مشروع جديد من خلال زيارة هذا الرابط: https://www.sanity.io/get-started/create-project

إذا كان لديك مشروع بالفعل ، فقم بنسخ معرف المشروع من https://sanity.io/manage

 NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz

الخطوة 3. السماح لأصول CORS

لجعل الاستوديو يعمل بشكل صحيح ، يجب عليك إضافة أصل cors في العقل. عادة ما يتم إعداد هذا تلقائيًا إذا كنت تستخدم نشر Vercel. تفضل بزيارة https://www.sanity.io/manage/personal/project/<project-id>/api في متصفحك لإضافة أصل cors.

انقر فوق زر Add CORS origin وأدخل عنوان URL كـ http://localhost:3000 وتحقق من خانة الاختيار "سمح لبيانات الاعتماد".

الخطوة 4 تابع من الخطوات المذكورة أعلاه

الآن ، ستتمكن من الاستمرار من الإرشادات المذكورة أعلاه لاستيراد البيانات التجريبية وتشغيل المشروع محليًا.

المساعدة والدعم

شيء لا يعمل كما هو متوقع؟ رفع قضية github. إذا كنت بحاجة إلى دعم أو مساعدة مخصصة ، فيرجى التفكير في شراء الإصدار المحترف وسنساعدك عبر البريد الإلكتروني.

راعي