ایجاد اسکین جدید برای دات نت نیوک 7 - قسمت اول
در این مطلب ابتدا سعی می‌کنیم تعاریف اولیه و مفاهیم مورد نیاز برای پیاده سازی یک قالب جدید برای دات نت نیوک را توضیح داده و در خلال آن برای درک بهتر یک اسکین جدید پیاده‌سازی کنیم.
مفاهیم پایه
دات نت نیوک از دو نوع اسکین HTML و ASCX پشتیبانی می‌کند. اسکین‌های HTML نیز هنگام نصب به ASCX تبدیل می‌شوند. هر اسکین شامل دو بخش است، اسکین (Skin) و کانتینر (Container) که می‌توانند در قالب یک پکیج (Package) و یا به صورت جداگانه نصب شوند.
اصطلاحات و ترمینولوژی
Layout: هر اسکین می‌تواند شامل چند چیدمان (Layout) باشد. منظور از چیدمان داشتن محل‌های مختلف قرار گیری المان‌های صفحه است.
فایل‌های Stylesheet: همچنین برای هر اسکین یک skin.css و برای هر چیدمان داخل آن یک فایل CSS با نام آن وجود خواهد داشت. فایل‌های CSS توضیح داده شده در صورت وجود به صورت خودکار وارد می‌شوند. به عنوان مثال برای چیدمان index.html فایل‌های skin.css و index.css در صورت وجود بارگذاری می‌شوند.
Pane: هنگام تعریف چیدمان‌ها (Layout) باید ناحیه‌هایی که قرار است در محیط مدیریت محتوای آن تعیین شوند را مشخص کنیم. به این ناحیه‌ها که در فایل‌های چیدمان تعریف می‌کنیم Pane گفته می‌شود. اینکه هر Pane چگونه پر شود کار کانتینر (Container) است.
Container: یکی از بخش‌های سیستم اسکین دات نت نیوک است. خروجی هر ویجت قبل از قرار گیری در اسکین داخل کانتینر قرار می‌گیرد. به عنوان مثال یک کانتینر می‌تواند شامل سربرگ (Header) و بدنه اصلی (Body) باشد و کانترینر دیگری تنها شامل بدنه اصلی باشد.
به عنوان مثال در قالب فوق کادرهای قرمز هرکدام یک Pane هستند، کانتینر برای Pane سمت چپ دارای سربرگ و بدنه اصلی و برای سمت راست تنها دارای بدنه اصلی است.
Skin object: برخی المان‌ها بین قالب‌های مختلف مشترک هستند و وجود دارند. به عنوان مثال؛ لوگو، باکس جستجو، لینک‌های ورود و ثبت نام، متن حق نشر و غیره. این موارد تحت عنوان Skin object به صفحه اضافه می‌شوند. هنوز ممکن است ترجیح دهید برخی از این موارد بعدا توسط محیط مدیریت در سایت در Pane هایی که تعریف کرده اید قرار داده شود که در این صورت Skin object نیستند.
اولین اسکین
گام اول: اولین اسکین می‌تواند تنها شامل کد زیر باشد، هیچ فایل CSS یا JS لازم نیست حتما وجود داشته باشد. اما حتما باید حداقل یک ناحیه (Pane) با نام ContentPane تعریف شده باشید. این کد را در فایلی با نام Index.html ذخیره کنید.
<!DOCTYPE html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>ّFirst Skin</title> </head> <body> <div id="ContentPane" runat="server"></div> </body> </html>
همانطور که قبلا گفته شد، هنگام نصب این اسکین آنچه داخل تگ body است به یک فایل ASCX تبدیل می‌شود. فایل تبدیل شده شبیه به کد زیر خواهد بود.
<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %> <div id="ContentPane" runat="server"></div>
بعد از تبدیل HTML به ASCX از این به بعد دات نت نیوک با فایل ASCX کار می‌کند و دیگر با نسخه HTML کاری ندارد. اینکه تغییرات احتمالی را بعدا در فایل HTML اعمال کنید و دوباره آن را به ASCX تبدیل کنید و یا مستقیم با فایل ASCX کار کنید به سلیقه شما ربط دارد. هر یک از این دو روش مزایا و معایب خود را دارند. اما با توجه به این نکته که دات نت نیوک هر وقت که بخواهیم HTML را به ASCX تبدیل می‌کند، ترجیح کار با نسخه HTML است تا همواره یک نسخه از قالب را بیرون از دات نت نیوک داشته باشیم.
گام دوم: تبدیل نسخه HTML به ASCX و نصب قالب
در مسیر Portals>_default>Skins پوشه‌ای برای اسکین جدید بسازید، سپس فایل Index.html را داخل این پوشه کپی کنید.
در این مرحله یاید وارد محیط مدیریت دات نت نیوک شویم و این فایل را به ASCX تبدیل کرده و آن را به یک صفحه انتصاب دهیم. برای این کار مراحل زیر را طی کنید:
1- با اکانت مدیر ارشد (Speruser) وارد شوید (این اکانت معمولا همان host است). با توجه به اینکه فایل‌های اسکین حاوی کد‌های اجرایی (executable) هستند برای بارگذاری فایل باید دسترسی لازم وجود داشته باشد.
2- از منوی مدیریت وارد بخش مدیریت اسکین شوید. در این صفحه کار تبدیل فایل‌های HTML به ASCX را انجام خواهیم داد.
از لیست اسکین‌ها نام اسکین جدید خود را انتخاب کتید و روی گزینه Parse Skin Package کلیک کنید. با اینکار دات نت نیوک پوشه اسکین را اسکن می‌کند و فایل‌های HTML موجود را به ASCX تبدیل می‌کند. هر فایل HTML به عنوان یک چیدمان (Layout) در نظر گرفته می‌شود.
بعد از اتمام کار Parse Skin Package گزارشی از کارهای انجام شده در زیر آن نمایش داده می‌شود. در این گزارش دنبال خطوط مربوط به خطا (Error) بگردید. در صورتی که خطایی در Parse کردن رخ نداده باشد. اسکین جدید قابل استفاده است. نمونه خروجی در زیر آمده است.
Begin processing file: Index.html Formatting control directive : <%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %> Writing file : Index.ascx End processing file: Index.html
3- در این مرحله میتوانید اسکین جدید را به یک صفحه انتصاب دهید و خروجی کار تا این مرحله را مشاهده کنید. برای اینکار در یک صفحه جدید و یا یکی از صفحاتی که قبلا در دات نت نیوک ساخته اید به قسمت تنظیمات رفته و اسکین جدید را برای آن فعال کنید.
