Giới Thiệu Về Eleventy
Eleventy (hoặc 11ty) là một trình tạo trang tĩnh (static site generator) mới và nổi bật trong cộng đồng phát triển web. Nó được thiết kế để đơn giản và linh hoạt, đáp ứng các nhu cầu từ các dự án nhỏ đến các trang web phức tạp. Eleventy cho phép bạn chuyển đổi nội dung từ nhiều nguồn dữ liệu khác nhau thành các trang HTML tĩnh, giúp trang web của bạn nhanh hơn và dễ duy trì.
Trong bài viết này, chúng ta sẽ cùng nhau đi qua các bước để cài đặt và cấu hình Eleventy trong môi trường phát triển JavaScript.
Các Bước Chuẩn Bị
1. Cài Đặt Node.js
Để sử dụng Eleventy, bạn cần có Node.js và npm (Node Package Manager) được cài đặt trên máy tính của bạn. Nếu chưa có, bạn có thể tải Node.js từ trang web chính thức nodejs.org và làm theo hướng dẫn để cài đặt.
Sau khi cài đặt Node.js, bạn có thể kiểm tra phiên bản bằng cách sử dụng các lệnh sau trong terminal hoặc command prompt:
node -v
npm -v
2. Tạo Thư Mục Dự Án Mới
Sau khi đã cài đặt Node.js, bạn cần tạo thư mục cho dự án của mình. Ví dụ:
mkdir my-eleventy-site
cd my-eleventy-site
3. Khởi Tạo Dự Án Với npm
Trong thư mục dự án, bạn cần khởi tạo một dự án npm mới bằng cách sử dụng lệnh sau:
npm init -y
Lệnh trên sẽ tạo ra một tệp package.json với các cấu hình mặc định. Tệp này sẽ dùng để quản lý các phụ thuộc của dự án.
Cài Đặt Eleventy
1. Cài Đặt Eleventy Bằng npm
Để cài đặt Eleventy, bạn sử dụng lệnh sau:
npm install @11ty/eleventy --save-dev
Lệnh này sẽ cài đặt Eleventy và thêm nó vào phần devDependencies trong tệp package.json của bạn.
2. Cấu Hình Tệp package.json
Tiếp theo, bạn cần thêm một số scripts vào tệp package.json để dễ dàng chạy Eleventy. Mở tệp package.json và thêm các dòng sau vào phần scripts:
{
"scripts": {
"build": "eleventy",
"serve": "eleventy --serve",
"watch": "eleventy --watch"
}
}
build: Chạy Eleventy để tạo các tệp tĩnh.serve: Chạy Eleventy server và theo dõi các thay đổi.watch: Theo dõi các thay đổi mà không cần chạy server.
3. Tạo Cấu Trúc Thư Mục Dự Án
Eleventy yêu cầu một số cấu trúc thư mục cơ bản để hoạt động. Bạn có thể tạo các thư mục và tệp sau:
mkdir src
mkdir src/_includes
mkdir src/_data
src: Chứa tất cả các tệp nguồn của bạn._includes: Chứa các tệp template và thành phần dùng chung._data: Chứa dữ liệu tĩnh hoặc động.
Tạo Nội Dung Với Eleventy
1. Tạo Tệp HTML Đơn Giản
Bây giờ, bạn có thể bắt đầu tạo nội dung cho trang web của mình. Tạo một tệp HTML đơn giản trong thư mục src, ví dụ như index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Eleventy Site</title>
</head>
<body>
<h1>Welcome to My Eleventy Site</h1>
<p>This site is generated with Eleventy.</p>
</body>
</html>
2. Sử Dụng Layouts
Eleventy hỗ trợ việc tái sử dụng các layout để làm trang web của bạn dễ duy trì hơn. Tạo một layout đơn giản trong thư mục _includes, ví dụ như base.njk (Eleventy hỗ trợ Nunjucks, một template engine mạnh mẽ):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<header>
<h1>{{ header }}</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>© 2023 My Eleventy Site</p>
</footer>
</body>
</html>
3. Sử Dụng Layout Trong Nội Dung
Để sử dụng layout mà bạn đã tạo, cập nhật tệp index.html như sau:
---
layout: base.njk
title: Welcome to My Eleventy Site
header: Hello, Eleventy!
---
{% block content %}
<p>This is my first Eleventy site.</p>
{% endblock %}
Chạy Eleventy
Bây giờ bạn đã có nội dung và cấu hình cơ bản, đã đến lúc chạy Eleventy để xem kết quả. Bạn có thể sử dụng một trong các lệnh sau:
npm run build: Tạo trang web tĩnh.npm run serve: Chạy server và xem theo dõi các thay đổi.npm run watch: Chỉ theo dõi các thay đổi mà không chạy server.
Ví dụ, bạn chạy lệnh sau để chạy server:
npm run serve
Eleventy sẽ tạo các tệp HTML tĩnh từ các tệp nguồn của bạn và server sẽ tự động cập nhật khi bạn thực hiện thay đổi nào đó.
Cấu Hình Thêm Cho Eleventy
1. Tùy Chỉnh Thư Mục Đầu Ra
Theo mặc định, Eleventy sẽ tạo các tệp HTML tĩnh trong thư mục _site. Bạn có thể thay đổi thư mục đầu ra bằng cách tạo tệp cấu hình .eleventy.js trong thư mục dự án và thêm cấu hình sau:
module.exports = function(eleventyConfig) {
return {
dir: {
input: "src",
includes: "_includes",
data: "_data",
output: "public"
}
};
};
2. Tùy Chỉnh Data
Bạn có thể sử dụng các tệp dữ liệu động hoặc tĩnh để tạo nội dung. Ví dụ, tạo tệp site.json trong thư mục _data:
{
"title": "My Eleventy Site",
"description": "This is a description of my site."
}
Sau đó, bạn có thể truy cập dữ liệu này trong các template của mình:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ site.title }}</title>
<meta name="description" content="{{ site.description }}">
</head>
<body>
<header>
<h1>{{ site.title }}</h1>
<p>{{ site.description }}</p>
</header>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>
3. Sử Dụng Bộ Lọc và Plugin
Eleventy cho phép bạn sử dụng các bộ lọc (filter) và plugin để mở rộng khả năng của nó. Bạn có thể cài đặt thêm các bộ lọc và plugin từ cộng đồng hoặc tự tạo ra chúng.
module.exports = function(eleventyConfig) {
eleventyConfig.addFilter("myFilter", function(value) {
// Custom filter logic
return value.toUpperCase();
});
eleventyConfig.addPlugin(require("@11ty/eleventy-plugin-syntaxhighlight"));
return {
dir: {
input: "src",
includes: "_includes",
data: "_data",
output: "public"
}
};
};
Kết Luận
Eleventy là một trình tạo trang tĩnh mạnh mẽ và linh hoạt, với cú pháp và cấu hình dễ học và dễ sử dụng. Qua bài viết này, chúng ta đã cùng nhau đi qua các bước cài đặt và cấu hình Eleventy trong môi trường phát triển JavaScript. Hy vọng rằng bạn sẽ tận dụng được ưu điểm của Eleventy để tạo ra các trang web nhanh, an toàn và dễ bảo trì.
Comments