مقدمه
در این مطلب ابتدا سعی می‌کنیم تعاریف اولیه و مفاهیم مورد نیاز برای پیاده سازی یک قالب جدید برای دات نت نیوک را توضیح داده و در خلال آن برای درک بهتر یک اسکین جدید پیاده‌سازی کنیم.
مفاهیم پایه
دات نت نیوک از دو نوع اسکین 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 است تا همواره یک نسخه از قالب را بیرون از دات نت نیوک داشته باشیم.
