# Html Pug - Basic ###### tags: `HTML-CSS` ## 一 . 功用與基本語法 ### (一) . 介紹 ### (二) . 基本語法 - $pug\ cli$ : cli介面，將pug檔轉為html。 1. 安裝 ： ```npm install -g pug-cli```。 2. 使用 ： 常用三個參數，```-w -o -P```。 - ```-w``` : 表示wacth，為監聽某個folder下的pug檔。 - ```-o``` : 表示output，為監聽某個pug檔改變時，同時新生成html並存放於folder下。 - ```-P``` : 表示生成的html檔必須分隔明確。 ``` $ pug -w './pug檔的folder' -o '輸出html檔的folder' -P ``` - 基本語法 ： 1. 用tab分割巢狀結構 ： 似python。 2. 不用end tag。 3. tag和tagContent用空白分割。 4. 註解使用```//```即可。 ```pug= doctype html html head body p test content ``` ```htmlembedded= <!DOCTYPE html> <html> <head></head> <body> <p>test content</p> </body> </html> ``` - 多重textContent : 1. 直接在tag下加入換行內容會直接變成一個新的tag。 3. 語法 ：在tag尾巴加上『.』符號。 ```pug= html head body p. Test Content p Other Content ``` ```htmlembedded= <!DOCTYPE html> <html> <head></head> <body> <p> Test Content </p> <p>Other Content</p> </body> </html> ``` - ```id class```屬性 ： 用selector宣告 1. ```id``` : 可以直接使用『#idName』在tag後面。 2. ```class``` : 可以直接使用『.className』在tag後面。 3. 使用多重內容時，注意必須在最後一個位置加入『.』。 ```pug= doctype html html head body p.Test-Class. Test Content p#Test-id.Test-Class Other Content ``` ### (三) . CSS Attribute 寫法 - ```CSS```屬性 ： 1. 語法 ： 加入```()```緊接在tag後面，```()```內的CSS寫法同原生。 2. 多行屬性時，直接分行即可，但要在同一個()內。 ```pug= input( type= 'checkbox' name= 'agreement' ) ``` - 使用JS : 1. 可以在()中加入{}包住的JS expression。 2. 可以用```-```後加入加入JS的expression，僅限單行。 3. 也可以併用，達到條件判斷。 ```pug= input( type='text' name='user' class={5>2 ? 'Test-01' : 'Test-02'} ) -- const Test=['Test-01', 'Test-02'] input( type='password' class={7>3 ? Test[0] : Test[1]} ) ``` - JS物件綁定 ： 1. 單一屬性 ： 可以用JS物件組成的key-value pair指定固定的屬性。 2. 全部屬性 ： key-value變成Html-attribute to value，再用```&attribute=value```設定。 ```pug= - const Test={color:'red', background-color: 'black' } - const Test01={href:'http://localhost3030', alt="test"} p( style=Test ) a&attribute=Test01 ``` ### (四) . 使用CSS style - inline的CSS : 同上，用```()```包住一切的東東。 - head的style : 同一般的tag，用style包住，注意要加入『.』表示多重內文。 - include CSS : 視link tag為另一個tag，並包住其屬性。 ```pug= head link(rel='stylesheet' href='./style.css') style. Test{ color : red } ``` ## 二 . 常用樣板語法 ### (一) . for - for的語法 ： 1. 宣告迴圈 ： 打上```for iterVar in iterableThing```。 2. 使用方法 ： loop visited一個可迭代的陣列，下面tag要空一個tab。 3. 指定變數 ： 再loop後的tag加上『=』並使用JS expression。 ```htmlembedded= for n in ['Test-01', 'Test-03', 'Test-03'] p=n ``` - for的其它用法 ： 1. 讀取index值：可以在in前面加入兩個變數，第二個代表index值。 2. 迭代object的key-value : in前面變數代表變為value-key。 ```htmlembedded= for n, i in ['Test-01', 'Test-03', 'Test-03'] p=i+'-'+n for value, key in {name:'Steven', age: 20} p=key+'-'+value ``` ### (二) . if 和 switch - if的語法 ： 1. 宣告判斷式 : 打上```if(空格)JS expression``` 2. 使用方法 ： 再加上else或else if於同一個tab層。 - case的語法 ： 1. 宣告case : 用case代表常用的switch，用when代替常用的case。 3. 不用加上break : 只有在需要空白內容時，才加入break。 4. 可以用『：』變成block語法。 ```htmlpug= - const ``` ### (三) . include 宣告