NodeJS – Tùy biến giao diện Express

4.2/5 - (4 votes)

Trong các bài trước chúng ta đã tìm hiểu cách xây dựng ứng dụng với Express, và các ứng dụng này có giao diện phía client (hay frontend) cũng khá bắt mắt, tuy nhiên nếu muốn chúng ta có thể tùy biến để giao diện hiển thị theo ý thích riêng của chúng ta.

Khi tạo một project Express thì file index.ejs (mà chúng ta hay tách thành top.ejs và bottom.ejs) có dòng code này tròng thẻ <head>:

<link rel='stylesheet' href='/stylesheets/style.css' />

Đây là dòng code tham chiếu đến file style.css được đặt trong thư mục public/stylesheets. Ngoài thư mục stylesheets thì còn có 2 thư mục khác trong này là images và javascripts. Đây là các thư mục chứa các file tài nguyên để sử dụng cho phần frontend.

Chúng ta sẽ thử thay đổi một số thứ trong file style.css của project Notes đã làm trong phần trước để có giao diện như ý muốn.

h1 {
    text-align: center;
    text-decoration: underline;
}

Đoạn code CSS trên rất đơn giản nếu bạn đã từng học CSS. Chỉ là đưa các element h1 ra giữa trình duyệt và thêm dấu gạch dưới phía dưới.

Tất nhiên là ngoài file style.css thì chúng ta cũng có thể tự viết nhiều file khác để việc tùy biến giao diện được linh hoạt hơn, bạn chỉ cần viết các file đó rồi đưa link tham chiếu trong thẻ <link> là được.

Nếu muốn bạn có thể dùng thêm một framework khác rất nổi tiếng đó là Bootstrap. Boostrap được phát triển bởi Twitter, hỗ trợ làm frontend rất mạnh, rất dễ sử dụng, có thể dùng trên nhiều loại trinh duyệt khác nhau.

Để sử dụng Bootstrap thì chúng ta có thể lên trang chủ của Bootstrap tại địa chỉ: http://getbootstrap.com/getting-started/#download

Sau khi tải về thì chúng ta giải nén ra rồi bỏ vào thư mục public, tiếp theo chúng ta chỉ cần khai báo thẻ <link> tham chiếu đến file bootstrap.min.css trong thư mục css là được, Ví dụ mình giải nén ra được thư mục bootstrap-3.3.7-dist thì mình khai báo như sau:

<link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

Sau đó trong file bottom.ejs chúng ta phải khai báo hai dòng sau trước khi đóng thẻ </body>:

<script src="http://code.jquery.com/jquery.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body></html>

Hoặc dùng cách khác mà hầu hết mọi người thường dùng là chèn link CDN trực tiếp trong thẻ <link> luôn:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Dùng cách này thì bạn không cần phải tốn bộ nhớ lưu trữ Bootstrap, ngoài ra Bootstrap sẽ được tải về nhanh hơn vì có rất nhiều trang web sử dụng Bootstrap bằng CDN, do đó trình duyệt sẽ lưu lại Bootsrap trong bộ nhớ cache, và đến khi gặp trang web của chúng ta cũng sử dụng CDN thì trình duyệt không cần phải tải lại nữa mà dùng thẳng cái đã được lưu trong cache luôn.

Sau khi khai báo Bootstrap chúng ta vẫn có thể khai báo file style.css của riêng chúng ta, như thế chúng ta có thể ghi đè Bootstrap đẻ tùy biến theo ý chúng ta.

Ngoài ra khi sử dụng Bootstrap bạn phải khai báo thêm dòng này ở đầu file top.ejs:

<!DOCTYPE html>

5 3 votes

Article Rating

Share this: