Để thực hiện được bạn cần nắm vững kiến thức về Blogger vì nếu làm không đúng sẽ gặp lỗi không hiển thị được tiện ích. Mình chỉ diễn giải cách thực hiện còn tạo vòng lặp cho bao nhiêu nhóm bài viết bạn có thể sáng tạo thêm.
Trước hết hiểu theo tiêu đề bài viết các bài đăng khi xuất bản được sắp xếp theo thứ tự từ mới nhất đến cũ nhất tức là theo trình tự thời gian. Tuy nhiên bạn có thể sắp xếp các bài đăng vào một nhóm cố định nhóm 1, nhóm 2, nhóm 3, nhóm 4,...
Ví dụ các bài đăng post1, post2, post3...postn và hiển thị tổng số bài đăng trên trang chính 20 như vậy ta có post1, post2, post3,..., post20. Bây giờ mình muốn sắp xếp các bài đăng vào các nhóm khác nhau:
Trường hợp 1:
Nhóm 1: post1 (một bài)
Nhóm 2: post2, post3 (hai bài)
Nhóm 3: post4, post5, post6 (ba bài)
Nhóm 4: Các post còn lại
Hoặc mình sẽ sắp xếp như sau:
Trường hợp 2:
Nhóm 1: post1 (một bài)
Nhóm 2: post2, post4, post6 (ba bài theo thứ tự 2, 4, 6)
Nhóm 3: post3, post5, post7 (ba bài theo thứ tự 3, 5, 7)
Nhóm 4: Các post còn lại
Trong widget Blog1 vòng lặp của các bài viết có dạng sau:
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:include data='post' name='commentPicker'/>
</b:loop>
Bây giờ mình sẽ sắp xếp các bài viết theo ví dụ ở trên chỉ xuất hiện ở trang chủ, mình sẽ viết bố cục như sau:
<b:if cond='data:view.isHomepage'> // Điều kiện chỉ sắp xếp ở trang chủ
...
<b:else/> // các trang khác không sắp xếp
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:include data='post' name='commentPicker'/>
</b:loop>
</b:if>
Tiếp theo mình bắt đầu viết vòng lặp cho các nhóm bài viết trong dấu ... màu đỏ như sau:
Trường hợp 1:
<b:if cond='data:view.isHomepage'>
<!-- Nhóm 1 -->
<b:if cond='data:posts.size gte 1'> // điều kiện nếu hiển thị lớn hơn hoặc bằng 1 bài viết
<div class='post-1'>
<b:loop index='item' values='data:posts' var='post'> // tạo vòng lặp lấy giá trị bằng item
<b:include cond='data:item eq 0' data='post' name='post'/> // giá trị bằng 0
</b:loop>
</div>
</b:if>
<!-- Nhóm 2 -->
<b:if cond='data:posts.size gte 2'> // điều kiện nếu hiển thị lớn hơn hoặc bằng 2 bài viết
<div class='post-2'>
<b:loop index='item' values='data:posts' var='post'>
<b:include cond='data:item in [1, 2]' data='post' name='post'/> // giá trị trong 1 và 2
</b:loop>
</div>
</b:if>
<!-- Nhóm 3 -->
<b:if cond='data:posts.size gte 3'> // điều kiện nếu hiển thị lớn hơn hoặc bằng 3 bài viết
<div class='post-3'>
<b:loop index='item' values='data:posts' var='post'>
<b:include cond='data:item in [3, 4, 5]' data='post' name='post'/> // giá trị trong 3, 4, 5
</b:loop>
</div>
</b:if>
<!-- Nhóm 4 -->
<b:if cond='data:posts.size gte 5'> // điều kiện nếu hiển thị lớn hơn hoặc bằng 5 bài viết
<div class='post-4'>
<b:loop index='item' values='data:posts' var='post'>
<b:include cond='data:item gte 6' data='post' name='post'/> // giá trị lớn hơn hoặc bằng 6
</b:loop>
</div>
</b:if>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:include data='post' name='commentPicker'/>
</b:loop>
</b:if>
Trường hợp 2:
<b:if cond='data:view.isHomepage'>
<!-- Nhóm 1 -->
<b:if cond='data:posts.size gte 1'> // điều kiện nếu hiển thị lớn hơn hoặc bằng 1 bài viết
<div class='post-1'>
<b:loop index='item' values='data:posts' var='post'> // tạo vòng lặp lấy giá trị bằng item
<b:include cond='data:item eq 0' data='post' name='post'/> // giá trị bằng 0
</b:loop>
</div>
</b:if>
<!-- Nhóm 2 -->
<b:if cond='data:posts.size gte 2'> // điều kiện nếu hiển thị lớn hơn hoặc bằng 2 bài viết
<div class='post-2'>
<b:loop index='item' values='data:posts' var='post'>
<b:include cond='data:item in [2, 4, 6]' data='post' name='post'/> // giá trị trong 2, 4, 6
</b:loop>
</div>
</b:if>
<!-- Nhóm 3 -->
<b:if cond='data:posts.size gte 3'> // điều kiện nếu hiển thị lớn hơn hoặc bằng 3 bài viết
<div class='post-3'>
<b:loop index='item' values='data:posts' var='post'>
<b:include cond='data:item in [3, 5, 7]' data='post' name='post'/> // giá trị trong 3, 5, 7
</b:loop>
</div>
</b:if>
<!-- Nhóm 4 -->
<b:if cond='data:posts.size gte 7'> // điều kiện nếu hiển thị lớn hơn hoặc bằng 7 bài viết
<div class='post-4'>
<b:loop index='item' values='data:posts' var='post'>
<b:include cond='data:item gte 7' data='post' name='post'/> // giá trị lớn hơn hoặc bằng 7
</b:loop>
</div>
</b:if>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:include data='post' name='commentPicker'/>
</b:loop>
</b:if>
Giải thích về các điều kiện
+ <b:if cond='data:posts.size gte 1'>: Nếu hiển thị lớn hơn hoặc bằng 1 bài đăng bắt đầu tạo vòng lặp cho nhóm 1
+ <b:if cond='data:posts.size gte 2'> Nếu hiển thị lớn hơn hoặc bằng 2 bài đăng bắt đầu tạo vòng lặp cho nhóm 2
+ <b:if cond='data:posts.size gte 3'> Nếu hiển thị lớn hơn hoặc bằng 2 bài đăng bắt đầu tạo vòng lặp cho nhóm 3
...
+ Các nhóm bài đăng tiếp theo chỉ xuất hiện khi số bài đăng đáp ứng các điều kiện ở trên
+ data:item eq 0: giá trị phải luôn bắt đầu bằng 0
Trên đây là cách diễn giải cũng như các ví dụ minh họa để bạn đọc tham khảo. Mình không đi sâu vào vấn đề này trong quá trình nếu thực hiện bạn có thể tìm hiểu thêm.
