Practical Node - Js - Building Real-World Scalable Web Apps (PDFDrive) - Trang-132-182

Machine Translated by Google
CHƯƠNG 4
Công cụ mẫu: Pug và

Tay lái
Công cụ mẫu là thư viện hoặc khung sử dụng một số quy tắc/ngôn ngữ để diễn giải dữ liệu và hiển thị
chế độ xem. Trong trường hợp ứng dụng web, dạng xem là các trang HTML (hoặc một phần của chúng),
nhưng chúng có thể là tệp JSON hoặc XML hoặc GUI trong trường hợp chương trình máy tính để bàn.
Đối với những bạn quen thuộc với khái niệm model–view–controller, các mẫu thuộc về view.
Trong các ứng dụng web, việc sử dụng các mẫu sẽ có lợi vì chúng tôi có thể tạo vô số trang
một cách linh hoạt với một mẫu duy nhất! Một lợi ích phụ khác là khi chúng ta cần thay đổi điều
gì đó; chúng ta có thể làm điều đó ở một nơi duy nhất.
Nếu chúng ta quay lại sơ đồ trong chương trước (cách tiếp cận API REST truyền thống
so với cách tiếp cận API REST), chúng ta có thể suy luận rằng các mẫu có thể được biên dịch
thành HTML ở phía máy chủ (cách tiếp cận truyền thống) hoặc phía máy khách (cách tiếp cận API REST).
Bất kể chúng ta thực hiện phương pháp nào, cú pháp của các thư viện vẫn còn nguyên vẹn.
Trong chương này, chúng tôi đề cập đến những điều sau đây:
• Cú pháp và tính năng của Pug
• Pug sử dụng độc lập
• Cú pháp tay lái
• Tay lái sử dụng độc lập
• Cách sử dụng Pug và Tay lái trong Express.js
• Dự án: thêm Pug mẫu vào Blog
113
© Azat Mardan 2018
A. Mardan, Node.js thực tế, https://doi.org/10.1007/978-1-4842-3039-8_4
Chương 4 Công cụ mẫu: Pug và Ghi đông
Pug Cú pháp và tính năng
Pug là anh em Node.js của Haml, theo nghĩa là nó sử dụng khoảng trắng và thụt đầu dòng như một
phần ngôn ngữ của nó. Giống như một chú pug thực thụ, chú Pug này có thể rất dễ thương và thân
thiện hoặc có thể cắn nát mông bạn nếu bạn không biết cách sử dụng. Do đó, chúng ta cần phải cẩn
thận để làm theo đúng cú pháp.
Bạn có thể theo dõi các ví dụ cú pháp Pug trong phần này trực tuyến, tại trang demo của
trang web chính thức (https://pugjs.org/api/reference.html) hoặc bằng cách viết các tập lệnh
Node.js độc lập (các ví dụ được trình bày trong phần “Cách sử dụng độc lập của Pug”, xuất hiện sau
trong chương này).
thẻ
Bất kỳ văn bản nào ở đầu dòng—theo mặc định—được hiểu là thẻ HTML. Ưu điểm chính của Pug là văn
bản này hiển thị cả thẻ đóng và thẻ mở cho phần tử HTML, cũng như các ký hiệu <></> . Do đó,
chúng tôi tiết kiệm được nhiều lần gõ phím khi các nhà phát triển viết bằng Pug! Điều rất quan
trọng là gõ càng ít càng tốt. Nó sẽ cho phép bạn không chỉ tránh những lỗi chính tả ngớ ngẩn mà
còn tránh bị chấn thương do căng thẳng lặp đi lặp lại trên tay.
Văn bản theo sau thẻ và khoảng trắng (ví dụ: thẻ <text>) được phân tích cú pháp dưới dạng
HTML bên trong (nghĩa là nội dung bên trong phần tử). Ví dụ: nếu chúng ta có mã Pug sau với thẻ h1
và p (phần tử). Sau tên thẻ/phần tử, có khoảng trắng, sau đó nhập văn bản:
thân hình
div
h1 Thực hành Node.js p Cuốn
sách duy nhất mà hầu hết mọi người sẽ cần.
div
chân trang &sao chép; ấn
Văn bản sau khoảng trắng đầu tiên trở thành nội dung của các phần tử đó. Đầu ra của mẫu ở trên
sẽ là <h1>, <p> và các phần tử khác có văn bản tương ứng bên trong chúng:
<body>
<div>
<h1> Node.js thực tế </h1> <p> Cuốn sách
duy nhất mà hầu hết mọi người sẽ cần. </p>
</div>
114
<div>
<footer> © Nhấn </footer>
</div>
</body>
Đoạn mã trước ở trên là một phần tử HTML <body> . Còn về một số thành phần HTML thú vị hơn để tạo
toàn bộ trang web bằng thẻ <head> và các thẻ khác thì sao? Chắc chắn. Bạn cũng có thể làm điều đó (hãy ăn
đi, React!). Dưới đây là ví dụ về cách xác định DOCTYPE và các thuộc tính phần tử như lang (dành cho html),
loại (dành cho tập lệnh), id và lớp cho div :
tài liệu html
html(lang="vi")
cái đầu
title Tại sao JavaScript tuyệt vời | CodingFear: lập trình và
hoàn cảnh con người
tập lệnh (loại = 'văn bản/javascript').
const a = 1
console.log(`Một số mã JavaScript ở đây và giá trị của a là
${a}`)
thân hình
h1 Tại sao JavaScript lại tuyệt vời
div(id="container", class="col")
p Bạn thật tuyệt vời
p Cố lên!
P.
JavaScript rất thú vị. Gần như tất cả mọi thứ
có thể được viết bằng JavaScript. Nó rất lớn.
Đầu ra sẽ chứa các thuộc tính được xác định bằng dấu ngoặc đơn (khóa=giá trị), chẳng hạn như id,
lớp, loại và lang. Đầu ra cũng sẽ có mã JavaScript sẽ được thực thi khi trang được xem trong trình
duyệt. Đầu ra cũng sẽ có văn bản trong <p>.
Một dấu chấm . sau tên phần tử hoặc dấu ngoặc đơn cho phép xác định văn bản trên một dòng mới và sử dụng
nhiều dòng như hiển thị trong phần tử p cuối cùng .
115
# có nghĩa đó là thuộc tính id , trong khi dấu chấm trong phần tử có nghĩa là một lớp
thuộc tính. Do đó, việc bỏ qua tên thành phần như chúng ta đã làm với #container.col sẽ tạo
ra <div> với vùng chứa id và lớp col. Xem cho chính mình:
<!DOCTYPE html>
<html lang="vi">
<đầu>
<title>Tại sao JavaScript lại tuyệt vời | CodingFear: lập trình và
hoàn cảnh con người</title>
< kiểu tập lệnh="văn bản/javascript">
const a = 1
console.log(`Một số mã JavaScript ở đây và giá trị của a là
${a}`)
</script>
</head>
<body>
<h1>Tại sao JavaScript lại tuyệt vời</h1>
<div class="col" id="container">
<p>Bạn thật tuyệt vời</p> <p>Cố
lên !</p>
<p>
JavaScript rất thú vị. Gần như tất cả mọi thứ
có thể được viết bằng JavaScript. Nó rất lớn.
</p>
</div>
</body>
</html>
Kiểm tra mã dưới đây mà không có tên thẻ/phần tử… không có gì?! Huh.
Bạn thấy đấy, khi bạn bỏ qua tên thẻ như trong #contaner.col, Pug sẽ sử dụng div, vì
vậy đoạn mã dưới đây:
#container.col
p Bạn thật tuyệt vời p Cố
lên!
116
trở thành một <div với vùng chứa id và lớp col:
<div class="col" id="container">
<p>Bạn thật tuyệt vời</p> <p>Cố lên !
</p>
</div>
Bạn có thể chơi với các ví dụ này bằng cách sử dụng mã nằm trong mã/ch4/pug-
example/pug- method-example.js. Đoạn mã này sử dụng các mô-đun pug npm và phương thức
render() của nó . Ví dụ: đây là tệp Nút và nó tạo HTML:
const pug = yêu cầu ('pug')
const pugTemplate = `cơ thể
div
h1 Node.js thực tế
p Cuốn sách duy nhất mà hầu hết mọi người sẽ cần.
div
chân trang &sao chép; ấn`
const htmlString = pug.render(pugTemplate, {pretty: true})
console.log(htmlString)
Cho đến nay, chúng tôi vừa xuất ra một số mã được lập trình sẵn mà ứng dụng
không thể sửa đổi được. Đây là tĩnh và không nhiều niềm vui. Hầu hết thời gian chúng
tôi muốn có một số tính năng động ở dạng biến cho phép ứng dụng tự sửa đổi đầu ra, đó
là HTML.
Biến/Địa phương
Các nhà phát triển Pug, Express và Node gọi dữ liệu được chuyển đến mẫu Pug là cục bộ.
Dữ liệu này có sẵn trong mẫu dưới dạng biến Nút thông thường. Để xuất giá trị của một
biến/cục bộ, hãy sử dụng =. Hãy xem xét một số ví dụ để làm cho bài học gắn bó.
Mã Pug này in các giá trị của tiêu đề và nội dung biến bằng ký hiệu = :
h1= tiêu đề
p= cơ thể
117
Các biến tiêu đề và nội dung được gọi là cục bộ . Chúng là dữ liệu để cung cấp cho mẫu Pug để tạo
HTML. Dữ liệu đến dưới dạng một đối tượng. Nó phải có các thuộc tính và các thuộc tính phải giống với tên
của các địa phương mà bạn muốn sử dụng, tức là tiêu đề và nội dung :
tiêu đề: "Hướng dẫn Express.js",
nội dung : "Sách toàn diện về Express.js"
Đầu ra HTML được tạo từ mẫu Pug và các địa phương hiển thị các giá trị của
các biến tiêu đề và cơ thể:
<h1>Hướng dẫn Express.js </h1>
<p>Sách toàn diện về Express.js</p>
Còn các thuộc tính phần tử HTML như href hoặc class thì sao? Bạn đã thấy một số
những điều này, đã có nhưng, chúng ta hãy tìm hiểu sâu hơn.
Thuộc tính
Các thuộc tính được thêm vào bằng cách đặt chúng vào trong dấu ngoặc đơn ngay sau tên thẻ. Chúng tuân
theo định dạng tagName(name=value) . Ngoài ra, nhiều thuộc tính cần được phân tách bằng dấu phẩy. Ví dụ:
mã Pug này có các thuộc tính khác nhau trên div, a và các phần tử khác:
div(id="content", class="main")
a(href="http://expressjsguide.com", title="Hướng dẫn Express.js",
target="_blank") Hướng dẫn Express.js
biểu mẫu (hành động = "/ đăng nhập")
nút (loại = "gửi", giá trị = "lưu")
div(class="hero-unit") Tinh gọn Node.js!
Mã mẫu Pug trước ở trên biến thành HTML sau với
các thuộc tính được hiển thị bên trong các phần tử HTML:
<div class="main" id="content"><a href="http://expressjsguide.com"
title="Hướng dẫn Express.js" target="_blank"> Hướng dẫn Express.js</a>
118
<form action="/login"><button type="submit" value="save">
</button></form>
<div class="hero-unit">Lean Node.js!</div>
</div>
Vâng, phần tử <a> nằm ngay trên cùng một dòng với <div>. Đó cũng là một bí ẩn đối với tôi.
Đôi khi, giá trị của một thuộc tính cần phải động. Đó là niềm vui hơn theo cách này! Trong trường hợp
này, chỉ cần sử dụng tên biến không có dấu ngoặc kép làm giá trị của thuộc tính.
Một mẹo khác là sử dụng đường ống hoặc |. Nó cho phép chúng tôi xác định nút DOM văn bản. Nói cách khác,
dòng có đường ống trở thành văn bản thô. Điều này hữu ích khi xác định nhiều dòng văn bản.
Một ví dụ sử dụng các giá trị thuộc tính từ biến cục bộ/biến và xác định <input>
văn bản nội dung có/không trên một dòng mới:
a(href=url, data-active=isActive)
nhãn
đầu vào (loại = "hộp kiểm", đã kiểm tra = đã được kiểm tra)
| có không
Nếu mẫu ở trên được cung cấp với các địa phương này, một số trong số đó là boolean và
url là một chuỗi:
url: "/đăng xuất",
isActive: đúng,
được kiểm tra: sai
thì cả hai—có nghĩa là dữ liệu mẫu và dữ liệu cục bộ—tạo ra đầu ra HTML sau đây, đầu ra này chưa được
kiểm tra (sai) và có văn bản có/không .
<a href="/logout" data-active="data-active"></a>
<nhãn>
< kiểu nhập="hộp kiểm"/> có / không
</nhãn>
119
Lưu ý rằng thuộc tính có giá trị false bị bỏ qua khỏi đầu ra HTML.
Tuy nhiên, khi không có giá trị nào được chuyển, giá trị true sẽ được giả định. Ví dụ: đây là mẫu
Pug với các thuộc tính boolean được chọn:
đầu vào (loại = 'đài', đã chọn)
đầu vào (loại = 'đài', đã chọn = đúng)
đầu vào (loại = 'đài', đã chọn = sai)
Các thuộc tính được chọn sẽ bị bỏ qua khi giá trị sai. Khi giá trị là đúng
trong Pug, thì giá trị được "kiểm tra" trong HTML. Đây là HTML kết quả:
< loại đầu vào="đài" đã kiểm tra="đã kiểm tra"/> < loại đầu
vào="đài" đã kiểm tra="đã kiểm tra"/> < loại đầu vào="đài"/>
Tiếp theo chúng ta sẽ học chữ.
chữ
Để thuận tiện, chúng ta có thể viết class và id ngay sau tên tag. Ví dụ: sau đó chúng ta có thể áp
dụng các lớp chì và trung tâm cho một đoạn văn và tạo một phần tử div với id thanh bên và lớp pull-
right (một lần nữa, đường ống biểu thị một văn bản bên trong):
div#nội dung
p.lead.center
| webapplog: nơi mã sống
#side-bar.pull-right
span.contact.span4
a(href="/contact") liên hệ với chúng tôi
Lưu ý rằng nếu tên thẻ bị bỏ qua, div sẽ được sử dụng thay thế. Xem <div id="side bar"
class="pull-right"></div> trong HTML được tạo bên dưới. <div> này được tạo bởi Pug khi không có
tên phần tử nào được cung cấp và chỉ có id của thanh bên:
<div id="nội dung">
<p class=" trung tâm lãnh đạo">
webapplog: nơi mã sống
<div id="side-bar" class="pull-right"></div>
120
<span class="contact span4">
<a href="/contact">liên hệ với chúng tôi</a>
</p>
</div>
Pug là tất cả về tài hùng biện, nhỏ gọn và tiện lợi. Các phần tử <div> rất phổ biến cho các bố cục. Do
đó, Pug mặc định hiển thị <div> khi không có tên phần tử và có một lớp hoặc id. Đẹp!
Tính năng tiếp theo của chúng tôi là hiển thị văn bản.
Chữ
Xuất văn bản thô được thực hiện thông qua |. Ví dụ: mẫu này tạo một <div> với
văn bản bên trong:
div
| Pug là một công cụ mẫu.
| Nó có thể được sử dụng trong Node.js và trong JavaScript của trình duyệt.
Nếu bạn di chuyển | ở bên trái, thì kết quả sẽ là một <div> trống với văn bản anh chị em
điểm giao.
Để tránh sử dụng đường ống dẫn trên nhiều dòng, có một dấu chấm . cú pháp. Do đó, nếu bạn muốn hiển
thị tất cả các dòng lồng nhau (thụt lề) dưới dạng văn bản bên trong, thì hãy
sausửtên
dụng dấutử.
phần chấm
Ví .dụ:
ngay
mẫu
này tương tự với mã trước ở chỗ nó tạo ra một <div> với văn bản bên trong gồm hai dòng:
div.
Pug là một công cụ mẫu.
Nó có thể được sử dụng trong Node.js và trong JavaScript của trình duyệt.
Kết quả trong cả hai trường hợp là HTML có <div> và văn bản bên trong:
<div>Pug là một công cụ mẫu. Nó có thể được sử dụng trong Node.js và trong
JavaScript của trình duyệt.</div>
Dấu chấm rất hữu ích để viết JavaScript thực thi trong thời gian chạy, đây là chủ đề của phần tiếp theo.
121
Khối tập lệnh và kiểu

Đôi khi, các nhà phát triển muốn viết các đoạn nội dung cho các thẻ script hoặc style trong HTML! Điều này là có
thể với một dấu chấm.
Ví dụ: chúng ta có thể viết JavaScript giao diện người dùng nội tuyến như thế này:
kịch bản.
console.log('Xin chào Pug!')
setTimeout(hàm(){
window.location.href='http://rpjs.co'
},200))
console.log('Tạm biệt!')
Và đầu ra HTML sẽ có thẻ <script> với tất cả mã của chúng tôi:
<kịch bản>
console.log('Xin chào Pug!')
setTimeout(function() {
window.location.href = 'http://rpjs.co'
}, 200))
console.log('Tạm biệt!')
</script>
Bạn có thích thủ thuật nhỏ này với dấu chấm và JavaScript không? Tất nhiên rồi! Nhưng mã này không phải là
được thực hiện cho đến khi tải trang. Nói cách khác, đó là thời gian chạy nhưng không biên dịch.
Mã JavaScript
Trái ngược với ví dụ trước, nếu chúng ta muốn sử dụng bất kỳ JavaScript nào tại thời điểm biên dịch mẫu
—nói cách khác, để viết mã JavaScript thực thi thao tác đầu ra của Pug (tức là HTML)—chúng ta có thể sử dụng -, =
hoặc ! = ký hiệu. Điều này có thể hữu ích khi chúng tôi xuất các phần tử HTML và thêm JavaScript.
Rõ ràng, những loại việc này nên được thực hiện cẩn thận để tránh các cuộc tấn công kịch bản chéo trang (XSS).
Ví dụ: nếu chúng ta muốn xác định một mảng và xuất các ký hiệu <> , chúng ta có thể
sử dụng !=.
122
- var mảng = ['<a>','<b>','<c>']
- for (var i = 0; i< mảng.length; i++)
li
nhịp = tôi
" "
span!="không thoát: " + mảng[i] + so với
span= "đã thoát: " + mảng[i]
Pug ở trên tạo ra HTML sau KHÔNG bao gồm JavaScript nhưng
kết quả của mã JavaScript, vì JS này là JS thời gian biên dịch cho Pug. Đây không phải là
JS thời gian chạy cho trình duyệt như đã được xác định bằng tập lệnh. sớm hơn. HTML kết
quả có <ul> và ba phần tử <li> :
<ul>
<li><span>0<span>không thoát: <a> so với <span>đã thoát:
<a></li> <li><span>1< /span><span>không thoát: <b> so với
<span>đã thoát: <b></li> <li><span>2<span>không thoát: <c>
so với <span>đã thoát: <b></li>
</ul>
Mẹo Một trong những điểm khác biệt chính giữa Pug và Handlebars là cái trước cho
phép gần như bất kỳ mã JavaScript nào trong mã của nó, trong khi cái sau hạn chế các lập
trình viên chỉ một số ít trình trợ giúp được đăng ký tùy chỉnh và tích hợp sẵn.
Bình luận
Khi nói đến nhận xét, chúng tôi có lựa chọn kết xuất/xuất chúng thành HTML hay không.
Để hiển thị/xuất chúng thành HTML, hãy sử dụng kiểu JavaScript //; để không hiển thị
chúng, hãy sử dụng //-. Ví dụ, đây là hai nhận xét:
// nội dung ở đây
p Node.js là một I/O không chặn dành cho các ứng dụng có thể mở rộng.
//- @todo thay đổi điều này thành một lớp
p(id="footer") Bản quyền 2014 Azat
123
Pug ở trên với các nhận xét xuất ra các nhận xét kiểu HTML bằng // nhưng ẩn chúng bằng //-. Do đó, kết quả
HTML chỉ có nội dung đi tới đây mà không có @todo
thay đổi điều này thành một lớp:

<p>Node.js là một I/O không chặn cho các ứng dụng có thể mở rộng.</p> <p id="footer">Copyright
2014 Azat</p>
Tất nhiên, các khung nhìn (nghĩa là các mẫu) được hưởng lợi rất nhiều từ điều kiện if/else. Hãy trang trải
họ tiếp theo.
Điều kiện (nếu)
Thật thú vị, ngoài mã JavaScript tiêu chuẩn, trong đó câu lệnh if có thể được sử dụng bằng cách
đặt trước nó bằng -, chúng ta có thể sử dụng một giảicó

pháp
tiền
thay
tố thế
và không
Pug thậm
có dấu
chíngoặc
ngắn hơn
đơn.mà
Víkhông
dụ: if/else này
hoạt động tốt:
- người dùng var = {}
- user.admin = Math.random()>0.5
nếu người dùng.admin
nút (lớp = "khởi chạy") Khởi động tàu vũ trụ
khác
nút (lớp = "đăng nhập") Đăng nhập
Ngoài ra còn có except tương đương với not hoặc !.
Lặp lại (mỗi vòng lặp)
Tương tự như điều kiện, iterators trong Pug có thể được viết đơn giản với mỗi. Ví dụ: đây là mã để lặp qua một
mảng các ngôn ngữ lập trình và tạo các đoạn văn cho từng ngôn ngữ đó:
- var ngôn ngữ = ['php', 'nút', 'ruby']
div
từng giá trị, chỉ mục trong các ngôn ngữ
p= chỉ số + "." + giá trị
124
Đầu ra HTML với ba phần tử <p> như sau:
<div>
<p>0. php</p> <p>1.
nút</p> <p>2. hồng
ngọc</p>
</div>
Mỗi công trình lặp lại tương tự cũng hoạt động với các đối tượng. Các nhà phát triển thậm chí
có thể truy cập một giá trị quan trọng . Hãy xem đối tượng này với các ngôn ngữ là khóa và tầm quan
trọng của chúng là giá trị:
- var ngôn ngữ = {'php': -1, 'nút': 2, 'ruby':1}
div
mỗi giá trị, khóa trong ngôn ngữ
p= phím + ":" + giá trị
Pug ở trên được biên dịch thành đầu ra HTML trong đó mỗi lần lặp qua
các giá trị mảng tạo ra một phần tử <p> đoạn văn cho mỗi ngôn ngữ:
<div>
<p>php: -1</p>
<p>nút: 2</p>
<p>ruby: 1</p>
</div>
Tiếp theo là các bộ lọc!
bộ lọc
Bộ lọc được sử dụng khi có khối văn bản được viết bằng một ngôn ngữ khác. Ví dụ: bộ lọc cho
Markdown trông như thế này:
:markdown
# Node.js thực tế
125
Lưu ý Các mô-đun Markdown vẫn cần được cài đặt. Các gói npm được
đánh dấu và đánh dấu thường được sử dụng cho việc này. Không cần cấu hình
bổ sung; chỉ cần cài đặt chúng trong thư mục node_modules cục bộ của dự án .
nội suy
Nội suy là trộn các chuỗi và giá trị động từ các biến. Đó là một thuật ngữ khác sẽ khiến bạn trông thông
minh hơn ít nhất năm (5) điểm IQ. Không có gì.
Ở Pug, phép nội suy được thực hiện thông qua cú pháp có dấu ngoặc nhọn và dấu thăng: #{name},
trong đó tên là tên của một biến. Ví dụ: để xuất tiêu đề trong một đoạn văn, chỉ cần sử dụng
#{title} trong văn bản, như trong đoạn mã sau:
- var title = "Phản ứng nhanh: Ứng dụng web dễ dàng với React, JSX,
Redux và GraphQL"
p Đọc #{title} trong PDF, MOBI và EPUB
Nội suy được xử lý tại quá trình biên dịch mẫu. Do đó, không sử dụng phép nội suy trong
JavaScript thực thi, tức là JS với -. Đối với - JS, hãy sử dụng phép nội suy chuỗi ES6 tiêu chuẩn với
${name}.
Trường hợp
Trường hợp cho phép các nhà phát triển Node tránh một chuỗi các điều kiện if/else. Bạn có thể đã sử
dụng một cái gì đó tương tự. Trong các ngôn ngữ khác, trường hợp được thực hiện với chuyển đổi. Đây là
một ví dụ về câu lệnh tình huống trong Pug:
- var coins = Math.round(Math.random()*10)
trường hợp tiền xu
khi 0
p Bạn không có tiền
khi 1
p Bạn có một đồng xu
mặc định
p Bạn có #{coins} xu!
126
hỗn hợp
Mixin là các hàm lấy tham số và tạo ra một số HTML. Chúng cực kỳ tuyệt vời vì chúng cho
phép bạn sử dụng lại hàng đống mã nếu được sử dụng đúng cách. Cú pháp khai báo là mixin
name(param, param2,...), và cách sử dụng là +name(data). Ví dụ, ở đây tôi định nghĩa các
mixin của hàng và bảng , cái mà tôi sẽ sử dụng sau này với dữ liệu thực từ các mảng:
hàng mixin (mặt hàng)
tr
từng mục, chỉ mục trong các mục
td= mục
bảng mixin (bảngData)
bàn
mỗi hàng, chỉ mục trong bảngData
+hàng(hàng)
- nút var = [{tên: "express"}, {tên: "hapi"}, {tên: "derby"}]
+bảng(nút)
- var js = [{tên: "xương sống"}, {tên: "góc"}, {tên: "ember"}]
+bảng(js)
Mã Pug trước đó, ở trên khi được sử dụng trong Express hoặc ở nơi khác, sẽ tạo ra đầu
ra sau bằng cách “gọi” bảng và hàng mixins giống như một hàm sẽ được gọi với các đối số
(phần thưởng: nhà phát triển có thể sử dụng lặp đi lặp lại mixin bảng và hàng cho mục
đích khác dữ liệu!):
<bảng>
<tr>
<td>bày tỏ</td>
</tr>
<tr>
<td>hapi</td>
</tr>
<tr>
<td>trận derby</td>
</tr>
</bảng>
127
<bảng>
<tr>
<td>xương sống</td>
</tr>
<tr>
<td>góc</td>
</tr>
<tr>
<td>đỏ</td>
</tr>
</bảng>
Bao gồm
bao gồm là một cách để tách logic thành một tệp riêng biệt nhằm mục đích sử dụng lại nó
trên nhiều tệp. Đừng nhầm lẫn điều này với bao gồm ES6. Đó là JavaScript, nhưng chúng ta đang
nói về Pug ở đây.

Bao gồm này là cách tiếp cận từ trên xuống dưới , nghĩa là chúng tôi chỉ định những gì sẽ sử dụng trong tệp
bao gồm một tập tin khác. Tệp bao gồm được xử lý trước (chúng tôi có thể xác định các tệp cục bộ ở đó) và
sau đó tệp được bao gồm sẽ được xử lý (chúng tôi có thể sử dụng các tệp cục bộ được xác định trước đó).
Để bao gồm một mẫu Pug, hãy sử dụng bao gồm /path/filename. Không cần dấu ngoặc kép hay dấu nháy
đơn '. Tôi thích nó! Ví dụ: trong tệp bố cục, bạn có thể nhập tiêu đề: dấu ngoặc kép "
bao gồm ./gồm/tiêu đề
Lưu ý rằng không cần dấu ngoặc kép hoặc dấu ngoặc đơn cho tên mẫu và đường dẫn của mẫu. Và có thể
duyệt qua cây thư mục. Phần chân trang này có thể nằm trong thư mục bao gồm của thư mục mẹ:
bao gồm ../gồm/chân trang
Tuy nhiên, không có cách nào để sử dụng giá trị động cho tệp và đường dẫn (sử dụng biến),
bởi vì bao gồm/một phần được xử lý khi biên dịch (không phải trong thời gian chạy).
128
Mở rộng
mở rộng là một cách tiếp cận từ dưới lên trên (trái ngược với bao gồm), theo nghĩa là tệp được
bao gồm ra lệnh phần nào của tệp chính mà nó muốn thay thế. Cách nó hoạt động là với các câu lệnh mở rộng
tên tệp và chặn tên khối .
Trong file_a, giống như bố cục bạn xác định các khối, xác định các phần tử khối bằng
một số nội dung mặc định:
tiêu đề khối
p một số văn bản mặc định
khối nội dung
p Đang tải...
chặn chân trang
p bản quyền
Trong file_b, giống như một chế độ xem phụ, bạn xác định bố cục nào sẽ sử dụng và khối nào sẽ sử dụng
ghi đè (và những gì không, bằng cách bỏ qua).
Ví dụ: trong tệp file_b này , khối tiêu đề và khối nội dung sẽ có mới
nội dung, nhưng chân trang sẽ giữ nguyên như trong tệp_a. Đây là ví dụ file_b :
mở rộng tệp_a
tiêu đề khối
p văn bản rất cụ thể
khối nội dung
.Nội dung chính
Điểm mấu chốt là mở rộng và chặn thực hiện mẫu kế thừa đảo ngược.
Cách sử dụng Pug độc lập
Công cụ mẫu (Pug) và khung web (Express) đi cùng nhau như nước sốt cà chua và xúc xích—nhưng không
phải lúc nào cũng vậy. Công cụ mẫu không phải lúc nào cũng được sử dụng với các khung công tác Node.js
như Express.js. Đôi khi, chúng ta có thể chỉ muốn sử dụng Pug một cách độc lập. Các trường hợp sử dụng
bao gồm tạo mẫu e-mail, biên dịch trước Pug trước khi triển khai và gỡ lỗi. Trong phần này, chúng tôi làm
như sau:
• Cài đặt mô-đun Pug
• Tạo tệp Pug đầu tiên của chúng tôi
129
• Tạo chương trình Node.js sử dụng tệp Pug
• So sánh pug.compile, pug.render và pug.renderFile
Để thêm phụ thuộc pug vào dự án của bạn hoặc nếu bạn đang bắt đầu lại từ đầu
thư mục dự án trống, hãy làm như sau:
1. Tạo tệp pack.json theo cách thủ công hoặc bằng $ npm init -y.
2. Cài đặt và thêm pug vào package.json với $npm i pug –save.
Xem kết quả trong Hình 4-1.
3. Tạo một tệp Nút.
4. Nhập pug vào tệp Node.
5. Gọi một phương thức từ mô-đun pug trong tệp Node của bạn.
Hình 4-1. Cài đặt Pug
130
Mẹo Thêm {pretty: true} vào pug.render(), như trong pug.

render(pugTemplate, {pretty: true}), để có HTML đẹp, được định dạng
đúng.
Giả sử chúng ta có một số tập lệnh Node.js gửi e-mail và chúng ta cần sử dụng một mẫu để tạo
HTML động cho e-mail. Đây là giao diện của nó (tệp pug-example.pug):
.header
h1= tiêu đề
.thân hình
p= cơ thể
.footer
div= Bởi
a(href="http://twitter.com/#{author.twitter}")= tên tác giả
từng thẻ, chỉ mục trong thẻ
li= thẻ
Trong trường hợp này, tập lệnh Node.js của chúng tôi cần cấp nước hoặc điền vào mẫu này
các dữ liệu sau:
• tiêu đề: Chuỗi
• thẻ: Mảng
• thân: Chuỗi
• tác giả: String
Chúng tôi có thể trích xuất các biến này từ nhiều nguồn (cơ sở dữ liệu, hệ thống tệp, người dùng
đầu vào, tua, v.v.). Ví dụ: trong tệp pug-example.js , chúng tôi sử dụng các giá
trị được mã hóa cứng cho tiêu đề, tác giả, thẻ nhưng chuyển qua đối số dòng lệnh cho
nội dung bằng process.argv [2]:
const pug = yêu cầu('pug'),
fs = yêu cầu ('fs')
131
để dữ liệu = {
tiêu đề: 'Node.js thực tế',
tác giả: {
twitter: '@azatmardan',
tên: 'Azat'
},
thẻ: ['express', 'nút', 'javascript']
data.body = process.argv[2]
fs.readFile('pug-example.pug', 'utf-8', (lỗi, nguồn) => {
hãy để mẫu = pug.compile(nguồn)
hãy để html = mẫu (dữ liệu)
console.log(html)
})
Theo cách này, khi chúng tôi chạy $node pug-example.js 'email body', chúng tôi nhận được
Đầu ra HTML được in trong thiết bị đầu cuối như trong Hình 4-2.
Hình 4-2. Kết quả của một kết xuất Pug độc lập
132
Đầu ra HTML “được làm đẹp” với khoảng cách và thụt đầu dòng thích hợp mà tôi đã lấy từ
thiết bị đầu cuối trông như sau:
<div class="header">
<h1>Node.js thực tế</h1>
<p></p>
</div>
<div class="body">
<p>nội dung email </p>

</div>
<div class="footer">
<div><a href="http://twitter.com/@azatmardan">Azat</a>
</div>
<ul>
<li>thể hiện</li>
<li>nút</li>
<li>javascript</li>
</ul>
</div>
Ngoài pug.compile(), Pug API còn có các chức năng pug.render() và
pug.renderFile(). Ví dụ: tệp trước đó có thể được viết lại bằng
pug.render():
fs.readFile('pug-example.pug', 'utf-8', (lỗi, nguồn) => {
const html = pug.render(nguồn, dữ liệu)
console.log(html)
})
Hơn nữa, với pug.renderFile(), tệp pug-example.js thậm chí còn nhiều hơn
compact vì nó sẽ làm hai việc cùng một lúc: đọc một tệp và kết xuất nó:
pug.renderFile('pug-example.pug', dữ liệu, (lỗi, html) => {
console.log(html)
})
133
Lưu ý Pug cũng có thể được sử dụng như một công cụ dòng lệnh sau khi cài đặt nó với
tùy chọn -g hoặc --global thông qua npm. Để biết thêm thông tin, hãy chạy pug -h hoặc
xem tài liệu chính thức (http://pug-lang.com/command-line).
Để sử dụng Pug trong trình duyệt, bạn có thể sử dụng browserify (https://github.com/substack/node-
browserify ) và pugify của nó (https://www.npmjs.org/package/ pug-browser) phần mềm trung gian.
Lưu ý Để sử dụng cùng một mẫu Pug ở phía giao diện người dùng (trình duyệt) và phía
máy chủ, tôi khuyên dùng trình duyệt ngọc bích (https://www.npmjs.org/package/ ngọc
bích-browser) của Storify, mà tôi là người duy trì một thời gian trong thời gian làm
việc ở đó. trình duyệt ngọc hoạt động như một phần mềm trung gian Express.js và hiển
thị các mẫu phía máy chủ cho trình duyệt cùng với các chức năng tiện ích hữu ích.
Cú pháp tay lái

Thư viện Handlebars là một công cụ mẫu khác. Nó kế thừa từ Mustache và phần lớn tương thích với
cú pháp của Mustache. Tuy nhiên, Tay lái bổ sung thêm nhiều tính năng hơn. Nói cách khác, Tay
lái là siêu bộ của Bộ ria mép.
Không giống như Pug, Tay lái theo thiết kế được tạo ra để các nhà phát triển không thể
viết nhiều logic JavaScript bên trong các mẫu. Điều này giúp giữ cho các mẫu gọn gàng và liên
quan chặt chẽ đến việc biểu diễn dữ liệu (không có logic nghiệp vụ).
Một điểm khác biệt lớn nữa giữa Pug và Handlebars là cái sau yêu cầu đầy đủ
Mã HTML (các thẻ <, >, đóng </> , v.v.). Vì lý do này, nó có thể ít quan tâm hơn đến khoảng
trắng và thụt đầu dòng, điều đó có nghĩa là thật dễ dàng sao chép HTML hiện có của bạn và biến nó
thành Thanh điều khiển, đồng thời nhà phát triển phải nhập nhiều mã hơn khi viết mẫu từ đầu.
Biến
Biểu thức Tay lái là {{, một số nội dung, theo sau là }}, do đó có tên của thư viện (xem sự
tương đồng với tay lái trên xe đạp?). Ví dụ: mã Tay lái này:
134
<h1>{{title}}</h1>
<p>{{body}}</p>
với dữ liệu có thuộc tính title và body :
tiêu đề: "Hướng dẫn Express.js",
nội dung : "Sách toàn diện về Express.js"
hiển thị các phần tử có giá trị từ tiêu đề và nội dung :
<h1> Hướng dẫn về Express.js</h1>
<p>Sách toàn diện về Express.js</p>
Lặp lại (mỗi)

Trong Tay lái, mỗi tay lái là một trong những công cụ trợ giúp được tích hợp sẵn; nó cho phép
bạn lặp qua các đối tượng và mảng. Bên trong khối, chúng ta có thể sử dụng @key cho (đối tượng)
trước và @index cho (mảng) sau. Ngoài ra, mỗi mục được gọi là này. Khi một mục là một đối
tượng, điều này có thể được bỏ qua và chỉ tên thuộc tính được sử dụng để tham chiếu giá trị
của thuộc tính đó.
Sau đây là các ví dụ về từng khối trợ giúp trong Tay lái:
<div>
{{#mỗi ngôn ngữ}}
<p>{{@index}}. {{this}}</p>
{{/mỗi}}
</div>
Mẫu ở trên được cung cấp cùng với dữ liệu có mảng chuỗi:
{ngôn ngữ: ['php', 'nút', 'ruby']}
và xuất HTML này khi biên dịch, có <p> cho mỗi phần tử mảng:
<div>
<p>0. php</p> <p>1.
nút</p> <p>2. hồng
ngọc</p>
</div>
135
Đầu ra không thoát
Theo mặc định, Tay lái thoát khỏi các giá trị. Nếu bạn không muốn Tay lái thoát khỏi một giá trị,
hãy sử dụng ba dấu ngoặc nhọn: {{{ và }}}.
Là dữ liệu, hãy sử dụng đối tượng này có một mảng với một số thẻ HTML (dấu ngoặc nhọn):
mảng: [
'<a>a</a>',
'<i>in nghiêng</i>',
'<strong>đậm</strong>'
Để áp dụng mẫu Tay lái này cho dữ liệu của chúng tôi ở trên (ví dụ: hydrat hóa), hãy sử dụng trình vòng lặp
mỗi cái có {{{this}}} cho giá trị chưa thoát của một mục mảng riêng lẻ, đó là
HTML và do đó cần phải được thoát:
<ul>
{{#each mảng}}
<li>
<span>{{@index}}
<span>không thoát: {{{this}}} so với
<span>đã thoát: {{this}}
</li>
{{/mỗi}}
</ul>
Mẫu ngậm nước tạo ra HTML sau bằng cách in các chỉ số mảng ({{@
index}}), HTML chưa thoát ({{{this}}}) và HTML đã thoát ({{this}}):
<ul>
<li>
<span>0
<span>không thoát: <a>a</a> so với
<span>đã thoát: <a>a</a>
</li>
136
<li>
<span>1 <span>không
thoát: <i>italic</i> so với <span>đã thoát:
<i>italic</i>
</li>
<li>
<span>2 <span>không
thoát: <strong>đậm</strong> so với <span>đã thoát:
<strong>bold</strong>
</li>
</ul>
Điều kiện (nếu)
nếu là một trình trợ giúp tích hợp khác được gọi thông qua #. Ví dụ: mã Tay lái này sử dụng
điều kiện if/else để kiểm tra giá trị user.admin (nếu người dùng là quản trị viên):
{{#if user.admin}}
<button class="launch"> Phóng tàu vũ trụ</button>

{{khác}}
<button class="login"> Đăng nhập </button>

{{/nếu như}}
Mẫu được điền dữ liệu sẽ làm cho điều kiện if/else trở thành đúng:
người dùng: {
quản trị viên: đúng
Mọi thứ biến thành đầu ra HTML này, có phần tử khởi chạy được hiển thị do
với giá trị của user.admin là đúng:
<button class="launch">Phóng tàu vũ trụ</button>
137
Trừ khi
Để đảo ngược câu lệnh if not ... (if ! ...) (chuyển đổi từ phủ định sang khẳng định),
chúng ta có thể khai thác khối công cụ trợ giúp được tích hợp sẵn. Ví dụ: đoạn mã trước
đó có thể được viết lại bằng unless.
Mã Handlebars kiểm tra tính trung thực của cờ quản trị viên (thuộc tính user. admin). Nếu
giá trị là true, thì giá trị khác sẽ được áp dụng. Lưu ý sự thay đổi trong Đăng nhập và Khởi
động Tàu vũ trụ. Bây giờ chúng được lật ngược lại so với if/else:
{{#unless user.admin}}
<button class="login"> Đăng nhập </button>

{{khác}}

{{/Trừ khi}}
Chúng tôi cung cấp cho mẫu của mình dữ liệu giúp người dùng trở thành quản trị viên:
người dùng: {
quản trị viên: đúng
Đầu ra HTML hiển thị nút khởi chạy, nút này chỉ dành cho quản trị viên
bởi vì nút này nằm trong other, chúng tôi đã sử dụng trừ khi và giá trị là đúng.
Với
Trong trường hợp có một đối tượng với các thuộc tính lồng nhau và có rất nhiều thuộc tính, bạn có
thể sử dụng with để chuyển ngữ cảnh.
Chúng tôi có mã Tay lái này đang xử lý địa chỉ và liên hệ của người dùng
thông tin:
{{#với người dùng}}
<p>{{name}}</p>
{{#có liên hệ}}
<span>Twitter: @{{twitter}}
138
{{/với}}
<span>Địa chỉ: {{address.city}},
{{/với}}
{{user.address.state}}
Sau đó, chúng tôi hợp nhất mẫu với dữ liệu này. Lưu ý tên của các thuộc tính là
giống như trong mẫu Tay lái, chỉ có một tham chiếu đến đối tượng người dùng :
{người dùng: {
liên hệ: {
email: 'hi@node.university',
twitter: 'azatmardan'
},
Địa chỉ: {
thành phố: 'San Francisco',
tiểu bang: 'California'
},
tên: 'Azat'
}}
Đoạn mã trên, khi được biên dịch, sẽ tạo ra HTML in các giá trị bằng cách sử dụng
tên đối tượng cho mọi thuộc tính:
<p>Azat</p>
<span>Twitter: @azatmardan <span>Địa chỉ: San
Francisco, California
Bình luận
Để xuất nhận xét, hãy sử dụng HTML thông thường . Để ẩn nhận xét trong đầu
ra cuối cùng, hãy sử dụng {{! và }} hoặc {{!-- và --}}. Ví dụ: đoạn mã dưới đây có hai
loại nhận xét:
 <p>Node.js là I/
O không chặn cho các ứng dụng có thể mở rộng.</p> {{! @todo thay đổi điều này thành
một lớp}} {{!-- thêm ví dụ vào {{#if}} --}} <p id="footer">Bản quyền 2019 Azat</p>
139
Đoạn mã trước đưa ra các nhận xét với 
<p>Node.js là một I/O không chặn cho các ứng dụng có thể mở rộng.</p> <p
id="footer">Bản quyền 2019 Azat</p>
Người trợ giúp tùy chỉnh
Trình trợ giúp Tay lái tùy chỉnh tương tự như khối trình trợ giúp tích hợp sẵn và hỗn hợp Pug. Để
sử dụng các trình trợ giúp tùy chỉnh, chúng ta cần tạo chúng dưới dạng hàm JavaScript và đăng ký
chúng với phiên bản Tay cầm.
Ví dụ: giả sử chúng ta có một bảng trợ giúp tùy chỉnh mà chúng ta sẽ đăng ký (ví dụ:
định nghĩa) sau này trong mã JavaScript/Node.js, thì mẫu Tay lái này sẽ sử dụng
bàn:
{{nút bảng}}
Đây là JavaScript/Node.js đăng ký hoặc báo cho trình biên dịch Handlebars phải làm gì khi gặp
chức năng bảng tùy chỉnh (nghĩa là in một bảng HTML ra khỏi mảng được cung cấp):
handlebars.registerHelper('bảng', (dữ liệu) => {
hãy để str = '<bảng>'
for (let i = 0; i < data.length; i++ ) {
str += '<tr>'
for ( khóa var trong data[i]) {
str += '<td>' + data[i][key] + '</td>'
str += '</tr>'
str += '</table>'
trả về tay lái mới.SafeString (str)
})
140
Sau đây là mảng của chúng tôi cho dữ liệu bảng. Nó có một mảng đối tượng. Mỗi đối
tượng có tên và URL:
{tên: 'express', url: 'http://expressjs.com/'},
{tên: 'hapi', url: 'http://spumko.github.io/'},
{tên: 'hợp chất', url: 'http://compoundjs.com/'},
{tên: 'derby', url: 'http://derbyjs.com/'}
HTML kết quả từ việc lặp qua các đối tượng tên và URL trong bảng
chức năng trông như thế này:
<bảng>
<tr>
<td>bày tỏ</td>
<td>http://expressjs.com/</td>
</tr>
<tr>
<td>hapi</td>
<td>http://spumko.github.io/</td>
</tr>
<tr>
<td>hợp chất</td>
<td>http://compoundjs.com/</td>
</tr>
<tr>
<td>trận derby</td>
<td>http://derbyjs.com/</td>
</tr>
</bảng>
Vì vậy, những người trợ giúp rất tốt cho việc sử dụng lại mã. Một cách khác để sử dụng lại mã là bao gồm
hoặc một phần.
141
Bao gồm (Một phần)
Trong Tay cầm, các mẫu bao gồm hoặc một phần được diễn giải bằng biểu thức {{>
partial_ name}} . Các bộ phận giống như người trợ giúp và được đăng ký với Tay
lái. registerPartial(tên, nguồn), trong đó tên là một chuỗi và nguồn là mã mẫu Tay
lái cho một phần (mã JS/Node, không phải mẫu):
Handlebars.registerPartial('myPartial', '{{name}}')
Gọi một phần được thực hiện với cú pháp sau (viết trong Handlebars
mẫu, không phải mã JS/Node):
{{> myPartial }}
Để biết thêm về bao gồm và một phần, hãy xem tài liệu tại http://
handlebarsjs.com/partials.html.
Tay lái độc lập Cách sử dụng

Nhà phát triển có thể cài đặt Handlebars qua npm với $ npm install handlebars
hoặc $ npm install handlebars --save, giả sử node_modules hoặc package.json

nằm trong thư mục làm việc hiện tại (xem kết quả cài đặt mẫu trong Hình 4-3).
142
Hình 4-3. Lắp đặt Tay lái
Lưu ý Có thể cài đặt Tay lái qua npm dưới dạng công cụ dòng lệnh với các
tùy chọn -g hoặc --global . Để biết thêm thông tin về cách sử dụng Tay
cầm trong chế độ này, hãy tham khảo lệnh $ handlebar hoặc tài liệu chính
thức (https://github.com/wycats/handlebars.js/#usage-1).
Đây là một ví dụ về cách sử dụng Tay lái Node.js độc lập từ

handlebars-example.js trong đó chúng tôi nhập các mô-đun, sau đó xác định đối tượng dữ liệu (có
thông tin về sách), sau đó đăng ký một số trình trợ giúp và tạo HTML:
tay lái const = yêu cầu ('tay lái')
const fs = yêu cầu ('fs')
đường dẫn const = yêu cầu ('đường dẫn')
143
dữ liệu const = {
tiêu đề: 'node.js thực tế',
tác giả: '@azatmardan',
thẻ: ['express', 'nút', 'javascript']
data.body = process.argv[2]
const filePath = path.join(__dirname,
'tay lái-example.html')
data.tableData = [
{name: 'express', url: 'http://expressjs.com/'}, {name: 'hapi', url: 'http://
spumko.github.io/'}, {name: 'compound' , url: 'http://compoundjs.com/'},
{tên: 'derby', url: 'http://derbyjs.com/'}
fs.readFile(filePath, 'utf-8', (lỗi, nguồn) => {
nếu (lỗi) trả về console.error(lỗi)
// Đăng ký helper để tạo bảng HTML từ dữ liệu (mảng)
handlebars.registerHelper('bảng', (dữ liệu) => {
hãy để str = '<bảng>'
for (cho i = 0; i < data.length; i++) {
str += '<tr>'
for ( khóa var trong data[i]) {
str += '<td>' + data[i][key] + '</td>'
str += '</tr>'
str += '</table>'
trả về tay lái mới.SafeString(str)
})
// Đăng ký helper để viết hoa chuỗi
handlebars.registerHelper('custom_title', (title) => {
để từ = title.split(' ')
for (let i = 0; i < word.length; i++) {
144
nếu (từ[i].độ dài > 4) {
từ[i] = từ[i][0].toUpperCase() + từ[i].substr(1)
tiêu đề = word.join(' ')
trả lại tiêu đề
})
// Biên dịch mẫu và hydrat hóa mẫu bằng dữ liệu để tạo HTML
mẫu const = handlebars.compile(nguồn)
const html = mẫu (dữ liệu)
console.log(html)
})
Và tệp mẫu handlebars-example.html sử dụng trình trợ

giúp custom_title có nội dung sau gọi trình trợ giúp và đưa ra một số thuộc tính
khác:
<h1>{{custom_title title}}</h1> </div>
<div class="body">
<p>{{body}}</p>
</div>
<div><a href="http://twitter.com/{{author.twitter}}">
{{autor.name}}</a>
</div>
<ul>
{{#each tags}}
<li>{{this}}</li>
{{/mỗi}}
</ul>
</div>
145
Để tạo HTML này khi chúng tôi chạy $ node handlebars-example.js 'email body',
hãy sử dụng như sau:
<h1>Node.js thực tế</h1>
</div>
<div class="body">
<p>nội dung email </p>

</div>
<div><a href="http://twitter.com/"></a>
</div>
<ul>
<li>thể hiện</li>
<li>nút</li>
<li>javascript</li>
</ul>
</div>
Để sử dụng Tay cầm trên trình duyệt, hãy tải xuống thư viện một cách đơn giản
từ trang web chính thức (http://handlebarsjs.com) và đưa nó vào các trang của bạn.
Ngoài ra, có thể chỉ sử dụng phiên bản thời gian chạy từ cùng một trang web (có kích
thước nhẹ hơn) với các mẫu được biên dịch sẵn. Các mẫu có thể được biên dịch trước
bằng công cụ dòng lệnh Handlebars.
Cách sử dụng Pug và Tay lái trong Express.js
Theo mặc định, Express.js sử dụng tiện ích mở rộng mẫu được cung cấp
cho phương thức response.render (hoặc res.render) hoặc tiện ích mở rộng mặc định do
cài đặt công cụ xem đặt để gọi các phương thức request and__express trên thư viện mẫu.
Nói cách khác, để Express.js sử dụng thư viện công cụ mẫu ngay lập tức, thư viện
đó cần phải có phương thức __express .
Khi thư viện công cụ mẫu không cung cấp phương thức the__express hoặc phương
thức tương tự với các tham số (đường dẫn, tùy chọn, lệnh gọi lại) , bạn nên sử dụng
Consolidate.js (https://github.com/visionmedia/consolidate.js/) .
146
Hãy xem một ví dụ nhanh về thư viện trừu tượng cho các mẫu có tên là
Consolidate.js. Trong ví dụ này, tôi sử dụng công cụ tạo mẫu Swig. Tôi chọn công cụ
mẫu này vì rất có thể bạn chưa bao giờ nghe nói về nó và điều này làm cho nó trở thành
một minh họa tốt cho một thư viện trừu tượng hóa như Hợp nhất. Vì vậy, Swig đến từ mô-
đun hợp nhất . Tôi đã kết nối nó để diễn đạt bằng câu lệnh app.engine('html', cons.swig) .
Xem toàn bộ quá trình triển khai máy chủ hiển thị các mẫu Swig:
const express = yêu cầu ('bày tỏ')
const cons = yêu cầu ('hợp nhất')
đường dẫn const = yêu cầu ('đường dẫn')
hãy để ứng dụng = express()
app.engine('html', cons.swig)
app.set(' công cụ xem', 'html')
app.set('views', path.join(__dirname, 'templates'))
nền tảng var = [
{tên: 'nút' },
{ tên: 'hồng ngọc' },
{tên: 'trăn' }
app.get('/', (req, res) => {
res.render('chỉ số', {
title: 'Hợp nhất cái này'
})
})
app.get('/platforms', (req, res) => {
res.render('nền tảng', {
tiêu đề: 'Nền tảng',
nền tảng: nền tảng
})
})
app.listen(3000, () => {
console.log('Express server lắng nghe trên cổng 3000')
})
147
Như thường lệ, mã nguồn nằm trong kho GitHub và đoạn trích nằm trong mã/
thư mục ch4/hợp nhất .
Để biết thêm thông tin về cách định cấu hình cài đặt Express.js và sử dụng Hợp nhất.
js, hãy tham khảo cuốn sách vẫn còn cập nhật trên Express.js phiên bản 4—Pro Express.js
(Apress, 2014), hiện có trên tất cả các cửa hàng sách lớn và tất nhiên là tại https://amzn.
đến/2tlSwNw.
Pug và Express.js
Pug tương thích ngay với Express.js (trên thực tế, đó là lựa chọn mặc định), vì vậy để sử dụng Pug
với Express.js, bạn chỉ cần cài đặt mô-đun công cụ mẫu (pug) (https: //www.npmjs .org/gói/pug) và
cung cấp tiện ích mở rộng cho Express.js thông qua cài đặt công cụ xem .
Ví dụ: trong tệp máy chủ Express chính, chúng tôi đặt cài đặt công cụ xem là pug
để cho Express biết thư viện nào sẽ được sử dụng cho các mẫu:
app.set(' công cụ xem', 'pug')
Tất nhiên, các nhà phát triển cần cài đặt mô-đun pug npm vào dự án của họ để gói pug được
lưu trữ cục bộ trong node_modules. Express sẽ sử dụng tên pug được cung cấp cho công cụ xem để
nhập gói pug và cũng sử dụng pug làm phần mở rộng tệp mẫu trong thư mục lượt xem (lượt xem là tên
mặc định).
Lưu ý Nếu bạn sử dụng công cụ dòng lệnh $ express <app_name> , bạn có thể thêm tùy
chọn hỗ trợ công cụ, nghĩa là tùy chọn –e cho EJS và –H cho Hogan.
Thao tác này sẽ tự động thêm EJS hoặc Hogan vào dự án mới của bạn. Nếu không có
một trong hai tùy chọn này, trình tạo nhanh (phiên bản 4.0.0–4.2.0) sẽ sử dụng Pug.
Trong tệp định tuyến, chúng ta có thể gọi mẫu—ví dụ: views/page.pug ( tên thư mục lượt
xem là một mặc định khác của Express.js, có thể được ghi đè bằng cài đặt chế độ xem ):
app.get('/page', (req, res, next) => {
//lấy dữ liệu động
res.render('trang', dữ liệu)
})
148
Nếu chúng tôi không chỉ định cài đặt công cụ xem , thì tiện ích mở rộng phải được thông qua
rõ ràng để res.render() như một đối số đầu tiên, chẳng hạn như:
res.render('trang.pug', dữ liệu)
Tiếp theo, hãy đề cập đến cách sử dụng Express cho Ghi đông.
Tay lái và Express.js

Trái ngược với Pug, thư viện Handlebars từ http://handlebarsjs.com không đi kèm với phương thức express ,
nhưng có một vài tùy chọn để làm cho Tay lái hoạt động với Express.js :).
• hợp nhất (https://github.com/tj/consolidate.js): Một con dao của quân đội Thụy
Sĩ gồm các thư viện công cụ mẫu Express.js (hiển thị ở một trong các phần trước)
• hbs (https://github.com/pillarjs/hbs): thư viện Wrapper cho

tay lái
• tay lái tốc hành (https://github.com/ericf/express tay lái): Một mô-đun để sử
dụng Tay lái với Express
Đây là cách chúng ta có thể sử dụng phương pháp hbs (hbs mở rộng ). Ở đâu đó trong phần
cấu hình của tệp Express chính (tệp mà chúng tôi khởi chạy bằng lệnh $node ), hãy viết các câu
lệnh sau:
// Nhập khẩu
app.set(' công cụ xem', 'hbs')
// Phần mềm trung gian
Hoặc, nếu tiện ích mở rộng khác thích hợp hơn, chẳng hạn như html, chúng tôi sẽ thấy như sau:
app.set(' công cụ xem', 'html')
pp.engine('html', yêu cầu('hbs').__express)
Cách sử dụng cách tiếp cận tay lái nhanh như sau:
const exphbs = require('express-tay lái')
app.engine('tay lái', exphbs({defaultLayout: 'main'}))
app.set('view engine', 'tay lái')
Tốt. Bây giờ chúng ta có thể áp dụng kiến thức của mình vào thực tế.
149
Dự án: Thêm mẫu Pug vào Blog

Cuối cùng, chúng ta có thể tiếp tục với Blog. Trong phần này, chúng tôi thêm các trang chính bằng Pug, ngoài
ra chúng tôi thêm bố cục và một số phần:
• layout.pug: Mẫu toàn ứng dụng toàn cầu
• index.pug: Trang chủ chứa danh sách các bài viết
• article.pug: Trang bài viết cá nhân
• login.pug: Trang có biểu mẫu đăng nhập
• post.pug: Trang thêm bài viết mới
• admin.pug: Trang quản trị bài viết sau khi đăng nhập
Vì các mẫu trong dự án nhỏ này yêu cầu dữ liệu, nên chúng tôi sẽ bỏ qua phần trình diễn cho đến Chương
5, nơi chúng tôi sẽ cắm cơ sở dữ liệu MongoDB. Vì vậy, mã nguồn cho các mẫu Pug giống hệt như trong thư mục
mã/ch5 của kho lưu trữ GitHub azat co/practicalnode: https://github.com/azat-co/practicalnode. Vui lòng sao
chép nó từ đó hoặc làm theo hướng dẫn để triển khai được liệt kê bên dưới trong phần này.
bố trí.pug
Hãy mở dự án mà chúng ta đã dừng lại ở chương trước và thêm layout.pug với câu lệnh
loại tài liệu:
tài liệu html
Bây giờ chúng ta có thể thêm các thẻ chính của trang:
html
cái đầu
Tiêu đề của mỗi trang được cung cấp từ biến appTitle (hay còn gọi là local):
title= appTitle
150
Sau đó, trong thẻ head , chúng tôi liệt kê tất cả nội dung giao diện người dùng mà chúng tôi cần trên toàn ứng dụng (trên
mỗi trang):
tập lệnh (loại = "văn bản/javascript", src = "js/jquery-2.0.3.min.js")
liên kết (rel="stylesheet", href="/css/bootstrap-3.0.2/css/bootstrap.
min.css")
liên kết (rel="stylesheet", href="/css/bootstrap-3.0.2/css/bootstrap
theme.min.css")
liên kết (rel="stylesheet", href="/css/style.css")
tập lệnh (loại = "văn bản/javascript", src = "/css/bootstrap-3.0.2/js/
bootstrap.min.js")
tập lệnh (loại = "văn bản/javascript", src = "/js/blog.js")
meta (tên = "khung nhìn", nội dung = "chiều rộng = chiều rộng thiết bị, ban đầu
tỷ lệ = 1,0")
Nội dung chính nằm trong phần thân, có cùng mức độ thụt vào như phần đầu:
thân hình
Bên trong phần thân, chúng tôi viết một id và một số lớp cho các kiểu mà chúng tôi sẽ thêm sau:
#bọc
.thùng đựng hàng
Giá trị appTitle được in động nhưng phần tử p.lead chỉ có văn bản:
h1.page-header= appTitle
p.lead Chào mừng bạn đến với ví dụ từ Express.js Experience by
a(href="http://twitter.com/azat_co") @azatmardan
|. Hãy tận hưởng đi nhé.
Các phần khối có thể được ghi đè bởi các mẫu con (các mẫu mở rộng tệp này):
chặn trang
tiêu đề khối
div
151
Menu là một phần (nghĩa là bao gồm) được lưu trữ trong thư mục dạng xem/bao gồm . Lưu ý sự vắng mặt
của dấu ngoặc kép:
bao gồm bao gồm/menu
Trong khối này có tên cảnh báo, chúng tôi có thể hiển thị thông báo cho người dùng, vì vậy hãy sử dụng đặc biệt
các lớp cảnh báo trên div (vết lõm được giữ nguyên để hiển thị phân cấp):
chặn cảnh báo
div.alert.alert-warning.hidden
Nội dung chính đi trong khối này. Bây giờ nó trống vì mẫu khác sẽ xác định nó:
.nội dung
khối nội dung
Cuối cùng, khối chân trang có div với lớp vùng chứa và với p có văn bản và liên kết (liên kết được
bao bọc trong văn bản) trông như sau:
chặn chân trang
cuối trang
| Bản quyền &bản sao; 2018 | Vấn đề? Nộp cho
a(href="https://github.com/azat-co/blog-express/
vấn đề") GitHub
| .
Để cung cấp cho bạn một hình ảnh đầy đủ cũng như duy trì thụt đầu dòng thích hợp (đó là
PARAMOUNT trong Pug), mã đầy đủ của layout.pug như sau:
tài liệu html
html
cái đầu
title= appTitle
tập lệnh (loại = "văn bản/javascript", src = "js/jquery-2.0.3.min.js")
liên kết (rel="stylesheet", href="/css/bootstrap-3.0.2/css/bootstrap.
min.css")
liên kết (rel="stylesheet", href="/css/bootstrap-3.0.2/css/
bootstrap-theme.min.css")
152
liên kết (rel="stylesheet", href="/css/style.css") tập lệnh (type="text/
javascript", src="/css/bootstrap-3.0.2/js/bootstrap.min.js") script(type="text/javascript", src="/
js/blog.js") meta(name="viewport", content="width=device-width, initial
tỷ lệ = 1,0")
thân hình
#bọc
h1.page-header= appTitle p.lead Chào
mừng bạn đến với ví dụ từ Express.js Trải nghiệm của a(href="http://twitter.com/azat_co")
@azatmardan |. Hãy tận hưởng đi nhé.
chặn trang
tiêu đề khối
div
bao gồm bao gồm/menu
chặn cảnh báo
div.alert.alert-warning.hidden
.nội dung
khối nội dung
chặn chân trang
cuối trang
| Bản quyền &bản sao; 2014 | Vấn đề? Nộp cho
a(href="https://github.com/azat-co/blog-express/issues")
GitHub
| .
Tiếp theo là trang chủ.
153
index.pug
Bây giờ, chúng ta có thể xem mẫu trang chủ index.pug mở rộng layout.pug.
Ghi nhớ cú pháp? Đó là tên mở rộng:
mở rộng bố cục
Bởi vì chúng tôi có thể ghi đè lên một số khối, chúng tôi đặt biến menu thành chỉ mục, do đó
menu bao gồm (tức là menu.pug) có thể xác định tab nào sẽ hiển thị là đang hoạt động:
chặn trang
- menu var = 'chỉ mục'
Tất nhiên, chúng ta cần ghi đè lên khối nội dung . Vì vậy, nội dung chính với danh sách các
bài báo đến từ người dân địa phương lặp lại trên các bài đăng trên blog (bài báo). Mỗi liên kết
bài viết có một tiêu đề và, không cần phải nói, một URL được hình thành bởi giá trị article.slug .
Khi không có bài viết/bài báo nào, thì chúng tôi hiển thị thông báo chưa có bài viết nào được xuất
bản. Mã này như sau:
khối nội dung
nếu (articles.length === 0)
| Không có nội dung được công bố nào.
a(href="/login") Đăng nhập
| để đăng và xuất bản.
khác
từng bài viết, mục lục trong bài viết
div
h2
a(href="/articles/#{article.slug}")= article.title
Để bạn tham khảo và để thể hiện sự dễ hiểu trong phong cách của Pug, mã đầy đủ của
index.pug như sau. Bạn có thể thấy các phần mở rộng và hai phần ghi đè khối (của bố cục):
chặn trang
- menu var = 'chỉ mục'
khối nội dung
154
nếu (articles.length === 0)
| Không có nội dung được công bố nào.
a(href="/login") Đăng nhập | để đăng
và xuất bản.
khác
div
h2
a(href="/articles/#{article.slug}")= article.title
Hình 4-4 cho thấy giao diện của trang chủ sau khi thêm biểu định kiểu.
Hình 4-4. Trang chủ của Blog hiển thị menu và tiêu đề của các bài báo đã
xuất bản
Phù. Tiếp theo là trang dành cho các bài đăng / bài viết trên blog thực tế.
155
bài viết.pug
Trang bài viết riêng lẻ (Hình 4-5) tương đối đơn giản vì hầu hết các thành phần được
trừu tượng hóa trong layout.pug. Chúng tôi chỉ mở rộng và sau đó ghi đè lên khối nội
dung mà không có tiêu đề bài viết (tiêu đề h1 ) và văn bản của bài viết (p cho đoạn văn).
khối nội dung
h1= tiêu đề
p= văn bản
Hình 4-5. trang bài viết
156
Đây là điều tuyệt vời mà chúng tôi nhận được miễn phí nhờ Twitter Bootstrap và
phần tử h1 và p . Bạn có thể thấy rõ rằng ngay cả khi chỉ xác định h1 và p, trang web /articles/node-
fundamentals có menu tiêu đề trang và phần cuối trang. Đó là do tính kế thừa, mở rộng và layout.pug.
Bạn có để ý rằng liên kết “Đăng nhập” không? Hãy triển khai trang đăng nhập tiếp theo.
đăng nhập.pug
Tương tự như article.pug, trang đăng nhập sử dụng login.pug, chứa… không nhiều!
Chỉ một biểu mẫu và một nút với một số lớp/đánh dấu Twitter Bootstrap tối thiểu.
Vì vậy, với article.pug, chúng tôi mở rộng bố cục và ghi đè lên hai khối—một cho giá
trị menu đang hoạt động và khối còn lại cho nội dung, là phần chính của trang. Phần chính
này đã đoán những gì? MỘT MẪU ĐĂNG NHẬP! Đây là tập tin login.pug:
chặn trang
- menu var = 'đăng nhập'
khối nội dung
.col-md-4.col-md-offset-4
h2 Đăng nhập
div = lỗi
div
biểu mẫu (hành động = "/ đăng nhập", phương thức = "POST")
input.form-control(name="email", type="text",
giữ chỗ="hi@azat.co")
input.form-control(tên="mật khẩu", gõ="mật khẩu",
trình giữ chỗ="***")
button.btn.btn-lg.btn-primary.btn-block(type="submit")
Đăng nhập
Một lần nữa, nhờ có Twitter Bootstrap, trang của chúng tôi trông rất tuyệt. Nó có một menu vì
mở rộng và bố trí.pug. Hình 4-6 cho thấy giao diện của trang đăng nhập.
157
Hình 4-6. Trang đăng nhập
Nhưng làm thế nào để tạo một bài viết mới? Dễ! Bằng cách đăng tiêu đề và văn bản của nó.
bài đăng.pug
Trang bài đăng (Hình 4-7) có một dạng khác và nó cũng mở rộng layout.pug. Lần này, biểu
mẫu chứa một phần tử vùng văn bản sẽ trở thành văn bản chính của bài viết. TRONG
ngoài văn bản bài viết, còn có tiêu đề và đoạn URL (hoặc đường dẫn) đến bài viết được gọi là slug.
chặn trang
- menu var = 'bài đăng'
khối nội dung
h2 Đăng một bài viết
div = lỗi
158
div.col-md-8
biểu mẫu(hành động="/bài đăng", phương thức="POST", vai trò="biểu mẫu")
div.form-group
nhãn(for="title") Tiêu đề
input#title.form-control(name="title", type="text", placeholder="JavaScript
rat hay")
div.form-group
nhãn(cho="slug") Sên
input#slug.form-control(name="slug", type="text", placeholder="js-good")
span.help-block Chuỗi này sẽ được sử dụng trong URL.
div.form-group
nhãn(cho="văn bản") Văn bản
textarea#text.form-control(rows="5", name="text",
trình giữ chỗ="Văn bản")
button.btn.btn-primary(type="submit") Lưu
159
Hình 4-7. trang đăng bài
Để cung cấp cho bạn một số hình ảnh về Pug của post.pug, hãy xem trang đăng bài viết mới. Thuộc tính
hành động của <form> sẽ cho phép trình duyệt gửi dữ liệu đến
phụ trợ và sau đó Express sẽ xử lý nó bằng cách xử lý và mã Node của chúng tôi sẽ lưu nó vào cơ sở dữ liệu.
Nếu người dùng quản trị viên hợp lệ đã đăng nhập, thì chúng tôi muốn hiển thị giao diện quản trị viên.
Xem liên kết Quản trị viên trong menu? Hãy triển khai trang quản trị mà liên kết menu này dẫn đến.
quản trị viên.pug
Trang quản trị (Hình 4-8) có một vòng lặp các bài viết giống như trang chủ, nhưng ngoài việc chỉ hiển thị
các bài viết, chúng ta có thể bao gồm một tập lệnh giao diện người dùng (js/admin.js) dành riêng cho trang
này. Tập lệnh này sẽ thực hiện một số lệnh gọi AJAX-y để xuất bản và hủy xuất bản các bài báo.
Các chức năng này sẽ chỉ dành cho quản trị viên. Tất nhiên, chúng tôi sẽ cần xác thực phía máy chủ trên
phần phụ trợ sau này. Đừng chỉ tin tưởng vào xác thực hoặc ủy quyền từ phía trước!
160
Hình 4-8. Trang quản trị hiển thị danh sách các bài báo đã xuất bản và dự thảo
Vì vậy, tệp admin.pug bắt đầu bằng phần mở rộng bố cục và có ghi đè nội dung, trong
trong đó có một bảng các bài viết. Trong mỗi hàng của bảng, chúng tôi sử dụng glyphicon để hiển thị một
biểu tượng ưa thích để tạm dừng hoặc phát . Các biểu tượng đến từ Twitter Bootstrap và được kích hoạt
thông qua các lớp:
chặn trang
- menu var = 'quản trị viên'
khối nội dung
div.admin
nếu (articles.length === 0 )
| Chẳng có gì để trưng bày. Thêm một cái mới
một bài viết(href="/post")
161
|.
khác
table.table.table-stripped
đầu đuôi
tr
th(colspan="2") Thao tác
Tiêu đề bài viết
tbody
tr(data-id=`${article._id}`, class=(!article.published)?
'chưa xuất bản':”)
td.hành động
button.btn.btn-danger.btn-sm.remove(type="button")
span.glyphicon.glyphicon-remove(title="Xóa")
td.hành động
button.btn.btn-default.btn-sm.publish(type="button")
span.glyphicon(class=(article.published) ?
"glyphicon-pause" : "glyphicon-play", title=(article.published) ?
"Hủy xuất bản" : "Xuất bản")
td= bài viết.tiêu đề
tập lệnh (loại = "văn bản/javascript", src = "js/admin.js")
Xin lưu ý rằng chúng tôi sử dụng mẫu chuỗi ES6 (hoặc phép nội suy) để in id bài viết
dưới dạng id dữ liệu thuộc tính (đã xóa thụt đầu dòng):
tr(data-id=`${article._id}`, class=(!article.published) ?
'chưa xuất bản':”)
Và toán tử có điều kiện (ternary) (https://github.com/donpark/hbs) được sử dụng cho các lớp và
thuộc tính tiêu đề. Hãy nhớ rằng, đó là JavaScript! (Đã xóa thụt đầu dòng để xem rõ hơn.)
span.glyphicon(class=(article.published) ? "glyphicon-pause" : "glyphicon-play",
title=(article.published) ? "Unpublish":
"Công bố")
162
Kết quả là một trang quản trị tuyệt đẹp (Được rồi, đủ với sự mỉa mai và nói Twitter
Bootstrap là ngôi sao, xinh đẹp hoặc dễ thương. Không phải… nhưng so với HTML tiêu
chuẩn khiến tôi buồn ngủ, kiểu Twitter Bootstrap là một cải tiến LỚN.) Nó có chức năng
xuất bản và hủy xuất bản các bài viết.
Bản tóm tắt
Trong chương này, bạn đã tìm hiểu về các mẫu Pug và Handlebars (biến, phép lặp,
điều kiện, một phần, không thoát, v.v.) và cách sử dụng chúng trong tập lệnh Node.js
độc lập hoặc trong Express.js. Ngoài ra, các trang chính cho Blog được tạo bằng Pug.
Trong chương tiếp theo, chúng ta sẽ tìm hiểu cách trích xuất dữ liệu từ cơ sở dữ liệu và lưu dữ liệu mới
dữ liệu cho nó. Bạn sẽ làm quen với MongoDB. trở đi.
163

Practical Node - Js - Building Real-World Scalable Web Apps (PDFDrive) - Trang-132-182

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practical Node - Js - Building Real-World Scalable Web Apps (PDFDrive) - Trang-132-182

Uploaded by

Copyright:

Available Formats

Machine Translated by Google

Công cụ mẫu: Pug và

gì đó; chúng ta có thể làm điều đó ở một nơi duy nhất.

• Cú pháp và tính năng của Pug

• Pug sử dụng độc lập

• Cú pháp tay lái

• Tay lái sử dụng độc lập

• Cách sử dụng Pug và Tay lái trong Express.js

• Dự án: thêm Pug mẫu vào Blog

Chương 4 Công cụ mẫu: Pug và Ghi đông

Pug Cú pháp và tính năng

thận để làm theo đúng cú pháp.

trong chương này).

h1 Thực hành Node.js p Cuốn

sách duy nhất mà hầu hết mọi người sẽ cần.

chân trang &sao chép; ấn

<h1> Node.js thực tế </h1> <p> Cuốn sách

duy nhất mà hầu hết mọi người sẽ cần. </p>

Chương 4 Công cụ mẫu: Pug và Ghi đông

<footer> &copy; Nhấn </footer>

loại (dành cho tập lệnh), id và lớp cho div :

tài liệu html

title Tại sao JavaScript tuyệt vời | CodingFear: lập trình và

hoàn cảnh con người

tập lệnh (loại = 'văn bản/javascript').

console.log(`Một số mã JavaScript ở đây và giá trị của a là

h1 Tại sao JavaScript lại tuyệt vời

p Bạn thật tuyệt vời

JavaScript rất thú vị. Gần như tất cả mọi thứ

có thể được viết bằng JavaScript. Nó rất lớn.

duyệt. Đầu ra cũng sẽ có văn bản trong <p>.

nhiều dòng như hiển thị trong phần tử p cuối cùng .

Chương 4 Công cụ mẫu: Pug và Ghi đông

<title>Tại sao JavaScript lại tuyệt vời | CodingFear: lập trình và

hoàn cảnh con người</title>

< kiểu tập lệnh="văn bản/javascript">

console.log(`Một số mã JavaScript ở đây và giá trị của a là

<h1>Tại sao JavaScript lại tuyệt vời</h1>

<div class="col" id="container">

<p>Bạn thật tuyệt vời</p> <p>Cố

JavaScript rất thú vị. Gần như tất cả mọi thứ

có thể được viết bằng JavaScript. Nó rất lớn.

p Bạn thật tuyệt vời p Cố

Chương 4 Công cụ mẫu: Pug và Ghi đông

trở thành một <div với vùng chứa id và lớp col:

<div class="col" id="container">

<p>Bạn thật tuyệt vời</p> <p>Cố lên !

render() của nó . Ví dụ: đây là tệp Nút và nó tạo HTML:

const pug = yêu cầu ('pug')

const pugTemplate = `cơ thể

p Cuốn sách duy nhất mà hầu hết mọi người sẽ cần.

chân trang &sao chép; ấn`

const htmlString = pug.render(pugTemplate, {pretty: true})

Chương 4 Công cụ mẫu: Pug và Ghi đông

tiêu đề: "Hướng dẫn Express.js",

nội dung : "Sách toàn diện về Express.js"

các biến tiêu đề và cơ thể:

<h1>Hướng dẫn Express.js </h1>

<p>Sách toàn diện về Express.js</p>

a(href="http://expressjsguide.com", title="Hướng dẫn Express.js",

target="_blank") Hướng dẫn Express.js

biểu mẫu (hành động = "/ đăng nhập")

nút (loại = "gửi", giá trị = "lưu")

<footer> © Nhấn </footer>

<a></li> <li><span>1< /span><span>không thoát: <b> so với

<span>đã thoát: <b></li> <li><span>2<span>không thoát: <c>

so với <span>đã thoát: <b></li>