برای کامنت گزاری در 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