اضافه کردن فایل‌های JavaScript و CSS شخصی در CMS bluetronix

شرایط و هدف

برای این آموزش به یک دسترسی توسعه‌دهنده به cms bluetronix نیاز دارید و باید با ساختار لایه‌ها و پوشه‌های توسعه‌دهنده آشنا باشید. شما یاد می‌گیرید که چگونه فایل‌های JavaScript و CSS خود را در کنار فایل‌های cms موجود اضافه کنید بدون اینکه فایل‌های سیستم اصلی را تغییر دهید.

ما از فایل‌های BxHeadScript_own.js و BxStyle_own.css که در اسکرین‌شات نشان داده شده است استفاده می‌کنیم. هر دو فایل صریحاً در لایه اضافه می‌شوند تا cms آنها را هنگام بارگذاری صفحه وب در نظر بگیرد.

1. باز کردن چیدمان

در cms بخش لایه را باز کنید و لایه - HTML را انتخاب کنید. سپس لایه‌ای را که می‌خواهید فایل‌های JavaScript و CSS خود را به آن اضافه کنید باز کنید. در این مثال از لایه استاندارد استفاده می‌کنیم.

در تعریف لایه، شما به‌طور پیش‌فرض ارتباطاتی برای فایل‌های اصلی cms پیدا خواهید کرد، مانند BxHeadScript.js و BxStyle.css. می‌توانید فایل‌های اضافی خود را مستقیماً کنار آن اضافه کنید.

2. ایجاد فایل JavaScript شخصی در مدیر فایل

مربی مدیر فایل را باز کنید و به پوشه سیستم که با رنگ قرمز مشخص شده است bx_script بروید. در آنجا پرونده‌های اصلی JavaScript cms bluetronix و در صورت لزوم نسخه‌های وابسته به زبان را خواهید یافت.

در آنجا فایل خود را BxHeadScript_own.js ایجاد کنید یا اگر از قبل موجود است، آن را انتخاب کنید. شما می‌توانید برای این کار یک فایل موجود مناسب را به عنوان الگو کپی کنید.

با انتخاب ویرایش می‌توانید کد JavaScript فایل خود را در ویرایشگر متن باز کنید.

در مثال نشان داده شده، این فایل شامل کد JavaScript خاصی است که برای انتخاب بین حالت تاریک و روشن استفاده می‌شود. شما می‌توانید کد JavaScript خاص پروژه خود را در ویرایشگر متن نگهداری کرده و سپس ذخیره کنید.

برای افزودن‌های شخصی، BxHeadScript.js اصلی را تغییر ندهید. فایل‌ها در پوشه‌های سیستم bx_ ممکن است در به‌روزرسانی‌های cms نادیده گرفته شوند. فایل‌های شخصی خود را با _own در آنجا مشخص کنید.

3. اضافه کردن فایل JavaScript شخصی به چیدمان

به لایه - HTML برگردید. فایل JavaScript خود را به‌علاوه فایل cms موجود اضافه کنید. اگر می‌خواهید اسکریپت شما زودتر بارگذاری شود، آن را مانند اسکرین‌شات در بخش head بعد از Head-Script موجود اضافه کنید.

<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>

خط اضافی کد JavaScript شما را بارگذاری می‌کند. BxHeadScript.js اصلی بدون تغییر باقی می‌ماند. مسیر فایل و نحوه نوشتن فایل شخصی باید با فایل در مدیر فایل مطابقت داشته باشد.

4. ایجاد فایل CSS شخصی در مدیر فایل

در مدیر فایل پوشه سیستم bx_style را باز کنید. در اینجا، علاوه بر این، stylesheet مرکزی BxStyle.css وجود دارد. برای تغییرات شخصی، ما از یک فایل جداگانه به نام BxStyle_own.css استفاده می‌کنیم.

فایل BxStyle_own.css را ایجاد کنید یا فایل موجود خود را باز کنید. فایل سیستمی BxStyle.css باقی می‌ماند.

از طریق ویرایش می‌توانید در این فایل قوانین CSS خود را قرار داده و ذخیره کنید.

5. اضافه کردن فایل CSS شخصی به چیدمان

بار دیگر لایه - HTML را باز کنید. در بخش head، فایل CSS خود را بعد از stylesheet موجود اضافه کنید. ترتیب اهمیت دارد، اگر می‌خواهید قوانین خود به فرمت‌سازی استاندارد اولویت داشته باشند.

<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">

فایل CSS استاندارد باقی می‌ماند، در حالی که شما فرمت‌های اضافی یا متفاوت را به‌طور جداگانه در BxStyle_own.css مدیریت می‌کنید.

6. استفاده از JavaScript در Head یا انتهای صفحه

فایل‌های JavaScript بسته به کاربرد آنها می‌توانند در بخش head یا در انتهای صفحه قبل از تگ بسته شدن body اضافه شوند. BxHeadScript_own.js نشان داده شده در Head بارگذاری می‌شود. برای سایر اسکریپت‌ها می‌توانید از یک پوشه پروژه جداگانه استفاده کنید و بعداً فایل را در لایه اضافه کنید.

مثالی از یک فایل اضافی از یک پوشه خودتان در انتهای صفحه:

<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>

این مثال نشان‌دهنده یک فایل اضافی است. اگر می‌خواهید به‌جای آن یک فایل سیستمی را با نسخه خود جایگزین کنید، باید ارتباطات مربوطه را در لایه انتخاب شده آگاهانه تنظیم کرده و بررسی کنید که هیچ عملکرد cms مورد نیازی از دست نرود.

7. تمایز بین پوشه‌های سیستم و پوشه‌های پروژه خودتان

پوشه‌های bx_ مشخص شده با رنگ قرمز به cms bluetronix تعلق دارند. فایل‌های شخصی در این پوشه‌ها باید با _own مشخص شوند تا در به‌روزرسانی‌های منظم cms مانند فایل‌های سیستم رفتار نشوند.

شما می‌توانید به‌طور جایگزین فایل‌های JavaScript و CSS خود را در پوشه‌های پروژه ایجاد شده بدون پیشوند bx_ ذخیره کنید، به عنوان مثال /script/ یا /my_scripts/. در آنجا مشخص‌کردن با _own الزامی نیست. شما سپس باید مسیر واقعی را در تعریف لایه خود استفاده کنید.

برچسب _own جایگزین ادغام در طرح‌بندی نمی‌شود: یک فایل جداگانه تنها زمانی بارگذاری می‌شود که از طریق خط script یا link مناسب وارد شده باشد.

8. نسخه‌گذاری خودکار فایل‌ها

در پیاده‌سازی‌های نمایشی، CMS بلوترونیکس از برچسب __FV_…__ استفاده می‌کند. از این طریق، CMS می‌تواند یک پارامتر نسخه را براساس تاریخ تغییرات اضافه کند. پس از یک تغییر، مرورگر فایل اخیر JavaScript یا CSS را بارگذاری می‌کند و به جای استفاده از نسخه قدیمی کش، از جدیدترین استفاده می‌کند.

نمونه: یک مسیر اولیه مانند /script/MyScript.js می‌تواند پس از پردازش با یک پارامتر نسخه تکمیل شود. لازم نیست شماره نسخه را در فایل‌هایی که به‌طور مناسب وارد شده‌اند، در هر طرح‌بندی به‌روزرسانی کنی.

9. ذخیره و بررسی تغییرات

ابتدا فایل‌های JavaScript و CSS خود را ذخیره کن و سپس طرح‌بندی ویرایش‌شده را ذخیره کن. وب‌سایت خود را دوباره بارگذاری کن و بررسی کن که آیا توابع JavaScript شما اجرا می‌شوند و قوانین CSS خود به‌کار گرفته می‌شوند یا خیر.

اگر فایلی بارگذاری نمی‌شود، ابتدا نام فایل، حروف بزرگ و کوچک، مسیر پوشه و ادغام در طرح‌بندی را بررسی کن. اگر چندین طرح‌بندی در حال استفاده است، همچنین بررسی کن که آیا طرح‌بندی‌ای که به صفحه مربوطه اختصاص یافته است را ویرایش کرده‌ای یا خیر.

خلاصه

برای افزونه‌های خود، به عنوان مثال BxHeadScript_own.js را در پوشه bx_script و BxStyle_own.css را در پوشه bx_style قرار بده. سپس هر دو فایل را با اضافه کردن به Layout - HTML علاوه بر فایل‌های اصلی CMS وارد کن. بدین ترتیب فایل‌های استاندارد بدون تغییر باقی می‌مانند، در حالی که کد JavaScript و CSS خاص پروژه خود را به‌طور جداگانه مدیریت می‌کنی.