ساعت سرور

یک شنبه 02 آذر 1393

درون‌شد

کاربران برخط

هیچ کاربر برخطی پیدا نشد

ساخت قالب جاوز - بخش دوم

عنوان مقاله: مفاهیم پیشرفته در ساخت قالب جاوز

نویسنده: محسن خواهانی

تاریخ انتشار: ۸ مرداد ۱۳۸۹

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

ساخت قالب برای وب سایت های چند زبانه

همانطور که پیشتر گفته شد، برای داشتن یک وب سایت چند زبانه لازم است قالبی طراحی شود تا هر دو حالت RTL (راست به چپ) و LTR (چپ به راست) را پشتیبانی کند. برای نیل به این مقصود، می توان از دو تکنیک مختلف که در جاوز فراهم شده است بهره برد. این دو تکنیک عبارتند از تفکیک Layout و تفکیک Style

۱- تفکیک Layout: در این شیوه دو فایل مجزا به نام های layout.html و layout.rtl.html خواهیم داشت که به ترتیب برای حالت های LTR و RTL مورد استفاده قرار خواهند گرفت. طبیعی است هر یک از این دو می تواند فایل css اختصاصی خود را داشته باشد مثلاً style-ltr.css برای قالب اول و style-rtl.css برای قالب دوم. بدین ترتیب، جاوز بسته به زبان انتخاب شده برای وب سایت و به صورت خودکار یکی از دو فایل layout.html و layout.rtl.html را بارگذاری می کند. مزیت این روش آنست که ساختار قالب در حالت LTR متفاوت با ساختار آن در حالت RTL می باشد. توجه داشته باشید که هر دو فایل در کنار هم و در یک دایرکتوری قرار دارند و متعلق به یک قالب هستند و این کار با ساخت دو قالب مجزا، تفاوت خواهد داشت.

۲- تفکیک Style: از آنجا که تفاوت یک قالب LTR با نمونه RTL آن بیشتر به Style ها و کدهای CSS مربوط می شود تا ساختار قالب، می توان از تفکیک Style ها به جای تفکیک Layout استفاده کرد. این کار با استفاده از متغیر {dir.} امکان پذیر می باشد. همانطور که در بخش اول مقاله گفته شد، این متغیر برای زبان های RTL مقدار rtl. را به خود می گیرد. به این ترتیب کافیست پس از ساخت فایل layout.html ، دو فایل CSS مجزا به نام های style.css و style.rtl.css اولی برای حالت LTR و دومی برای حالت RTL ایجاد کنیم و آنها را به صورت زیر به فایل layout.html پیوند دهیم:



بدین ترتیب یک فایل layout.html خواهیم داشت با دو فایل css که جاوز بر حسب شرایط و به صورت خودکار یکی از این دو را بارگذاری خواهد کرد. توجه داشته باشید که طراحی ساختار فایل layout.html در این حالت نیاز به تخصص و دقت بیشتری دارد چرا که می بایست در هر دو حالت LTR و RTL کار کند.

ساخت قالب های Cross Browser

یک قالب خوب قالبی است که با تمامی مرورگرها سازگاری داشته باشد. ساخت چنین قالبی اگر چه غیر ممکن نیست اما کار دشواری است و مستلزم صرف ساعت ها وقت برای تست قالب در مرورگرهای مختلف. راهکار دیگر این است که برای هر مرورگر یک قالب مجزا اختصاص یابد. به عبارت بهتر بتوانیم پس از تشخیص مرورگر فرد بازدید کننده، قالب مخصوص به همان مرورگر را بارگذاری کنیم. این کار در حالت عادی امکان پذیر نیست ولی با امکاناتی که جاوز در اختیار شما قرار می دهد به راحتی شدنی است. کافی است مانند روشی که برای ساخت قالب های چند زبانه بکار بردیم، از تکنیک تفکیک Style ولی این بار برای مرورگرها استفاده نماییم. کلید حل مسأله استفاده از متغیر {browser.} می باشد که توضیح آن پیشتر داده شد. مشابه روش تفکیک Style در قالب های چند زبانه، از کد زیر برای فراخوانی فایل css مربوطه استفاده کنید:



لازمه این کار ایجاد فایل css اختصاصی برای هر مرورگر با استفاده از کلمات کلیدی مربوطه می باشد:
style.opera.css - style.firefox.css - style.ie.css - style.safari.css - style.chrome.css , ...
همچنین می توان از تکنیک پیشرفته تری در این زمینه بهره برد. از آنجا که بسیاری از کدهای مورد استفاده در فایل های css برای همه مرورگرها مشترک است، می توانید این کدهای مشترک را در فایل style.css قرار داده و تنها کدهای اختصاصی هر مرورگر را در فایل مربوط به آن قرار دهید. بدین ترتیب در مصرف منابع صرفه جویی کرده اید و مدیریت قالب در این حالت ساده تر خواهد بود. نحوه فراخوانی فایل css به همان شیوه قبلی است:



در این حالت علاوه بر اجرای فایل css اختصاصی هر مرورگر، فایل style.css که مشترک بین تمام مرورگرها است نیز اجرا می شود. ضمناً چنانچه مرورگری فاقد فایل اختصاصی باشد، صرفاً همان فایل style.css برایش ارسال خواهد شد.
  • ترکیب متغیرهای {dir.} و {browser.} به صورت همزمان نیز امکان پذیر است. به عنوان نمونه در کد زیر یک قالب Cross Browser چند زبانه خواهیم داشت:


روش نامگذاری فایل ها در این حالت به عنوان مثال به صورت style.opera.css و style.opera.rtl.css خواهد بود.

سفارشی کردن خروجی ابزارها

در بخش های قبلی فرا گرفتید که چگونه با تعریف بخش(Section)ها درون فایل layout.html، محل قرار گرفتن ابزارها را تعیین کنید اما در خصوص نحوه تغییر شکل خروجی ابزارها مطلبی گفته نشد. ابزارها نیز هر کدام دارای یک یا چند قالب جهت نمایش می باشند. این قالب ها در فایل هایی با پسوند html که ساختار آن شبیه به فایل layout.html است، تعریف می شوند و محل قرار گرفتن آنها دایرکتوری templates واقع در دایرکتوری ابزار مربوطه می باشد. به عنوان مثال برای ابزار منو، فایل های قالب در مسیر gadgets/Menu/templates قرار دارند. تعداد قالب ها بستگی به گستردگی ابزار دارد. هر چه تعداد رویدادهای یک ابزار و در نتیجه خروجی های آن بیشتر باشد بر تعداد فایل های قالب نیز افزوده می گردد. ضمن اینکه برخی ابزارها علاوه بر سمت وب سایت، دارای قالب های مجزا برای بخش مدیریت نیز می باشند. وجه تفکیک این دو، کلمه Admin می باشد یعنی فایل هایی که با کلمه Admin شروع می شوند مربوط به بخش مدیریت و بقیه مربوط به سمت وب سایت می باشند مانند: Menu.html و AdminMenu.html

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










  • در قالب وب سایت، بخش ها صرفاً حاوی متغیر {ELEMENT} هستند در حالی که محتوای بخش ها در قالب ابزار می تواند ترکیبی از تگ های html و متغیرها باشد.
  • در ساختار تعریف شده برای قالب ابزار، امکان تعریف بخش های تودرتو وجود دارد. یکی از کاربردهای بخش های تودرتو در این ساختار ایجاد تکرار (loop) می باشد بدین معنی که بخش داخلی چندین بار اجرا شده و هر بار متغیر داخلی با مقادیر جدید مقداردهی می شود. به عنوان نمونه در مثال بالا چنانچه یک منو با پنج آیتم داشته باشیم، بخش داخلی (menu_item) پنج بار اجرا شده و در هر بار تگ های li و a تکرار و متغیرهای {link} و {item} با یکی از گزینه های منو مقداردهی می شوند. نتیجه، یک لیست با پنج آیتم مختلف خواهد بود.
  • تفاوت دیگر ساختار قالب در ابزارها مقوله متغیرها است. در قالب وب سایت، متغیرها مشخص و تعداد آنها ثابت است ولی در قالب ابزارها، هر ابزار متغیرهای مختص خودش را دارد که در کد مربوط به ابزار تعریف شده است و متغیرهای بکار رفته در یک ابزار قابل استفاده در سایر ابزارها نمی باشد. همچنین متغیرهای مورد استفاده در قالب وب سایت، برای ابزارها نامعتبر و غیر قابل استفاده خواهد بود.
  • برای آشنایی بیشتر با ساختارهای بکار رفته در قالب ابزارها، مراجعه به ابزارها و بررسی فایل های قالب، بهترین مرجع خواهد بود.
با توضیحاتی که داده شد، به این موضوع می پردازیم که چگونه می توان نحوه نمایش خروجی یک ابزار بر روی وب سایت را تغییر داد. چنانچه تغییرات مورد نظر صرفاً با اعمال Style امکان پذیر باشد، کار بسیار ساده خواهد بود. در طراحی قالب ابزارها این پیش بینی صورت گرفته است و تقریباً تمامی تگ های اصلی موجود با شناسه(id)ها و کلاس(class)ها نامگذاری شده اند. از اینرو کافیست از آنها در فایل css وب سایت استفاده کرده و استایل های مورد نظر را درج کنید تا تغییرات لازم بر روی قالب ابزار اعمال شود.

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

یک دایرکتوری به نام خود ابزار و در داخل دایرکتوری قالب وب سایت (کنار فایل layout.html) ایجاد کنید. حال فایل های قالب مربوط به ابزار موردنظر که قصد تغییر آنها را دارید در این دایرکتوری کپی نمایید. به عنوان مثال چنانچه نام قالب مورد نظر bamboo باشد، مسیر فایل مذکور برای ابزار منو عبارت خواهد بود از:

data/themes/bamboo/Menu/Menu.html


حال تغییرات مورد نظر خود را بر روی این فایل اعمال نمایید و سپس استایل های مربوطه را در فایل css وب سایت وارد نمایید. نتیجه اینکه به ازای هر ابزاری که قصد تغییر در ساختار قالب آنرا دارید، می بایست یک دایرکتوری به نام همان ابزار و حاوی فایل های قالب مربوطه، در دایرکتوری themes داشته باشید. این شیوه علاوه بر اینکه مانع از تغییر در فایل های اصلی ابزارها می شود این مزیت را داراست که قالب شما استقلال خود را حفظ کرده و تغییرات داده شده منحصر به دایرکتوری قالب شما خواهد بود.
  • این شیوه در مورد فایل های قالب بخش مدیریت (AdminMenu.html به عنوان مثال) غیر عملی است.
  • تکنیک تفکیک Layout در مورد ابزارها نیز قابل استفاده است. به عنوان مثال در مورد ابزار منو می توانیم دو فایل با نام های Menu.html و Menu.rtl.html به ترتیب برای زبان های LTR و RTL داشته باشیم.
سفارشی کردن صفحات خطا
    سه خطای رایج که به هنگام پیمایش وب با آن مواجه می شوید به قرار زیرند:
  • 403 (Forbidden): دسترسی غیرمجاز
  • 404 (Not Found): عدم وجود صفحه درخواستی
  • 503 (Service Unavailable): عدم سرویس دهی موقت
جاوز، خطاهای مذکور را تشخیص و پیغام مربوطه را نمایش می دهد. این پیغام ها از طریق ابزار زبان ها قابل تغییر می باشند. اما از آنجا که صفحات حاوی پیغام خطا به صورت پیش فرض فاقد قالب و شکل ظاهری مناسب می باشند، امکان تخصیص قالب به آنها توسط جاوز فراهم شده است. برای این منظور کافیست به ازای هر خطا، یک فایل با نام شماره خطا و از نوع html ایجاد و آنرا در دایرکتوری قالب مورد نظر قرار دهید. در این صورت نام فایل ها عبارت خواهند بود از:

403.html - 404.html - 503.html


ساختار فایل ها دقیقاً همان ساختار فایل layout.html است با این تفاوت که تنها دارای یک بخش (Section) و آن هم با نام شماره خطا و حاوی دو متغیر {title} و {content} جهت نمایش عنوان و متن خطا می باشد. سایر متغیرهای layout.html در اینجا نیز معتبر خواهند بود. یک محتوای حداقلی برای خطای 403 به شکل زیر است:







  

  

{title}

{content}



مثال زیر یک نمونه واقعی از محتوای فایل html.403 می باشد:











  

  {site-title}

  

  

  

  





  

{title}

{content}





بخش اول مقاله - اصول اولیه ساخت قالب جاوز

نشان‌ها

تازه‌ترین نوشته‌ها - همه دسته‌ها