فصل دهم: ایجاد برنامه های کاربردی وب منحصر به فرد با override قالب

بیان خلاصه ای از بحث توسط هوش مصنوعی:

هر برنامه وب موفق باید از نظر بصری برای کاربران شما جذاب باشد و استفاده از آن ساده باشد. مهم نیست که نرم افزار شما چقدر خوب باشد، اگر برای کاربران شما جذاب نباشد، موفقیت کمتری خواهید دید.

در جوملا، قالب ها ابزاری قدرتمند برای مطابقت با مشخصات طراحی مورد نیاز ما هستند. در واقع، قالب ها راه بسیار خوبی برای جدا کردن عملکرد از طراحی هستند، زیرا آنها فقط بر ظاهر و احساس یک سایت جوملا تأثیر می گذارند.

هنگامی که ما بر روی یک پروژه با امکانات کامل کار می کنیم، نه تنها باید افزونه هایی ایجاد کنیم تا نیازهای پروژه را برآورده کنیم، بلکه باید طراحی سایت را متناسب با احساس بصری بهتر، تطبیق دهیم.

در این فصل، قصد داریم با override قالب در جوملا آشنا شویم. override به ما امکان می دهد هر کامپوننت یا ماژول جوملا را برای مطابقت با طرح های مورد نیاز خود، تطبیق دهیم.

بخش های ویژه که در این فصل به آنها خواهیم پرداخت:

• قالب جوملا چیست؟
• override قالب چیست ؟
• ایجاد یک override قالب برای نماهای جوملا
• ایجاد چیدمان های جایگزین
• override فایل های CSS و JS

الزامات فنی

در این فصل، ما روی پایه کد خود کار نخواهیم کرد. در عوض، ما مستقیماً روی سایت آزمایشی خود کار می کنیم، بنابراین به موارد زیر نیاز خواهیم داشت :

• سایت جوملا که در فصل های قبل نصب کردیم باید کافی باشد، زیرا ابزارهای مدیریت قالب جوملا ساده اما قدرتمند هستند.
• دسترسی FTP به فایل های سایت جوملا، کافی است.
• اگر دسترسی به FTP دارید، استفاده از Visual Studio Code (یا ویرایشگر کد دلخواه شما) برای ویرایش فایل ها کافی خواهد بود.

می توانید فایل های کد این فصل را در GitHub پیدا کنید:

 https://github.com/PacktPublishing/Developing-Extensions-for-Joomla-5/tree/chapter10

قالب جوملا چیست؟

قالب های جوملا نوع خاصی از افزونه در وب سایت جوملا هستند. آنها طراحی وب سایت شما را کنترل می کنند و می توانید آنها را به عنوان یک توسعه واقعی الگوی Model-View-Controller در نظر بگیرید. قالب ها فقط باید روی طراحی وب سایت شما تاثیر بگذارند.

در جوملا از قالب هایی برای backend  و frontend  برای تغییر طراحی هر دو قسمت یک سایت استفاده می کنیم. در جوملا، علاوه بر قالب پیش  فرض backend، برخی از قالب  های دیگر نیز ظاهر می شوند، اما استفاده از قالب  های متفاوت چندان رایج نیست. در هر صورت، اصولی که قالب  ها بر اساس آن کار می کنند هم برای Backend و هم برای Frontend یکسان است.

قالب های Backendداخل /administrator/templates  سایت جوملا شما هستند. وقتی داخل آن پوشه را بررسی می کنید، پوشهatum  را می بینید که شامل تمام فایل ها و پوشه های قالب backend پیش فرض جوملا است.

قالب های frontend در پوشه /templates  سایت شما زندگی می کنند. با نصب جوملای پایه، پوشه cassiopeia  را در داخل آن خواهید دید.

ساخت یک قالب برای جوملا، ممکن است به سادگی ایجاد یک فایل  index.php و فایل install.xml  مربوط به آن در داخل یک پوشه در پوشه templates  شما باشد.

با این حال، یک قالب معمولی جوملا، شامل این فایل ها خواهد بود:

• templateDetails.xml : این فایل مانیفست قالب است. این مانند فایل های مانیفست است که ما برای کامپوننت، ماژول و پلاگین های خود نوشته ایم، اگرچه دارای برخی برچسب های ویژه برای قالب هاست.
• index.php : این نقطه ورودی قالب است. جوملا برای نمایش سایت از این فایل عبور خواهد کرد. این فایل ممکن است حاوی کدهای ترکیبی PHP و HTML باشد.
• error.php : این فایل چینش صفحات خطای شما را ایجاد می کند. علاوه بر بارگیری فایل های CSS و JS مورد نیاز برای مطابقت با طراحی شما، پیام خطا را به کاربران نشان می دهد.
•  component.php: این فایل ساده ترین صفحه ممکن را برای مطابقت با طرح شما ایجاد می کند و فقط نمای کامپوننت شما را نشان می دهد. معمولاً برای بارگذاری پنجره های مودال از نماهای مختلف استفاده می شود.
•  offline.php: این فایل زمانی که تنظیمات آفلاین روشن است ، یک صفحه را ایجاد می کند تا بگوید سایت آفلاین است.
• joomla.asset.json : این فایل، دارایی  های وب را که می توانیم در قالب خود استفاده کنیم را تعریف می کند، و دقیقاً همانطور که در فصل 3  ،در بخش کامپوننت ها استفاده کردیم، کار می کند.
• فایل های media : اینها دارایی های وب قالب هستند، مانند  CSS، JS، فونت و آیکون. آنها در داخل پوشه قالب قرار ندارند. در عوض، آنها در پوشه خودشان، یعنی پوشه /media/templates/site/  سایت جوملا شما قرار می گیرند.
• پوشهhtml  : این پوشه شامل تمام موارد override قالب است که ما افزونه های جوملا را مجبور میکنیم تا ظاهر خود را با آن تطبیق دهند.

یکی از قدرتمند ترین ویژگی های قالب  ها در پوشه  html قرار دارد، زیرا امکان نادیده گرفتن طراحی سایر افزونه های را فراهم می کند. در بخش بعدی بررسی خواهیم کرد که override های قالب چیست و چگونه می توانیم اولین override خود را ایجاد کنیم.

override قالب چیست؟

override قالب در جوملا، روشی برای تغییر ظاهر اجزای ما هنگام دسترسی به هر یک از نماهای آنها است. کاری که ما هنگام ایجاد یک override قالب انجام می دهیم این است که یک فایل tmpl  از نمای کامپوننت خود را با فایل  tmpl خودمان جایگزین کنیم، بدون اینکه روی فایل  tmpl اصلی تأثیر بگذاریم. این معمولاً با ایجاد یک نسخه متفاوت از فایل tmpl  در یک مسیر خاص در پوشه قالب ما انجام می شود.

هنگام ایجاد یک override قالب در جوملا، ما فایل اصلی را که بخشی کلیدی از override است، تغییر نمی دهیم. این به کاربر اجازه می دهد تا طراحی یک افزونه را با یک override تغییر دهد و مطمئن شود که با بروزرسانی بعدی از بین نمی  رود. این باعث می شود که کاربران و توسعه  دهندگان به  سرعت افزونه های خود را بروزرسانی کنند، که منجر به پلتفرم امن تر می شود.

در یک override قالب، ما آزادی کامل داریم تا هر خروجی را، مطابقت با طراحی خود ایجاد کنیم. با این حال، باید به خاطر داشته باشیم که همه تغییرات ما فقط بر نحوه نمایش خروجی آن افزونه تأثیر می گذارد و ما نمی  توانیم رفتارهای مختلف سرور را فقط با override  اعمال کنیم. همچنین، این override مخصوص قالب در حال استفاده است، بنابراین، هر گونه تغییر در قالب شما، بر نحوه سایر قالب  های سایت شما تأثیری نخواهد داشت.

برخی از موارد استفاده override قالب که به نظر من جالب است به شرح زیر است:

• ایجاد نسخه های مختلف یک خروجی برای تطبیق افزونه ی خود با نسخه های مختلف جوملا
• جایگزینی لینک ها و اقدامات فرم برای هدایت کاربر به سایر افزونه های سایت ما

به عنوان مثال، لینک ""remember my password  را به صفحه فرم تماس هدایت کنید.

• رفع طرح های غیر قابل دسترس با ساختار HTML بهتر
• نمایش محتوای یکسان با طرح های مختلف – به عنوان مثال، تست A/B
• override ها عالی هستند، اما یک جنبه منفی دارند - ممکن است با تغییرات مخرب در افزونه ای که override می کنید خراب شوند. با این حال، این تغییرات چندان رایج نیستند و فقط بین نسخه های اصلی افزونه ها اتفاق می افتد.

بیایید اولین قالب override خود را در بخش بعدی ایجاد کنیم تا ببینیم چقدر آسان است.

ایجاد یک قالب override برای نماهای جوملا

در جوملا، می توانیم قالب override را برای نماهای کامپوننت، چیدمان ماژول، خروجی پلاگین و چیدمان های عمومی جوملا استفاده کنیم. ما می توانیم برای هر افزونه جوملا که به دستورالعمل های کد نویسی جوملا احترام می گذارد و یک فایل چیدمان (layout) ارائه میدهد، یک override قالب ایجاد کنیم.

برای ایجاد یک override قالب، ابتدا باید فایل های نمای مورد نظر خود را پیدا کنیم. به عنوان مثال، برای کامپوننت های جوملا، این فایل ها داخل پوشه tmpl  کامپوننت ما خواهند بود. هنگامی که فایل ها را در اختیار داریم، باید آنها را در زیر پوشه مناسب خود در پوشه HTML  قالب خود کپی کنیم. هنگامی که همه چیز سر جای خود قرار گرفت، جوملا از فایل های جدید به جای فایل های داخل کامپوننت استفاده خواهد کرد.

این فرآیند دستی انجام میشود، اما برای ساده تر کردن آن، می توانید از ویژگی  create overrideکه با جوملا ارائه می شود، برای ایجاد موارد override، استفاده کنید.

این ابزار بخشی از مدیریت قالب در جوملا است، بنابراین برای دسترسی به آن، باید به مدیریت سایت جوملای خود وارد شده و به   System | Templates  بروید. سپس، روی Cassiopeia Details and Files  (یا هر قالبی که می خواهید موارد override را ایجاد کنید) کلیک کنید. در نهایت، تب Create Overrides  را انتخاب کنید. اکنون برای نقطه ی شروع override ، چهار گروه را خواهید دید، Modules, Components, Plugins, Layouts

هر یک از این گروه ها حاوی عناصری هستند که می توانید آنها را override  کنید. اگر تمام فصل های این کتاب را دقیقاً دنبال کرده باشید، ممکن است نام کامپوننت ما، com_spm  را در فهرست کامپوننت  ها ببینید. همچنین گروه پلاگین spm  را در فهرست پلاگین ها خواهید دید.

با کلیک بر روی هر یک از این موارد، عناصر گسترش می  یابند، که می توانید با آیکون Copy  در سمت چپ آنها را override  کنید. هنگامی که روی هر یک از این موارد کلیک می کنید، جوملا، override را در پوشه مناسب ایجاد می کند.

بیایید در ادامه شروع به ایجاد override برای پروژه خود کنیم.

ایجاد یک override برای نمای کامپوننت

برای نشان دادن نحوه ی عملکرد override قالب، نمای پروژه های خود را برای کامپوننت SPM تغییر خواهیم داد. ما نمای کارت فعلی خود را با نمای آکاردئونی جایگزین خواهیم کرد.

اولین کار ایجاد یک override نما است. هنگام ایجاد override به صورت دستی، باید به فایل های موجود در سایت جوملا خود دسترسی داشته باشیم، بنابراین، فایل /components/com_spm/tmpl/projects/default.php  را در پوشه /templates/cassiopeia/html/com_spm/projects/  کپی می کنیم. از این پس جوملا از این فایل به جای فایل موجود در پوشه کامپوننت استفاده خواهد کرد.

هنگام ایجاد یک override با استفاده از مدیریت  overrides، باید عنصر com_spm  را در قسمت  Components جستجو کنید ، روی آن کلیک کنید تا آن را گسترش دهید و سپس روی projects  کلیک کنید تا override ایجاد شود.

یکی از ویژگی های جالب مدیریت override این است که، override موجود نادیده گرفته نمی  شود. هنگامی که یک override برای نمای شما در همین لحظه، وجود دارد، به جای جایگزینی آن، فایل جدید را با یک مهر زمانی در نام، ذخیره می کند. به این ترتیب، شما نمی توانید کار خود را به اشتباه از دست دهید.

حالا، فایلی که اخیرا ایجاد شده را با کد زیر جایگزین کنید:

 
<?php 
use Joomla\CMS\Router\Route; 
use Joomla\CMS\HTML\HTMLHelper; 
use Joomla\CMS\Factory; 
?> 
<form> 
<div class="items-limit-box"> 
<?php echo $this->pagination->getLimitBox(); ?> 
</div> 
<div class="projects"> 
<?php foreach ($this->items as $item) : ?> 
<details> 
<summary> 
<?php echo $item->name; ?> 
</summary> 
<div class="details"> 
<div class="project-id meta"> 
<?php echo $item->id; ?> 
</div> 
<div class="project-deadline meta"> 
<?php echo $item->deadline; ?> 
</div> 
<div class="project-link"> 
<a href="/<?php echo Route::_('index.php? 
option=com_spm&view=project&id=' . $item-> 
id);?>">Go to project</a> 
</div> 
</div> 
</details> 
<?php endforeach;?> 
</div> 
<p><?php echo $this->pagination->getResultsCounter(); ?></p> 
<?php echo $this->pagination->getListFooter(); ?> 
<input type="hidden" name="task" value="projects"> 
<?php echo HTMLHelper::_('form.token'); ?> 
</form> 

این کد آیتم های  div class="card" را با آیتم های details  جایگزین می کند، که راهی برای ایجاد آکاردئون در HTML5 ارائه می دهد. همچنین برای واضح تر شدن و تفکیک اقدامات، لینک را از نام پروژه حذف کرده و به عنوان لینک اختصاصی به جزئیات اضافه کرده ایم.

ایجاد یک override برای یک ماژول از همین منطق پیروی می کند. بیایید ببینیم چگونه می توانیم یک ضرب الاجل به ماژول ProjectsList  خود در بخش بعدی اضافه کنیم.

ایجاد یک override برای یک ماژول

ایجاد یک override برای ماژول ها، همان اقداماتی که ما برای کامپوننت ها دنبال کردیم، تکرار میکنیم. برای ماژول  ها، ما هیچ نمایی نداریم، اما چیدمان هایی برای override داریم که در داخل پوشه tmpl  ماژول داریم. برای نشان دادن این موضوع، ماژول ProjectsList  خود را override می کنیم، و باعث می شود برای هر یک از پروژه های نشان داده شده یک ضرب الاجل اضافه کند.

ما با کپی کردن  /modules/mod_projectslist/tmpl/default.php  در /templates/cassiopeia/html/mod_projectslist  شروع می کنیم. دقیقاً همانطور که در مورد کامپوننت ها اتفاق افتاد، از این پس جوملا، از این فایل به جای فایل ارائه شده در ماژول استفاده خواهد کرد.

هنگام ایجاد override با استفاده از مدیریت overrides ، باید به دنبال mod_projectslist  در بخش Modules  بگردید. در این مثال، هنگامی که بر روی مورد کلیک می کنید، جوملا فورا override را ایجاد می کند.

اکنون کد موجود در فایل default.php  را با این کد جایگزین می کنیم:

 
<ul> 
<ul class="mod-projects-list"> 
<?php foreach ($projects as $item) : ?> 
<li> 
<?php echo $item->name; ?> 
<?php echo $item->deadline; ?> 
</li> 
<?php endforeach; ?> 
</ul> 

در این فایل، ویژگی deadline را به خروجی اضافه کنید، بنابراین، وقتی ماژول را در frontend بررسی می کنید، نام پروژه و مهلت مربوطه را مشاهده خواهید کرد.

اکنون که می دانیم چگونه برای کامپوننت ها و ماژول ها یک override ایجاد کنیم، بیایید ببینیم چه زمانی می توانیم یک override برای پلاگین ها ایجاد کنیم.

ایجاد یک override برای یک پلاگین

تاکنون برای کامپوننت ها و ماژول ها override ایجاد کردیم و شما تعداد بسیار کمی از این موارد را خواهید یافت که نمی توان آنها را override کرد. با این حال، وقتی صحبت از پلاگین ها می شود، سناریو متفاوت است، زیرا برخی از پلاگین ها برای ارائه خروجی نیستند، بلکه برای تغییر رفتار جوملا هستند.

یک راه سریع برای دانستن اینکه آیا یک پلاگین می تواند یک قالب override داشته باشد یا نه، جستجوی پوشه tmpl  در پوشه اصلی آن است. هنگامی که پوشه موجود است و یک فایل چیدمان (layout)  PHP در داخل آن وجود دارد، پلاگین می تواند یک قالب override داشته باشد.

در فصل 8 ، ما چند پلاگین ایجاد کردیم، یکی برای گروه محتوا و دیگری برای گروه spm  خودمان ما قصد داریم تا نوع محتوای خود را با پلاگین projectlink نادیده بگیریم تا نشان دهیم که چگونه می توان یک override برای این پلاگین ایجاد کرد.

با بررسی کد آن پلاگین، متوجه می شویم که فایل چیدمان (layout) ما در داخل پوشه tmpl   و فایل link.php است. این خوب است.

نکته: چیدمان ها می توانند فایل  هایی با نام متفاوتی باشند، و ما فقط باید مراقب باشیم و فایل ها را به درستی کپی کنیم.

بنابراین، ما فایل /plugins/content/projectlink/tmpl/link.php را از سایت جوملا  کپی می کنیم به  /templates/cassiopeia/html/plg_content_projectlink/link.php  . ما این فایل را ویرایش می کنیم تا لینک ها در یک پنجره جدید باز شود:

 
<div id="spm-project-<?php echo $item->id;?>" class="spm-project"> 
<a href="/<?php echo $item->url; ?>" target="_blank"> 
<?php echo $item->name; ?> 
</a> 
</div> 

با افزودن  target="_blank" به تگ HTML، لینک های پروژه ما در این سایت، با استفاده از این الگو، در یک برگه جدید باز کنید.

مانند بخش های قبلی، می توانیم با استفاده از مدیر overrides نیز یک override ایجاد کنیم. برای این کار باید عنصر content  را در قسمت پلاگین plugins  پیدا کرده و روی آن کلیک کنیم. پس از کلیک کردن، افزونه های محتوای موجود برای override  قالب ظاهر می شوند. ما روی عنصر projectlink  کلیک می کنیم و فایل override ما در زیر پوشه مربوطه در پوشه html  قالب ظاهر می شود.

ایجاد چیدمان های جایگزین

override نماها، یک راه عالی برای تطبیق نماهای ما برای هر پروژه در جوملا است. داشتن قابلیت override ، نشانه گذاری نمای ما بسیار قدرتمند است و انعطاف پذیری زیادی را برای یکپارچه سازهای سایت جوملا فراهم می کند. با این حال، override بر کل سایت تأثیر می گذارد. اگر بخواهیم نمای کارت و نمای آکاردئونی پروژه های خود را در مناطق مختلف یک سایت ارائه دهیم چه اتفاقی می افتد؟ این زمانی است که افزودن نماهای آیتم های مختلف، منطقی است.

افزودن یک آیتم منوی جایگزین برای نمای کامپوننت

در جوملا، می توانیم برای نماهای خود در پوشه ی override چیدمان های مختلفی را تعریف کنیم. برای مشاهده این موضوع، اجازه دهید قالب override خود را به یک نوع آیتم جدید برای کامپوننت منتقل کنیم.

ابتدا فایل /templates/cassiopeia/html/com_spm/projects/alternative.xml  را در جوملا با محتوای زیر ایجاد کنید:

 
<?xml version="1.0" encoding="UTF-8"?> 
<metadata> 
<layout title="COM_SPM_VIEW_PROJECTS_ALTERNATIVE_MENU_LABEL"> 
<message> 
<![CDATA[COM_SPM_VIEW_PROJECTS_ALTERNATIVE_MENU_DESC]]> 
</message> 
</layout> 
</metadata> 

در این فایل، عناصری را برای پیکربندی آیتم های منو تعریف می کنیم.(برای یادآوری بیشتر فصل 3 را بررسی کنید.) این فایل XML همان فایلی است که به زیر پوشه view داخل پوشه tmpl  کامپوننت اضافه کردیم.

اکنون، نام فایل override را از

/templates/cassiopeia/html/com_spm/default.php 

به

/templates/cassiopeia/html/com_spm/alternative.php 

تغییر دهید.

و تمام! ما یک نوع آیتم منوی جدیدی را برای کامپوننت خود ایجاد کرده ایم که منحصر به این وب سایت و قالب است و از تمام منطق مدل و نمای پروژه استفاده می کند.

اکنون، وقتی شما یک آیتم منوی جدید برای کامپوننت  SPMایجاد می کنید، یک نوع آیتم منوی جدید، مربوط به این نمای جایگزین جدید را خواهید دید.

این تکنیک فقط برای کامپوننت ها مناسب است، اما می توانیم از تکنیک مشابهی برای ماژول ها استفاده کنیم. بیایید نحوه انجام آن را در بخش بعدی ببینیم.

اضافه کردن یک چیدمان جایگزین برای یک ماژول

در جوملا، ما ممکن است ماژول یکسانی در چندین ناحیه از وب سایت ما نمایش داده شود. بنابراین، داشتن چیدمان جایگزین به جای اصلاح چیدمان پیش  فرض ماژول، منطقی  تر است.

با ماژول ها، ما تعاریف نوع آیتم XML نداریم، بنابراین ایجاد چیدمان جایگزین آسان تر است. ما فقط باید نام قالب را به override خود، برای طرح ماژول تغییر دهیم، و می توانیم بین چیدمان پیش  فرض و طرح جایگزین جدید یکی را انتخاب کنیم.

برای مشاهده عملی این موضوع، نام override را که برای ماژول ایجاد کرده اید، از

/templates/cassiopeia/html/mod_projectslist/default.php ،

به 

/templates/cassiopeia/html/mod_projectslist/deadlines.php 

تغییر نام دهید.

پس از انجام این کار، ماژول به استفاده از چیدمان پیش فرض هنگام نصب با کامپوننت باز می گردد. با این حال، وقتی پیکربندی ماژول را اکنون در تب Advanced  ویرایش می کنید، خواهید دید که یک گزینه جدید در قسمت Layout  وجود دارد. بنابراین، شما می توانید از موارد زیر انتخاب کنید:

• From Module: default
• From Cassiopeia Template: deadlines

و همینطور، نمایش ماژول های خود را قدرتمند تر کرده اید و گزینه های بیشتری را به کاربر سایت ارائه می دهید.

برای پلاگین ها، ما هیچ یک از این مکانیسم ها را برای چیدمان جایگزین نداریم.

نادیده گرفتن نماها و افزودن چیدمان جدید کمک زیادی به بهبود علامت  گذاری و تطبیق طرح  هایمان می کند، اما این ممکن است کافی نباشد و ممکن است نیاز به جایگزینی CSS و JS داشته باشیم. اگر چنین است، بخش بعدی نشان می دهد که چگونه می توانیم css و js را در جوملا override کنیم.

override فایل های CSS و JS

در جوملا، تمام استایل ها و فایل های JS باید از طریق Web Assets Manager مدیریت شوند.(ما مدیر دارایی های وب جوملا را در فصل 3 معرفی کردیم)

این امر، انعطاف پذیری زیادی را ارائه می دهد، زیرا ما می توانیم از روش های Web Assets Manager برای فعال کردن، غیرفعال کردن و override فایل های CSS و JS خود استفاده کنیم.

override دارایی ها با مدیر دارایی های وب

هنگام ایجاد یک override قالب، ما ظاهر و طرح یک صفحه خاص را تغییر میدهیم و ممکن است لازم باشد از نسخه دیگری از یک کتابخانه JS استفاده کنیم یا یک فایل CSS را به طور کامل جایگزین کنیم.

در این موارد، Web Assets Manager  کمک بزرگی است، زیرا به ما اجازه می دهد تا دارایی ها را به راحتی جایگزین دارایی  های قالب خود کنیم. بیایید یک مثال را ببینیم، جایگزین کتابخانه jQuery که جوملا از آن استفاده میکند با نسخه دیگری.

خطوط زیر را به فایل /templates/cassiopeia/html/com_spm/alternative.php  درست پس از اعلام فضاهای نام خود، اضافه کنید:

 
$wam = Factory::getApplication()->getDocument()->getWebAssetManager(); 
$wam->registerScript('jquery', 'https://code.jquery.com/jquery-3.7.0.min.js'); 

در این خطوط، ابتدا آبجکت Web Assets Manager  را نمونه سازی می کنیم و از متد registerScript  برای ثبت نسخه جدید jQuery  استفاده می کنیم. بخش کلیدی این ارتباط این است که ما از همان نام دارایی استفاده می کنیم که کتابخانه فعلی jQuery  از آن استفاده می کند، بنابراین مدیر دارایی های وب، هنگام جستجوی دارایی، از آخرین نسخه ثبت شده ی ما استفاده می کند.

توجه داشته باشید که دارایی های اصلی، با افزونه joomla.asset.json  ما نیز کار می کنند، بنابراین اگر نیاز دارید همیشه از نسخه خاصی از یک دارایی مشترک استفاده کنید، می توانید با ثبت دارایی در افزونه خود، از این ویژگی استفاده کنید.

افزودن دارایی  های جدید به override ما

وقتی می خواهید تغییراتی را اضافه کنید، ممکن است override دارایی  های موجود، ساده ترین گزینه نباشد. برای آن شرایط، می توانید دارایی  های جدید را با استفاده از Web Assets Manager اضافه کنید.

برای انجام این کار، یک فایل CSS در قالب خود در مسیر templates/cassiopeia/css/alternative.css  با محتوای زیر ایجاد کنید:

 

 
* { 
color: red; 
}  

این CSS ساده تمام متن را قرمز می کند و شما به راحتی تغییر را مشاهده خواهید کرد.

اکنون در فایل /templates/cassiopeia/html/com_spm/alternative.php ، پس از ثبت کتابخانه jQuery ، خط زیر را اضافه کنید:

 
$wam->registerAndUseStyle('alternative','templates/cassiopeia/css/alternative.css'); 

این خط از آبجکت Web Assets Manager استفاده میکند که در بخش قبلی، نمونه سازی کردیم  فایلcss  جدید را در قالب ما ثبت و بارگذاری میکند. وقتی دوباره بررسی می کنیم، تمام متن برای نمای جایگزین جدید شما، باید قرمز باشد.

غیرفعال کردن دارایی ها در override ما

علاوه بر جایگزین کردن دارایی ها یا افزودن فایل های دارایی جدید، می توانیم از مدیر دارایی های وب، برای غیرفعال کردن آن دسته از عناصری که نمی  خواهیم در  override نشان داده شوند، استفاده کنیم.

در override ، ما نیازی به بارگیری دارایی com_spm.projects نداریم ، زیرا از رابط کارت استفاده نمی کنیم و فقط از نمای گسترش یافته استفاده می کنیم. برای صرفه جویی در زمان بارگذاری، می توانیم اضافه کردن این خط کد را، درست در زیر خطی که متغیر  $wam را در آن اعلام می کنیم، غیرفعال کنیم:

 
$wam->disableStyle('com_spm.projects'); 

این فراخوانی متد disableStyle فقط به نام دارایی طرحی نیاز دارد که می خواهید غیرفعال کنید.

غیرفعال کردن دارایی های جاوا اسکریپت آنالوگ است، اما از متد  disableScriptاستفاده می کند.

منابع فصل

• یک مقاله خوب برای معرفی JLayouts در اسناد سایت رسمی جوملا وجود دارد:

 https://docs.joomla.org/J3.x:Sharing_layouts_across_views_or_extensions_with_JLayout

• یک مقاله گسترده در مورد شخصی سازی Cassiopeia در سایت اسناد رسمی جوملا وجود دارد:

 https://docs.joomla.org/J4.x:Cassiopeia_Template_Customisation

• اگر می خواهید در مورد مدیریت Overrides در جوملا 4 بیشتر بدانید، این مقاله را در مجله جوملا بررسی کنید:

 https://magazine.joomla.org/all-issues/july-2022/joomla-override-management

• مستندات جوملا در Web Assets Manager یک منبع عالی برای کسب اطلاعات بیشتر در مورد آن است:

 https://docs.joomla.org/J4.x:Web_Assets