خلاصه Pug

برای کامنت گزاری در pug  کافی است که جلوی تگ مربوطه یک // قرار دهیم خودش میاد و کل محتوای درون این تگ رو کامنت قرار میدهد 

همچنین برای اضافه کردن استایل ها به صورت external  به صورت زیر عمل میکنیم 

link(rel='stylesheet' href=" address " )

برای دادن استایل هامون به صورت interline به صورت زیر عمل میکنیم 

 style.
       p.text{  color:red } 
       .
       .
       .

نکته : در ساختار pug برای کار کردن با حلقه ها for و  each  برای ما یک کار رو انجام می دهند 

ul
   for n in [1,2,3,4,5]  
       li.nav-item    
             a.link(href='#')
   else
       strong  هیچ ایتمی وجود ندارد         

که ساختار کد بالایی میاد برای ما  در داخل تگ ul  به تعداد عناصر ارایه امون تگ li  با کلاس مربوطه که درون هر تگ li  یک تگ a با کلاس مربوطه وجود دارد همچنین اگر ارایه ما خالی باشد میره سراغ else

برای استفاده از ساختار های شرطی ما میتوانیم بیایم و از ساختار های شرطی استفاده کنیم 

مثل                     if               else                 else if  

   -let user = {name: " vahid " ,loggedIn:false , lastLogin:8};
   if  user.loggedIn 
        h3 خوش آمدید !  #{user.name}  
   else if  user.lastLogin < 8
        p خرین زمان ورود شما #{user.last}     
        p 
          a(href="./Loggin")  دوباره وارد شوید
   else 
        form(action="")
          input(type="text")
          input(type="password")
          input(type="button")

استفاده از  case statement ها که در داخل پاگ به صورت case  when  default  هستش 

   -const order = 'loggedOut'
    case order
      when 'loggedIn'
        a(href="#") پنل کاربری
      when 'loggedOut'
        form(action="")
           input(type="text")
           input(type="text")
           input(type="text")
      default 
         p نام مشخق  

برای ماژولار کردن پاگ میاد و با استفاده از کلمه کلیدی include همان کاری که در css برای ماژولار کردن فایل ها انجام میدادیم رو برای ما انجام میدهد

برای این کار بهتره یک پوشه با نام includes  استفاده بکنیم و با استفاده از این آدرس فایل pug دیگه امون رو میدهیم

خلاصه اصلاح شده پاگ با مطالعه داکیومنت های اصلی

تعریف pug : pug یک template engine  برای html  هستش مثل sass برای css  که میاد ساختار کدنویسی html رو برای ما راحت تر میکند 

مفاهیم مهم : 

1- Tags & plane Text : 

 یکی از مهمترین مفاهیم در استفاده از  پاگ مفهوم nesting اش برای تگ ها هستش که ما با تو در تو نویسی و صرفا نام تگ میتونیم بیایم و کد هامون رو قرار دهیم که کلن برای استفاده از کدهامون دو تا شیوه هست

div.emad           ===> nesting
  h1 hi emad

div.emad:h1 hi emad    ===> :

نکته : ما وقتی برای یک تگ میایم و نام کلاس فقط تعیین میکنیم یا فقط نام آیدی شو تایین میکنیم و نام تگ رو قرار نمیدهیم به طور پیش فرض برای ما از تگ div استفاده میکند

ما به طور عمومی برای نوشتن یک متن برای تگ هامون میومدیم و در جلوشون می نوشتیم اما هنگامی که متن های ما طولانی هستند ما می توانیم با استفاده از nesting و | بیایم و اون هارو بهتر بنویسیم وهمچنین برای تگ هایسی که کلاس های طولانی تری یا عملیات های برای تگ دارند از . میتوانیم استفاده کنیم

p
  | The pipe always goes at the beginning of its own line,
  | not counting indentation.  
  //  مثال های دوم برای .
  
  div
  p This text belongs to the paragraph tag.
  br
  .
    This text belongs to the div tag.
    
  script.
  if (usingPug)
    console.log('you are awesome')
  else
    console.log('use pug')

2 - js و case و Iteration و Conditionals : 

برای استفاده از  جاواسکریپت در داخل پاگ از - استفاده میکنیم که حالا یا جلوش و یا پایین اش قرار میدهیم کدهامون رو و برای استفاده از یک عبارت جاوااسکریپتی در کد ها باید اون رو در داخل { } # قرار دهیم

نکته : unless به این معنی هست مه برابر این مقدار نیست همان else

case when
----------
-var number = 5  استفاده از جاوااسکریپت
case number  
  when  10
     h1 ali       
  when  10
     h1 reza
     -break
  default
     p you have #{friends} friends 
     

each in  & for in

 -var a = ['ali','rez','dfsdf']
 ul
   each val,index   in  a
      li= index + ' : ' + val

unless استفاده که مخالف مقدار if هستش


-var ali = " li "
  ul 
   if ali  == "ali "
        li=ali
   unless ali == 'ali'
       li ists dont ali

- var user = {description: 'foo bar baz'}
- var authorised = false
#user
  if user.description
    h2.green Description
    p.description= user.description
  else if authorised
    h2.blue Description
    p.description.
      User has no description,
      why not add one...
  else
    h2.red Description
    p.description User has no description

3- Atribute : برای قرار دادن ویژگی برای تگ هامون باید اون هارو در داخل ( ) قرار دهیم

 input(type="text")
 
 input(
        type='checkbox'
        name='agreement'
        checked
                  )

4- mixin :  ما همین طور که برای sass می توانستیم بیایم و میکسین تعریف کنیم در داخل پاگ هم می توانیم بیایم تعریف کنیم فقط موقع استفاده از آن ها باید از + استفاده کنیم 

//- Declaration
mixin pet(name)
  li.pet= name
  
//- Use
ul
  +pet('cat')
  +pet('dog')
  +pet('pig')

5- includes :  ما با استفاده از خاصیت ماژولار پذیری پاگ می توانیم بیایم و فایل هامون رو جدا کنیم و بعد با استفاده از includes  اون هارو به فایل های اصلی مون اضافه کنیم  همچنین بهتر است فایل هایی که اون هارو تبدیل به قسمت هایی کوچک تر میکنیم رو در داخل پوشه includes  قرار دهیم

//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 My Site
    p Welcome to my super lame site.
    include includes/foot.pug

7- extends : ما یک موقعی هست در داخل فایل های html امون یکسری چیز ها هستند که کاملا مشترک هستند مثل header ها یا footer ها برای بهتر کنترل کردن این موارد و تقسیم بندی و ماژولار کردنشون بهتر هستش که بیایم و از این ویژگی استفاده کنیم به این صورت که در ابتدا  بیایم  و کد های header امون رو در یک فایل جداگانه قرار دهیم و تعریف کینم و همگام تعریف  با استفاده از کلیدواژه block به اون یک نامی بدهیم 

برای مثال

<!DOCTYPE html>
html(lang="en")
    head
      block head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
    body
         h1 emad
         h2 this file is index  

حال در جایی که لازم داریم کافی است بیایم و با استاده از extnds آدرس فایل را بهش بدهیم و در نهایت با استفاده از کلید واژه های block append بیایم و از اون استفاده بکنم به صورت زیر استفاده بکنیم 

extends index.pug

block append head