إضافة ملفات JavaScript و CSS الخاصة في نظام إدارة المحتوى bluetronix

المتطلبات والهدف

تحتاج إلى حقوق وصول المطور إلى نظام bluetronix CMS ويجب أن تكون على دراية بتكوين التخطيطات ومجلدات المطورين. ستتعلم كيفية تضمين ملفات JavaScript و CSS الخاصة بك بالإضافة إلى ملفات CMS الموجودة، دون تغيير الملفات النظام الأصلية.

نستخدم الملفات المعروضة في لقطات الشاشة BxHeadScript_own.js و BxStyle_own.css. يتم تضمين كلا الملفين بشكل صريح في التخطيط، بحيث يأخذ CMS هذه الملفات في الاعتبار عند تحميل الصفحة.

1. فتح التصميم

افتح قسم التخطيط في CMS واختر التخطيط - HTML. ثم افتح التخطيط الذي تريد تضمين ملفات JavaScript و CSS الخاصة بك فيه. في هذا المثال، نستخدم التخطيط الافتراضي.

في تعريف التخطيط، ستجد بالفعل تضمينات للملفات المركزية لـ CMS، مثل BxHeadScript.js و BxStyle.css. يمكنك إدخال ملفاتك الإضافية بجانبها مباشرة.

2. إنشاء ملف JavaScript خاص في مدير الملفات

افتح مدير الملفات وانتقل إلى مجلد النظام المدروس باللون الأحمر bx_script. هناك ستجد الملفات المركزية للـ JavaScript الخاصة بنظام bluetronix CMS، وربما تحتاج إلى نسخ متعددة بناءً على اللغة.

قم بإنشاء ملفك الخاص BxHeadScript_own.js داخل هذا المجلد أو اختره إذا كان موجودًا بالفعل. يمكنك نسخ ملف مناسب موجود كقالب لذلك.

اختر تعديل لفتح كود JavaScript لملفك الخاص في محرر النصوص.

في المثال المعروض، يحتوي الملف على كود JavaScript الخاص باختيار الوضع الداكن مقابل الوضع الفاتح. يمكنك إدارته وحفظ كود JavaScript الخاص بمشروعك في محرر النصوص.

لا تغير BxHeadScript.js الأصلية لإضافاتك الخاصة. يمكن أن يتم استبدال الملفات داخل مجلدات نظام bx_ أثناء تحديثات CMS. حدد ملفاتك الخاصة هناك باستخدام _own.

3. تضمين ملف JavaScript الخاص في التخطيط

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

<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>

السطر الإضافي هذا يحمل كود JavaScript الخاص بك. يظل BxHeadScript.js الأصلي دون تغيير. يجب أن يتطابق مسار الملف واسم ملفك الخاص مع الملف في مدير الملفات.

4. إنشاء ملف CSS خاص في مدير الملفات

افتح في مدير الملفات مجلد النظام bx_style. هنا، ستجد على وجه الخصوص ورقة الأنماط المركزية BxStyle.css. لاستخدام التعديلات الخاصة، نستخدم ملفًا منفصلًا يسمى BxStyle_own.css.

قم بإنشاء الملف BxStyle_own.css أو افتح الملف الخاص الموجود. تظل ملف النظام BxStyle.css محفوظة.

من خلال تعديل، يمكنك إدخال قواعد CSS الخاصة بك في هذا الملف وحفظها.

5. تضمين ملف CSS الخاص في التخطيط

افتح مرة أخرى التخطيط - HTML. في منطقة head، أضف ملف CSS الخاص بك بعد ورقة الأنماط الموجودة. الترتيب مهم إذا كانت القواعد الخاصة بك يجب أن تتجاوز التنسيقات الافتراضية.

<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">

تظل ملف CSS الافتراضي كما هو بينما تقوم بتحكم التنسيقات الإضافية أو المختلفة بشكل منفصل في BxStyle_own.css.

6. استخدام JavaScript في رأس الصفحة أو في نهاية الصفحة

يمكن تضمين ملفات JavaScript اعتمادًا على مهمتها في منطقة head أو في نهاية الصفحة قبل وسم body الختامي. تُحمّل BxHeadScript_own.js الموضحة في الرأس. لمخططات أخرى، يمكنك أيضًا استخدام مجلد مشروع خاص ودمج الملف لاحقًا في التخطيط.

مثال على ملف إضافي من مجلد خاص في أسفل الصفحة:

<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>

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

7. التمييز بين مجلد النظام والمجلدات الخاصة بالمشروع

المجلدات المميزة باللون الأحمر bx_ تنتمي إلى نظام إدارة المحتوى bluetronix. يجب تمييز الملفات الخاصة داخل هذه المجلدات بـ _own حتى لا يتم التعامل معها على أنها ملفات نظام خلال التحديثات العادية لنظام إدارة المحتوى.

يمكنك أيضًا وضع ملفات JavaScript و CSS الخاصة بك في مجلدات مشروع قمت بإنشائها بنفسك بدون بادئة bx_، على سبيل المثال /script/ أو /my_scripts/. في هذه الحالة، ليس من الضروري استخدام العلامة _own. يجب عليك بعد ذلك استخدام المسار الفعلي في تعريف التصميم الخاص بك.

علامة _own لا تحل محل الربط في التصميم: سيتم تحميل ملف منفصل فقط عندما يتم ربطه عبر سطر script أو link المناسب.

8. النسخ الاحتياطي التلقائي للملفات

في روابط التخطيطات المعروضة، يستخدم نظام إدارة محتوى bluetronix الوسم __FV_…__. من خلاله، يمكن لنظام إدارة المحتوى إضافة بارامتر النسخة بناءً على تاريخ التعديل. بعد إجراء تغيير، يقوم المتصفح بتحميل ملف JavaScript أو CSS الحالي، بدلاً من استخدام نسخة محفوظة قديمة.

مثال: يمكن إضافة معلمة نسخة إلى مسار أصلي مثل /script/MyScript.js بعد المعالجة. لا تحتاج إلى تحديث رقم النسخة في الملفات المربوطة بشكل مناسب في كل تصميم.

9. حفظ التغييرات والتحقق منها

قم أولاً بحفظ ملفات JavaScript و CSS الخاصة بك، ثم قم بحفظ التصميم المعدل. أعد تحميل موقع الويب الخاص بك وتحقق مما إذا كانت وظائف JavaScript الخاصة بك تعمل وأن قواعد CSS الخاصة بك يتم تطبيقها.

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

ملخص

لإضافاتك الخاصة، قم بإنشاء BxHeadScript_own.js في مجلد bx_script و BxStyle_own.css في مجلد bx_style. بعد ذلك، اربط كلا الملفين في Layout - HTML بالإضافة إلى ملفات نظام إدارة المحتوى الأصلية. بهذه الطريقة، تبقى ملفات النظام كما هي، بينما تقوم بإدارة كود JavaScript و CSS المرتبط بالمشروع بشكل منفصل.