pug 基础介绍(1) DAY99

pug 前身就是 jade (改名而已)

这里我们来看 pug 的基础写法

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
        link(rel="stylesheet", href="stylesheet/all.css")
        script(src="js/all.js")
    body
    h1 
        span bb
        | cc
    br 
    | con

html呈现为

会发现 pug 没有结尾标签
而是利用一个 tab 来区隔

当然 pug 也可利用 emmet 来撰写
输入 ul>li*3>a{link} 并按下 tab

 ul
        li
            a(href="") link
        li
            a(href="") link
        li
            a(href="") link

若要加 class 该怎麽加呢??

.container
        form(action="")
            label(for="email") 请输入email
            input#email.form-control(type="text")

这里要注意 id 的写法 #email

且 input 这里的class 还有另一种写法(写在括号内)

    .container
        form(action="")
            label(for="email") 请输入email
            input#email(type="text" class="form-control")

h1: a(href=""): span 连结

 h1
    a(href="")
        span 连结

上述这两种结果会是一样的
如果不想写这麽多层可以加上冒号(:)

这里也介绍一个 html 快速转换为 pug的工具
 https://html-to-pug.com/

制作 HTML 样板

在我们制作样板的时候
会用到一些语法

include (载入外部区块)

block

作为其他页面的内容显示区域
与 Extend 一起使用

extend
-将其他页面做为延伸
-内容会在 block 出现

这里我们先介绍 include
这里我们把 head 的内容储存成 head.jade
并在source下开一个 partials资料夹
储存於此

head.jade

meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
link(rel="stylesheet", href="stylesheet/all.css")
script(src="js/vendors.js")

navbar 也是
navbar.jade

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
            a.navbar-brand(href='#') Navbar
            button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation')
                span.navbar-toggler-icon
            #navbarNav.collapse.navbar-collapse
                ul.navbar-nav
                    li.nav-item.active
                        a.nav-link(href='#')
                        | Home 
                        span.sr-only (current)

接着在 index.jade
加入 include

<!DOCTYPE html>
html(lang="en")
    head
        include partials/head.jade
    body
        include partials/navbar.jade

这样 include 就完成了~~

再来要介绍 block 与 extend (block 会与 extend 一起使用)

我们先开一个 layout.jade 放在 source 资料夹内
并将 index.jade 的

<!DOCTYPE html>
html(lang="en")
    head
        include partials/head.jade
    body
        include partials/navbar.jade

剪下贴上并加上 block content
结果(layout.jade)

<!DOCTYPE html>
html(lang="en")
    head
        include partials/head.jade
    body
        include partials/navbar.jade
        block content

所以这时候我们 index.jade 只剩下原本的内容

h1 
    span bb
    | cc
    br 
    | con
    ul
        li
            a(href="") link
        li
            a(href="") link
        li
            a(href="") link
    h1: a(href=""): span 连结
    h1
        a(href="")
            span 连结
    .container
        form(action="")
            label(for="email") 请输入email
            input#email(type="text" class="form-control")

这里就开始有关於 extend 啦
我们必须把 index.jade 延伸到 layout.jade上
并要用 block content 来标出你要延伸的内容(记得加上後内容要缩排)

extend layout.jade
block  content

    h1 
        span bb
        | cc
        br 
        | con
        ul
            li
                a(href="") link
            li
                a(href="") link
            li
                a(href="") link
        h1: a(href=""): span 连结
        h1
            a(href="")
                span 连结
        .container
            form(action="")
                label(for="email") 请输入email
                input#email(type="text" class="form-control")

且我们可以再增加一个 block (ex: block navbar)

extend layout.jade

block  navbar
    include partials/navbar.jade
block  content

    h1 
        span bb
        | cc
        br 
        | con
        ul
            li
                a(href="") link
            li
                a(href="") link
            li
                a(href="") link
        h1: a(href=""): span 连结
        h1
            a(href="")
                span 连结
        .container
            form(action="")
                label(for="email") 请输入email
                input#email(type="text" class="form-control")

别忘了在layout.jade 上也要增加 (block navbar)

<!DOCTYPE html>
html(lang="en")
    head
        include partials/head.jade
    body
        include partials/navbar.jade
        block content
        block navbar

那今天的介绍就到这里
若有任何问题或内容有误
都可以跟我说唷