ابزار سایت

ساختار_جدید_css_پوسته_ها

ساختار جدید css پوسته‌ها

مقدمه

سیستم موتوشاب قابلیت توسعه پوسته جدید را برای توسعه‌دهندگان فراهم می‌کند. این پوسته‌ها در آدرس ow_themes\ قرار دارند. توسعه‌دهندگان oxwall ساختار خاصی را مشابه با افزونه‌ها برای پوسته‌ها در نظر گرفته‌اند. در این ساختار اطلاعات css پوسته‌ها درون فایلی به نام base.css در مسیر پوسته قرار دارد.

با افزودن ویژگی‌های جدید و رفع مشکلات موتوشاب بارها نیاز به تغییر فایل css پوسته‌ها به وجود می‌آید. تعدادی از این تغییرات میان تمامی پوسته‌ها مشترک و تعدادی مختص یک پوسته خاص است. اعمال تغییرات مشترک در تمام پوسته‌ها کاری زمان‌بر و طاقت‌فرسا است، بنابراین ساختار جدیدی پیاده‌سازی شد که در آن بخش‌های مشترک و غیرمشترک پوسته‌ها تفکیک شده و در دو فایل جداگانه به ترتیب به نام‌های core.css و base.css قرار گرفت.

فایل core.css

فایل core.css شامل موارد مشترک میان تمامی پوسته‌ها است. core.css یکتا است و در میان تمامی پوسته‌ها مشترک است. به دلیل مطابقت با معماری طراحی‌شده توسط oxwall یک رونوشت از این فایل درون دایرکتوری هر پوسته وجود دارد.

این فایل شامل دو بخش است که با کامنت‌گذاری از همدیگر تفکیک ‌شده‌اند:

  • CSS styles
  • Responsive styles

در فایل core.css تعدادی کلاس جود دارد که در فایل‌های base.css مربوط به هر پوسته، با افزودن ویژگی‌های اختصاصی، سفارشی‌سازی شده‌اند. توسعه‌دهندگان می‌توانند با ویرایش فایل base.css، بدون از دست‌ دادن کلاس‌های سفارشی‌سازی شده خود، پوسته‌ها را به‌روزرسانی کنند.

همان‌طور که در کد زیر می‌بینید، در ابتدای فایل core.css مقدار build number وجود دارد نشان دهنده شماره ساخت هسته تم است. در صورت به‌روزرسانی، بهبود و یا تغییر در فایل core.css، این مقدار یک واحد افزایش می‌یابد و با جایگزینی در مسیر پوشه مربوط به پوسته بدون تغییر فایل Base.css و سایر قسمت‌های پوسته اعم از تصاویر و فایل‌های html پوسته به‌روز خواهد شد.

/********************************************************************************
  *
  *     Filename:        base.css
  *     Description:     Portfolio Theme Base CSS File
  *     Version:         1.0.0       build number: 6

فایل base.css

فایل base.css شامل موارد غیرمشترک css است. در مسیر هر پوسته، یک نسخه متفاوت و مخصوص آن پوسته موجود است. در صورت نیاز به اعمال تغییراتی که مختص یک پوسته است، ویژگی‌های سفارشی شده تنها در فایل base.css درون مسیر پوسته اعمال شده بنابراین فایل core.css دست‌خوش تغییر نخواهد شد.

این فایل شامل سه بخش است که با کامنت‌گذاری از همدیگر تفکیک ‌شده‌اند:

  • بخش رنگ‌ها
  • بخش عکس‌ها
  • بخش اندازه و مرزها و سایر ویژگی‌های مختص هر پوسته

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

در ابتدای هر نسخه از فایل base.css مطابق کد زیر، با افزودن فایل core.css درون base.css، موارد مشترک افزوده می‌شود. در ادامه موارد مختص هر پوسته درون این فایل قرار می‌گیرد.

@import url("core.css");	

روش‌های حفظ تغییرات سفارشی‌سازی شده

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

  1. در صورتی که تغییرات اعمالی محدود و به صورت کلاس‌های مجزایی هستند که کلاس‌های base.css یا core.css را بازنویسی می‌کنند، توصیه می‌شود این کلاس‌ها در بخش «ویرایش CSS» واقع در «بخش سفارشی‌سازی پوسته» میزفرمان مدیریت ذخیره شوند. از آنجا که این کلاس‌ها در پایگاه‌داده ذخیره می‌شوند، پس از به‌روزرسانی پوسته به صورت دست‌نخورده و بدون تغییر باقی‌مانده و مجددا بر روی پوسته اعمال می‌شوند. لازم به تذکر است که در این روش هیچ‌یک از کلاس‌های سفارشی‌سازی شده نباید در فایل‌های base.css یا core.css وارد شده باشند.
  2. در صورتی که تغییرات در فایل base.css اعمال شده‌اند، لازم است این فایل قبل از به‌روزرسانی در مسیر دیگری نگهداری و پس از اتمام به‌روزرسانی جایگزین base.css نسخه جدید شود. از آنجا که سیاست تیم پشتیبانی در خصوص به‌روزرسانی پوسته‌ها بر آن است که تغییرات در core.css اعمال شوند و همچنین تخصیص مقادیر پیش‌فرض برای کلاس‌های جدید در این فایل، لذا پوسته به سادگی به‌روز شده و تمام قسمت‌هایی که سفارشی سازی شده‌اند حفظ خواهند شد. توصیه می‌شود در صورتی که یک کلاس در پوسته را تغییر می‌کند، در base.css ذخیره شود و تا جای ممکن از تغییر core.css پرهیز شود.
  3. در صورتی که تغییرات بسیار بنیادی و گسترده هستند که دو روش فوق پاسخگو نیستند، راه حل بعدی ایجاد یک پوسته جدید و اعمال تمام تغییرات لازم در base.css و سایر بخش‌ها است. توصیه می‌شود در صورت استفاده از این روش، فایل core.css که بین تمام پوسته‌ها مشترک است بدون تغییر نگه‌داری شود، چرا که شماره‌ ساخت این فایل یکی از ملاک‌های به‌روز بودن پوسته است و تنها با به‌روز کردن این فایل به جدیدترین نسخه منتشر شده در درگاه شاب کد پوسته را ‌می‌توان به صورت دستی و بدون از دست رفتن تغییرات سفارشی سازی شده به‌‌روز کرد.
ساختار_جدید_css_پوسته_ها.txt · آخرین ویرایش: 2019/01/15 12:45