Để lấy dữ liệu hiển thị trong blogspot, cách thông thường vẫn sử dụng url nguồn cấp feeds vì ưu điểm của phương pháp này loại dữ liệu được sắp xếp giống nhau, nhược điểm thời gian tải chậm, bị giới hạn số bài đăng tối đa 150. Ngoài cách sử dụng url nguồn cấp feeds, có thể sử dụng url trực tiếp của blog thay thế và với phương pháp này có những ưu điểm hơn.
Bài hôm nay mình đưa ra những ưu điểm của phương pháp get url trực tiếp, để các bạn không biết code dễ hiểu thế nào là get url blog trực tiếp mình giải thích ngắn gọn như sau: Khi các bạn mở một trang trong blog thứ mà các bạn nhìn thấy thế nào thì khi get url cũng giống vậy như hình minh họa dưới đây
Để lấy dữ liệu căn cứ vào tiện ích Bài đăng trên blog hay widget Blog vì tiện ích này mới lưu trữ tất các các bài đăng đã được xuất bản. Trước tiên mình sẽ phân ra các loại trang có dữ liệu bài đăng tương ứng với url của trang.
Loại trang chỉ mục (index)
- Trang chủ: /
- Trang các bài đăng cũ hơn: /search
- Trang label: /search/label/LABEL hoặc /search?label=LABEL
- Trang tìm kiếm kết quả: /search?q=từ+khóa
- Trang lưu trữ: /year/month hoặc /year
Các tham số được sử dụng theo sau url cho loại trang này
updated-max: Thời gian xuất bản (định dạng iso8601) bài đăng cuối cùng của trang trước. Ví dụ trang chủ hiển thị 10 bài đăng thì mốc thời gian cho trang tiếp theo (các bài đăng cũ hơn) được lấy từ bài đăng thứ 10 chẳng hạn bài đăng đó có thời gian xuất bản "2019-12-23T03:11:00-08:00" => thời gian cho các bài đăng tiếp theo /search?updated-max=2019-12-23T03:11:00-08:00
max-results: Số mục hay các bài đăng tối đa cho một trang, lưu ý tham số này hiện không áp dụng với trang lưu trữ vì Blogger đã bỏ nó từ 2017
start: Bài đầu từ bài đăng thứ mấy tương tự như start-index của url nguồn cấp nhưng có khác biệt nhỏ hơn một số, ví dụ để bắt đầu lấy dữ liệu cho các bài đăng thứ 11 trở đi nếu sử dụng url nguồn cấp thì sử dụng tham số "start-index=11" nhưng nếu sử dụng url trực tiếp sẽ nhỏ hơn một số "start=10", chẳng hạn hiển thị 10 bài đăng tiếp theo url blog có dạng: "/search?updated-max=2019-12-23T03:11:00-08:00&max-results=10&start=10". Tương tự như max-results, tham số start không áp dụng với trang lưu trữ và không bắt buộc sử dụng với trang các bài đăng cũ hơn, trang label nhưng riêng với trang tìm kiếm kết quả bắt buộc phải có mới hiển thị đúng số chỉ mục.
Có thể bạn chưa biết: áp dụng khi tìm kiếm bài viết phạm vi trong một nhãn hoặc nhiều nhãn
- Hiển thị các bài đăng cho nhiều nhãn: /search/?q=label:LABEL1|label:LABEL2|label:LABEL3
- Hiển thị các bài đăng theo từ khóa tìm kiếm: /search/?q=từ+khóa%20label:LABEL1|label:LABEL2|label:LABEL3
Loại trang item
- Trang bài viết: /year/month/tiêu-đề-bài-viết.html
- Trang tĩnh: /p/tiêu-đề-bài-viết.html
Những loại dữ liệu cần get hiển thị trong blog
- Phân trang đánh số thứ tự, xem bài viết hướng dẫn
- Các bài đăng gần đây recent posts
- Các bài đăng ngẫn nhiên random posts
- Các bài đăng liên quan related random posts
- Các bài đăng có bình luận nhiều nhất
- Bài đăng cũ hơn & bài đăng mới hơn
- Hiển thị một trang tĩnh
- Sơ đồ trang web sitemap html
- Hiển thị kết qủa các bài đăng trực tiếp khi tìm kiếm trong hộp tìm kiếm trang web (live search)
- ...
Phương pháp Jquery get url trực tiếp
Căn cứ vào loại dữ liệu cần lấy mà url cần get cũng khác nhau, một số code script ví dụ
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<!-- Lấy dữ liệu cho random posts và recent posts -->
<script>//<![CDATA[
$.get('/search?max-results=200', function(e) {
var a = $(e).find('.Blog .post'),random_item = '',recent_item=''
if (a.length) {
var b = a.length, // Tổng số bài đăng
r = 10, // Số bài hiển thị
random_html = document.querySelector('.RandomPosts>.widget-content'),
recent_html = document.querySelector('.RecentPosts>.widget-content')
if (a.length < r) r = a.length
// random posts
let arr = []
do {
let num = Math.floor(Math.random() * b)
arr.push(num)
arr = arr.filter((item, index) => {
return arr.indexOf(item) === index
})
} while (arr.length < r)
arr.forEach(function(i) {
random_item += '<article class="post">'
random_item += $(a[i]).html()
random_item += '</article>'
random_html.innerHTML = random_item
})
// recent posts
for(var i=0;i<r;i++){
recent_item += '<article class="post">'
recent_item += $(a[i]).html()
recent_item += '</article>'
recent_html.innerHTML = recent_item
}
}
})
//]]></script>
<!-- Lấy dữ liệu cho related random posts -->
<script>//<![CDATA[
$.get('/search/label/LABEL?max-results=200', function(e) {
var a = $(e).find('.Blog .post'),related_item=''
if (a.length) {
var b = a.length, // Tổng số bài đăng
r = 6, // Số bài hiển thị
related_html = document.querySelector('#related-posts ul')
if (a.length < r) r = a.length
let arr = []
do {
let num = Math.floor(Math.random() * b)
arr.push(num)
arr = arr.filter((item, index) => {
return arr.indexOf(item) === index
})
} while (arr.length < r)
arr.forEach(function(i) {
var related_url = $(a[i]).find('.post_title a').attr('href'),
related_title = $(a[i]).find('h2').text(),
related_thumb = $(a[i]).find('img').attr('data-src'),
related_date = $(a[i]).find('.post_date').text(),
related_comments_num = $(a[i]).find('.comments-count').attr('data-num-comments'),
str = '<div class="post_thumb"><a href=' + related_url + ' title="' + related_title + '"><img alt="' + related_title + '" src=' + related_thumb + '></a></div><div class="post_title"><a href=' + related_url + ' title="' + related_title + '"><h2>' + related_title + '</h2></a></div><div class="post_meta"><span class="post_date">' + related_date + '</span><span class="post_comment"><a href="' + related_url + '#comments" title="Bình luận"><span class="comments-count" data-num-comments=' + related_comments_num + '><svg height="13px" viewBox="0 0 24 24" width="13px"><path d="M20,2A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H6L2,22V4C2,2.89 2.9,2 4,2H20M4,4V17.17L5.17,16H20V4H4M6,7H18V9H6V7M6,11H15V13H6V11Z" fill="#707070"></path></svg> ' + related_comments_num + '</span></a></span></div>'
related_item += '<li>'
related_item += str
related_item += '</li>'
related_html.innerHTML = related_item
})
}
})
//]]></script>
Một vài lưu ý
Tuy có ưu điểm thời gian tải nhanh, không bị giới hạn item nhưng có 2 nhược điểm sau cần lưu ý
1. Phụ thuộc vào element của post
Lấy ví dụ các phần tử element của bài đăng được sắp xếp tại trang chỉ mục
<div class="widget Blog" id="Blog1">
<div class="blog-posts">
<article class="post">
<div class="post_thumb">
<a href="URL bài đăng" title="Tiêu đề bài đăng"><img alt="Tiêu đề bài đăng" src="URL ảnh"/></a>
</div>
<div class="post_title">
<a href="URL bài đăng" title="Tiêu đề bài đăng"><h2>Tiêu đề bài đăng</h2></a>
</div>
<div class="post_meta">
<span class="post_label"><a href="URL nhãn" title="Tên nhãn">Tên nhãn</a></span>
<span class="post_date" data-date="Ngày xuất bản định dạng iso8601">Ngày xuất bản</span>
<span class="post_comment"><a href="liên kết đến nhận xét" title="Nhận xét"><span class="comments-count" data-num-comments="Số nhận xét">Số nhận xét</span></a></span>
</div>
<div class="post_snippet">
<p>Đoạn trích tóm tắt</p>
</div>
</article>
<article class="post">...</article>
<article class="post">...</article>
<article class="post">...</article>
<article class="post">...</article>
...
</div>
</div>
=> element chính của mỗi bài đăng là class "post", các element con lấy dữ liệu cho mỗi bài lần lượt: Tiêu đề: h2, URL bài đăng: post_title a, URL ảnh bài viết: post_thumb img, Tên nhãn: post_label, Ngày đăng: post_date, Số nhận xét: post_comment a span, Đoạn trích: post_snippet p
2. Bài viết cần có sử dụng dấu ngắt
Một điểm rất quan trọng cần lưu ý đó là các bài đăng bắt buộc phải có thẻ ngắt nhảy "<!--more-->" thì khi get url mới lấy được tổng số post chính xác.
tức là cái này có thể hiển thị các bài theo nhãn ở trang chủ dựa vào thẻ article hả a
Trả lờiXóa