شرح : نظام الستايلات في كليجا , ووظيفة كل قالب

[saanina]

مرحباً ..

هذا شرح اقرب للمطورين منه للمستخدمين العاديين

نظام القوالب في كليجا بسيط , لانه ملفات هتمل عاديه بلاحقة ".html"
قمنا ببناء نظام القوالب في كليجا على نظام EasyTemplate
كل ماينطبق من شروحات لنظام القوالب هذا ينطبق في كليجا , عدا بعض الامور الاضافيه التي اضفناها وسيتم الاشاره لذلك ..

الستايلات
كل ستايل في كليجا هو عباره عن مجلد يتم وضع فيه ملفات القوالب , اي ملفات الهتمل , وداخل هذا المجلد يمكنك وضع ماتريد من المجلدات التي تخصك كمجلد الصور او الستايل شيت و الجافاسكربت وخلافه ..

مثلا قمت بتصميم ستايل اسمه klj_test
تقوم بإنشاء مجلد بهذا الاسم في مجلد styles في كليجا , وتضع فيه القوالب الخاصه بكليجا , تستطيع نسخها من القالب الافتراضي وتعدل كما تشاء فيها ...


القوالب

• header.html : قالب الهيدر وهذا يحوي الجزء العلوي من كليجا والذي يحوي اللوقو والقائمه الرئيسيه
• footer.html : قالب الفوتر والذي يحوي الجزء السفلي من كليجا , وهذا يحوي غالبا الحقوق وايضا بقية اكواد الستايل .
• index_body.html : قالب البدايه , هذا يحوي حقول التحميل وايضا رساله التحيه وايضا هذا يظهر منه رسائل المعلومات التي تظهر اثناء التحميل
• download.html : قالب التنزيل , هذا يظهر للاخرين عند تنزيل ملف من المركز
• call.html : قالب اتصل بنا , الذي يحوي نموذج الاتصال بالاداره
• report.html : قالب التبليغ , هذا يظهر عند التبليغ عن ملف مخالف
• guide.html : قالب الملفات المسموحه , يظهر للمستخدم الملفات التي سمح بها المدير للتحميل وحجمها
• stats.html : قالب الاحصائيات , يظهر بعض الاحصائيات عن المركز
• rules.html : قالب الشروط الخاصه بالمركز , التي وضعها المدير للمستخدمين
• login.html : قالب الدخول , يظهر عند الدخول لكليجا
• profile.html : قالب الملف الشخصي , يظهر للعضو عند تعديل بياناته
• register.html : قالب التسجيل , يظهر عند محاولة التسجيل كعضو في الموقع
• get_pass.html :قالب نسيت كلمة المرور , يظهر عندما يظغط المستخدم نسيت كلمة المرور .
• filecp.html : قالب ادارة ملفات العضو , هذا عندما يقوم العضو بعرض ملفاته التي قام بتحميلها ليقوم بحذفها مثلا.
• fileuser.html : قالب مجلد العضو , هذا ليتم عرض ملفات العضو للاخرين او له هو , بحيث يرى الاخرون الملفات لاي عضو اذا كان سمح بذلك.
• up_boxes.html : قالب صناديق التحميل , المربعات التي تظهر بعد التحميل.
• info.html : قالب المعلومات , هذا يظهر عند عرض رسائل المعلومات في كليجا , مثلا "تم تحديث ملفاتك " او اي رساله تنبيه اخرى .
• err.html : قالب الخطأ , يظهر عند عرض رسائل الخطأ في كليجا , مثلا , "هناك خطأ في الحذف حاول من جديد " وخلافه ..

* باقي الملفات اما صور او ملفات css او جافاسكربت وهي ملفات ثانويه يمكن تطويرها او حذفها من بعض المصممين ..

المتغيرات داخل القوالب :
المتغيرات داخل القواب مثلها داخل الملفات البرمجيه العاديه
الا ان طريقه عرضها تختلف ..

CODE: تحديد الكل

{var}


فالمتغير يوضع داخل قوسين معكوفين ..

لعرض متغير لغوي من ملف اللغه كالتالي :

CODE: تحديد الكل

{lang.VAR}


بحيث ان VAR هو اسم المتغير اللغوي داخل ملف اللغه .. ويفضل اذا اردت وضع متغير لغوي جديد ان تضعه كبتل ..

بالنسبه للشروط والامور البرمجيه بالقوالب فهي نفس ماوضح في موقع نظام EasyTemplate

* ملاحظة : اذا اردت تعديل القوالب فحاول ان لاتحذف او تغير التعليقات التي يكون شكلها كالتالي :

CODE: تحديد الكل

<!-- ...  -->

info.txt
ملف ملعومات الستايل ,
name : اسم الستايل
copyright : حقوق الستايل , اسم المصمم مثلا ورابط موقعه ..
version : اصدار الستايل
kleeja_version : اقل نسخه من كليجا ممكن ان يعمل عليها الستايل
depend_on : هذه تأتي معطله , لكن معناها ان الستايل يعتمد على ستايل اخر ..

* لماذا يتم الاعتماد على ستايلات اخرى في كليجا ؟ :
تستطيع ان تستخدم هذه الطريقه عندما يكون هناك ستايل مثلا جميل اعجبك لكن لونه اصفر
فتريد تحويله للون الاحمر .. كل ماعليك هو انشاء مجلد ستايل اخر , ووضع اسم الستايل الذي اعجبك داخل القيمه "depend_on" في ملف info.txt , و تضع بعض القوالب التي عدلتها , وملف الستايل شيت المختلف .. وبالتالي يتم الاعتماد على الستايل الاخر , بكل شي الا بالملفات التي توجد في ستايلك .. كملف الستايل شيت مثلا ..

اكواد يحتاجها المصممون احيانا :

تحتاج احيانا داخل اللوب ( اي داخل الخلايا التي تتكرر مثل ملفات العضو )
ان تقوم بتغيير لون الخلفيه للخليه كل دوره ..
اذن تحتاج الكود :

CODE: تحديد الكل

<RAND="red","white">


وعلى هذا فقس ..

ايضا هناك كودين اخرين للوب وهما ODD و EVEN
لمعرفه على المتغير فردي او زوجي ..

CODE: تحديد الكل

<ODD="var">المتغير هذا فردي</ODD>


ومثله كود EVEN بالظبط.

ايضا لعرض نص او كود في متصفح او متصفحات محدده تستخدم

CODE: تحديد الكل

<IS_BROWSER="ie6">انت تتصفح من اكسبلور 6</IS_BROWSER>


ويمكن استخدام الفاصله لمعرفه عدة متصفحات

CODE: تحديد الكل

<IS_BROWSER="ie6,opera">انت تتصفح من اكسبلور 6 او متصفح اوبرا</IS_BROWSER>


اذا اردت ان تعكس الشرط بحيث يكون كل المتصفحات عدا المحدد

CODE: تحديد الكل

<IS_BROWSER!="ie6">انت تتصفح من اي متصفح عدا اكسبلور 6</IS_BROWSER>


______________________________________-
تأريخ الشرح :
# 22-7-2009 >> كُتب الموضوع ..
# 10-8-2009 >> اضافه شرح القالب up_boxes.html
# 17-9-2009 >> تم وضع شرح لملف info.txt وشرح الوسم IS_BROWSER

[farah]

شكرا لك على الشرح

الرائع ،،

دمت متالقا اخى الكريم

[WhisperiN]

جزاك الله خير ..
كفيت و وفيت.. :)

[شاهر]

لو حبيت اغير اللوجو الى شكل كبير زى المثال دا

محتاج ارفع الصوره اللى فى المركز دا مكان الشعار ( احذف الشعار و اضف صوره اللى فى المثال )

http://www.alfothool.org/up

[arabknight]

بارك الله فيك اخي

[joker400]

بارك الله فيك اخي ..... وانشاء الله السكربت يتطور اكثر واكثر :thumbup:

[ساهر]

شكرا على الشرح
بس
هل للغة ASP.net قالب بنفس الطريقة

[رايـق]

السلام عليكم ..

قمت بالتصميم على النسخه السابقه للنسخة التطويريه بكل سهوله .

ولاكن النسخة التطويريه في مشاكل وبشرح لكم المشكله بالهيدر

اثناء حذف اكواد الهيدر القديم واستبدالها بأكواد التصميم الجديد ووضع ملفات الـ css بالستايل شيت لم تظهر الصور .. مالمانع يا مطورين .. بارك الله فيكم

اذا كان هناك حل اتمنى وضعه لاني في حرج كبير الآن .. وحاولت اكثر من مره بدون فائده علما انني قمت بنسخ الاستايل واعدت تسميته بالتسميه الجديده ..

[مؤيد]

ليه تحذف اكوادالهيدر ؟
التصميم يعتمد ع السي اس اس والصور الموجوده بمجلد الامج

[رايـق]

لاني طال عمرك بأضيف اكواد تصميمي الجديد ,,, وبغير شكل الاستايل نهائي الهيدر والفوتر والايطارات ..

لاني ما ابي استبدل الصور فقط

اتمنى دخول الأستاذ مصمم اسكربت كلجيا الاخ عبد الرحمن .. لانه مبهر جدا في تتبعي للتصميم الافتراضي