×

Cài đặt thư viện EJS trong JavaScript

Avatar of admin
admin 1 Views

Việc sử dụng thư viện mẫu (template engine) như EJS (Embedded JavaScript) trong JavaScript không chỉ giúp việc phát triển ứng dụng trở nên dễ dàng hơn mà còn tận dụng tối đa sức mạnh của cả hai thế giới: cấu trúc dữ liệu mạnh mẽ của JavaScript và tính tiện lợi của HTML. Bài viết này sẽ hướng dẫn bạn từng bước để cài đặt và sử dụng EJS trong dự án của bạn.

1. Giới Thiệu Về Thư Viện EJS

EJS Là Gì?

EJS, viết tắt của Embedded JavaScript, là một template engine đơn giản nhưng mạnh mẽ mà bạn có thể sử dụng trong các dự án web để render các trang HTML từ dữ liệu JavaScript. Với cú pháp gần giống với JavaScript thông thường, EJS khá dễ học và sử dụng.

Tại Sao Nên Sử Dụng EJS?

  1. Đơn Giản và Nhanh chóng: EJS có cú pháp dễ học và dễ hiểu đối với cả những người mới bắt đầu.
  2. Khả Năng Tùy Biến Cao: EJS cho phép bạn nhúng logic JavaScript vào trong mã HTML, giúp kiểm soát linh hoạt hơn.
  3. Hỗ Trợ Phổ Biến: EJS được sử dụng rộng rãi và có một cộng đồng hỗ trợ lớn, dễ dàng tìm thấy tài liệu và sự trợ giúp.

2. Cài Đặt Môi Trường Phát Triển

Yêu Cầu Cơ Bản

Trước khi bắt đầu, hãy chắc chắn rằng bạn đã cài đặt Node.js và npm (Node Package Manager). Bạn có thể tải và cài đặt chúng từ trang chủ của Node.js.

node -v
npm -v

Tạo Mới Dự Án

Để bắt đầu một dự án mới, hãy tạo một thư mục mới và khởi tạo npm:

mkdir my-ejs-app
cd my-ejs-app
npm init -y

Cài Đặt EJS

Sau khi đã khởi tạo dự án, bạn có thể cài đặt EJS bằng câu lệnh npm dưới đây:

npm install ejs

3. Cấu Hình Server Với Express

Cài Đặt Express

Express là một framework nhẹ cho Node.js, giúp việc cấu hình server trở nên dễ dàng hơn. Để cài đặt Express, chạy lệnh sau:

npm install express

Tạo File Server

Tạo một file có tên server.js và thêm vào đoạn mã dưới đây để config server cơ bản:

const express = require('express');
const app = express();
const port = 3000;

// Cấu hình EJS
app.set('view engine', 'ejs');

// Khai báo thư mục chứa các file EJS
app.set('views', './views');

// Route đơn giản
app.get('/', (req, res) => {
  res.render('index', { title: 'Trang Chủ', message: 'Chào Mừng Bạn Đến Với EJS' });
});

app.listen(port, () => {
  console.log(`Server đang chạy tại http://localhost:${port}`);
});

Cấu Trúc Thư Mục

Tạo cấu trúc thư mục sau để tổ chức các tệp tin dự án của bạn:

my-ejs-app
|-- views
|   |-- index.ejs
|-- node_modules
|-- package.json
|-- server.js

4. Tạo File Mẫu EJS

Tạo một file có tên index.ejs trong thư mục views và thêm vào đoạn mã HTML kết hợp với EJS như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

File này sử dụng các biến title và message truyền từ server để render nội dung HTML động.

5. Chạy và Kiểm Tra Ứng Dụng

Để chạy server, bạn chỉ cần thực hiện lệnh sau:

node server.js

Mở trình duyệt và truy cập vào địa chỉ http://localhost:3000 để kiểm tra kết quả. Bạn sẽ thấy trang web được render với tiêu đề và tin nhắn được truyền từ server.

6. Các Tính Năng Nâng Cao Trong EJS

Sử Dụng Cấu Trúc Điều Kiện

EJS cho phép bạn sử dụng các cấu trúc điều kiện như if và for như trong JavaScript bình thường. Ví dụ:

<ul>
  <% if (items.length > 0) { %>
    <% items.forEach(item => { %>
      <li><%= item %></li>
    <% }) %>
  <% } else { %>
    <li>Không có mục nào.</li>
  <% } %>
</ul>

Nhúng Tập Tin Template

Bạn có thể chia nhỏ template của mình thành các phần nhỏ hơn và nhúng chúng vào nhau để dễ bảo trì hơn. Ví dụ có thể cấu hình như sau:

File header.ejs:

<header>
  <h1><%= title %></h1>
</header>

File footer.ejs:

<footer>
  <p>© 2023 Công Ty Của Bạn</p>
</footer>

Sau đó bạn có thể nhúng các file này vào index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <%- include('header') %>
  <h1><%= message %></h1>
  <%- include('footer') %>
</body>
</html>

Sử Dụng Layouts Với EJS

Để tạo ra một layout chung cho các trang, bạn có thể thiết lập một layout cơ bản và extend nó trong các file template con.

Tạo file layout.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <%- include('header') %>
  <div>
    <%- body %>
  </div>
  <%- include('footer') %>
</body>
</html>

Trong file server.js, thêm cấu hình cho sử dụng layout:

app.get('/', (req, res) => {
  res.render('layout', {
    title: 'Trang Chủ', 
    body: '<h1>Chào Mừng Bạn Đến Với EJS</h1>'
  });
});

7. Tối Ưu Hóa SEO Khi Sử Dụng EJS

Để tối ưu hóa SEO khi sử dụng EJS, có một số thực hành tốt bạn cần xem xét:

Sử Dụng Các Thẻ Meta Đầy Đủ

Thêm các thẻ meta như description, keywords, và viewport để cải thiện khả năng SEO của trang:

<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
  <meta name="description" content="Mô tả trang của bạn">
  <meta name="keywords" content="từ khoá 1, từ khoá 2, từ khoá 3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Thêm Breadcrumb

Breadcrumb giúp người dùng và các công cụ tìm kiếm dễ dàng hiểu cấu trúc của trang web. Bạn có thể thêm breadcrumb vào layout của mình như sau:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page"><%= title %></li>
  </ol>
</nav>

Tối Ưu Hóa Các Thẻ Heading

Đảm bảo rằng bạn sử dụng các thẻ heading (<h1>, <h2>, <h3>,…) một cách hợp lý và có cấu trúc. Các thẻ heading nên chứa từ khóa chính của bạn.

<h1><%= mainHeading %></h1>
<h2><%= subHeading %></h2>

8. Kết Luận

EJS là một thư viện mẫu mạnh mẽ và dễ sử dụng trong việc phát triển ứng dụng web với JavaScript. Qua bài viết này, bạn đã học cách cài đặt, cấu hình và sử dụng EJS trong dự án của mình. Đồng thời, cũng đã tìm hiểu về các kỹ thuật tối ưu hóa SEO khi sử dụng EJS. Hy vọng rằng bài viết này sẽ giúp bạn có thêm nhiều kiến thức mới và cải thiện kỹ năng lập trình của mình.

Chúc bạn thành công trong việc phát triển ứng dụng web!

Comments

Bài viết liên quan