---
# System prepended metadata

title: Html Pug - Basic
tags: [HTML-CSS]

---

# 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 宣告