Tiện ích nhãn trên blog chỉ cung cấp cho ta 2 dạng hiển thị đó là dạng đám mây (cloud) và dạng danh sách (list). Về cơ bản nó đã đáp ứng được nhu cầu đó là hiển thị nhãn cùng số bài đăng tương ứng, nhưng xa hơn bạn có nghĩ sẽ có thể phân cấp được chuyên mục cho nó ? hãy cùng tôi thực hiện trong bài viết này
Xem demo
Như vậy sự khác biệt so với widget ban đầu đó là ta sẽ thêm vào các "nhãn cha" kết hợp css + js để ẩn hiện nội dung các sub label. Điều này một phần giúp ta quản lý label tốt hơn, một phần giúp người đọc dễ dàng bao quát được nội dung trên blog,
Triển khai cho blog
1, Code XML
Bạn xác định vị trí muốn chèn widget, tìm tới thẻ b:section nhé vì b:widget bắt buộc nằm trong nó
Code mẫu sẽ như sau (lưu ý nếu trùng id Label1 thì bạn đổi thành id khác)
<b:widget id='Label1' locked='false' title='Categories' type='Label' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='super.main'/>
</b:includable>
<b:includable id='cloud'>
<b:include data='{buttonClass: "flat-button", items: data:this.labels,itemSet: "labels",itemsMarkup: "super.cloud" }' name='extendableItems'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<b:class expr:name='data:this.display + "-label-collapse"'/>
<b:include cond='data:this.display == "list"' name='list'/>
<b:include cond='data:this.display == "cloud"' name='cloud'/>
</div>
</b:includable>
<b:includable id='child'>
<li>
<a expr:href='data:label.url' expr:title='data:label.name'>
<span class='label-name'><data:label.name/></span>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'><data:label.count/></span>
</b:if>
</a>
</li>
</b:includable>
<b:includable id='collapse'>
<span title='Collapse'>
<svg class='chevron-up'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
</span>
<span title='Expand'>
<svg class='chevron-down'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
</svg>
</span>
</b:includable>
<b:includable id='list'>
<div class='list_items'>
<div class='collapsible list_1'>
<span class='title'>Category 1</span>
<b:include name='collapse' />
</div>
<div class='list_label list_1'>
<ul>
<b:loop values='data:labels' var='label'>
<b:include cond='data:label.name in ["label-name-1","label-name-2"]' name='child' />
</b:loop>
</ul>
</div>
</div>
<div class='list_items'>
<div class='collapsible list_2'>
<span class='title'>Category 2</span>
<b:include name='collapse' />
</div>
<div class='list_label list_2'>
<ul>
<b:loop values='data:labels' var='label'>
<b:include cond='data:label.name in ["label-name-3","label-name-4"]' name='child' />
</b:loop>
</ul>
</div>
</div>
<!-- Write more -->
</b:includable>
</b:widget>
Trong widget này bạn chỉ cần chú ý đến nội dung thằng <b:includable id='list'>, nó sẽ chứa các sub div (.list_items - có thể thêm vô hạn tùy vào nhu cầu của webmaster) đại diện cho từng "chuyên mục cha"
Để map các chuyên mục con vào chuyên mục cha bạn sẽ lần lượt thay tên label vào phần in đậm như sau, các label được đặt trong cặp dấu " " và cách nhau bằng dấu phẩy
<b:include cond='data:label.name in ["label-name-x","label-name-y"]' name='child' />
Tôi lấy ví dụ với 3 chuyên mục cha
<div class='list_items'>
<div class='collapsible list_1'>
<span class='title'>Category 1</span>
<b:include name='collapse' />
</div>
<div class='list_label list_1'>
<ul>
<b:loop values='data:labels' var='label'>
<b:include cond='data:label.name in ["blogger"]' name='child' />
</b:loop>
</ul>
</div>
</div>
<div class='list_items'>
<div class='collapsible list_2'>
<span class='title'>Category 2</span>
<b:include name='collapse' />
</div>
<div class='list_label list_2'>
<ul>
<b:loop values='data:labels' var='label'>
<b:include cond='data:label.name in ["software","tips"]' name='child' />
</b:loop>
</ul>
</div>
</div>
<div class='list_items'>
<div class='collapsible list_3'>
<span class='title'>Category 3</span>
<b:include name='collapse' />
</div>
<div class='list_label list_3'>
<ul>
<b:loop values='data:labels' var='label'>
<b:include cond='data:label.name in ["windows","office","server"]' name='child' />
</b:loop>
</ul>
</div>
</div>
Cứ lần lượt tăng list_items cho đến khi bạn thấy hài lòng thì thôi
2. Code CSS
Để hiển thị như demo bạn sử dụng đoạn css sau
.list-label-collapse .list_items{position:relative;margin-bottom:10px}
.list-label-collapse .collapsible{display:block;cursor:pointer}
.list-label-collapse .list_label{display:block}
.list-label-collapse .collapsible svg.chevron-up{display:block}
.list-label-collapse .collapsible svg.chevron-down{display:none}
.list-label-collapse .collapsible svg{height:24px;width:24px;fill:hsl(0,0%,53.3%);position:absolute;right:-2px;top:0}
.list-label-collapse ul{margin-left:25px;margin-top:10px}
.list-label-collapse ul li{list-style-type:disc;font-size:15px}
.list-label-collapse ul li a{padding:2px 0;display:block;color:#000}
.list-label-collapse ul li a{color:#000;transition:all 0.3s ease}
.list-label-collapse ul li a:hover{color:#1116d9}
.list-label-collapse .label-count{float:right;font-size:15px}
.list-label-collapse .label-count::before{content:"("}
.list-label-collapse .label-count::after{content:")"}3. Code JS
Phần js tôi đã tối ưu code rồi, bạn cứ thoải mái tăng thêm div mà không cần lo js lỗi
Chèn code trước thẻ đóng </body> và bỏ qua đoạn script đầu nếu blog đã tích hợp jQuery
<script src="//unpkg.com/jquery/dist/jquery.min.js" type="text/javascript"></script> <!-- Include jQuery if your template does not have -->
<script type="text/javascript">//<![CDATA[
for (var i = 1; i <= $(".list_items").length; i++) {
(function(i) {
$(".collapsible.list_" + i).on("click", function(e) {
e.preventDefault();
$(".list_label.list_" + i + ",.collapsible.list_" + i + " .chevron-up,.collapsible.list_" + i + " .chevron-down").slideToggle();
})
}(i));
}
//]]>
</script>Cuối cùng bạn lưu mẫu lại và kiếm tra
Mở rộng: để giúp bạn dễ dàng trong việc lấy tên label tôi có viết 1 đoạn js nhỏ bạn copy về → thay domain thành của mình → tạo 1 file tĩnh .html → dán nội dung vào → chạy để lấy list label hiện có trên blog nhé
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function getLabel(json) {
var ListTag = [];
for (var k = 0; k < json.feed.category.length; k++) {
ListTag[k] = json.feed.category[k].term;
}
ListTag.sort();
for (var i = 0; i < ListTag.length; i++) {
document.write(ListTag[i] + "<br />");
}
}
</script>
<script src='https://www.xxx.net/feeds/posts/summary?alt=json-in-script&callback=getLabel'></script>
</body>
</html>Kết luận: như vậy qua bài viết này bạn lại biết thêm một thủ thuật rất hay nữa để quản lý/hiển thị list nhãn blogger một cách chuyên nghiệp hơn, cách lọc label theo từng chuyên mục có vẻ thủ công nhưng chắc đó là cách tối ưu nhất để hiển thị theo ý đồ của bạn
Đây là nội dung khó hi vọng bạn đọc kỹ từng dòng, từng chỗ tôi đánh dấu để tránh mất công hỏi đáp những thứ thừa thãi
Chúc bạn thành công !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên
M k rành về mã hóa này lắm nên cũng ngu mờ quá.
Link : https://www.hungcoder.com tks