تخصيص قوالب أقسام HTML بشكل فردي

متطلبات وهدف البرنامج التعليمي

تحتاج إلى الوصول إلى محرر HTML ومدير الملفات في نظام CMS الخاص بـ bluetronix بالإضافة إلى الحقوق اللازمة للمطورين لمجلد القوالب. في هذا الدليل، ستتعلم كيفية تعديل أقسام الصفحات الموجودة، وإنشاء قوالب أقسام HTML الخاصة بك، وتقديم قوالب مُعتمدة فقط لمحرريك عند الحاجة.

نحن نعمل مع قوالب مثال العملاء واللافتات. تبقى الملفات الأساسية كما هي؛ يتم إجراء التغييرات الفردية عبر علامة _own.

1. العثور على قوالب أقسام الصفحات في المحرر

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

في نافذة قسم الصفحة، يتم عرض القوالب المتاحة مع معاينة. 

اختر كمثال فئة العملاء. هناك عدة خيارات تخطيط متاحة.

2. أين تم حفظ القوالب

ملفات القوالب موجودة في مجلد المطورين /bx_Layout/. افتح في مدير الملفات هذا المجلد. هناك ستجد من بين أشياء أخرى ملفات لأقسام الصفحات (Section*.txt) وكتل النص (Tag*.txt).

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

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

3. لماذا يجب عليك عدم تعديل الملفات الأساسية مباشرة

يتم تجاوز الملفات القياسية التي تأتي مع نظام إدارة المحتوى من /bx_Layout/ خلال تحديثات النظام. لذلك، لن تكون التغييرات مباشرة على SectionClients.txt أو SectionBanner.txt دائمة. انسخ الملف القياسي المطلوب وحدد نسختك الخاصة باستخدام _own. تم تصميم النسخ ذات اللاحقة _own لتخصيصات شخصية تدوم خلال التحديث.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

إذا كانت كلا الملفين موجودة، يستخدم نظام إدارة المحتوى SectionClients_own.txt المناسبة بدلاً من القالب الافتراضي SectionClients.txt. لا تحتاج لتغيير اسم الفئة Clients في المحرر.

إذا كنت تقوم بإنشاء ملف خاص تحت اسم جديد، على سبيل المثال SectionMyTemplate_own.txt، سيظل القالب الافتراضي Clients متاحًا.

4. هيكل قالب قسم HTML: علامة الفصل

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

<!--__SP_SectionTemplate__-->

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

تظهر القالب الافتراضي SectionBanner.txt هذه الفكرة مع عدة تخطيطات بانر مختلفة. يمكنك استخدامها كأساس لقسم خاص مصمم ببساطة.

<!--__SP_SectionTemplate__-->
<Section class="section py-5 py-lg-6">
   <div class="container py-3">
      <div class="row align-items-center g-4">
         <div class="col-lg-8 wow fadeInLeft">
            <span class="badge text-bg-warning mb-3">&#x00AD;New&#x00AD;</span>
            <h2 class="mb-2">&#x00AD;Designed for everyday success&#x00AD;</h2>
            <p class="mb-0">&#x00AD;Explore practical solutions created to make everyday work easier, clearer and more effective.&#x00AD;</p>
         </div>
         <div class="col-lg-4 text-lg-end wow fadeInRight">
            <a href="#"><button class="btn btn-light btn-lg">&#x00AD;Learn more&#x00AD;</button></a>
         </div>
      </div>
   </div>
</Section>
<!--__SP_SectionTemplate__-->

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

لا تحتاج لإضافة الصنف sectionAll بنفسك: يضيفه محرر bluetronix تلقائيًا عند إدراج قسم.

5. نسخ قالب العملاء وتغيير العنوان

افتح القالب الموجود SectionClients في مدير الملفات واطلع على رمز HTML الخاص به. في مثالنا، يحتوي على عنوان، ووصف، والعديد من كتل الشركاء.

انسخ القالب المعني باسم SectionClients_own.txt وافتح النسخة عبر تعديل. أضف سلسلة الأحرف NEW!!!! إلى العنوان لاختبارنا. يمكنك أيضًا تغيير النص، وعدد البطاقات، والرموز، أو الCSS بشكل فردي.

<!-- Vorher -->
<h2>&#x00AD;Trusted by growing organizations&#x00AD;</h2>

<!-- Nachher in SectionClients_own.txt -->
<h2>&#x00AD;NEW!!!! Trusted by growing organizations&#x00AD;</h2>

انقر على حفظ ثم افتح مجددًا الاختيار إدراج → قسم الصفحة → Clients. ستتعرف على النسخة الخاصة من خلال العنوان المعدل. النسخة الثانية من Clients يمكن تحديدها وتحريرها بشكل مستقل.

6. تقديم قالب خاص باسم جديد

يمكنك بدلاً من ملف بديل بنفس الاسم أيضًا إنشاء قالب منفصل. على سبيل المثال، انسخ نسخة من Clients واحفظها باسم SectionMyTemplate_own.txt. الجزء الذي بعد Section هو اسم القالب الخاص بك؛ هو الذي يحدد الاختيار الجديد في المحرر. لن يتم استبدال القالب الأصلي Clients باسم مختلف.

SectionClients.txt          → Standard: Clients
SectionClients_own.txt      → eigene Version von Clients
SectionMyTemplate_own.txt   → zusätzliche eigene Vorlage MyTemplate

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

7. عرض القوالب الخاصة فقط باستخدام Only_own.txt

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

/bx_Layout/Only_own.txt

مثال: إذا كانت الملفات في الدليل SectionClients.txt، SectionBanner.txt و SectionMyTemplate_own.txt، ستحتوي الاختيارات بعد تفعيل هذا الإعداد على القالب الخاص المناسب فقط. مما يتيح لك تقديم خيارات محددة متعلقة بالمشروع لعميل.

8. قوالب علامات خاصة لعناصر النص

ينطبق نفس مبدأ _own على وحدات النص الصغيرة. تبدأ ملفاتها بـ Tag. على سبيل المثال، يتحول TagTemplate.txt إلى TagTemplate_own.txt. يمكن تقديم هذه النسخة من خلال الإدخال وحدة نصية في المحرر.

TagTemplate.txt
        ↓ kopieren
TagTemplate_own.txt

9. تكرار الأعمدة القابلة للتحرير باستخدام colAll

إذا كانت القسم يحتوي على أعمدة قابلة للتكرار، يمكن التعرف على عمود بفئة colAll ككتلة مستقلة. وبالتالي، يتم توفير وظيفة عمود المقالات → تكرار في قائمة السياق.

<div class="colAll col-md-6">
   <h2>&#x00AD;Hello world&#x00AD;</h2>
   <p>&#x00AD;Writing&#x00AD;</p>
</div>

عند التكرار، يتم إدراج الكتلة المعنية كعمود ثانٍ. بالنسبة لعمود القوائم أو المقالات القابل للتكرار، يجب عليك وضع colAll في الحاوية الصحيحة. بينما تأتي فئة sectionAll بشكل تلقائي من المحرر.

10. علامات نصية وقوالب متعددة اللغات

تحتوي الأقسام القياسية المقدمة داخل النصوص النموذجية على السلسلة النصية ­، على سبيل المثال، قبل وبعد العناوين. لا ينبغي الخلط بين هذه العلامات النصية و العلامة الفاصلة <!--__SP_SectionTemplate__-->. عند نسخ القوالب الموجودة، يجب عليك الاحتفاظ بمثل هذه العلامات CMS في البداية، إذا كنت ترغب في الحفاظ على سلوك المحرر السابق.

<h2>&#x00AD;Designed for everyday success&#x00AD;</h2>

في المشاريع متعددة اللغات، قد تكون العلامات الترجمة الإضافية مفيدة، بحيث يمكن للمحررين إدارة المحتوى باللغات المطلوبة. تم تصميم نظام bluetronix CMS لـ 24 لغة. بالنسبة لقالب مشروع أحادي اللغة بسيط، يمكنك الاستغناء عن علامات الترجمة الإضافية غير المطلوبة؛ ولكن يجب الاحتفاظ بعلامات فصل الأقسام المطلوبة للمحرر.

11. وظائف خاصة وملفات تضمين مطلوبة

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

if(!function_exists("MyTestFunction")) {
   function MyTestFunction($Test) {
      return $Test;
   }
}

يجب تضمين المتطلبات المطلوبة مرة واحدة على الأقل لكل قسم. يمكن نسخ علامة تضمين مناسبة من خلال المحرر:

<!--bxInclude--/bx_Mod/Blog_Detail-->

لا تُعد الملفات الداخلية للقوالب التي تحمل الامتدادات .txt أو .bx متاحة للاسترجاع المباشر عبر URLs العامة باستخدام HTTP-/HTTPS في تكوين خادم CMS الموصوف. يتم قراءتها ومعالجتها من جانب الخادم.

12. لماذا تعتبر القوالب المحدودة مفيدة لفرق التحرير

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

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

13. النتائج والملخص

تفتح /bx_Layout/، وتنسخ ملف قسم موجود، وتضيف _own، وتعدل الكود HTML، وتتحقق من الإخراج من خلال إدراج → قسم الصفحة. بالنسبة لفئات الاختيار الجديدة، استخدم اسم ملف خاص يبدأ بـ Section.

SectionClients.txt
       ↓ kopieren
SectionClients_own.txt
       ↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
       ↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → Clients

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