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