أنشئ مواقع ويب ثابتة بدون خادم باستخدام Vue.js وNetlify CMS.
هذا هو القالب المبدئي لإنشاء مواقع ويب ثابتة باستخدام Vue.js وNetlify CMS، استنادًا إلى Nuxt v1.x. ما يغطيه:
الإعداد عبر Vue CLI ؟
يمكنك بسهولة إعداد مشروع Nuxt.js شبه فارغ.
غير محسّن حاليًا لـ Vue CLI v3.0 .
تحرير المحتوى عبر Netlify CMS ✏️
Netlify CMS هو نظام إدارة محتوى من جانب العميل يتصل مباشرة بمستودع git الخاص بك لتحرير ملفات تخفيض السعر.
يدعم أيضًا تنسيقات الملفات الأخرى، لكن هذا القالب يعمل فقط مع تنسيق تخفيض السعر الافتراضي.
عرض المحتوى في Vue.js عبر وحدة Nuxtent/Nuxtdown ?️
تسمح وحدة Nuxtdown (الشوكة الثابتة من Nuxtent) بالاستعلام عن المحتوى وعرضه في واجهة المستخدم.
إنشاء موقع ثابت عبر Nuxt.js ✅
يقوم Nuxt.js، الإطار الشهير لبناء تطبيقات Vue.js العالمية، بإنشاء موقع ثابت.
قالب Nuxt.js + Netlify CMS المبدئي
إعدادات
تطوير
إنتاج
النشر اليدوي عبر FTP
نشر إلى Netlify
النشر مع حلول CI الأخرى
المتطلبات الأساسية
يثبت
الاستخدام
القضايا المعروفة
مساهمة
تأكد من تثبيت node 8.0+
و npm 5.0+
أنت تعرف ما هو Netlify CMS وNuxt.js.
التثبيت عبر vue-cli : إذا كنت تستخدم إصدارًا أحدث من Vue CLI، فمن المحتمل أن تضطر إلى تثبيت حزمة إضافية حتى يعمل vue init
، حيث لم يتم تحسين هذا القالب بعد لـ Vue CLI الأحدث.
$ vue init renestalder/nuxt-netlify-cms-starter-template مشروعي $ cd مشروعي # تثبيت التبعيات $ npm install # أو تثبيت الغزل
ادفع المشروع إلى مستودع git الخاص بك : لتتمكن من تحرير المحتوى على الإطلاق، تحتاج إلى دفع مشروعك إلى مستودع git. يتصل نظام إدارة المحتوى (CMS) دائمًا مباشرةً بمستودع git ويقوم بتحرير المحتوى الموجود على الفرع المحدد في static/admin/config.yml
.
حسنًا، لقد قمت بالخطوات المهمة للبدء. الآن قم بتكوين كافة المكونات بشكل صحيح للبنية الأساسية الخاصة بك.
مصادقة CMS ونماذجها قم بتكوين مكان استضافة المستودع الخاص بك وكيف سيقوم مستخدمو CMS بتسجيل الدخول لتحرير المحتوى. حدد أيضًا الملفات والحقول للمحتوى الخاص بك.
الملف : static/admin/config.yml
التوثيق : وثائق Netlify CMS الرسمية -> التكوين
التوجيه والاستعلام
خارج الصندوق، لا تحتوي واجهة المستخدم على أدنى فكرة عن مكان تخزين المحتوى الخاص بك وما هي المسارات الديناميكية التي تنتمي إلى أي محتوى. يمكن لـ Nuxt.js تعيين الصفحات الثابتة فقط بشكل افتراضي. لم يتم اكتشاف المسارات الديناميكية مثل منشورات المدونة بأسماء ملفات مختلفة. يتم التكوين لهذا بواسطة Nuxtdown.
الملف : nuxtdown.config.js
الوثائق : التمهيدي Nuxtdown
معلومات الموقع العامة
يتم تعيين المعلومات العامة مثل علامات HTML <head>
وعناوين الصفحات عبر Nuxt.js. لا تهتم بتكوين التوجيه لـ Nuxt.js، حيث يتم حل هذه المشكلة عن طريق Nuxtdown.
الملف : nuxt.config.js
التوثيق : وثائق Nuxt.js الرسمية -> التكوين
أثناء التطوير، قم بتشغيل إصدار SPA من جانب العميل لتطبيقك. استخدم مهمة dev
أو serve
، أيًا كان ما يناسبك بشكل أفضل. يفعلون نفس الشيء.
# يتم تقديمه مع إعادة التحميل السريع على المضيف المحلي:3000$ npm run dev
انتقل إلى http://localhost:3000
للإنتاج، قم بإنشاء الموقع الثابت.
# إنشاء مشروع ثابت $ npm run
لكي يعمل على خادم الإنتاج الخاص بك، يحتاج الإصدار إلى معرفة عنوان URL/النطاق النهائي الذي سيتم تشغيل الموقع عليه. لهذا، يمكنك تحرير المهمة npm generate:manual
في package.json
وتعيين عنوان URL للإنتاج الخاص بك. يكون هذا مفيدًا عند نشر موقع الويب الخاص بك يدويًا:
# قم بإنشاء مشروع ثابت سيتم استضافته على عنوان URL الوارد في package.json$ npm run generator:manual
سيحتوي مجلد مشروعك الذي تم إنشاؤه على ملف netlify-example.toml
الذي يمكنك إعادة تسميته إلى netlify.toml
لبدء نشر Netlify. يقوم تلقائيًا بتعيين BASE_URL
استنادًا إلى تكوين Netlify الخاص بك ونوع النشر (نشر الإنتاج، نشر الفرع، نشر المعاينة). لذلك لا داعي لتعيين عنوان URL للإنتاج في package.json
.
إذا كنت تستخدم حلول CI أخرى، فيجب عليك دائمًا التأكد من تعيين متغير البيئة BASE_URL
على عنوان URL الذي سيتم تشغيل موقع الويب عليه. تسمح لك أدوات مثل GitLab بتعيين متغيرات البيئة في إعدادات المشروع وتسهيل استخدام الطريقة التي تريد بها نشر مشروعك.
لا يعمل مع Nuxt v2.3.0 والإصدارات الأحدث : هناك بعض التغييرات في Nuxt v2.3.0 غير متوافقة مع Nuxtdown/Nuxtent. ولهذا السبب تم تثبيت الإصدار حاليًا على الإصدار v2.2.x.
إذا كنت مهتمًا بالمساهمة في المشروع، فراجع CONTRIBUTING.md