Script tạo danh sách các bài viết liên quan cho Blogger ban đầu được Hoctro phát triển, sau đó được nhân rộng ra với khá nhiều chỉnh sửa. Các bản "bài viết liên quan" hiện nay đều cho phép cấu hình số bài viết hiển thị và số bài viết lấy theo mỗi label. Tuy vậy, trong trường hợp cần liệt kê số lượng lớn các bài viết liên quan thì chưa script nào có khả năng phân trang.
Trong bài viết này, tôi sẽ hướng dẫn các bạn làm phân trang cho chúng.
Script này thích hợp với các blog cần liệt kê số lượng lớn các bài viết liên quan (VD như các tập trong 1 bộ truyện tranh). Nếu blog bạn không có nhu cầu này, hãy dùng các bản cũ mà bạn thấy phù hợp.
Tham khảo các bản cũ tại: Thủ thuật liên quan đến bài viết.
< 1 > . Cách cài đặt
Mở template của bạn ở chế độ chỉnh sửa HTML (hoặc download file template về để mở), chèn đoạn sau ngay phía trước thẻ
</head>: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style type="text/css"> .related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display:block;float:left;margin-right:10px;padding:2px 5px;text-decoration:none} .related-posts-navi a:hover{background:#36c;color:#fff;text-decoration:none} .related-posts-navi .related-posts-navi-selected{background:#36c;color:#fff} </style>
Sau đó, tìm trong template của bạn dòng:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
rồi chèn ngay phía sau đoạn code sau:
<b:includable id='related-posts' var='post'>
<div id="related-posts"> <h3>Related Posts</h3> <ul id="related-posts-list"></ul> </div>
<script type="text/javascript">
var relatedPostsConfig = { maxPosts: 150, perLabel: 25, perPage: 10, hiddenLabel: ['Label 1', 'Label 2', 'Label 3'] };
function getRelatedPosts(json) { var posts = [], num = 0, max = (relatedPostsConfig.maxPosts - relatedPostsConfig.count > json.feed.entry.length) ? json.feed.entry.length : (relatedPostsConfig.maxPosts - relatedPostsConfig.count); // max number of entries can be loaded if (max <= 0) { return; } for (var i = 0; i < max; i++) { entry = json.feed.entry[i]; posts[num] = {}; posts[num].title = entry.title.$t; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel == "alternate") { posts[num].url = entry.link[j].href; break } } num++; } relatedPostsConfig.count += max; for (i = 0; i < num; i++) { var li = document.createElement("li"), a = document.createElement("a"); a.href = posts[i].url; a.title = posts[i].title; a.appendChild(document.createTextNode(posts[i].title)); if (a.href != location.href) { li.appendChild(a); relatedPostsConfig.container.appendChild(li); } } } (function() { var obj = {}; for(var i = 0; i < relatedPostsConfig.hiddenLabel.length; i++) { obj[relatedPostsConfig.hiddenLabel[i]] = ''; } relatedPostsConfig.count = 0; relatedPostsConfig.container = document.getElementById("related-posts-list"); <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> if (!('<data:label.name/>' in obj)) { document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+'<data:label.name/>'+'?alt=json-in-script&callback=getRelatedPosts&max-results='+relatedPostsConfig.perLabel+'"></' + 'script>'); } </b:loop> </b:loop> })(); $(function(){ var pages = 1; while ($('#related-posts-list > li').length) { var $ul = $('<ul/>').appendTo($('#related-posts')); $('#related-posts-list > li:lt('+relatedPostsConfig.perPage+')').appendTo($ul); pages++; } $('#related-posts > ul:gt(1)').hide(); var $div = $('<div class="related-posts-navi"/>').appendTo($('#related-posts')); for (var i = 1; i < pages; i++) { var $a = $('<a id="related-posts-page-' + i + '" href="#"/>').click(function(){ var id = $(this).attr('id').substr(19); $('#related-posts > ul').hide(); $('#related-posts > ul:eq(' + id + ')').show(); // change class $('.related-posts-navi > a').removeClass('related-posts-navi-selected'); $(this).addClass('related-posts-navi-selected'); return false; }).append(i).appendTo($div); } $('.related-posts-navi > a:first').addClass('related-posts-navi-selected'); $('<div style="clear:both" />').appendTo($('#related-posts')); }); </script> </b:includable>
Cuối cùng, tìm đến vị trí mà bạn muốn hiển thị các bài viết liên quan trong template và chèn dòng sau:
<b:include data='post' name='related-posts'/>
< 2 > . Cách tùy biến
Tiêu đề của mục các bài viết liên quan được mặc định là "Related Posts". Để sửa nó, các bạn sửa lại chỗ sau:
<div id="related-posts"> <h3>Related Posts</h3> <ul id="related-posts-list"></ul> </div>
(Nếu không muốn hiển thị, có thể xóa nó đi)
Tham số tùy biến của script được liệt kê ở phần đầu của đoạn code như sau:
var relatedPostsConfig = { maxPosts: 150, perLabel: 25, perPage: 10, hiddenLabel: ['Label 1', 'Label 2', 'Label 3'] };
Trong đó:
- maxPosts: chỉ số lượng bài viết liên quan (tối đa) được hiển thị
- perLabel: chỉ số lượng bài viết liên quan (tối đa) tính theo mỗi label
- perPage: chỉ số lượng bài viết liên quan được liệt kê trong 1 trang
- hiddenLabel: danh sách các label không hiển thị, phân cách bằng dấu phẩy. hiddenLabel được dùng khi bài viết của bạn có nhiều label, trong đó có 1 số label đặc biệt mà bạn không muốn liệt kê các bài viết liên quan nằm trong đó (VD 'Thông báo', 'Tổng hợp', ...). Khi đó bạn chỉ cần liệt kê các label dạng này vào biến hiddenLabel là xong. Nếu muốn hiển thị tất cả các label (không ẩn label) nào thì khai báo:
hiddenLabel: []
Mẹo nhỏ:
Để chỉ hiện các bài viết liên quan của label đầu tiên, hãy cấu hình maxPosts = perLabel
Ngoài ra, tôi cũng tạo 1 số style cơ bản cho các nút chuyển trang, là đoạn CSS được chèn ở trong thẻ head:
<style type="text/css"> .related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display:block;float:left;margin-right:10px;padding:2px 5px;text-decoration:none} .related-posts-navi a:hover{background:#36c;color:#fff;text-decoration:none} .related-posts-navi .related-posts-navi-selected{background:#36c;color:#fff} </style>
Các nút phân trang này tôi làm theo mẫu của Flickr, nếu các bạn thích style khác, hãy tùy biến CSS theo ý mình.
Chúc các bạn blogging vui vẻ. Mọi góp ý xin để lại dưới comments.
Nguồn: hontap.blog
Tags: Breakingnews, Khoi tao Blog, Post
Ý kiến bạn đọc [ 13 ]
Thủ thuật rất hay, thanks nhé anh Chính
CÁI NỲ HAY DƯNG HƠI ZẮC ZỐI
Thông báo lỗi XML: The element type "head" must be terminated by the matching end-tag "".
Bó tay rùi đại ca ơi, anh xem lại xem code có thiếu gì không mà nó toàn báo lỗi trên.
bạn vào convert code rồi dán là được Giang à
bạn hướng dẫn: tìm đến vị trí muốn hiển thị các bài viết liên quan trong template và chèn dòng sau: . Xin hướng dẫn cụ thể vị trí đặt code. Vì tớ làm thì bị báo lỗi TEMPLATE ERROR: Error during evaluation of related-posts
Cho mình hỏi chèn dòng ở chổ nào để các bài viết liên quan hiện ngay sau cuối bài viết ha anh?
Dán dưới code bạn à
code data:post.body/ bạn à
ý mính là cái dòng chèn ở đâu để các bài viết liên quan hiện khi xem bài viết cùng 1 labe
lien ket nhe http://www.traidatmui.com/
Sao làm mãi mà chẳng được
mình làm thử dc mà
Ko hiểu do các thủ thuật này đã cũ và ko còn hợp thời hay sao mà mình add vào 1 blog dạng theme mới ra nó ko hiện Bài viết liên quan nữa :(
Ý kiến của bạn