Pug Template Engine: Giải pháp tối ưu cho phát triển giao diện web

Pug (trước đây là Jade) là một template engine mạnh mẽ, giúp đơn giản hóa việc viết mã HTML, tăng tốc độ phát triển và cải thiện khả năng bảo trì của dự án web. Bài viết này sẽ giới thiệu chi tiết về Pug, từ cài đặt, sử dụng cơ bản đến các tính năng nâng cao và cách tích hợp với Gulp để tự động hóa quy trình làm việc.

Để hiểu rõ bài viết này, bạn cần có kiến thức nền tảng về HTML, CSS, JavaScript và các khái niệm cơ bản về website.

Tìm hiểu về Pug template engineTìm hiểu về Pug template engine

Pug sử dụng cú pháp dựa trên thụt lề và khoảng trắng, tương tự như Python, giúp mã nguồn dễ đọc và dễ bảo trì hơn so với HTML truyền thống. Ví dụ:

doctype html
html(lang='vi')
  head
    title Pug rất tuyệt vời
  body
    h1 Ví dụ về Pug
    p Ví dụ Pug thú vị!

Đoạn mã Pug trên khi biên dịch sẽ tạo ra HTML như sau:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <title>Pug rất tuyệt vời</title>
  </head>
  <body>
    <h1>Ví dụ về Pug</h1>
    <p>Ví dụ Pug thú vị!</p>
  </body>
</html>

Trình biên dịch Pug sẽ báo lỗi nếu bạn thụt lề không đúng cấu trúc, giúp đảm bảo tính hợp lệ của mã HTML được tạo ra. Vậy làm thế nào để bắt đầu sử dụng Pug?

Cài đặt Pug

Để sử dụng Pug, bạn cần cài đặt Node.js và npm (Node Package Manager). Sau khi cài đặt Node.js, bạn có thể cài đặt Pug bằng lệnh sau:

npm install pug -g

Lệnh này sẽ cài đặt Pug global trên hệ thống của bạn, cho phép bạn sử dụng Pug từ bất kỳ thư mục nào.

Sử dụng Pug cơ bản

Các tập tin Pug có phần mở rộng là .pug. Bạn không cần phải đóng các thẻ HTML vì Pug sử dụng thụt lề để xác định cấu trúc.

Ví dụ, tạo một tập tin index.pug với nội dung sau:

html
  head
    title Trang Pug đầu tiên của tôi
  body
    header
      p Phần menu sắp có
    p Đây là bài viết về Pug template engine, hãy thưởng thức!
    footer
      p footer tuyệt vời với nhiều bản quyền

Để biên dịch tập tin này sang HTML, mở terminal, điều hướng đến thư mục chứa tập tin index.pug và chạy lệnh sau:

pug index.pug

Lệnh này sẽ tạo ra tập tin index.html tương ứng với tập tin index.pug.

Biến (Variables) trong Pug

Biến cho phép bạn lưu trữ các giá trị và sử dụng lại chúng. Điều này rất hữu ích cho các nội dung như tiêu đề trang hoặc các đoạn văn bản lặp lại.

- var pageTitle = "Pug thật tuyệt vời"
- var pageCaption = "Trang này nói về Pug template"

h1 #{pageTitle}
p #{pageCaption}

Trong Pug, chúng ta sử dụng - var để định nghĩa biến và = để gán giá trị. Để sử dụng các biến đã định nghĩa, chúng ta sử dụng interpolation (nội suy) bằng cú pháp #{variableName}.

Văn bản trong Pug

Văn bản trong Pug có thể được viết theo ba cách:

  • Thụt lề văn bản với ký tự | phía trước:

    p | Văn bản của tôi bên trong thẻ p

  • Đặt dấu chấm . phía sau thẻ HTML và thụt lề văn bản (không có ký tự |):

    p.
  Văn bản của tôi bên trong thẻ p

  • Viết văn bản ngay sau thẻ HTML (cách này phổ biến nhất):

    p Văn bản của tôi bên trong thẻ p

Thuộc tính trong Pug

Thuộc tính của thẻ HTML được viết tương tự như trong HTML, nhưng giá trị của chúng có thể là JavaScript. Ví dụ:

a.link(href='about.html', target='_blank') Về chúng tôi

sẽ tạo ra thẻ <a href="about.html" target="_blank" class="link">Về chúng tôi</a>

Bên trong dấu ngoặc đơn, bạn có thể thêm tất cả các thuộc tính bạn cần như class, ID,… Ngoài ra, bạn có thể tạo các thẻ <div> với class và ID theo các cách sau:

.container
#main-content
div.content
div#sidebar

Chúng ta sẽ được mã HTML sau:

<div class="container"></div>
<div id="main-content"></div>
<div class="content"></div>
<div id="sidebar"></div>

Vì chúng ta có thể thêm các thuộc tính cho thẻ HTML, chúng ta có thể dễ dàng thêm stylesheet và import tập tin JavaScript:

link(href='/css/styles.css', rel='stylesheet')
script(type='text/javascript').
  var myVar = 'Hello Var';
  console.log(myVar);
script(src='/javascripts/app.js')

Mixins trong Pug

Mixins là một tính năng hữu ích của Pug, cho phép bạn tạo ra các khối mã có thể sử dụng lại. Để tổ chức dự án tốt hơn, bạn nên đặt các mixins trong một tập tin riêng và chỉ include chúng khi cần dùng.

Cú pháp cơ bản để tạo mixin trong Pug:

//- Declaration (invoice-mixin.pug)
mixin invoice
  .invoice-wrapper
    h2 Hóa đơn
    ul
      li Số:
      li Email:

Sau khi định nghĩa, khi cần dùng, bạn gọi nó như sau:

section
  +invoice
p Đây là một bài viết về pug template engine, hãy thưởng thức nó!

Câu điều kiện (Conditionals) trong Pug

Câu lệnh điều kiện rất cần thiết để hiển thị nội dung khác nhau dựa trên các điều kiện khác nhau. Pug cho phép chúng ta sử dụng các câu lệnh logic như if/else.

- var language = "Pug"
if language == "Pug"
  p Tuyệt vời
else
  p Không tuyệt vời

Đoạn code trên sẽ hiển thị <p>Tuyệt vời</p>.

Kế thừa (Inheritance) trong Pug

Pug hỗ trợ template inheritance (kế thừa template). Template inheritance hoạt động thông qua từ khoá block và extends. Giống như mixins, Pug cung cấp một tính năng tương tự đó là Blocks. Một block là một đoạn code được định nghĩa và các tập tin khác có thể ghi đè (thay thế) nó.

//- layout.pug
html
  head
    title Trang của tôi - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

Để extend tập tin layout.pug, chúng ta tạo một tập tin mới và sử dụng từ khoá extends với đường dẫn đến tập tin .pug cha. Sau đó, định nghĩa một hoặc nhiều blocks để ghi đè nội dung blocks trong tập tin cha. Nếu blocks nào không được định nghĩa lại, nó sẽ sử dụng blocks trong tập tin cha.

//- index.pug
extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['cat', 'dog']
  each petName in pets
    include pet-template

Pug kết hợp với Gulp

Bạn có thể sử dụng Pug trong dự án của mình để cấu trúc giao diện tốt hơn, mã tổ chức hơn. Tuy nhiên, chúng ta sẽ không muốn phải biên dịch bằng tay mỗi khi viết Pug. Chúng ta muốn quá trình này diễn ra tự động.

Gulp LogoGulp Logo

Dưới đây là thiết lập nhanh để có thể kết hợp Pug với Gulp tool:

  1. Cài đặt Gulp:

    Để cài đặt Gulp, mở terminal và nhập lệnh sau:

    npm install --save-dev gulp

  2. Tạo cấu trúc thư mục pug:

    Trong thư mục gốc của Project, tạo thư mục templates để chứa tất cả các tập tin pug.

  3. Tạo tập tin package.json:

    Trong thư mục gốc của Project, tạo tập tin package.json với nội dung sau:

    {
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-pug": "^5.0.0"
  }
}

    Chạy lệnh npm install trên terminal để Node cài đặt các dependency cần thiết để biên dịch Pug vào thư mục node_modules.

  4. Tạo gulp task biên dịch Pug sang HTML:

    Trong thư mục gốc của Project, tạo tập tin gulpfile.js. Đây là nơi chúng ta tạo ra gulp task giúp gulp hiểu được tập tin .pug trong thư mục templates và biên dịch nó vào thư mục build.

    Mở tập tin gulpfile.js và nhập nội dung sau:

    const gulp = require('gulp');
const pug = require('gulp-pug');

// Định nghĩa task 'pug'
gulp.task('pug', function() {
  return gulp.src('templates/**/*.pug') // Lấy tất cả các file .pug trong thư mục templates và các thư mục con
    .pipe(pug()) // Biên dịch sang HTML
    .pipe(gulp.dest('build')); // Xuất ra thư mục build
});

// Định nghĩa task 'watch' để theo dõi thay đổi và tự động biên dịch
gulp.task('watch', function() {
  gulp.watch('templates/**/*.pug', gulp.series('pug'));
});

// Task mặc định để chạy khi gõ 'gulp'
gulp.task('default', gulp.series('pug', 'watch'));

    Sau khi thiết lập gulpfile.js, chạy câu lệnh gulp trong thư mục gốc của Project và tận hưởng kết quả. Bạn sẽ thấy thư mục build xuất hiện chứa các tập tin HTML đã được biên dịch.

Kết luận

Sử dụng Pug template engine thay vì HTML chuẩn là cách tuyệt vời để tổ chức code, giúp cấu trúc code dễ dàng, dễ hiểu, tăng tốc độ debug, rút ngắn thời gian phát triển thông qua sử dụng mixins, ít xảy ra lỗi hơn và tách biệt giữa logic và markup.

Bạn có thể tìm hiểu thêm về Pug tại trang web document của Pug.

Tài nguyên hữu ích