شخصی‌سازی الگوهای بخش HTML

پیش‌نیازها و هدف آموزش

شما به دسترسی به ویرایشگر HTML و مدیر فایل CMS بلوترونیکس و همچنین حقوق توسعه‌دهنده مناسب برای پوشه الگوها نیاز دارید. در این آموزش یاد می‌گیرید که چگونه بخش‌های موجود صفحات را سفارشی کنید، الگوهای بخش HTML سفارشی ایجاد کنید و در صورت نیاز فقط الگوهای مجاز را به ویرایشگران خود ارائه دهید.

ما با الگوهای نمونه مشتریان و بنر کار می‌کنیم. فایل‌های استاندارد تغییری نخواهند کرد؛ تغییرات فردی از طریق علامت‌گذاری _own انجام می‌شود.

1. پیدا کردن الگوهای بخش در ویرایشگر

یک صفحه موجود در CMS را باز کنید، ویرایش را انتخاب کنید و از طریق درج → بخش صفحه انتخاب الگو را باز کنید. منوی زمینه همچنین ورودی ماژول متن را برای محتوای قابل استفاده مجدد کوچک ارائه می‌دهد. این آموزش ابتدا به بخش‌های صفحه می‌پردازد.

در پنجره بخش صفحه، الگوهای موجود با یک پیش‌نمایش نمایش داده می‌شوند. 

برای مثال، دسته مشتریان را انتخاب کنید. چندین نوع طرح بندی در دسترس است.

2. جایی که الگوهای ذخیره شده‌اند

فایل‌های الگو در پوشه توسعه‌دهنده /bx_Layout/ قرار دارند. این پوشه را در مدیر فایل باز کنید. در آنجا، فایل‌هایی برای بخش‌های صفحه (Section*.txt) و ماژول‌های متن (Tag*.txt) پیدا خواهید کرد.

نام فایل تعیین کننده ارتباط با انتخاب الگو است. یک الگوی بخش صفحه همیشه با Section شروع می‌شود; و سپس نام فردی آن دنبال می‌شود. برای انواع سفارشی، از افزودن _own قبل از پسوند فایل استفاده می‌شود.

شما همچنین می‌توانید یک الگوی کاملاً جدید ایجاد کنید. برای آن، یک نام خودتان را پس از Section انتخاب می‌کنید. اگر هیچ فایل استاندارد با همین نام وجود نداشته باشد، الگوی جدید به‌طور اضافی ظاهر می‌شود و به جای یک الگوی موجود تغییر نمی‌کند.

3. چرا نباید فایل‌های استاندارد را مستقیماً ویرایش کنی

فایل‌های استانداردی که با CMS ارائه می‌شوند از /bx_Layout/ در هنگام به‌روزرسانی سیستم بازنویسی می‌شوند. بنابراین تغییرات مستقیماً بر روی SectionClients.txt یا SectionBanner.txt دائمی نخواهد بود. فایل استاندارد مورد نظر را کپی کنید و نسخه خود را با _own علامت‌گذاری کنید. انواع _own مربوطه برای تنظیمات فردی و مقاوم در برابر به‌روزرسانی شما در نظر گرفته شده‌اند.

SectionClients.txt
        ↓ kopieren
SectionClients_own.txt

اگر هر دو فایل وجود داشته باشند، CMS از SectionClients_own.txt به‌جای الگوی استاندارد SectionClients.txt استفاده می‌کند. شما نیازی به تغییر نام دسته مشتریان در ویرایشگر ندارید.

اگر شما از طرف دیگر، یک فایل جدید با یک نام جدید ایجاد کنید، مثلاً SectionMyTemplate_own.txt، الگوی استاندارد مشتریان نیز در دسترس خواهد بود.

4. ساختار یک الگوی HTML بخش: علامت‌گذاری جداکننده

یک فایل Section می‌تواند چندین نوع طرح بندی را از همان دسته شامل شود. برای اینکه ویرایشگر CMS انواع مختلف را شناسایی کند، آن‌ها با علامت جداکننده زیر از یکدیگر جدا می‌شوند:

<!--__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>

روی ذخیره کلیک کن و سپس انتخاب افزودن → بخش صفحه → مشتریان را دوباره باز کن. در آنجا نسخه خود را با عنوان تغییر یافته شناسایی می‌کنی. نوع دوم مشتریان به طور مستقل از آن قابل انتخاب و ویرایش است.

6. ارائه الگوی شخصی با نام جدید

می‌توانی به جای یک فایل جایگزین با نام یکسان، یک الگوی جداگانه ایجاد کنی. به عنوان مثال، یک نوع مشتری را کپی کن و به عنوان 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>

در پروژه‌های چند زبانه، نشانه‌های ترجمه اضافی می‌توانند مفید باشند تا ویرایشگران بتوانند محتوا را به زبان‌های لازم نگهداری کنند. CMS bluetronix برای ۲۴ زبان طراحی شده است. برای یک الگوی پروژه ساده و تک زبانه، می‌توانی نشانه‌های ترجمه اضافی غیرضروری را حذف کنی؛ اما نشانه‌های تفکیک بخش‌های ضروری برای ویرایشگر باید حفظ شوند.

11. توابع سفارشی و include های مورد نیاز

اگر یک الگو را با توابع PHP یا خروجی‌های ماژول گسترش می‌دهی، برای توابع خود از نام‌های منحصربه‌فرد استفاده کن. یک تابع موجود نباید دوباره با همان نام اعلام شود. می‌توانی اعلام را به عنوان مثال با function_exists() زیر نظر داشته باشی:

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

شامل‌های مورد نیاز باید حداقل یک بار در هر بخش گنجانده شوند. یک نشان‌گر شامل مربوطه را می‌توان از طریق ویرایشگر کپی کرد:

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

فایل‌های داخلی الگو با پسوندهای .txt یا .bx در پیکربندی سرور CMS توضیح داده شده به منظور درخواست مستقیم از طریق URLهای عمومی HTTP-/HTTPS در نظر گرفته نشده‌اند. این فایل‌ها به طور سروری خوانده و پردازش می‌شوند.

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 بخش ارائه شده کار کنند.