Chuyên mục

Blogger
  • Blogger Template 5
    • Seo Blogspot 29
      • Thiết kế Blogspot 23
        • Thủ thuật Blogspot 64
          • Tiện ích Blogspot 27
            Máy tính
            • Phần mềm 43
              • Sửa lỗi Windows 18
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

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

                    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

                    Copy
                    <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'/>

                    Copy
                    <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

                    Copy
                    <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

                    Copy
                      <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>

                    Nội dung chính