Dưới đây là một cấu trúc đơn giản cho một trang web tĩnh, sử dụng JavaScript để tự động chèn tiêu đề và chân trang. Trang web này có một trang index.html hiển thị danh sách các bài viết theo thứ tự mới nhất.
1. Cấu trúc thư mục
$$
web-tinh-don-gian/
├── index.html
├── header.html
├── footer.html
├── scripts/
│ └── main.js
├── styles/
│ └── style.css
└── posts/
├── post1.html
├── post2.html
└── post3.html
$$
2. Nội dung các file
a. index.html
$$
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Danh sách bài viết</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div id="header"></div>
<main>
<h1>Danh sách bài viết</h1>
<ul id="post-list">
<!-- Danh sách bài viết sẽ được chèn bởi JavaScript -->
</ul>
</main>
<div id="footer"></div>
<script src="scripts/main.js"></script>
</body>
</html>
$$
b. header.html
$$
<header>
<h1>Blog Đơn Giản</h1>
<nav>
<a href="index.html">Trang chủ</a>
</nav>
</header>
$$
c. footer.html
$$
<footer>
<p>© 2025 Blog Đơn Giản. Tất cả các quyền được bảo lưu.</p>
</footer>
$$
d. scripts/main.js
$$
// Chèn header và footer
document.getElementById('header').innerHTML = fetch('header.html').then(res => res.text()).then(data => data);
document.getElementById('footer').innerHTML = fetch('footer.html').then(res => res.text()).then(data => data);
// Danh sách bài viết
const posts = [
{ title: 'Bài viết 3', link: 'posts/post3.html', date: '2025-01-15' },
{ title: 'Bài viết 2', link: 'posts/post2.html', date: '2025-01-10' },
{ title: 'Bài viết 1', link: 'posts/post1.html', date: '2025-01-05' },
];
// Tạo danh sách bài viết
const postList = document.getElementById('post-list');
posts.forEach(post => {
const listItem = document.createElement('li');
listItem.innerHTML = <a href="${post.link}">${post.title}</a> - <small>${post.date}</small>;
postList.appendChild(listItem);
});
$$
e. styles/style.css
$$
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header, footer {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
header a, footer a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
h1 {
color: #333;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 10px 0;
}
li a {
text-decoration: none;
color: #007BFF;
}
li a:hover {
text-decoration: underline;
}
$$
f. Bài viết mẫu trong thư mục posts/
posts/post1.html
$$
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bài viết 1</title>
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
<div id="header"></div>
<main>
<h1>Bài viết 1</h1>
<p>Nội dung của bài viết 1.</p>
</main>
<div id="footer"></div>
<script src="../scripts/main.js"></script>
</body>
</html>
$$
Tương tự, bạn tạo các bài viết khác (post2.html, post3.html) với nội dung khác nhau.
3. Cách hoạt động
JavaScript sẽ tự động tải header.html và footer.html vào các trang.
Danh sách bài viết trong index.html được hiển thị theo thứ tự bài viết mới nhất dựa trên danh sách posts trong file main.js.
4. Chạy thử
Mở file index.html bằng trình duyệt để xem kết quả. Bạn cũng có thể sử dụng một server cục bộ (như VSCode Live Server) để đảm bảo fetch() hoạt động.
