Hướng dẫn chỉnh sửa tiện ích PopularPosts và FeaturedPost version 2

Tìm hiểu về bố cục tiện ích PopularPosts widget và FeaturedPost widget version 2 trong Blogspot và hướng dẫn chỉnh sửa tiện ích

Nếu bạn đã nâng cấp mẫu chủ đề Blog lên layout version 3, bạn cũng cần tìm hiểu qua về các thẻ dữ liệu data:posts của tiện ích PopularPosts và FeaturedPost version 2. Mặc định, khi bạn chọn thêm mới các tiện ích này, các thẻ dữ liệu bố cục của tiện ích thường rất ngắn gọn chỉ sử dụng một thẻ dữ liệu chung <b:include name='snippetedPosts'/> được tải từ server của Blogger.

Ví dụ về bố cục của tiện ích PopularPosts

<b:widget id='PopularPosts1' locked='true' title='Bài đăng phổ biến' type='PopularPosts' version='2' visible='true'>

  <b:widget-settings>⋯</b:widget-settings>

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

    <b:include name='widget-title'/>

    <div class='widget-content'>

      <b:include name='snippetedPosts'/>

    </div>

  </b:includable>

</b:widget>

Nội dung trong thẻ <b:include name='snippetedPosts'/>

<b:includable id='snippetedPosts'>

  <div role='feed'>

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

      <article class='post' role='article'>

        <b:include name='snippetedPostContent'/>

      </article>

    </b:loop>

  </div>

</b:includable>

Trong thẻ dữ liệu này lại có thẻ <b:include name='snippetedPostContent'/>, do đó bạn lại cần thêm một thẻ dữ liệu <b:includable id='snippetedPostContent'>⋯</b:includable> và bạn chỉ cần chỉnh sửa dữ liệu trong thẻ này là được

<b:widget id='PopularPosts1/FeaturedPost1' locked='false' title='' type='PopularPosts/FeaturedPost1' version='2' visible='true'>

  <b:widget-settings>⋯</b:widget-settings>

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

    <b:include name='widget-title'/>

    <div class='widget-content'>

      <b:include name='snippetedPosts'/>

    </div>

  </b:includable>

  <b:includable id='snippetedPosts'>

    <div role='feed'>

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

        <article class='post' role='article'>

          <b:include name='snippetedPostContent'/>

        </article>

      </b:loop>

    </div>

  </b:includable>

  <b:includable id='snippetedPostContent'>

    <div class='post-content'>

      <!-- Dữ liệu hiển thị -->

    </div>

  </b:includable>

</b:widget>

Khai thác rõ ràng

  <b:includable id='snippetedPostContent'>

    <div class='post-content'>

      <!-- Tiêu đề -->

      <div class='post-title'>

        <a expr:href='data:post.url.canonical' expr:title='data:post.title'>

          <data:post.title/>

        </a>

      </div>

      <!-- Ảnh -->

      <b:if cond='data:postDisplay.showFeaturedImage'>

      <div class='post-thumbnail'>

        <a expr:href='data:post.url' expr:title='data:post.title'>

          <img expr:alt='data:post.title' expr:src='data:post.featuredImage' expr:srcset='sourceSet(data:post.featuredImage, [200,320,400,640,1600], &quot;16:9&quot;)' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)'/>

        </a>

      </div>

      </b:if>

      <!-- Đoạn trích -->

      <b:if cond='data:postDisplay.showSnippet'>

      <div class='post-snippet'>

        <data:post.snippets.short/>

        <a expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:blog.jumpLinkMessage'>

          <data:blog.jumpLinkMessage/>

        </a>

      </div>

      </b:if>

      <!-- Thông tin -->

      <div class='post-meta'>

        <!-- Tác giả -->

        <span class='post-author'>

          <a expr:href='data:post.author.profileUrl' expr:title='data:post.author.name'>

            <data:post.author.name/>

          </a>

        </span>

        <!-- Thời gian -->

        <span class='post-date'>

          <data:post.date/>

        </span>

        <!-- Nhãn -->

        <b:loop values='data:post.labels' var='label'>

        <span class='post-label'>

          <a expr:href='data:label.url' expr:title='data:label.name'>

            <data:label.name/>

          </a>

        </span>

        </b:loop>

        <!-- Nhận xét -->

        <b:if cond='data:post.allowComments'>

        <span class='post-comment'>

          <a expr:href='data:post.addCommentUrl'  expr:title='data:messages.comments'>

            <data:post.numberOfComments/> <data:messages.comments/>

          </a>

        </span>

        </b:if>

      </div>

    </div>

  </b:includable>