Viết HTML nhanh hơn với Jade để thiết kế giao diện website

Việc thiết kế giao diện website các design phải mất thời gian ngồi code HTML sẽ thấy khó khăn mất thời gian nhất là việc viết tag và đóng tag. HTML và CSS là một ngôn ngữ quan trọng mà chúng ta đã biết, với sự nâng cấp phát triển của HTML5 và CSS3 là tiểu chuẩn đẳng cấp của các xu hướng thiết kế website hiện đại ngày nay.

Viết code HTML5 đơn thuần trên notepad++ là điều mà mà chúng ta vẫn thường làm. Vậy hôm nay tôi sẽ giới thiệu cho bạn biết một framework giúp chúng ta code nhanh hơn, gọn gàng hơn đó chính là Jade.

Jade là gì?

Jade là một template engine, hay một dạng framework được phát triển bởi rất nhiều developer giúp cho các web developer có thể viết code HTML nhanh và gọn hơn. Khi sử dụng Jade thì bạn không cần phải viết các dấu mở hay đóng tag HTML nữa giảm được thời gian và sự khó chịu của bạn với việc đóng mở tag, việc đó sẽ được quyết định dựa trên vị trí indent của code.

Như anh em đã thấy thì hình ảnh ở trên bạn nhìn 2 file một bên là code trên jade một bên là code html. Hệ thống chạy của jade sẽ tự thêm các code các tag vào file HTML. Bạn sẽ thấy được trực quan file code jade nó sẽ thon gọn giảm dòng và không phức tạp như bạn code HTML bình thường. Và việc bạn đang quen với việc code HTML là thì khi tập tành viết trên jade sẽ khó khăn một chút nhưng đừng lo một thời gian bạn sẽ phê với jade code thật dễ viết dễ đọc

Cài đặt để viết được jade

Tôi sẽ giới thiệu sau đây cho các bạn về hai môi trường nổi tiếng để viết jade là Sublime text và Atom. Chắc hai môi trường này bạn đã từng sử dụng rồi chứ?

Sublime text

Đối với Sublime text bạn phải cài đặt Node.js dưới đây mình sẽ dưới thiệu bạn cách cài đặt Node.js trên hệ điều hành windows.

Cài đặt Node.js

Để cài đặt Node.js các bạn hãy vào trang chính của nó rồi  khi vào thì bạn sẽ thấy khung 'Download for Windows' rất lớn, bạn click vào đó và tải về. Khi tải về rồi thì bạn khởi động file cài đặt lên và cài bình thường như bao chương trình Windows khác.

Khi cài xong thì bạn vào vào Command Prompt, sẽ có 2 chương trình command prompt hiện lên, bạn chọn 'Node.js command prompt', sau đó đánh vào dòng lệnh npm install jade --global và đợi khi cmd cài đặt xong sẽ ra mấy dòng chữ, bạn không cần quan tâm đến nó, hãy exit cmd.

Tiếp theo bạn hãy vào Sublime Text (ở đây mình sử dụng Sublime Text 3), vào Package Control, tìm và cài đặt 2 plugin có tên 'Jade' và 'Jade Build'. Khi cài xong bạn hãy tắt và khởi động lại Sublime Text, tạo file mới, lưu với đuôi .jade, đến đây thì bạn đã có một môi trường sẵn sàng để sử dụng Jade. (Khi viết xong code Jade thì bạn nhấn Ctrl + B để nó tạo thêm 1 file html, file html đó sẽ được đặt trong cùng 1 thư mục với file Jade).

Atom Editor

Đối với Atom thì dễ hơn, bạn vào File > Settings > Install > tìm 2 packages có tên là 'atom-jade' của merrihew và 'jade-autocompile' của ManRueda, cài đặt và restart Atom.

Khi này bạn hãy tạo file mới, save với đuôi .jade, chọn Edit > Select Grammar > Jade để nó nhận syntax của Jade, ở đầu file jade bạn hãy đánh dòng chữ // output: index.html để khi save lại thì plugin jade-autocompile sẽ giúp bạn biên dịch và tạo file html ở trong cùng folder với file jade.

Bạn có thể cài thêm package 'Preview' để có thể xem live preview khi bạn code jade. Khi cài xong bạn chọn một dòng bất kì trong file Jade của bạn, vào mục Packages > Preview > Toggle Preview Tab. (Lưu ý rằng đây chỉ là live preview, không phải file html, nhưng nếu muốn xem trực tiếp file html thì bạn cũng có thể mở file html, để 1 bên và khi save ở file .jade thì code bên file html cũng sẽ thay đổi.

Nào chúng ta vào mổ sẻ các tính năng của jade nhé trong khi bạn dùng jade có những thắc mắc gì hãy bình luận dưới bài viết để chúng tôi giúp bạn nhé!

1. Cách viết, đóng và mở tag.

Đã nói ở đầu bài viết thì việc khó chịu nhất là việc mở và đóng tag khiến ta mất thời gian thì jade đã giải quyết công việc này cho chúng ta những dòng code gọn gàng dễ dàng hơn.

Ví dụ: Mình muốn tạo một thẻ article, trong đó có một thẻ h2 có tựa đề và một thẻ p để ghi nội dung. Trong HTML chúng ta thường viết như sau:

Trong Jade thì đơn giản hơn:

Như mình đã nói ở trên, Jade sẽ quyết định các mối quan hệ giữa các thành phần trong DOM dựa trên cách indent (nhấn Tab) code của bạn.

Sau mỗi tag ta có thể trực tiếp ghi nội dung sau tag, cách nhau bằng khoảng trắng, jade sẽ tự nhận dạng những nội dung này.

Như các bạn thấy thì khi viết nội dung paragraph dài, mình đã nhấn xuống hàng bớt và thêm dấu thẳng đứng | để đọc dễ hơn, dấu thẳng đứng đó là nối nội dung của phần đó với phần trên. Thí dụ nếu dài hơn thì mình sẽ làm vậy:

Các bạn cũng nên lưu ý là việc xuống dòng này chỉ có tác dụng trong editor, trên trình duyệt thì nó vẫn nằm trong hàng bình thường, nên bạn muốn xuống dòng hãy dùng thể br

2. Chèn thuộc tính và giá trị vào code.

Để thêm thuộc tính và giá trị vào code như CSS và javascript thì bạn chỉ cần thêm dấu phẩy giữa các tag còn đâu ta thêm thuộc tính như bình thường trong html

Ví dụ: Mình muốn liên kết đến file css và javascript mà mình có, sau đó mình muốn tạo một thẻ a link đên Google.com ở tab mới và muốn thẻ h2 trong article có màu đỏ.

Đây là code trong Jade:

Trong HTML, ta sẽ có code như sau:

Ta thấy rằng việc thêm thuộc tính vào tag cũng khá đơn giản, chỉ cần cách nhau bằng dấu phẩy. 

(Do trong quá trình code bị lỗi nên cái tag a nó bay lên kia :v các bạn không cần quan tâm đến nó. :D)

3. Tạo các tag có class và id.

Để thêm id và class vào tag trong Jade thì khá là đơn giản, syntax như sau: ten_tag#ten_id hay ten_tag.ten_class.

Ví dụ như mình muốn tạo 2 div có class là container và một div có id là pewdiepie thì ta có thể viết như trong hình:

Bạn thấy rằng ở dòng thứ 14 mình không có ghi chữ div, đây là cái hay của Jade, mặc định các tag mà bạn không khai tên và có class hay id sẽ đều là div, có lẽ là do tag này thường được sử dụng nhiều nên các nhà phát triển Jade đã tích hợp tính năng này.

Kết quả ở file HTML ta sẽ có:

Hai div ở dòng 16 và 17 là như nhau, có chung một class.

4. Chèn ảnh và comment.

Ở jade khi bạn muốn chèn ảnh thì bạn hãy sử dụng câu lệnh code sau:

img(src="nguon_cua_anh", alt="ten_cua_anh")

Cách chèn comment của Jade cũng như trong CSS, nhưng bạn có thể chèn nhiều dòng hơn chỉ bằng cách cho chung các dòng vào 1 cột Tab, ví dụ:

5. Code ngay trong file.

Đây có thể nói là một trong những cái hay của Jade, ta có thể gán giá trị vào tag, hay thậm chí là tạo nhiều thẻ< li> với các giá trị khác nhau, ví dụ như nếu muốn tạo 3 thẻ <li> với 3 giá trị khác nhau thì ta có thể tạo một mảng các giá trị, sau đó lần lượt gán các giá trị đó vào 3 tag li (Nhấn Tab đầu mỗi dòng):

Kết quả ở HTML sẽ như sau

6. Tạo Mixins.

Đây cũng là một tính năng rất hay của Jade, ta có thể dùng Mixin để tạo các dòng code mà ta sẽ sử dụng nhiều lần, hay tạo các functions ngay trong file Jade.

Ví dụ: Tạo một mixin tên là myArticle để tái sử dụng các div có class là container bao gồm một tag thẻ h4 và một tag thẻ p.

Trong Jade ta có thể viết như sau:

Ở dòng thứ 18, mình đã gọi mixin ra bằng cách viết dấu cộng cùng với tên của mixin, trong trường hợp này là myArticle.

Khi chuyển sang dạng HTML thì có dang code như sau:

Đúng là jade gọn gàng, dễ dàng, tiết kiệm

Kết luận

Việc bạn sử dụng jade để cắt giao diện thiết kế website chắc chắn nó sẽ tuyệt vời hơn HTML, thời gian tiết kiệm sẽ giúp bạn sáng tạo, sẽ có những website mà bạn sẽ tự hào khi bạn đã làm quen với code trên jade. Và sau đây chúng ta sẽ tóm tắt ưu nhược điểm ở jade nhé!

Ưu điểm

_Dễ tiếp cận, dễ sử dụng. 

_Gọn gàng, dễ đọc. 

_Có nhiều tính năng hay, giúp tăng tối đa tốc độ phát triển website.

Nhược điểm

_Tutorial không có nhiều, nên ban đầu sẽ mất một ít thời gian để làm quen. 

_Quá trình cài đặt hơi bối rối với những người mới làm quen.

Vậy còn bạn? Bạn nghĩ sao về Jade? Bạn sẽ áp dụng Jade vào dự án kế tiếp chứ? Hãy chia sẻ với mọi người khi bạn sử dụng jade vào thiết kế giao diện website mà bạn làm thay HTML thông dụng nhé!

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.