用户投稿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 | conhtml呈现为
会发现 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 Documentlink(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.jadeblock 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.jadeblock navbar include partials/navbar.jadeblock 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那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷
微信扫一扫打赏
支付宝扫一扫打赏
