apollo html bootstrap تنزيل - apollo html bootstrap تنزيل كود المصدر

apollo html bootstrap

فئات أخرى

Apollo Initial Release

تنزيل

أبولو - قالب الإدارة المستجيب لـ Bootstrap 5 HTML

ملخص

Apollo هو قالب إدارة Bootstrap 5 نظيف وسريع الاستجابة.

عرض تجريبي | تحميل الرمز البريدي

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

متطلبات
بداية سريعة
صفحات القالب
الرابط التجريبي
الميزات الرئيسية للقالب
هيكل ملف القالب
المقاود
بيانات نموذج JSON
تخصيص أنماط القالب
إنشاء صفحات جديدة
وثائق التمهيد
الاعتمادات
اتصل بنا

متطلبات

إذا كنت لا تنوي العمل باستخدام الكود المصدري للقالب (وهذا يعني أنك لن تقوم بتجميعه أو تشغيل خادم Webpack dev)، فلن تحتاج إلى تثبيت أي شيء. يمكنك ببساطة الانتقال إلى المجلد dist والبدء في تحرير الملفات.

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

بداية سريعة

قم بتنزيل أحدث إصدار أو استنساخ الريبو: git clone https://github.com/PixelRocket-Shop/apollo-html-bootstrap.git
قم بتثبيت Node.js إذا لم يكن موجودًا على نظامك بالفعل.
افتح جذر المشروع في سطر الأوامر الخاص بك.
قم بتشغيل npm install في سطر الأوامر الخاص بك.
قم بتشغيل npm start لبدء تشغيل Webpack devserver.
إذا كنت تريد إعادة ترجمة ملفات القالب (التي يتم إخراجها إلى مجلد dist)، فقم بتشغيل npm run build

صفحات القالب

يتكون القالب من الصفحات التالية:

لوحة القيادة
صفحة إدارة المستخدم
صفحة مثال الرسم البياني
صفحة تسجيل الدخول
صفحة التسجيل
صفحة نسيت كلمة المرور
404 صفحة
صفحة فارغة

بالإضافة إلى الحاجيات التالية:

القائمة المنسدلة لإعدادات المستخدم
القائمة المنسدلة لنشاط المستخدم
القائمة المنسدلة لرسائل المستخدم
القائمة المنسدلة لإشعارات المستخدم
مختلف عناصر واجهة المستخدم Chart.js
الزوار حسب البلد
الزوار حسب نظام التشغيل

لتقليل تكرار التعليمات البرمجية إلى الحد الأدنى، استخدمنا Handlebars.js كمحرك النماذج والأجزاء الجزئية لإضافة نفس التعليمات البرمجية بسرعة إلى صفحات مختلفة. نستخدم أيضًا مكونًا إضافيًا لـ Handlebars لبيانات JSON - وهذا يسمح لنا باستخدام الحلقات وإخراج كتلة تعليمات برمجية HTML واحدة بدلاً من تكرار نفس HTML.

الرابط التجريبي

عنوان URL التجريبي

يرجى ملاحظة أن هذا قالب HTML فقط. لا يتصل بقاعدة بيانات، ولن يعمل تلقائيًا في نظام إدارة المحتوى (Wordpress وما إلى ذلك). سوف تحتاج إلى دمج التعليمات البرمجية الخاصة بنا في التطبيق الخاص بك.

الميزات الرئيسية للقالب

تكامل Chart.js مع 3 أنواع مختلفة من المخططات
بنيت مع Bootstrap 5
استجابة كاملة
أحدث مكونات الطلبات
الشريط الجانبي القابل للطي (ينهار تلقائيًا عند تغيير حجم المتصفح)
مكون الإخطارات
مكون الصورة الرمزية
مكون تسجيل الدخول/التسجيل

هيكل ملف القالب

؟ dist - النسخة التي تم إنشاؤها من القالب. اذهب هنا إذا كنت لا تريد العمل مع الكود المصدري للقالب. لكن كن حذرًا: إذا قمت بتخصيص أي شيء في هذا المجلد مباشرة، ثم قمت بإعادة ترجمة القالب لاحقًا باستخدام حزمة الويب، إلا إذا قمت بنقل مجلد dist خارج القالب، فسيتم تجاوز تغييراتك.

؟ Node_modules - الدليل حيث يقوم NPM بتثبيت التبعيات. لن ترى هذا المجلد حتى تنتهي من تثبيت القالب. لا تحتاج إلى إنشاء هذا المجلد.

؟ src - كود مصدر القالب. اذهب هنا لتخصيص القالب الخاص بك.

؟ src/assets - أصول القالب مثل CSS وJS والصور وما إلى ذلك.

؟ src/data - ملفات بيانات القالب JSON. نحن نستخدم ملفات JSON هذه لتسهيل مهمتك في إدراج المحتوى في القالب.

؟ src/html - صفحات القالب. انتقل هنا لتعديل الصفحات الموجودة أو إضافة صفحات جديدة.

؟ src/partials - قوالب جزئية للمقاود.

المقاود

المقاود عبارة عن محرك قوالب يسمح لنا بالحفاظ على كود مصدر القالب الخاص بنا منظمًا ونظيفًا قدر الإمكان. إنه يقلل من تكرار التعليمات البرمجية ومن خلال استخدام الوظائف المساعدة، يسمح لمطوري القوالب بإخراج كميات كبيرة من البيانات بسرعة كبيرة مع الحد الأدنى من التعليمات البرمجية. يمكنك قراءة المزيد عنها هنا.

مثال المقاود الجزئية

افتح الملف التالي في القالب الخاص بنا: src/html/index.html.

في السطر 21 سترى الكود التالي:

 {{> content/breadcrumbs }}

هذا المقاود جزئية. يخبر هذا الكود Handlebars بالبحث داخل مجلد يسمى content (الموجود في المجلد الجزئي) ثم العثور على ملف يسمى breadcrumbs وإدراجه في ملف Index.html عند تجميعه.

هناك بعض الملاحظات المهمة حول استخدامنا لأجزاء المقاود:

يتم تخزين جميع الأجزاء لدينا داخل src/partials. لا تضع الجزئيات في أي مكان آخر.
نحن نستخدم .html كملحق جزئي للملف. لقد أضفنا أيضًا .svg كامتداد ملف جزئي صالح.
إذا كانت لديك مجلدات داخل مجلدات داخل مجلدك الجزئي، فقم فقط بالإشارة إلى المجلد الموجود فيه الجزء الجزئي. لذلك ستتم الإشارة إلى "partials/header/navbars/navbar.html" باسم "navbars/navbar".
لا تقم بتضمين امتداد الملف الجزئي. لاحظ في المثال أعلاه أننا نخرج "breadcrumbs" وليس "breadcrumbs.html"

بيانات نموذج JSON

يأتي المكون الإضافي Webpack Handlebars الذي نستخدمه مزودًا بأداة مساعدة سهلة الاستخدام للغاية تسمح لنا بتمرير ملفات JSON كبيانات قالب.

يرجى الانتقال إلى: src/data. هذا هو المكان الذي توجد فيه ملفات JSON الخاصة ببيانات القالب. يمكنك تعديل أو إزالة أو إضافة المجلد الخاص بك إلى هذا المجلد.

تخصيص أنماط القالب

يتم الاحتفاظ بجميع ملفات CSS/SASS المصدر الخاصة بالقالب داخل مجلد أصول القالب. انتقل إلى src/assets/scss. افتح theme.scss مع المحرر الخاص بك.

هذه هي نقطة الدخول الرئيسية لجميع ملفات SASS/CSS الأخرى.

إنشاء صفحات جديدة

لإنشاء صفحة جديدة، انتقل في محرر التعليمات البرمجية الخاص بك إلى: src/html. لتسهيل الحصول على HTML الصحيح، قم باستنساخ صفحة موجودة. أعد تسمية الملف الذي تم إنشاؤه حديثًا إلى أي عنوان URL تحتاجه. وهذا كل شيء. أنت الآن حر في فتح الصفحة الجديدة باستخدام محرر التعليمات البرمجية الخاص بك، وإجراء التغييرات، ثم حفظ الملف. قم بإنهاء Webpack devserver وأعد تشغيله حتى تظهر الصفحة.

وثائق التمهيد

لدى Bootstrap بالفعل موقع توثيق شامل سيرشدك إلى إعداد واستخدام جميع ميزات Bootstrap الافتراضية. تم دمج Bootstrap 5 بالكامل في الكود المصدري لقالبنا. يرجى الرجوع إلى موقع مستند Bootstrap أولاً للتعرف على أي ميزات Bootstrap الافتراضية: تفضل بزيارة موقع مستند Bootstrap