Giới thiệu:
Pjax
là một plugin jQuery sử dụng ajax và pushState để mang lại trải nghiệm duyệt web nhanh chóng với các liên kết cố định. Pjax
hoạt động bằng cách tìm nạp HTML
từ máy chủ của bạn thông qua ajax và thay thế nội dung của phần tử vùng chứa trên trang của bạn bằng HTML
đã tải. Sau đó, nó cập nhật URL hiện tại trong trình duyệt bằng cách sử dụng pushState
.
Hướng dẫn cài đặt Pjax:
Dán 2 script này vào blog/website của bạn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
JavaScript
cơ bản:
$(document).pjax(selector, 'a[target!=_blank]', '.container', options)
Chú thích:
selector
dùng để liên kết các chuỗi pjax, thường là thẻa
, nếu bạn muốn xóa một số URL bên ngoài, ở đây có thể làa[href^='https://all4u.cf']
.container
là vùng chứa chuyển đổi nội dung, ví dụcontainer
. Có nghĩa là chỉ có nội dung trong thẻ này la được làm mới. Như đã nói, bạn có thể thay đổi thành tên gì cũng được nhưng đừng trùng với các thẻ css để tránh gây ra vài lỗi vặt.timeout
là thời gian chờ ajax tính bằng mili giây sau đó buộc phải làm mới hoàn toàn.
Ví dụ code HTML
cơ bản:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hướng dẫn tạo PJAX cho Blog/website</title>
</head>
<body>
<div id="container">
<h1>Nội dung cần được làm mới</h1>
</div>
</body>
</html>
Thêm hoạt ảnh khi load trang:
Cái này cũng không cần thiết lắm, bạn nào thích thì cứ thêm (mình thêm vì muốn cho người khác biết trang mình có Pjax
)
Để tải hoạt ảnh chỉ cần sử dụng hai sự kiện pjax:start
và pjax:end
Code js hoạt ảnh:
$(document).on('pjax:start', function(event) {
NProgress.start(); //Bắt đầu tải hoạt ảnh
});
$(document).on('pjax:end', function(event) {
NProgress.done(); //Kết thúc tải hoạt ảnh
});
Hoạt ảnh tải của mình hiện đang sử dụng là nprogress
: http://ricostacruz.com/nprogress
Giới thiệu về nprogress
Giống như phần giới thiệu của jquery, nó được đặt ở header
hoặc footer
.
<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
Pjax
sử dụng tài nguyên yêu cầu không đồng bộ, tức là mỗi lần yêu cầu dữ liệu nó không tìm nạp lại dữ liệu của toàn bộ trang mà chỉ lấy dữ liệu trong vùng chứa container
. Do đó, nếu một vài code chức năng nằm ngoài vùng chứa container
chức năng này sẽ không được thực thi (thường thì ta đặt vùng chứa container
ở header
mà nếu code header
ở index
khác với những trang khác thì Pjax
sẽ không hoạt động ổn định).Code hoàn chỉnh
Qua những dòng trên thì ta có một code hoàn chỉnh như sau:
pjax
đơn giản này và mình muốn chia sẻ đến mọi người! Nếu có đăng lại xin hãy ghi rõ nguồn.
Ngon! làm xong mượt vl