This page is a translated version of the page New Template System in LS3.x and the translation is 100% complete.

مقدمة

تنبيه: في الإصدارات السابقة من LimeSurvey كانت الملفات التي تحدد مظهر الاستبيان وطريقة عرضه من حيث الألوان والخطوط والتخطيط و(بعض) السلوك تسمى "template". ونتيجة لرؤى جديدة، أصبحت تسمى الآن "theme" (القالب)، بينما يقتصر مصطلح "template" على الاستبيانات النموذجية.

في هذه الصفحة ستتعلم كيفية:

استخدام نظام القوالب الجديد في LimeSurvey 3.0.
استخدام الوراثة لإدارة قوالبك الخاصة.
إضافة صورة إلى قالبك.
إدارة خيارات القالب لاستبياناتك ومجموعات الاستبيانات.

يقدم LimeSurvey 3 نظام محرك قوالب جديدًا بالكامل، يعتمد على Twig 1.29 وBootstrap، ويتيح وراثة القوالب وخيارات القالب. وهو يلغي تمامًا نظام كلمات الاستبدال القديم. وبذلك يمكن الآن تخصيص 100% من HTML الخاص بالواجهة الأمامية. فعلى سبيل المثال، في نظام القوالب القديم كانت هناك كلمة مفتاحية {ASSESSMENTS} يتم استبدالها بـ HTML الخاص بالتقييم وقت التنفيذ، ولم يكن لدى مصمم القالب أي وسيلة لتخصيص هذا الـ HTML (إلا باستخدام JavaScript). أما الآن فهناك ملف باسم assessments.twig يحتوي على المنطق (المكتوب بلغة Twig) لتوليد هذا الـ HTML. سنقدم لك في هذه الصفحات بعض الشرح حول كيفية استخدام محرك القوالب الجديد هذا.

لن نشرح هنا بالتفصيل كيفية عمل Twig. فهي أشبه بنسخة مبسطة جدًا من PHP توفر مستوى عاليًا من الأمان بفضل نظام "الصندوق الرملي" (sandbox) (سنراه بمزيد من التفصيل في الجزء الخاص بالشيفرة الأساسية لمحرك القوالب). إذا كنت تعرف PHP فسيكون إتقانها سهلًا للغاية، وإذا لم تكن تعرفها فمن المفترض أن يكون تعلمها سهلًا أيضًا. يرجى الاطلاع على وثائق Twig 1.X: https://twig.symfony.com/

التحرير باستخدام واجهة الإدارة

قائمة القوالب

في لوحة القيادة الخاصة بالإدارة يوجد الآن مربع للوصول إلى قائمة القوالب:

تنقسم القائمة إلى 5 أعمدة:

معاينة القالب: وهي مجرد ملف صورة باسم "preview.png" في جذر القالب
"عنوان" القالب كما هو محدد في ملف البيان (config.xml في جذر القالب)
وصف القالب: نص يتم تعيينه في ملف البيان الخاص به
نوع القالب: القالب الأساسي (يأتي مع LimeSurvey)، قالب المستخدم (تمت إضافته في مجلد التحميل)، قالب XML (غير محمّل في قاعدة البيانات)
تمديد: إذا كان القالب يمدّد قالبًا آخر فسيظهر اسمه هنا
بعض أزرار الإجراءات:
- تثبيت: سيحمّل ملف البيان الخاص بالقالب لإضافته إلى قاعدة البيانات وإتاحته للاختيار على مستوى الاستبيان
- إلغاء التثبيت: سيحذف إدخالات الإعدادات الخاصة بالقالب من قاعدة البيانات
- محرر القالب: سينقلك إلى محرر القالب
- خيارات القالب: ستقودك إلى الإعدادات العامة لخيارات القالب

محرر القالب

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

تم الإبقاء على محرر القالب قريبًا قدر الإمكان من المحرر الأصلي. لذلك عندما تفتح القالب الأساسي لا يمكنك تحريره. ولكن الآن، بدلًا من زر "نسخ"، لديك زر "تمديد".

الآن أنت تمدّد القالب — *الآن أنت **تمدّد** القالب*

نظرة سريعة على مفهوم وراثة القوالب

في LS3 يمكن الآن لقالب أن يرث من قالب آخر، أي أن "يمدّد" قالبًا آخر. وهذا يعني أن مجلد القالب سيكون فارغًا تقريبًا، ولن يحتوي إلا على الملفات (طرق العرض وأوراق الأنماط والنصوص البرمجية والموارد وغيرها) التي تختلف عن الملفات الأصلية. وبهذه الطريقة سيكون من السهل عليك إنشاء مجموعة من القوالب لمستخدميك المختلفين دون الحاجة إلى صيانة الكثير من القوالب المختلفة. على سبيل المثال: يمكنك أن تملك قالبك الخاص، ثم نسخة لشركة ما (بشعارها وأسلوبها وربما رابط لموقعها في التذييل وغير ذلك)، ونسخة أخرى لشركة أخرى، وهكذا. وإذا قمت لاحقًا بتحديث CSS أو التخطيط العام لقالبك المخصص، فسيتم تحديث جميع القوالب التي ترث منه تلقائيًا. لاحظ أن الوراثة تعاودية: يمكن لقالب أن يمدّد قالبًا يمدّد بدوره قالبًا آخر، وهكذا.

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

الميزات الجديدة في واجهة المستخدم

لتمديد قالب Monochrome في LimeSurvey، انتقل إلى قائمة القوالب، ثم انقر على الزر “محرر القالب” الخاص بقالب Monochrome. بعد ذلك انقر على “تمديد” وأكّد الاسم الجديد “extends_monochrome”.

إذا انتقلت الآن إلى مجلد التحميل (باستخدام عميل الملفات/FTP)، فسترى أنه تم إنشاء مجلد جديد: upload/themes/extends_monochrome يحتوي على ملف XML ومجلدات، لكن معظم المجلدات فارغة. فليس فيه طرق عرض ولا CSS ولا JS. ومع ذلك، يمكنك اختيار هذا القالب لأي استبيان كأي قالب عادي، وسيبدو تمامًا مثل قالب monochrome.

*شجرة القالب (المجلدات والملفات) بعد إنشائه مباشرة. إنه فارغ تقريبًا*

يتم نسخ الموارد (jpg وpng وغيرها) من القالب الأصلي عند تمديد القالب. والسبب أنك إذا نسخت ملف CSS من القالب الأصلي محليًا، وكان يشير إلى تلك الملفات (كما في تعليمة background-image)، فسيحتاج إلى العثور على تلك الصور في مسار القالب الحالي.

يبدو محرر القالب الخاص بالقالب extends_monochrome كما يلي:

لا يوجد فرق كبير عن محرر القوالب القديم. لنذكر أهم الفروق:

الكلمة المفتاحية inherited في قائمة الملفات. وتعني أن الملف غير موجود في مجلد القالب وأنه سيتم استخدام الملف من القالب الأصلي.

يعرض المحرر الرئيسي ( محرر ACE ) محتوى الملف المحدد. لا تحتوي الملفات على HTML أو CSS أو JS فحسب، بل تحتوي أيضًا على تعليمات Twig. وتتيح لنا تعليمات Twig هذه نقل بعض المنطق إلى طرق عرض القالب التي كانت مدفونة سابقًا في النواة، وأصبح من الممكن الآن تخصيصها.

*بعض شيفرة twig الخاصة بلائحة الاستبيان*

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

يمنحك الرابط ‘tip’ في أسفل قائمة الملفات طريقة Twig لإضافة صورة في HTML الخاص بك

يصبح الزر ‘حفظ التغييرات’ زرًا باسم نسخ إلى السمة المحلية وحفظ التغييرات

مثال سريع: إضافة صورة

سيقوم الزر نسخ إلى السمة المحلية وحفظ التغييرات تمامًا بما يقوله: إذا عدّلت أي شيء داخل الملف ثم نقرت على هذا الزر، فسيتم نسخ الملف إلى القالب الذي تحرره وحفظ تغييراتك.
على سبيل المثال: انقر على الملف layout_global.twig، ثم قبل الكتلة content مباشرة ( {% block content %}) أضف النص “TEST” وانقر على الزر. سترى أن علامة الملف تغيرت من “inherited” إلى “local” وأن الزر أصبح زرًا بسيطًا باسم حفظ التغييرات.

إذا فتحت مستكشف الملفات وانتقلت إلى المجلد upload/themes/extends_monochrome/views/، فسترى أنه يحتوي على ملف واحد فقط هو layout_global.twig، وأن النص “TEST” موجود فيه.

الآن، بدلًا من إضافة نص عشوائي، سنضيف صورة. إذا نقرت على الرابط tip فسيخبرك بما يلي:
لاستخدام صورة في ملف بالامتداد .twig: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
إذا قرأت وثائق Twig (وكان ينبغي أن تكون قد فعلت ذلك حتى الآن)، فأنت تعلم أن {{ function( ) }} سيعرض نتيجة دالة على الشاشة. والدالة هنا هي image( ).

إذا كنت فضوليًا لمعرفة ما تفعله، يمكنك العثور عليها في الشيفرة هنا (إصدار RC3): الدالة image() في RC3

إذا لم تفهم الشيفرة فلا تقلق، فلست بحاجة إلى معرفة كيفية عملها، بل إلى معرفة سبب استخدامها وكيفية استخدامها.

ينبغي لك استخدام الدالة image() لسببين:

تبحث الدالة image في القالب للعثور على الصورة. فإذا كان القالب الذي تعمل عليه يمدّد قالبًا آخر، وقمت بنسخ الملف الذي أدرجت فيه الصورة محليًا دون نسخ الصورة نفسها إلى القالب المحلي، فستبحث الدالة في شجرة وراثة القوالب لتجد مكان تلك الصورة.
ستستخدم مدير الأصول (asset manager)، مما سيحسّن أداء قالبك. راجع وثائق Yii Asset Manager لمزيد من المعلومات حوله: http://www.yiiframework.com/wiki/148/understanding-assets/

إذن، لإضافة صورة إلى قالبك:

قم بتحميلها كالمعتاد باستخدام أداة تحميل الملفات على اليمين، ثم أضفها حيث تريد في أي ملف twig:

{{ image('./files/myfile.png') }}

إذا أردت إضافة نص بديل لصورتك (لقارئات الشاشة والتحقق من صحة HTML)، أضف:

إذا أردت إضافة سمة class ومعرّف id إليها:

{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

بعض المهام في قائمة المهام لدينا

منح المستخدمين إمكانية تحميل ملف معاينة مخصص من المحرر نفسه
إضافة زر لحذف الملف المحلي والعودة إلى الحالة الموروثة
نسخ الصور المستخدمة في ملفات CSS فقط (بإدراجها في ملف البيان كملفات يجب نسخها)
التذكير بالقالب الذي يمدّده القالب الحالي (إن وُجد)

خيارات القالب

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

خيارات متقدمة

عند فتح علامة التبويب خيارات القالب، يمكنك اختيار تحرير الخيارات البسيطة أو الخيارات المتقدمة. «الخيارات المتقدمة» هي مجرد نموذج مباشر يتيح لك الوصول إلى حقول إعدادات القالب الرئيسية من قاعدة البيانات. لفهم آلية عملها، يجب عليك أيضًا الاطلاع على ملف XML وعلى إنشاء قالب من الصفر. لذلك فهي معقدة نوعًا ما ومخصصة للمستخدمين المتقدمين.

ومع ذلك، إذا كنت ترغب في تحرير الإعدادات المتقدمة، فانقر على علامة التبويب خيارات متقدمة

ملفات CSS: ملفات CSS التي يجب إضافتها إلى القالب؛
ملفات JS: ملفات JS التي يجب إضافتها إلى القالب؛
طباعة ملفات CSS: ملفات CSS التي يتم تحميلها عند طباعة القالب؛
خيارات: يتضمن هذا الحقل الخيارات (وقيمها) التي يجب تمريرها إلى عرض القالب؛
CssFramework Name: اسم إطار عمل CSS المراد تحميله. حاليًا، Bootstrap فقط أو لا شيء؛
Cssframework Css: يمكنك استبدال الملف الأساسي bootstrap.css في هذا الحقل بنسخة مخصصة مختلفة منه؛
Cssframework Js: يمكن استبدال الملف الأساسي boostrap.js من هنا بنسخة مخصصة مختلفة منه؛
الحزم للتحميل: يمكنك من خلال هذا الإعداد تحميل بعض حزم الأصول الأساسية من LimeSurvey.

ستلاحظ وجود حقل تحميل في الأعلى، يتيح لك تحميل ملف إلى دليل ملفات القالب. يمكن استخدام هذه المعلمات لتغيير المظهر الكامل للقالب.

تحذير! : لا تغيّر القيم إلا إذا كنت تعرف ما تفعله!

خيارات بسيطة

تأتي صفحة الخيارات البسيطة من القالب نفسه. ويتم إنشاؤها عبر ملف twig وبعض شيفرة JavaScript داخل مجلد /options الخاص بالقالب: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (رابط معطل)

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

تقوم صفحة الخيارات البسيطة بملء حقول النموذج المتقدم تلقائيًا. يمكنك ملاحظة ذلك عند تفعيل أحد الإعدادات أو تعطيله في الصفحة البسيطة، ثم مشاهدة كيف يتغير الحقل المرتبط به في النموذج المتقدم وفقًا لذلك. على سبيل المثال، في الخيارات البسيطة للقالب الافتراضي، إذا غيّرت قالب Bootswatch إلى "Darkly" ثم نقرت على تبويب الخيارات المتقدمة (حتى دون الحفظ)، فسترى أن الحقل "Cssframework Css" قد تغيّر من

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
إلى
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
فيما يلي الخيارات البسيطة المختلفة للقوالب الأساسية:

وضع Ajax: هل يجب تحميل الصفحة التالية عبر ajax (أسرع) أم عبر إعادة تحميل الصفحة (أفضل لأغراض تصحيح الأخطاء)
الصورة الخلفية: إذا تم ضبطه على نعم، فسيتم تحميل الصورة المسماة pattern.png (سيتم استبداله بأداة اختيار ملفات في Master)
حاوية الصندوق: إذا تم ضبطه على لا، فلن تكون الأسئلة محتواة داخل صندوق (بحيث يمكنك استخدام مصفوفات كبيرة أعرض من عرض الشاشة)
Brandlogo: إذا تم ضبطه على لا، فسيظهر اسم الاستبيان في الشريط العلوي، وإلا يمكنك اختيار إحدى الصور الموجودة في دليل الملفات لاستخدامها كصورة للشعار.
نشط المتن: إذا تم ضبطه على نعم، يمكنك اختيار أحد المؤثرات الحركية لتطبيقه عند تحميل متن الاستبيان
اضافة مؤثرات حركية على السؤال: الأمر نفسه بالنسبة للأسئلة
المؤثر الحركى للتنبيهات: الأمر نفسه بالنسبة للتنبيهات
قالب Bootstrap: يمكنك هنا اختيار قالب Bootstrap لتحميله. وهي مأخوذة من Bootswatch https://bootswatch.com/3/

المكتبة المستخدمة للمؤثرات الحركية هي animate.css: https://daneden.github.io/animate.css/ بالطبع، يمكن لمزوّد القالب إضافة مكتبة المؤثرات الحركية الخاصة به أو عدم استخدام أي مكتبة مؤثرات على الإطلاق.

تستخدم القوالب أحادية اللون (monochrome) نفس قالب ألوان Bootstrap المستخدم في واجهة إدارة المستخدم. فهي لا تستخدم نظام استبدال إطار عمل CSS، بل تضيف ملف CSS فقط. وبذلك توضح طريقة أخرى للتعامل مع القوالب المخصصة بالنسبة لمزوّدي القوالب.

نظام الوراثة

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

المستوى العام (الذي رأيناه للتو والمتاح من قائمة القوالب)
على مستوى مجموعة الاستبيانات
والأخير على مستوى الاستبيان.

يمكن لكل معامل في مستوى معين أن يرث من المستوى الأعلى: وراثة مجموعة الاستبيانات. أولاً، لنلقِ نظرة على مستوى مجموعة الاستبيانات.

على مستوى مجموعة الاستبيانات

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

في هذه القائمة، لديك زرّان للإجراءات. إذا كانت المجموعة فارغة، يمكنك حذفها. وإلا، يمكنك دائمًا تحريرها. بالنقر على زر التحرير، تصل إلى صفحة إعدادات مجموعة الاستبيانات:

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

وراثة كل شيء تعني أن جميع الإعدادات ستُورَّث من مستوى الإعدادات العامة.
إذا انتقلت إلى صفحة الخيارات المتقدمة، فسترى أن جميع الحقول مضبوطة على الوراثة.
إذا نقرت على "لا" لخيار "وراثة كل شيء" في الخيارات البسيطة، فسترى مرة أخرى صفحة مشابهة جدًا لصفحة الخيارات العامة. الفرق الوحيد هو أنه يمكنك لكل حقل ضبطه على نعم أو لا أو وراثة؛ ولكل قائمة منسدلة قيمة وراثة'.

يمكن أن تكون مجموعة الاستبيانات تابعة لمجموعة أخرى. في هذه الحالة، سترث من المجموعة الأم.

على مستوى الاستبيان

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

مثال على حالة استخدام

لنفترض أنك تستخدم قالبًا واحدًا لشركات مختلفة (A وB). تقوم بضبط خياراتك المفضلة على المستوى العام (مثلاً: ajax مفعّل، نشط المتن بحركة انزلاق، التنبيهات بنبضة). ثم تنشئ مجموعة استبيانات لكل شركة: مجموعة للشركة A تستضيف جميع استبيانات هذه الشركة، ومجموعة للشركة B تستضيف جميع استبيانات الشركة B. على هذا المستوى، ستضبط الشعار والخلفية فقط، وتترك الخيارات الأخرى لتُورَّث. وهكذا، ستستخدم جميع الاستبيانات في المجموعة A شعار الشركة A، وجميع الاستبيانات في المجموعة B شعار الشركة B. بالنسبة إلى أحد استبيانات الشركة A، يمكنك استخدام خلفية مختلفة تتناسب مع موضوع الاستبيان: ما عليك سوى تغيير الخلفية في الخيارات على مستوى الاستبيان. إذا أخبرك أحد في الشركة B أن التنبيه النابض مزعج للغاية وأنه يفضّل شيئًا أكثر سلاسة مثل الظهور التدريجي، فما عليك سوى تغيير حركة التنبيه على مستوى مجموعة الاستبيانات B وستستخدم جميع استبيانات هذه المجموعة هذه الحركة. وإذا غيّرت الشركة A شعارها، يمكنك تغييره على مستوى مجموعة الاستبيانات A، وستستخدم جميع استبيانات هذه المجموعة الشعار الجديد.

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

الأسئلة الشائعة حول تخصيص القالب

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

تخصيص CSS/JS: التعامل مع مدير الأصول ("لماذا لا يتم تطبيق تغييراتي؟")

إذا كنت تحاول تحديث CSS/JS الخاص بقالب ما عن طريق تحرير الشيفرة مباشرة باستخدام محررك المفضل، فقد تُفاجأ بأن تغييراتك لا يتم تطبيقها.

منذ الإصدار 2.50، يستخدم LS مدير الأصول في Yii: وثائق Yii حول الأصول

يقوم بنقل ملفات CSS/JS الخاصة بالقالب إلى دليل فرعي داخل tmp/ باسم عشوائي (مثال: "tmp/1ef64ml/"). لذلك إذا أجريت أي تغيير على ملف css/js وأبلغت به مدير الأصول، فسيتم نسخ الملفات إلى دليل فرعي جديد باسم جديد بحيث يتم تحديث ذاكرة التخزين المؤقت لمتصفح المستخدم ويرون ملفات css/js الجديدة. وإلا، فسيتعين عليهم مسح ذاكرة التخزين المؤقت لمتصفحهم.

فيما يلي روابط CSS في الرأس عندما يكون مدير الأصول مفعّلاً:

كما ترى، جميعها تشير إلى المجلدات الفرعية داخل tmp/.

فيما يلي روابط CSS في الرأس عندما يكون مدير الأصول معطّلاً:

كما ترى، تشير إلى الملفات الفعلية للقالب.

بالطبع، إذا لم يعلم مدير الأصول أنك غيّرت الملف، فسيبقى الملف القديم في دليل tmp/ القديم دون تغيير، ولن يتم تطبيق تغييراتك أبدًا.

لذلك، عند تحرير CSS/JS الخاص بقالب ما، لديك عدة خيارات:

يمكنك استخدام محرر القالب في LS: فهو يتعامل مع مدير الأصول ولا داعي للقلق بشأن أي شيء
يمكنك تفعيل وضع التصحيح (debug): سيؤدي ذلك إلى تعطيل مدير الأصول، فيتم استدعاء ملفات css/js الفعلية لقوالبك (ولكن عندها يتعين عليك تحديث ذاكرة التخزين المؤقت للمتصفح عند كل تحميل)
يمكنك تحديث ذاكرة الأصول المؤقتة: من الإعدادات العامة -> عام -> مسح ذاكرة الأصول المؤقتة

يُعد استخدام محرر القالب لتحرير CSS المخصص أفضل حل بفارق كبير.

سيساعدك استخدام محرر القالب على فهم بنية محرك القوالب الجديد. كذلك، إذا كنت تخصص القالب fruity، فانتبه إلى خصوصية CSS: تستخدم معظم التعريفات المحدد ".fruity" (وهو أحد أصناف عنصر body).

إضافة خطوط مخصصة إلى قالبي

الطريقة السهلة: استخدام Google Font CDN

يستخدم قالب Bootswatch للاستبيان شبكة Google Font CDN. لنلقِ نظرة على كيفية عمله: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

بعد ذلك يتم استخدام خط Lato من خلال قواعد CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

body {
  ...
 font-family: "Lato";
 ...
}

يمكنك استخدام أي خط من Google بهذه الطريقة في القالب المخصص الخاص بك. وبالطبع يجب عليك إزالة محدد الخط من خيارات القالب الخاص بك. احذف هذه الأسطر في options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

استخدام خط محلي

بالطبع، يمكنك أيضًا تنزيل ملفات الخط واستخدامها من الخادم المحلي بدلاً من Google CDN (وهذا أفضل للخصوصية). للحصول على مثال حول كيفية القيام بذلك، إليك نسختنا المحلية من خط noto: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css

@font-face {
  font-family: 'Noto Sans';
  font-weight: 300;
  font-style: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

يمكنك استخدام تعريف مشابه جدًا في ملف CSS الخاص بالقالب، ثم نسخ الملف NotoSans-Regular.ttf إلى المجلد css/font-src/ في القالب الخاص بك.

بعد ذلك، طبّق هذا الخط على body (أو أي عنصر آخر) كما في المثال أعلاه، وأزل محدد الخط الافتراضي من الخيارات.

إنشاء محدد الخطوط الخاص بك في الخيارات

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

أضف خطين (my_custom_font و my_custom_other_font) إلى القالب الخاص بك، باستخدام CDN أو الخادم المحلي
بعد ذلك، في ملف CSS الخاص بك، أضف صنفين جديدين:

.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}

في ملف XML الخاص بالقالب، أضف خيار الخط (الخط الافتراضي سيكون my_custom_font) :

    <options>
        ....
        <font>my_custom_font</font>
    </options>

في الملف option.twig، أضف محدد الخطوط الخاص بك بإضافة هذه الأسطر (لم تتم تجربتها بعد، لذا أخبرنا في المنتدى إذا لم تعمل):

            
            <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
                <hr/>
            </div>
            <div class='row action_hide_on_inherit'>
                <div class='col-sm-12'>
                    <div class='panel panel-default'>
                        <div class='panel-heading'>{{ "My custom fonts" | t }}</div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
                                        {% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
                                    {% endif %}
                                   <optgroup  label="{{ "My Custom fonts" | t }}">
                                   <option class="font-my_custom_font"     value="custom_font"   data-font-package=""  >Custom</option>
                                  <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  >Other</option>
                                  </optgroup>
                                   
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

يجب أن يتمكن المستخدمون الآن من الاختيار بين هذين الخطين.

نظرة على محدد الخطوط في Fruity

في المستقبل، سنمنح المستخدم النهائي إمكانية تحميل حزم الأصول الخاصة به، بما في ذلك حزم الخطوط. سيجعل ذلك تخصيص الخطوط سهلاً جدًا.
لفهم حزم Yii:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

يتم تعريف حزم LimeSurvey في ملفات مختلفة. حزم الخطوط معرّفة هنا: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
على سبيل المثال، حزمة خط Noto معرّفة هنا: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53

    'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
        'css' => array(
            'noto.css',
        ),
    ),

ملف noto.css الذي تحتويه موجود هنا: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
لاحظ تعريف صنف CSS ".font-noto" في نهايته:

@font-face {
  font-family: 'Noto Sans';
  ...
}
...
.font-noto{
    font-family: 'Noto Sans';
}

بعد ذلك، في قالب Vanilla، يُستخدم خط noto عن طريق إضافة حزمة noto وتعيين خيار الخط إلى noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

        <packages>
             ....
            <add>font-noto</add>
        </packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58

    <options>
        ....
        <font>noto</font>
    </options>

بعد ذلك، يتم تعريف صنف الخط في body باستخدام هذه القيمة: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

بالطبع، يحتوي ملف XML على القيم الافتراضية فقط لإعدادات القالب الخاص بك. لكن في الواقع، يتم تعريف هذه القيم وقراءتها داخل قاعدة البيانات (الجدول "template_configuration" (سؤال: "template_" أم "theme_"؟) كسلاسل json. يستخدم الملف option.js قيمة محدد الخط في الخيارات البسيطة لتغيير القيمة داخل نموذج علامة التبويب المتقدمة: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

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

إضافة خيارات القالب للتحكم في موضع عناصر الاستبيان وعرضها

سيوضح هذا الدليل كيفية إضافة خيارات إلى قالب ممتد لعرض عناصر الاستبيان في مواقع مختلفة. في هذه الحالة، سنقوم بإنشاء خيارات القالب لعرض عنوان الاستبيان في موقعين مختلفين.

للتبسيط، سنبني الدليل على قالب ممتد من القالب "bootswatch" في نسخة LimeSurvey 3.4.3.

إنشاء قالب مخصص

قم بتوسيع القالب "bootswatch" كما هو موضح أعلاه.
انسخ custom.css إلى القالب المحلي كما هو موضح أعلاه.

إنشاء خيارات قالب جديدة

انسخ محتويات /themes/survey/bootswatch/options/ إلى /upload/themes/survey/yourThemeName/options/.

افتح /upload/themes/survey/yourThemeName/options/options.twig في محرر وابحث عن "{# Bootstrap Bootswatch theme #}". قبل العنصر الأب <div class='row'> مباشرة، أضف ما يلي:

		{# Custom survey name in navbar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

		{# Custom survey name below progress bar #}
		<div class='row'>
			<div class='col-sm-12 col-md-6'>

				<div class='form-group row'>
					<label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label>
					<div class='col-sm-12'>
						<div class="btn-group" data-toggle="buttons">
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

افتح /upload/themes/survey/yourThemeName/config.xml وأضف عنصرين إلى كتلة "options" بحيث تبدو هكذا:

    <options>
        <ajaxmode>on</ajaxmode>
        ...
        <surveyname1>on</surveyname1>
        <surveyname2>on</surveyname2>
    </options>

يجب أن يمنحك هذا خيارين جديدين في شاشة خيارات القالب كما يلي:

عرض معدّل لعنوان الاستبيان في شريط التنقل

أنشئ دليلاً جديداً /upload/themes/survey/yourThemeName/views/subviews/header/.
انسخ /themes/survey/vanilla/views/subviews/header/nav_bar.twig إلى هذا الدليل الجديد.

افتح /themes/survey/vanilla/views/subviews/header/nav_bar.twig وابحث عن "{# Logo option #}". أسفل ذلك، عدّل عبارة IF الخاصة بالشعار/اسم الاستبيان لتصبح كما يلي:

		{# Logo option #}
        {% if( aSurveyInfo.options.brandlogo == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >
                {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
            </div>
        {% endif %}
        {% if( aSurveyInfo.options.surveyname1 == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
                {{ aSurveyInfo.name }}
            </div>
        {% endif %}

أضف شيئاً مشابهاً لما يلي إلى /upload/themes/survey/yourThemeName/css/custom.css:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
فعّل خيار القالب "Survey name in navbar" بتعيينه إلى "نعم"
يجب أن ترى ما يلي:

عرض معدّل لعنوان الاستبيان أسفل شريط التقدم

أنشئ دليلاً جديداً /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
انسخ /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig إلى هذا الدليل الجديد.

افتح /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig وأضف عنصر <h1> لاسم الاستبيان، ليصبح كما يلي:

<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
    {# Custom survey name #}
    {% if( aSurveyInfo.options.surveyname2 == "on") %}
    	<h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1>
    {% endif %}
 
    {# Group Name #}
    {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
    {# Group Description #}
    {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
    {#
        PRESENT THE QUESTIONS
 
        This is the main part. It will render each question for this group
     #}
 
    <!-- PRESENT THE QUESTIONS -->
    {% for  aQuestion in aGroup.aQuestions %}
         {{ include('./subviews/survey/question_container.twig') }}
    {% endfor %}
 
    <!-- Hidden inputs -->
    {% if aGroup.show_last_group == true %}
        <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' />
    {% endif %}
 
    {% if aGroup.show_last_answer == true %}
        <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' />
    {% endif %}
</div>

أضف شيئاً مشابهاً لما يلي إلى /upload/themes/survey/yourThemeName/css/custom.css:

.navbar-brand {
    line-height: 60ph1.custom-survey-name {
	margin: 0;
	text-align: center;
}

فعّل خيار القالب "Survey name below progress bar" بتعيينه إلى "نعم"
يجب أن ترى ما يلي:

التنزيلات

نموذج لقالب ممتد: Test_survey_names.zip

إنشاء قالب من الصفر

التوثيق قادم قريباً.

في الوقت الحالي، نقدّم بعض النصائح فقط.

بنية القالب

الملفات والأدلة

عند إنشاء قالب من الصفر، لا تحتاج إلى الالتزام ببنية الملفات/الأدلة/css/js الخاصة بـ Vanilla. تتم إضافة ملفات css/js الإلزامية بواسطة النواة (ولا يزال بإمكانك إزالتها عند الحاجة)

الملفات الوحيدة التي يجب أن يحتوي عليها قالبك هي ملفات التخطيط:

layout_global.twig : يعرض صفحات تعبئة الاستبيان
layout_survey_list.twig : يعرض لائحة الاستبيان (إذا تم تعيين هذا القالب كقالب افتراضي)
layout_errors.twig : يُستخدم لعرض الأخطاء التي تمنع عرض الاستبيان (معرّف استبيان خاطئ، مجموعة فارغة في معاينة المجموعة، إلخ).
layout_user_forms.twig: يعرض نماذج المستخدم مثل: الرمز (مشارك في الاستبيان) والتسجيل.
layout_print.twig : يُستخدم لطباعة الاستبيان بصيغة PDF
layout_printanswers.twig: يطبع الإجابات

محتوى هذه الملفات، والملفات التي تضمّنها أو لا تضمّنها، متروك لك بالكامل. جميع الملفات والأدلة الأخرى الموجودة في Vanilla اختيارية تماماً، ولك مطلق الحرية في تنظيم الشيفرة بالطريقة التي تريدها.

إذا اطّلعت على شيفرة عرض الواجهة الأمامية، فسترى أن أسماء هذه الملفات تظهر فيها مباشرة. لهذا السبب هي إلزامية.

مثال: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

المحتوى

في ملف layout_global.twig الخاص بـ Vanilla، سترى أننا نستخدم متغيراً باسم "include_content" لتحديد ما يجب عرضه https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115

                    {% set sViewContent =  './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}

يخبرك aSurveyInfo.include_content بالإجراء الجاري حالياً: عرض الأسئلة؟ عرض نتيجة الإرسال؟ عرض "امسح الكل"؟ إلخ. كما ترى، في vanilla ننشئ ملفاً واحداً لكل إجراء. لذلك إذا أردت معرفة قائمة الإجراءات، فما عليك سوى الاطلاع على دليل vanilla views/subviews/content وإزالة الامتداد "twig": https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content

clearall.twig
firstpage.twig
load.twig
mainrow.twig
main.twig
optin.twig
optout.twig
outerframe.twig
printanswers.twig
quotas.twig
register.twig
save.twig
submit_preview.twig
submit.twig
userforms.twig

إذا سبق لك إنشاء قالب لإصدارات LimeSurvey 2.x، فستلاحظ أن معظم هذه الملفات تقابل ملفات pstpl القديمة في LimeSurvey 2.x. مرة أخرى، لا يوجد أي إلزام عليك في قالبك بإنشاء هذه الملفات بهذه الأسماء في هذا الدليل. يمكنك مثلاً إضافة عبارة switch كبيرة في layout_global.twig تحتوي على HTML المطلوب لكل إجراء.

ملف البيان config.xml

يحتوي بيان القالب على المعلومات الرئيسية حول قالبك. عند تثبيت قالب، يتم تحميل محتوى البيان في قاعدة البيانات، في جدولين مختلفين: template وtemplate_configuration. لذلك في كل مرة تعدّل فيها بيان قالب، يجب عليك إلغاء تثبيته ثم إعادة تثبيته (أو إعادة تعيينه فقط). ولأن هذه العملية مزعجة أثناء تطوير القالب، يمكنك فرض الاستخدام المباشر لملف XML بدلاً من إدخالات قاعدة البيانات. للقيام بذلك، في config.php فعّل وضع التصحيح وعيّن 'force_xmlsettings_for_survey_rendering' إلى true.

قسم البيانات الوصفية

لا شيء معقد: فقط المعلومات الرئيسية عن قالبك. سيتم إدراجها في الجدول templates_configuration

    <metadata>
        <name>the_name_of_your_theme</name>
        <title>The Title of your theme</title>
        <creationDate>16/10/2017</creationDate>
        <author>Your Name</author>
        <authorEmail>your@email.org</authorEmail>
        <authorUrl>http://www.yourwebsite.org</authorUrl>
        <copyright>Your Copyright </copyright>
        <license>Licence of your theme</license>
        <version>version of your theme</version>
        <apiVersion>3</apiVersion>
        <description>Description of your theme</description>
        <extends>parent_theme</extends>
    </metadata>

بعض الملاحظات:

name: سيُستخدم كمفتاح في قاعدة البيانات. لذلك يجب أن يكون فريداً، ويجب ألا يحتوي على أحرف خاصة (بدون مسافات). لاحظ أنه لن يتم أخذ حالة الأحرف في الاعتبار
Title: سيُستخدم لعرض اسم قالبك في القوائم المختلفة. يمكن أن يحتوي على أحرف خاصة
description: سيُستخدم في القائمة الرئيسية لقوالب الاستبيان. يمكن أن يحتوي على أحرف خاصة، وحتى على شيفرة HTML باستخدام
extends: اختياري، يحدد القوالب الأصلية. لذلك إذا كان أي ملف غير موجود في هذا القالب (twig/js/css/jpg، إلخ) فسيتم البحث عنه في القالب الأصلي

إذا قمت بتمديد أحد القوالب الأساسية الثلاثة (Vanilla وBootswatch وFruity)، فيمكنك تغيير قيمة "extends" من قالب أصلي إلى آخر. بالطبع، ستحتاج إلى إعادة تعيين القالب.

قسم الملفات

هذا القسم مهم. سيتم إدراجه في الجدول template_configuration، في الحقول files_css وfiles_js وfiles_print_css كمصفوفات json.

مثال: قسم الملفات في قالب Material Premium:

    <files>
        <css>
            <add>css/bootstrap-material-design.css</add>
            <add>css/ripples.min.css</add>
            <replace>css/ajaxify.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
            <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
        </css>
        <js>
            <replace>scripts/theme.js</replace>
            <replace>scripts/ajaxify.js</replace>
            <add>scripts/material.js</add>
            <add>scripts/ripples.min.js</add>
            <replace>scripts/custom.js</replace>
        </js>
        <print_css>
            <add>css/print_theme.css</add>
        </print_css>
    </files>

سيتم تحميل جميع ملفات CSS/JS الموجودة في هذا القسم عند بدء الاستبيان (في وضع ajax. أما إذا كان وضع ajax متوقفاً، فسيتم بالطبع إعادة تحميل جميع الملفات في كل صفحة).

ستتم إضافتها إلى حزمة أصول Yii (Yii Asset Packet) باسم القالب. لذلك عندما يكون مدير الأصول (Asset Manager) قيد التشغيل (مع إيقاف وضع التصحيح)، سيتم نسخ هذه الملفات إلى دليل tmp مع بقية القالب (بحيث يمكنك استخدام مسار نسبي في CSS وJS للوصول إلى ملفات الصور). حول مدير الأصول في Yii: https://www.yiiframework.com/wiki/148/understanding-assets حول الحزم في Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

ستستخدم نظام الوراثة. هذا يعني أنه إذا أضفت ملف CSS/JS إلى قالب ولم يكن موجوداً في القالب، فسيبحث المحرك في جميع القوالب الأم لهذا القالب ويستخدم أول ملف يجده. لذلك إذا قام مستخدم بتمديد قالبك عبر محرر القالب، فسيتم توريث جميع هذه الملفات في قالبه. تشير الكلمات المفتاحية إلى نظام الوراثة هذا.

add : سيضيف الملف إلى القالب وإلى جميع القوالب التي ترث منه
replace: سيحل محل ملف القالب الأم
remove: سيزيل الملف من أي حزمة، حتى حزمة النواة (منذ الإصدار 3.14)

تذكّر أنه يمكنك تعيين 'force_xmlsettings_for_survey_rendering' في config.php بحيث تُقرأ الإعدادات من ملف XML بدلاً من قاعدة البيانات (دون الحاجة إلى إعادة تعيين). سيسهّل ذلك اختبار تعديلات ملفات XML، ويجنّبك حذف القالب وإعادة تثبيته عند كل تعديل على ملف XML

بعض الملاحظات حول هذه الكلمات المفتاحية:

نصائح حول الوراثة

كما شرحنا سابقاً، يمكن لكلمة "add" المفتاحية أن تشير إلى ملف موجود في أحد القوالب الأم. لذلك يمكنك "إضافة" ملف في هذا القسم دون أن يكون هذا الملف موجوداً في قالبك، بل في أحد القوالب الأم. سيبحث المحرك في جميع القوالب الأم ويستخدم أول ملف يجده. إذا لم يعثر على الملف، وكان وضع التصحيح مفعّلاً في الإعدادات، ووضع تصحيح JS للواجهة الأمامية مفعّلاً في الإعدادات العامة، فستظهر لك رسالة تحذير في وحدة التحكم (console). مثال: إذا أضفنا في القالب my_theme: <add>css/unexisting.css</add>، فسنرى في وحدة التحكم:

 (¯`·._.·(¯`·._.· Theme Configuration Error  ·._.·´¯)·._.·´¯) 

Can't find file 'css/unexisting.css' defined in theme 'my_theme'

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

متى نستخدم add ومتى نستخدم replace ومتى يمكنني تركه للقالب الأم؟

أولاً: add وreplace هما الكلمة المفتاحية نفسها. يمكنك استخدام أي منهما وسيفعل المحرك الشيء نفسه. الفرق بينهما موجّه للقارئ البشري ليفهم ما كنت تقصده.

لا يمكنك إضافة ملف بنفس اسم ملف القالب الأم: فهو سيحل محله دائماً. مثال: إذا كان لديك ملف باسم "my_mother_theme/foo.css" وأضفت ملفاً باسم "foo.cs" في القالب الابن، فسيُضاف "daughter_theme/foo.css" فقط إلى القالب. إذا أردت الاحتفاظ بالملف "my_mother_theme/foo.css"، فاختر اسماً آخر لـ "daughter_theme/foo.css"، مثل "daughter_theme/bar.css". وبذلك يمكن استخدام الكلمة المفتاحية "add" ككلمة "replace".

إذا تساءلت عن السبب: فهذا يسهّل كثيراً التوليد التلقائي للقالب الموروث، إذ يعمل نسخ قسم الملفات مباشرة (دون الحاجة إلى تغيير "add" إلى "replace" عند تمديد أحد الملفات).

للتوضيح، لنأخذ مثال Fruity. هذا هو قسم ملفات CSS فيه:

        <css>
            <add>css/variations/sea_green.css</add>
            <replace>css/animate.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
        </css>

إذا نظرت إلى ملف custom.css في fruity، فستجده مطابقاً تماماً لملف vanilla. يمكننا حذف ملف custom.css من fruity وسيتم تحميل ملف vanilla. ويمكننا أيضاً إزالة العبارة <replace>custom.css</replace> من ملف manifest الخاص بـ Fruity، وستُستخدم العبارة الموجودة في vanilla، وسيتم تحميل ملف custom.css الخاص بـ vanilla.

فلماذا نستخدم العبارة <replace>custom.css</replace> داخل ملف manifest الخاص بـ fruity؟ الجواب بسيط: لأننا نريد أن يتمكن المستخدم النهائي من تمديد قالب fruity، وتعديل الملف في قالبه المحلي، وتحميل هذا الملف المعدّل من قالبه الموروث. وللفهم، قم فقط بتمديد fruity وألقِ نظرة على القالب الممدَّد. فالقالب الممدَّد لا يحتوي حتى على الملف custom.css، لذا سيُستخدم ملف fruity. ولكن إذا أنشأ المستخدم هذا الملف في القالب الممدَّد (بالنقر على "تمديد" في محرر القالب)، فسيتم تحميل هذا الملف من قالبه.

بشكل عام: إذا أنشأت قالباً من الصفر لا يمدّد أي قالب، فاستخدم عبارة add فقط لإضافة ملفات css/js الخاصة بك. الأمر سهل جداً. إذا أنشأت قالباً يمدّد قالباً آخر، ولا تريد أن يتمكن المستخدمون من تمديد ملف css/js من القالب الأم: فلا تستخدم عبارة add في ملف manifest. وستظل الملفات تُحمَّل من إعدادات القالب الأم. إذا أنشأت قالباً يمدّد قالباً آخر، وتريد استبدال ملف من القالب الأم: فاستخدم الكلمة المفتاحية replace (وستعطي الكلمة المفتاحية add النتيجة نفسها). إذا أنشأت قالباً يمدّد قالباً آخر، ولا تستبدل ملف css/js معيناً، لكنك تريد أن يتمكن المستخدمون من تمديد هذا الملف: فاستخدم عبارة "replace" في ملف manifest لهذا الملف. فحتى لو لم تستبدل الملف، فباستخدام الكلمة المفتاحية replace في manifest تتيح للمستخدم فعل ذلك إن أراد.

فقط هذه الحالة الأخيرة تحتاج إلى قليل من الجهد الذهني لفهمها، أما بقية الحالات فبسيطة.

يمكنك أيضاً تسجيل ملفات CSS وJS مباشرةً من شيفرة twig. ولن تُحمَّل هذه الملفات إلا عند استدعاء ملف twig. إذا أردت أن يتمكن المستخدمون من وراثة ملفات JS/CSS هذه من محرر القالب، فتذكّر استخدام الدالتين Template:RegisterTemplateCssFile('my style.css') وTemplate:RegisterTemplateScript('my script.js'). وإذا لم تستخدم هاتين الدالتين، فقد يعمل قالبك، لكن الوراثة فيه ستكون معطلة. وهو المنطق نفسه الخاص بالدالة Template:Image('my picture.jpg')

الكلمة المفتاحية remove

الكلمة المفتاحية remove متاحة فقط منذ الإصدار 3.14. بواسطتها يمكنك إزالة أي ملف css من أي حزمة، حتى حزم النواة. وهي تُستخدم في قالب Material Premium لإزالة ملفات Awseome Bootstrap Checkbox:

<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>

لذا يجب أن تستخدم الصيغة نفسها تماماً الخاصة بملف الحزمة (مثال: "awesome-bootstrap-checkbox.css" وحده دون مسار مجلده لن يعمل). ستجد القائمة الكاملة لحزم النواة وملفاتها في /application/config/packages.php وconfig/third_party.php. على سبيل المثال، بالنسبة إلى awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56

        'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),

هناك طريقة أخرى لمعرفة الاسم الدقيق المستخدم في وسم remove، وهي تشغيل مدير الأصول (بإيقاف وضع التصحيح أو بتعيين 'use_asset_manager'=>true في الإعدادات). عندها سيكون المسار الواجب استخدامه هو الذي يلي مباشرةً المجلد العشوائي داخل المجلد tmp. على سبيل المثال، بالنسبة إلى awesome-bootstrap-checkbox.css:

<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

ملفات يجب ألا تزيلها:

jquery-3.1.1.min.js : مطلوب

jquery-migrate-3.0.0.min.js : مطلوب

survey.js : مطلوب

moment-with-locales.min.js : مطلوب لنوع السؤال تاريخ (ولبعض الأنواع الأخرى على ما أظن)

em_javascript.js : مطلوب لجميع شيفرات JavaScript الخاصة بـ ExpressionScript

قسم الخيارات

يتعلق هذا القسم بخيارات القالب الخاص بك. ويُستخدم لتعبئة الحقل "options" في الجدول template_configuration على هيئة صفيف JSON.

معلومات إضافية

الدوال المتاحة

بعض الملاحظات

ملاحظة: إذا قمت بتحرير ملف XML الخاص بقالب ما، فيجب عليك إلغاء تثبيت القالب ثم إعادة تثبيته حتى يتم أخذ التغييرات في الاعتبار.

ملاحظة: لتجنب ذلك، يمكنك فرض استخدام ملف XML بدلاً من قاعدة البيانات. في الملف config.php قم بتفعيل وضع التصحيح (debug) وأزل علامة التعليق عن السطر التالي:

'force_xmlsettings_for_survey_rendering' => true, // أزل علامة التعليق إذا كنت تريد فرض استخدام ملف XML بدلاً من قاعدة البيانات (لتسهيل تطوير القوالب)

انتبه: سيتم تحميل كل شيء من ملف XML (بما في ذلك الخيارات وغيرها).

ملاحظة: إذا قمت بتحرير ملفات CSS/JS يدويًا (دون استخدام محرر القالب)، وكان وضع التصحيح (debug) متوقفًا، يمكنك الآن فرض مسح الأصول (assets). في "إعدادات عامة"، علامة التبويب "General"، انقر على الزر "Clear assets cache".

ملاحظة: إذا قمت بإزالة القسم

الفصول الرئيسية

نظام القوالب الجديد في LS3.x

From LimeSurvey Manual