ایجاد قالب اختصاصی

از طریق امکان جدید سپهر شما می توانید به ساده ترین شکل قالب مورد نظر خود را ایجاد نمایید. آیا شما HTML و CSS بلدید؟
در صورتیکه جواب مثبت است به شما تبریک می گوییم زیرا شما می توانید به راحتی اولین قالب خود را ایجاد نمایید.

شروع کنید!

برای شروع کافیست قالب خود را در هر ویرایشگری که راحتید باز کنید. شما یک فایل index.htm و چند فولدر برای عکسها ، فایل های CSS و فایل های JS دارید . برای مثال قالبی که طراحی کرده اید به شکل زیر است.

[عکس دایرکتوری قالب]

ساختار تگ ها:

در زبان اختصاصی سپهر که از این به بعد آنرا سپید می نامیم. تگ ها با علامت $ شروع شده و با $ به پایان می رسند . برای مثال فرض کنید مایلید در بخشی از صفحه عنوان وب سایت خود را نمایش دهید .متغییری که عنوان وب سایت را ذخیره می کند $sitetitle$ است. در نتیجه مثلا کد شما چیزی شبیه کد زیر خواهد بود:

<h1> $sitetitle$  </h1>

برای مشاهده ی لیست کامل متغیر های سپید به این لینک مراجعه کنید.

شرط:

همه ی شما بارها از if استفاده کرده اید . در سپید هم امکان تعریف جملات شرطی وجود دارد. فرض کنید می خواهیم چک کنیم که اگر کاربر لاگین کرده است به کاربر یک پیغام خوش آمد نمایش دهیم . متغیری که نشان می دهد کاربر لاگین کرده است $islogin$ است. این متغییر در صورتیکه کاربر لاگین کرده باشد مقدار True و در غیر اینصورت False بر می گرداند. قطعه کد زیر پیغام خوش آمد به کاربر لاگین کرده و پیغام عضو شوید را به کاربر لاگین نکرده نمایش می دهد:

$if (islogin)$

<p> خوش آمدید </p>

$else$

<p> لطفا عضو شوید </p>

$endif$

حلقه ها:

اساسی ترین بخشی که در سایت مورد استفاده قرار می گیرد. حلقه هاست. برای مثال فرض کنید مایلید لیست کالا ها را در یک لیست شماره دارد به شکل زیر نمایش دهید:

<ul>
<li>کالای اول</li>
<li>کالای دوم</li>
<li>کالای سوم</li>
<li>کالای چهارم</li>
</ul>

برای اینکار ابتدا باید کالاهای خود را انتخاب و در یک متغییر ذخیره کنیم. برای اینکار از تگ Define  استفاده می کنیم.برای مثال در کد زیر ما یک متغیر به نام myproducts تعریف کرده و سپس کالاهای مورد نظر خود را در آن میریزیم:

$define_myproducts:{source:'products',count:'4'}define$

اکنون درون متغیر myproducts  چهار کالای اول قرار گرفته است که به هر صورت می توان از آن استفاده کرد.

<ul>
$myproducts:{
<li> $it.title$</li>
}$