Trang chủ luôn là trang quan trọng nhất với bất kỳ trang web nào nếu nó thuộc thể loại trang web tin tức cần có các widget bài viết theo nhãn hiển thị có thể là mới nhất hoặc ngẫu nhiên. Tuy nhiên các widget này thường được đặt theo vị trí cố định tách biệt với widget hiển thị các bài đăng trên Blog được trích xuất từ thẻ dữ liệu.
 |
| Hiển thị widget bài đăng theo nhãn theo vòng lặp các bài đăng của widget Blog |
Bạn hoàn toàn có thể đặt các widget bài viết theo Nhãn xen lẫn các bài đăng của widget Blog theo thứ tự theo phương pháp của mình dưới đây:
Đọc thêm: Cách chèn mã quảng cáo AdSense vào Blog hiển thị tại các trang khác nhau
Để cho dễ hình dung lúc bạn cài đặt Blog hiển thị 20 bài đăng mới nhất và trong bài viết có bạn chèn jumb break lúc này ngoài trang chủ hay các trang thuộc nhóm trang chỉ mục đều hiển thị 20 posts trừ trang lưu trữ và trang tìm kếm kết quả nếu có đủ theo theo từ khóa tìm kiếm. Bạn sẽ tùy biến cứ sau 5 post sẽ chèn một widget bài viết theo Nhãn => Bạn có thể chèn tối đa 4 widget.
Như các bạn cũng đã biết trong vòng lặp bài đăng được đặt trong thẻ <b:includable id='main'> trong widget Blog, thẻ <b:includable> này luôn được sắp xếp trên cùng ngay dưới thẻ <b:widget-settings>, ta có vòng lặp các bài đăng như sau:
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
Bạn chỉ cần tùy biến lại trong vòng lặp của post này bằng cách thêm điều kiện trang chủ và thêm điều kiện lọc nữa là được, cách làm như sau:
<b:loop index='i' values='data:posts' var='post'>
<b:if cond='data:view.isHomepage'>
<b:if cond='data:i == 5'>
<div class='box-video data-entry'>
<div class='data-config' data-box-category='Video' data-box-items='6' data-box-tpye='related'>
<div class='data-title'><h3>VIDEO</h3><a href='/search/label/Video' title='Xem thêm'>Xem thêm</a></div>
<div class='data-content' data-box-layout='grid'/>
</div>
</div>
<b:elseif cond='data:i == 10'/>
<div class='data-entry'>
<div class='data-config' data-box-category='Xe máy' data-box-items='5' data-box-tpye='recent'>
<div class='data-title'><h3>Xe máy</h3><a href='/search/label/Xe%20máy' title='Xem thêm'>Xem thêm</a></div>
<div class='data-content' data-box-layout='list'/>
</div>
</div>
<b:elseif cond='data:i == 15'/>
<div class='data-entry'>
<div class='data-config' data-box-category='All' data-box-items='6' data-box-tpye='random'>
<div class='data-title'><h3>Đang được quan tâm</h3></div>
<div class='data-content' data-box-layout='grid'/>
</div>
</div>
<b:elseif cond='data:i == 20'/>
<div class='data-entry'>
<div class='data-config' data-box-category='Xe độ' data-box-items='5' data-box-tpye='related'>
<div class='data-title'><h3>Xe độ</h3><a href='/search/label/Xe%20độ' title='Xem thêm'>Xem thêm</a></div>
<div class='data-content' data-box-layout='list'/>
</div>
</div>
</b:if>
</b:if>
<b:include data='post' name='post'/>
</b:loop>
Lưu ý về sử dụng điều kiện so sánh, như ví dụ ở trên bạn có thể sử dụng theo 3 cách đều đúng
<b:if cond='data:i == 5'>
<b:if cond='data:i eq 5'>
<b:if cond='data:i in [5]'>
Ta có giá trị 5 là NUMBER (Số)Tuy nhiên nếu giá trị là STRING (Chuỗi) bạn phải đặt trong cặp dấu "STRING", ví dụ
<b:if cond='data:label.name == "Thiết kế blogspot"'>
<b:if cond='data:label.name eq "Thiết kế blogspot"'>
<b:if cond='data:label.name in ["Thiết kế blogspot"]'>
=> Khi tải lại chủ đề theme các dấu "STRING" sẽ được chuyển thành "e;STRING"e;
Tham khảo thêm: Tổng hợp các loại toán tử trong Blogger
Ngoài ra bạn có thể kết hợp thẻ điều kiện mobile và attr để thêm giá trị trực tiếp vào thẻ, ví dụ
<div class='data-entry'>
<div class='data-config' data-box-category='Xe máy' data-box-tpye='related'>
<b:attr expr:value='!data:blog.isMobileRequest ? 6 : 10' name='data-box-items'/>
<div class='data-title'><h3>Xe máy</h3><a href='/search/label/Xe%20máy' title='Xem thêm'>Xem thêm</a></div>
<div class='data-content' data-box-layout='list'/>
</div>
</div>
=> Điều kiện nếu không phải mobile hiển thị 6 posts còn không 10 posts, xem thêm bài viết Cách sử dụng toán tử điều kiện trong Blogger để hiểu rõ hơn chỗ này
Tiếp theo bạn sẽ code script đặt trước </body> để lấy dữ liệu từ nguồn cấp append nó vào các widget cụ thể ở đây lấy theo class="data-content"
<b:if cond='data:view.isHomepage'>
<script>//<![CDATA[
window.addEventListener('load',function(){
var _feeds=0
function _cate(){
if(_feeds==0){
_feeds=1
var cate=$('.data-entry') // Tìm widget có class="data-entry"
if(cate.length!=''){
$(cate).each(function(i){
var custom=$(cate[i]).find('.data-config'), // Tìm class="data-config"
r=Number($(custom).attr('data-box-items')), // Lấy số posts
cate_type=$(custom).attr('data-box-tpye') // Lấy loại hiển thị posts
if($(custom).attr('data-box-category')!=null)var cate_name=$(custom).attr('data-box-category') // Lấy tên Nhãn
else cate_name=''
if(cate_type=='recent')var cate_url='/feeds/posts/default'
else if(cate_type=='label')cate_url= '/feeds/posts/default/-/'+cate_name
else if(cate_type=='random')cate_url= '/feeds/posts/summary?alt=json&max-results=0'
else if(cate_type=='related')cate_url='/feeds/posts/summary/-/'+cate_name+'?alt=json&max-results=0'
else cate_url=''
function get_data(e){
if(e.feed.entry){
// Trích xuất nội dung từ nguồn cấp
}
}
if(cate_type=='random'){
$.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((x,y)=>{return arr.indexOf(x)===y})
}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_data
})
})
}
},'jsonp')
}else if(cate_type=='related'){
$.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((x,y)=>{return arr.indexOf(x)===y})
}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_data
})
})
}
},'jsonp')
}else $.ajax({type:'GET',url:cate_url,data:{'alt':'json','max-results':r},dataType:'jsonp',success:get_data})
})
}
}
}
window.addEventListener('scroll',function(){_cate()})
setTimeout(function(){_cate()},3000)
})
//]]></script>
</b:if>
Tham khảo thêm: Làm thế nào để tối ưu trang tải nhanh khi tải URL nguồn cấp?
Để viết css hiển thị cho post cách làm đơn giản và hiệu quả đó là thêm thuộc tính hoặc class vào từ đó dễ thiết kế hơn, như ở trên mình thêm thuộc tính data-box-layout='list' và data-box-layout='grid', các bạn đọc thêm bài viết Tạo layout cho các bài đăng trên Blog hiển thị tại nhóm trang chỉ mục để hiểu rõ hơn.
