Bài này tiếp theo bài hôm qua về tạo widget hiển thị tổng hợp các dạng bài đăng từ widget popular posts nhưng sẽ sử dụng phương pháp lấy dữ liệu trực tiếp trong trang thay vì trích xuất dữ liệu URL nguồn cấp.
Cụ thể phương pháp này cũng sử dụng phương pháp get bằng jquery nhưng là get "html" chứ không get "jsonp". Cả hai phương pháp đều trích xuất nội dung từ URL đã tải nhưng cách trích xuất để lấy dữ liệu sẽ không giống nhau và mỗi phương pháp đều có ưu và nhược điểm riêng của nó không phương pháp nào là hoàn hảo cả.
Lưu ý khi làm theo phương pháp này thì bạn cần đọc lại bài viết Tầm quan trọng của jumb break và số bài đăng tối đa hiển thị tại trang chỉ mục vì khi sử dụng phương pháp này sẽ lấy dữ liệu từ URL của trang loại "search". Nhược điểm khi get url trực tiếp bị giới hạn 500 bài cho một lần tải với điều kiện kích thước trang không vượt quá 1Mb.
Mô tả cách làm
Khi bạn truy cập một trang label search bạn thấy thế nào thì khi bạn sử dụng URL đó để get nó cũng tương tự vậy, việc của bạn lọc lấy nội dung tại trang đó. Ví dụ khi bạn truy cập trang https://www.thietkeblogspot.com/search/label/thiet-ke-blogspot?max-results=10 bạn sẽ nhìn thấy các bài đăng đã xuất bản hiển thị bên trái có nhãn Thiết kế blogspot. Các bài đăng nay hiển thị bằng cách trích xuất thẻ dữ liệu mặc định của Blogger.
Đọc thêm: Thiết kế các bài đăng trên Blog hiển thị tại nhóm trang chỉ mục
Công việc đơn giản chỉ lấy dữ liệu các bài đăng đó tương tự như cái cách bạn trích xuất nội dung trong nguồn cấp nhưng code gọn hơn nhiều lần vì bạn không phải lọc lấy tiêu đề, link, ảnh gì cả cứ lôi hết cả một bài vào thôi.
Giả sử bố cục của các bài đăng trên Blog hiển thị như sau:
<div class="widget Blog" data-version="2" id="Blog1">
<div class="blog-posts" id="blog-posts">
<!--Hiển thị bố cục bài viết-->
<article class="post">
<div class="post_thumb"><a href="" title=""><img alt="" src=""></a></div>
<div class="post_body">
<div class="post_title"><a href="" title="">Tiêu đề</a></div>
<div class="post_meta">
<span class="post_label"><a href="" title="">Liên kết nhãn</a></span>
<span class="post_date" data-date=""><time>Ngày xuất bản</time></span>
<span aria-label="Đăng nhận xét" class="comment-icon" data-num-comments="" onclick="" role="button" tabindex="0" title="Đăng nhận xét">0</span>
<span aria-expanded="false" aria-label="Chia sẻ nội dung này" aria-pressed="false" class="share-this-post" data-href="" data-image="" data-postid="" data-snippets="" role="button" tabindex="0" title="Chia sẻ nội dung này"></span>
</div>
<div class="post_snippet"><p>Đoạn trích tóm tắt</p><a href="" title="">Liên kết đọc thêm</a></div>
</div>
</article>
<article class="post">...</article>
<article class="post">...</article>
<article class="post">...</article>
<article class="post">...</article>
...
</div>
</div>
Thứ mà bạn cần trích xuất hay lọc để lấy là tất cả thành phần hiển thị trong <article class="post">...</article>
Quay trở lại bài hôm qua về Cách tạo widget hiển thị tổng hợp các dạng bài đăng từ widget popular posts - Trích xuất dữ liệu từ nguồn cấp, phần cài đặt tiện ích popular posts mình không viết lại nhưng script sẽ không giống tức là bạn chỉ thay script thôi còn lại vẫn giữ nguyên.
<script>//<![CDATA[
window.addEventListener('load',function(){
var div=$('.select-option>div'),ul=$('.select-option>ul'),cate=$('.select-option li'),
item=$('#PopularPosts2 .widget-content>div'),html='',arr=[]
function load_script(i){
i=$(this).index()
var cate_type=$(this).attr('data-type')
if(cate_type!='popular posts')var r=Number($(this).attr('data-item'))
if($(this).attr('data-category')!=null)var cate_name=$(this).attr('data-category')
else cate_name=''
if(cate_type=='recent posts')var cate_url='/search?max-results='+r
else if(cate_type=='label posts')cate_url='/search/label/'+cate_name+'?max-results='+r
else if(['random posts','most comments','recent comments'].includes(cate_type))cate_url='/search?max-results='+data.blog.searchindex
else if(cate_type=='related posts')cate_url='/search/label/'+cate_name+'?max-results='+data.blog.searchindex
else cate_url=''
if(['recent posts','label posts'].includes(cate_type)){
$.get(cate_url,function(data){
var a=$(data).find('.Blog .post')
if(a.length){
if(a.length<r)r=a.length
for(var n=0;n<r;n++){
html='<article class="post")+'>'+$(a[n]).html()+'</article>'
$(item[i]).append(html)
}
}
},'html')
}else if(['random posts','related posts'].includes(cate_type)){
$.get(cate_url,function(data){
var a=$(data).find('.Blog .post')
if(a.length){
if(a.length<r)r=a.length
let arr=[]
do{let num=Math.floor(Math.random()*a.length)
arr.push(num)
arr=arr.filter((item,index)=>{return arr.indexOf(item)===index})
}while(arr.length<r)
arr.forEach(function(n){
html='<article class="post">'+$(a[n]).html()+'</article>'
$(item[i]).append(html)
})
}
},'html')
}else if(cate_type=='most comments'){
$.get(cate_url,function(data){
var a=$(data).find('.Blog .post')
if(a.length){
var f=0
for(var k=0;k<=a.length;k++){
var num=$(a[k]).find('.comment-icon').attr('data-num-comments')
if(num>0)arr.push(num+':'+k)
}
arr.sort(function(b,c){
b=b.substr(0,b.indexOf(':'))
c=c.substr(0,c.indexOf(':'))
return c-b
})
f=(a.length>r)?r:f=a.length
arr=arr.slice(0,f)
arr.forEach(function(n){
n=n.substr(n.indexOf(':')+1,n.length)
html='<article class="post">'+$(a[n]).html()+'</article>'
$(item[i]).append(html)
})
}
},'html')
}else if(cate_type=='recent comments'){
$.get(cate_url,function(data){
var a=$(data).find('.Blog .post')
if(a.length){
var f=0
for(var k=0;k<=a.length;k++){
var num=$(a[k]).find('.comment-icon').attr('data-num-comments')
if(num>0)arr.push(num+':'+k)
}
f=(a.length>r)?r:f=a.length
arr=arr.slice(0,f)
arr.forEach(function(n){
n=n.substr(n.indexOf(':')+1,n.length)
html='<article class="post">'+$(a[n]).html()+'</article>'
$(item[i]).append(html)
})
}
},'html')
}
}
$(cate).one('click',load_script)
$(div).click(function(e){
e.stopPropagation()
$(this).attr('aria-expanded',function(i,attr){return attr=='true'?'false':'true'})
$(this).attr('aria-pressed',function(i,attr){return attr=='true'?'false':'true'})
$(this).parent().find('ul').attr('aria-hidden',function(i,attr){return attr=='true'?'false':'true'})
$(this).parent().find('ul').toggleClass('visible')
})
$('html,.header .open,.web-search,button.dropdwn').click(function(){
$(div).attr({'aria-expanded':'false','aria-pressed':'false'})
$(ul).removeClass('visible').attr('aria-hidden','true')
})
$(cate).click(function(i){
i=$(this).index()
$(this).attr('aria-selected','true')
$(cate).not($(this)).attr('aria-selected','false')
$(div).attr('aria-label',$(this).text()).html($(this).text())
$(ul).removeClass('visible')
$(item[i]).fadeIn()
$(item).not($(item[i])).fadeOut()
})
})
//]]></script>
Với code script trên bạn cần lưu ý các đoạn sau:
- var num=$(a[k]).find('.comment-icon').attr('data-num-comments'): lấy số nhận xét trong thuộc tính "data-num-comments" từ class="comment-icon"
- var a=$(data).find('.Blog .post') là class mà mình đánh dấu in đậm trong bố cục của các bài đăng trên Blog hiển thị ở trên
- html='<article class="post">'+$(a[n]).html()+'</article>': Tạo lại thành phần cha có class="post"
Với dạng get URL trực tiếp này bạn cần tìm hiểu kỹ vì nó liên quan rất nhiều đến bố cục các bài đăng hiển thị của mỗi Blog, tuy là code gọn hơn nhưng lại rất dễ sai nếu bạn không hiểu cơ bản cho nên lời khuyên của mình bạn cứ sử dụng phương pháp trích xuất dữ liệu từ nguồn cấp tuy nó dài nhưng bạn dễ làm dễ hiểu hơn.
Bài tham khảo:Sử dụng phương pháp Jquery get url trực tiếp thay thế cho url nguồn cấp trong blogspot
Bài viết rất hay. Em xin góp ý nhỏ là những phần lưu ý trong bài viết anh nên làm nổi bật bằng color khác hoặc bold.
Trả lờiXóa