Tầm quan trọng của dạng bài viết ngẫu nhiên trong blog là không phải bàn cãi. Các bài viết random hiển thị không theo trình tự sắp xếp hay hiển thị lộn xộn nhau có thể bài viết cũ hiển thị trước bài viết mới không theo thời gian xuất bản bài đăng.
Nếu blog đã xuất bản nhiều bài thì những bài viết cũ có cơ hội hiển thị thông qua random để người đọc nhanh tiếp cận với bài viết.
Cách đơn giản để lấy random posts là trích xuất từ nguồn cấp blog, từ tổng số bài đăng trong nguồn cấp lấy một vài số bài ngẫu nhiên nhưng không trùng lặp nhau. Ví dụ blog có số bài đăng đã xuất bản trên 500 nhưng chỉ lọc lấy khoảng 10 bài ngẫu nhiên trong tổng số 500 bài và 10 bài này sẽ không bị trùng lặp. Mỗi lần trang tải lại lọc lấy 10 bài mà có thể sẽ có từ một bài đã hiển thị ở lần tải trước.
Tối ưu random posts là cách bạn sẽ lọc lấy số bài ngẫu nhiên và từ mỗi bài đó đó gắn vào URL nguồn cấp và từ nguồn cấp trích xuất nội dung hiển thị bài viết. Có hai dạng random posts: lấy bài cho tất cả label và lấy bài cho một label nhất định hay dạng bài này gọi là bài viết liên quan related posts.
Trong một bài viết cũ mình đã đề cập vấn đề làm thế nào để tối ưu trang tải nhanh khi tải URL nguồn cấp? thì trong bài này cách làm cũng tương tự chỉ là mình giới thiệu cụ thể hơn về dạng bài random. Dưới đây là phương pháp thực hiện:
Định cấu hình tiện ích widget
Đầu tiên bạn sẽ cần thêm class vào widget để từ class này tìm thuộc tính và từ thuộc tính phân loại tạo URL nguồn cấp để get lấy dữ liệu. Giả sử trong blog bạn sẽ thêm random post trong tiện ích HTML/JavaScript, còn related posts bạn sẽ thêm bên dưới bài đăng có Nhãn. Bạn sẽ làm như sau:
Trong chỉnh sửa HTML của chủ đề, bạn tìm đến tiện ích random post mở thẻ <b:includable id='main'> của tiện ích, thêm các dòng sau bên dưới nó
<b:includable id='main'>
<b:attr name='class' value='widget HTML feed-entry'/>
<b:attr name='data-item' value='số bài đăng'/>
<b:attr name='data-type' value='random posts'/>
<b:include name='widget-title'/>
<div class='widget-content'>
<!-- hiển thị các bài đăng ngẫu nhiên -->
</div>
</b:includable>
Tham khảo thêm: Cách sử dụng thẻ b:attr và b:class trong blogspot
Tiếp theo, trong tiện ích Blog1, bạn cũng mở thẻ <b:includable id='main'> của tiện ích, thêm các dòng sau bên dưới nó
<b:includable id='main'>
<b:if cond='data:view.isPost'>
<b:attr name='class' value='widget Blog feed-entry'/>
<b:attr name='data-item' value='số bài đăng'/>
<b:attr name='data-type' value='related posts'/>
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels.length - 1' var='label'>
<b:attr expr:value='data:post.labels[label].name' name='data-category'/>
</b:loop>
</b:loop>
</b:if>
</b:includable>
Tham khảo thêm: Điều kiện và các tùy chọn hiển thị Label bài viết trong vòng lặp
Tiếp theo bạn sẽ sửa lại vị trí hiển thị các bài đăng liên quan thành
<div class='related-posts'>
<div class='widget-content'>
<!-- hiển thị các bài đăng liên quan -->
</div>
</div>
Viết script trích xuất nội dung nguồn cấp
Đặt đoạn script trước thẻ đóng </body>
<script asyns='asyns' defer='defer' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
<script>//<![CDATA[
window.addEventListener('load', function() {
var _feeds = 0
function _cate() {
if (_feeds == 0) {
_feeds = 1
var cate = $('.feed-entry')
if (cate.length != '') {
$(cate).each(function(i) {
var r = Number($(cate[i]).attr('data-item')),
cate_type=$(cate[i]).attr('data-type')
if ($(cate)[0].hasAttribute('data-category')) var cate_name = $(cate[i]).attr('data-category')
if (cate_type == 'random posts') var cate_url = '/feeds/posts/summary?alt=json-in-script&max-results=0'
else if (cate_type == 'related posts') cate_url = '/feeds/posts/summary/-/' + cate_name + '?alt=json-in-script&max-results=0'
function get_random_posts(e) {
if (e.feed.entry) {
for (var t = 0; t < e.feed.entry.length; t++) {
var entry = e.feed.entry[t]
var contents=''
$(cate[i]).find('.widet-content').append(contents)
}
}
}
function get_related_posts(e) {
if (e.feed.entry) {
for (var t = 0; t < e.feed.entry.length; t++) {
var entry = e.feed.entry[t]
var contents=''
$(cate[i]).find('.widet-content').append(contents)
}
}
}
if (cate_type == 'random posts') {
$.get(cate_url, function(data) {
if (data.feed) {
var a = data.feed.openSearch$totalResults.$t
if (a < r) r = a
let arr = []
do {
let num = Math.floor(Math.random() * a)
arr.push(num)
arr = arr.filter((item, index) => {
return arr.indexOf(item) === index
})
} while (arr.length < r)
arr.forEach(function(m) {
m += 1
$.ajax({
type: 'GET',
url: '/feeds/posts/default',
data: {'alt': 'json','start-index': m,'max-results': 1},
dataType: 'jsonp',
success: get_random_posts
})
})
}
}, 'jsonp')
} else if (cate_type == 'related posts') {
$.get(cate_url, function(data) {
if (data.feed) {
var a = data.feed.openSearch$totalResults.$t
if (a < r) r = a
let arr = []
do {
let num = Math.floor(Math.random() * a)
arr.push(num)
arr = arr.filter((item, index) => {
return arr.indexOf(item) === index
})
} while (arr.length < r)
arr.forEach(function(m) {
m += 1
$.ajax({
type: 'GET',
url: '/feeds/posts/default/-/' + cate_name,
data: {'alt': 'json','start-index': m,'max-results': 1},
dataType: 'jsonp',
success: get_related_posts
})
})
}
}, 'jsonp')
}
})
}
}
}
window.addEventListener('scroll', function() {_cate()})
window.addEventListener('mousemove', function() {_cate()})
setTimeout(function() {_cate()}, 1000)
})
//]]></script>
Tham khảo thêm: Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js
Trong đoạn script trên bạn sẽ tạo 2 hàm function, một trích xuất random posts và một trích xuất related posts
function get_random_posts(e) {
if (e.feed.entry) {
for (var t = 0; t < e.feed.entry.length; t++) {
var entry = e.feed.entry[t]
var contents=''
$(cate[i]).find('.widet-content').append(contents)
}
}
}
function get_related_posts(e) {
if (e.feed.entry) {
for (var t = 0; t < e.feed.entry.length; t++) {
var entry = e.feed.entry[t]
var contents=''
$(cate[i]).find('.widet-content').append(contents)
}
}
}
Tham khảo cách tạo hàm function trích xuất nội dung bài viết từ nguồn cấp blog
