Cách thiết lập một bài viết cố định đầu tiên tại trang chủ

Giả sử bạn có một bài viết mà bạn cho đó là quan trọng cần phổ biến đến người đọc, bạn có thể thiết lập bài viết này luôn nằm cố định trên cùng các bài đăng gần đây tại trang chủ. Với cách làm này bạn có thể thay thế cho widget FeaturedPost mặc định.

Bạn có thể thấy ảnh minh họa dưới đây mặc dù bài viết Cách tạo và đọc tệp robots.txt cho Blog được đăng ngày 16, tháng 11 nhưng vẫn được thiết lập hiển thị trên bài viết Cách chèn nút like Facebook vào bài viết không sử dụng plugin được đăng ngày 19 tháng 11.

Đọc thêm: Tạo vòng lặp cho các nhóm bài viết tại một trang cố định

Cách thiết lập một bài viết cố định đầu tiên tại trang chủ

Cách 1: Cách này chỉ áp dụng được cho trang hiện tại nếu có bài viết muốn thiết lập cố định do đặt điều kiện bài viết trong vòng lặp b:loop

Cách thực hiện chúng ta sẽ chia thành 2 nhóm bài viết, với nhóm một thiết lập 1 bài viết cố định và nhóm hai bao gồm các bài viết gần đây nhưng không bao gồm bài viết đã thiết lập ở nhóm một.

Trong widget Blog1, mở rộng thẻ tag <b:includable id='main' var='top'>, trong này bạn sẽ thấy một đoạn thẻ dữ liệu b:loop có dạng sau:

Copy

<b:loop values='data:posts' var='post'>

  <b:include data='post' name='post'/>

</b:loop>

Bạn thay lại như sau:

Copy

<b:if cond='data:view.isHomepage'>

  <b:if cond='data:posts.size gte 1'>

    <b:loop values='data:posts' var='post'>

      <b:include cond='data:post.id eq "332352973016195129"' data='post' name='post'/>

    </b:loop>

  </b:if>

  <b:if cond='data:posts.size gte 2'>

    <b:loop values='data:posts' var='post'>

      <b:include cond='data:post.id neq "332352973016195129"' data='post' name='post'/>

    </b:loop>

  </b:if>

<b:else/>

  <b:loop values='data:posts' var='post'>

    <b:include data='post' name='post'/>

  </b:loop>

</b:if>

Trong đó 332352973016195129 là postID của bài viết nằm trên địa chỉ trình duyệt khi soạn thảo hay chỉnh sửa bài viết.

Trong trường hợp bạn muốn thêm id hoặc class để cho dễ chỉnh sửa bố cục thì thêm như sau:

Copy

<b:if cond='data:view.isHomepage'>

  <b:if cond='data:posts.size gte 1'>

    <div class='post-1'>

      <b:loop values='data:posts' var='post'>

        <b:include cond='data:post.id eq "332352973016195129"' data='post' name='post'/>

      </b:loop>

    </div>

  </b:if>

  <b:if cond='data:posts.size gte 2'>

    <div class='post-2'>

      <b:loop values='data:posts' var='post'>

        <b:include cond='data:post.id neq "332352973016195129"' data='post' name='post'/>

      </b:loop>

    </div>

  </b:if>

<b:else/>

  <b:loop values='data:posts' var='post'>

    <b:include data='post' name='post'/>

  </b:loop>

</b:if>

Với post-1, và post-2 là những phần tử div của nhóm một bài viết đầu tiên và nhóm những bài viết còn lại không bao gồm bài viết đầu tiên.

Cách 2: Thiết lập bài viết cố định bằng HTML trực tiếp của bài viết. Cách này các bạn chuột phải vào bài viết chọn Kiểm tra sau đó sao chép tất cả mã html của bài viết. Tiếp tục đăng ký một thẻ tag <b:includable id='postPinned'>...<b:includable> cùng với các thẻ tag b:includable khác trong widget Blog1, các bạn cứ chèn vào bất kỳ vị trí nào, vì khi tải lại các thẻ b:includable sẽ được tự động sắp xếp theo bảng chữ cái và chữ hoa đầu tiên được đặt trên cùng.

Ví dụ mình sẽ đăng ký thẻ b:includable của bài viết cố định như sau:

Copy

<b:includable id='postPinned'>

<article class='post'>

  <div class='post_header'>

    <div class='post_meta'>

      <div class='post_author'>

        <a href='https://plus.google.com/100425914480365587416' rel='nofollow' target='_blank' title='Việt Blogger'>

        <img alt='Việt Blogger' src='https://lh6.googleusercontent.com/-iRVl7_i8as4/AAAAAAAAAAI/AAAAAAAALqU/2NALP8jSsgc/s40-c-pf/photo.jpg'/>

        <span>Việt Blogger</span>

        </a>

      </div>

      <div class='post_timestamp'>28 thg 9, 2018</div>

    </div>

  </div>

  <p class='post_snippet'>

    Phiên bản Windows 10 Pro Lite rút gọn được build lại từ bộ cài Windows 10 version 1809 chính thức phiên bản 1809 (Bản dựng HĐH 17763.1). Mình làm bộ cài này đáp ứng cho nhu cầu sử dụng của những máy có cấu hình thấp, máy có cấu hình cao làm đồ họa, dựng phim hay máy làm văn phòng đều có hể cài đặt và sử dụng.

  </p>

  <div class='post_thumb'>

    <a href='https://www.vietblogdao.com/2018/09/windows-10-pro-lite-version-1809-phien-ban-rut-gon-tinh-nang.html' title='Windows 10 Pro Lite Version 1809 phiên bản rút gọn tính năng'>

      <img alt='Windows 10 Pro Lite Version 1809 phiên bản rút gọn tính năng' expr:srcset='sourceSet(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_lWv6DoQFvx8htxNJBm5Vje_Cgwy7FVPlN4UFr96HWK2fvNKkMLHhtlQ4QhstNffoPnJx-tMPy8Apzr-HD21A74jswDHGCXzpzueUcxaRuKYJVZfYGw9oT3pDtiXKnFe9nmMFhfXwTI0/s320/Windows+10+x64-2018-09-27-16-08-05.png&quot;, [200,320,400,640,1600], &quot;16:9&quot;)' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_lWv6DoQFvx8htxNJBm5Vje_Cgwy7FVPlN4UFr96HWK2fvNKkMLHhtlQ4QhstNffoPnJx-tMPy8Apzr-HD21A74jswDHGCXzpzueUcxaRuKYJVZfYGw9oT3pDtiXKnFe9nmMFhfXwTI0/s320/Windows+10+x64-2018-09-27-16-08-05.png'/>

      <h2 class='post_title'>Windows 10 Pro Lite Version 1809 phiên bản rút gọn tính năng</h2>

    </a>

  </div>

</article>

</b:includable>

Khi thêm xong mình sẽ chèn thẻ tag <b:include cond='data:view.isHomepage' name='postPinned'/> ngay phía trên thẻ tag <b:loop values='data:posts' var='post'> trong thẻ tag <b:includable id='main' var='top'>

Copy

<b:includable id='main' var='top'>



    <b:include cond='data:view.isHomepage' name='postPinned'/>

    <b:loop values='data:posts' var='post'>

          <b:include data='post' name='post'/>

    </b:loop>



</b:includable>

Nội dung chính