لمحة عامة(لمحة عامة حول مسار المجلدات والملفات التي تستخدم في تصميم وتطوير عرض قوالب ديموفنف 4)

الوصف	اسم الملف
مجلد الستايل	../styles/dimofinf
المجلد الخاص بتنسيقات الستايل	styles/dimofinf/css
ملفات الجافا سكربت الخاصة بالستايل	styles/dimofinf/js
مجلد الصور الخاص بالستايل	styles/dimofinf/img
.htm ملفات قوالب الستايل ، ويجب أن تنتهي بالامتداد	styles/dimofinf/ *.htm

الوصف	اسم الملف
مجلد البلجن الرئيسي	../include/plugins/myplugin
المجلد الخاص بتنسيقات ستايل البلجن	../include/plugins/myplugin/css
ملفات الجافا سكربت الخاصة بالبلجن	../include/plugins/myplugin/js
مجلد الصور الخاص بالبلجن	../include/plugins/myplugin/img
.htm ملفات قوالب البلجن ، ويجب أن تنتهي بالامتداد	../include/plugins/myplugin/tpl/ *.htm

الوسوم

هناك عدة وسوم (Tags) خاصة بنظام القوالب يتم وضعها داخل ملفات القوالب .htm حتى تتم معالجتها من نظام القوالب واستبدالها بالقيم الخاصة بها , هذه الوسوم مشابهة في سياقها لوسوم الـ HTML ,لذا يجب أن تكون حريصًا أثناء تعديلك في ملفات القوالب , حتى لا يُحذف وسم خاص بنظام القوالب ، مما قد يتسبب لك بخطأ في العرض

يتم تعريف المتغيرات أو الثوابت أو المتغيرات العامة -مسبقة التعريف- داخل التيمبلت بهذا الشكل :

						
						{variablename}
						
					

حيث يمكن تعيين قيمتها باستخدام Assign في ملف الـ php للمتغيرات , أو باستخدام المتغيرات العامة -مسبقة التعريف- , أو باستخدام الثوابت.

مثال :

الوصف	اسم الوسم
يقوم هذا الوسم بطباعة التاريخ	{date}
يقوم هذا الوسم بطباعة مسار السكربت	{script_url}

مثال :

الوصف	اسم الوسم
تقوم بتحويل الأحرف -لقيمة المتغير -mname إلي أحرف صغيرة.	{mname|strtolower}
مثال آخر : يوضح إمكانية استدعاء المبدلات أكثر من مرة لنفس المتغير في نفس الوقت.	{mname|strtolower|strtolower}

يتم تعريف بلوك التكرار لجزء من القالب داخل القالب بهذا الشكل

						
							<[START BLOCK : blockname]>

							{* Data Looping Here *}

							<[END BLOCK : blockname]>
						
					

مثال :

						
							<[INCLUDE BLOCK : templatename]>
						
					

مثال :

						
							<[INCLUDEFILE BLOCK : path/to/file.php]>
							{* OR *}
							<[INCLUDEFILE BLOCK : path/to/file]>
						
					

مثال :

						
							<[START PHP CODE]>
							 
								 {* PHP CODE HERE *}
								 
							<[END PHP CODE]>
						
					

مثال لدالة تقوم بجلب رابط القسم :

						
							{function:getpermalink file="contents" args="action=1&id={cat_id}" caption="cat_name"}
						
					

مثال :

						
							<[INCLUDEZONE BLOCK : HEADER_ZONE]>
						
					

مثال :

						
							<[START IGNORE]>
									{* Code Here *}
							<[END IGNORE]>
						
					

مثال :

						
							{phrase_phrasename}
							{* Or *}
							{$dimphrase.phrasename}
						
					

مثال :

						
							{$dimoptions.input_name}
						
					

مثال :

						
<IF " Condition ">
    // Code
<ELSEIF " Another Condition ">
    // Code
<ELSE>
    // Code
</IF>

// Example
<IF " '{THIS_SCRIPT}' == 'index' "> Hello In Index </IF>
							
						
					

بنية الستايل

تم الاعتماد بشكل كامل في بنية الستايل الافتراضي لديموفنف 4 على Bootstrap Framework مما يسهل على الكثير من المصممين والمطورين الاستعانة بأكواد البوتستراب لتطبيق ما يحتجونه من ناحية طريقة عرض العناصر , ؛ كما أن استخدام البوتستراب عمل على توحيد بنية نظام قوالب ديموفنف و توحيد الكلاسات المستخدمه في ملف التنسيقات بشكل كبير ، مما يسهل على المصممين تنسيق الستايل الافتراضي ، وهم على دراية جيدة بنوعية الكلاسات المستخدمة ؛ كما يمكن للمبرمجين والمصممين الاستعانة بتطبيقات الجافا سكربت الموجودة بالبوتستراب ، على سبيل المثال ( Tabs , Slider Carousel , Tooltips ... etc ) .

هل يمكنني ترقيه bootstrap framework مستقبلًا ؟

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

ما المقصود بالنظام الشبكي (Grid System) ؟

هو النظام المعتمد -بشكل كامل- على تقسيم الصفحة إلى أعمدة ، معتمدًا -في ذلك- على إعطاء قيمة نسبية لعرض كل عمود ، ولا يعتمد في أبعاده على البكسل ، مما يجعل الصفحة متناسبة مع جميع المقاسات ، على سبيل المثال نجد أحيانًا وجود الكلاس التالي " col-md-6 " وهذا يقوم بإعطاء قيمة عرض 50% من الإطار الخاص به ؛ كما نجد توسعًا بشكل كبير في هذا النظام الشبكي في مكتبة البوتستراب ، حيث يمكنك وضع قيمة عرض لعنصر في الأجهزة العادية ، ووضع قيمة أخرى لنفس العنصر في الأجهزة اللوحية (في حالة العرض على مقاس شاشه أقل) ، ويفيد ذلك في تحقيق الريسبونسف بشكل جيد :
مثال :

						
						

							My Data
						
						
					

في حالة استخدام الكود الموجود بالأعلى فإن النظام الشبكي يقوم بإعطاء هذا العنصر قيمة عرض 50% في الأجهزة الكبيرة والعادية وكذلك في الأجهزة اللوحية (تابلت) ، وفي حالة عرض التصميم على الموبايل يقوم بإعطاء نفس العنصر قيمة عرض 100% وبذلك يأخذ هذا العنصر نفس عرض الإطار الخاص به. ويمكنك قراءة المزيد عن هذا النظام في مكتبة البوتستراب من هنا

ملف التنسيقات الرئيسي ( style.css )

تم تهيئة الملف وتقسيمه بشكل مميز ليسهل عليك الوصول إلى المناطق التي ترغب في تعديلها ، والتعديل عليها بكل سهولة ؛ فلست بحاجة لإعادة بناء ملف تنسيقات الستايل الخاص بك من البداية مرة أخرى ؛ وأيضًا تم تهيئة هذا الملف للعمل على الاتجاهين ( RTL & LTR ) حيث إنه يوجد ملف آخر ملحق باسم rtl.css وهذا يحتوي فقط على الإزاحات والأحجام المناسبة للعمل على الاتجاه RTL Direction .
سنقوم –الآن- بسرد أهم النقاط التي بناءً عليها تم تقسيم ملف التنسيقات الرئيسي.

هذه قائمة بالتعليقات الموجودة في الملف ، ووظيفة الجزء المدرج أسفل منها :

الوصف	عنوان التعليق
يحتوى هذا الجزء على التنسيقات العامة ، ولا يستهدف فئة معينة	[1]-> General
الجزء الخاص بأحجام الخطوط بشكل عام	[1]-> 01. Fonts Size
الجزء الخاص بكلاسات الألوان التي تستخدم بشكل عام ، ودرجاتها	[1]-> 02. Colors
جزء يحتوي على تنسيقات وكلاسات يمكن استخدامها في أكثر من مكان	[1]-> 03. Misc
جزء خاص بتنسيقات وتأثيرات الـ CSS3	[1]-> 04. CSS3 Classes
الجزء الخاص بالأيقونات الإضافية التي يتم إضافتها للستايل من مكتبات خارجية	[1]-> 05. WebFont Icons
الجزء الخاص بتنسيقات عناوين البلوكات في المجلة بالكامل	[1]-> 06. Titles
يحتوي هذا الجزء على الـ Grid System الخاص بديموفنف لتقسيم عرض الصفحة ، وهو شبيه -إلى حد كبير- بالبوتستراب	Dimofinf Grid System
الجزء الخاص بتنسيق محتوى أعلى الصفحة	[2]-> Content ---> Top Content
الجزء الخاص بتنسيق منطقة الهيدر وشعار الموقع	[2]-> 01. Header
الجزء الخاص بتنسيق قائمة الموقع	[2]-> 02. Main Navbar
الجزء الخاص بمحتوى الصفحة ، وهو يحتوي على كلاسات عامة تخص المحتوى الرئيسي للصفحات	[2]-> 03. Center Content
تنسيق رسائل التحقق	Validator Message
سحابة الكلمات الدلالية	Tags Cloud
الجزء الخاص بتنسيقات التيكر	News ticker
تنسيق صفحات الإضافة والتعديل	Add & Edit Cont Forms Style
التنسيقات الخاصة بملف العضو الشخصي	CSS For Profile
التنسيقات الخاصة بالرسائل والتنبيهات	Notifications & SMS
الجزء الخاص بتنسيقات أسفل الصفحة	Footer

وتجد أيضًا في نهاية الملف بعض تنسيقات الـ media queries التي تستخدم في ضبط بعض التنسيقات -عند الحاجة- ، لتتناسب مع جميع الأجهزة اللوحية والكفية