[Phần 5] Cập nhật Blog1 lên version 2: Triển khai phân trang và điều kiện hiển thị dữ liệu

Trong phần 5 này chúng ta sẽ học cách triển khai phân trang và áp dụng thẻ điều kiện hiển thị dữ liệu tiện ích bài đăng trên blog

I. Triển khai phân trang

Blog1 v2 chia khá nhỏ ra phần này các thẻ định nghĩa mặc định bao gồm

<b:includable id='homePageLink'/>
<b:includable id='nextPageLink'/>
<b:includable id='postPagination'/>
<b:includable id='previousPageLink'/>

Theo đó tôi sẽ lần lượt triển khai code như sau

1. <b:includable id='homePageLink'/>

<b:includable id='homePageLink'>
    <a class='home-link' expr:href='data:blog.homepageUrl'>
    <data:messages.home/>
  </a>
</b:includable>

2. <b:includable id='nextPageLink'/>

<b:includable id='nextPageLink'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'>
    <data:messages.olderPosts/>
  </a>
</b:includable>

3. <b:includable id='postPagination'/>

<b:includable id='postPagination'>
    <div class='blog-pager container' id='blog-pager'>
        <b:include cond='data:newerPageUrl' name='previousPageLink' />
        <b:include cond='data:olderPageUrl' name='nextPageLink' />
        <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink' />
    </div>
</b:includable>

4. <b:includable id='previousPageLink'/>

<b:includable id='previousPageLink'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'>
    <data:messages.newerPosts/>
  </a>
</b:includable>

Sau khi định nghĩa xong các thẻ, ta sẽ hiển thị nó. Phân trang chỉ xảy ra ở trang index nên tôi sẽ viết tiếp nội dung vào thẻ <b:includable id='main' var='this'> như sau

<b:include cond='data:view.isMultipleItems' name='postPagination'/>

Vị trí đặt

Khi bạn đã chèn phân trang mặc định của blogger như trên thành công, nếu có tích hợp code js phân trang đánh số thì nó sẽ tự valid, bạn không cần chỉnh sửa gì thêm

II. Điều kiện hiển thị dữ liệu

Bạn xem ảnh này

Rất rõ ràng rồi đúng không, do trong template thiếu thẻ điều kiện cho tùy chọn này nên mọi thiết lập trở nên vô tác dụng, điều này có thể xảy ra ở bất kì template nào. Vì vậy đây là điều tiếp theo cần lưu ý trong quá trình nâng cấp

Theo đó tôi sẽ phải tìm đến những thành phần chứa code của những tùy chọn trong tiện ích blog1 và thêm các thẻ điều kiện

1. Hiển thị tác giả

<b:if cond='data:widgets.Blog.first.allBylineItems.author'>
...
</b:if>

Lấy ví dụ

<span class='post-author vcard'>
 <b:if cond='data:widgets.Blog.first.allBylineItems.author'>
  <b:if cond='data:post.author.profileUrl'>
   <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
    <meta expr:content='data:post.author.profileUrl' itemprop='url'/> 
    <a class='g-profile' expr:href='data:post.author.profileUrl' expr:title='data:post.author.name' rel='author'>
      <span itemprop='name'><strong><data:post.author.name/></strong></span>
    </a>
   </span>
  </b:if>
 </b:if>
</span>

Hiển thị thêm chữ "by" hoặc "bởi"

<data:widgets.Blog.first.allBylineItems.author.label/>

Tương tự với các thành phần còn lại như sau

2. Thời gian đăng bài

<b:if cond='data:widgets.Blog.first.allBylineItems.timestamp'>
...
</b:if>

Thêm chữ "lúc" hoặc "at"

<data:widgets.Blog.first.allBylineItems.timestamp.label/>

3. Nhận xét (tùy chọn này sẽ tắt luôn khung nhận xét)

<b:if cond='data:widgets.Blog.first.allBylineItems.comments'>
...
</b:if>

4. Nhãn

<b:if cond='data:widgets.Blog.first.allBylineItems.labels'>
...
</b:if>

Hiển thị thêm chữ nhãn "nhãn" hoặc "tags"

<data:widgets.Blog.first.allBylineItems.labels.label/>

5. Phản ứng

<b:if cond='data:widgets.Blog.first.allBylineItems.reactions'>
...
</b:if>

Hiển thị thêm chữ "phản ứng" hoặc "reactions"

<data:widgets.Blog.first.allBylineItems.reactions.label/>

6. Nút chia sẻ

<b:if cond='data:widgets.Blog.first.allBylineItems.share'>
...
</b:if>

7. Hồ sơ tác giả dưới bài đăng

<b:if cond='data:post.author.aboutMe'>
...
</b:if>

Hết phần 5 !