Labels

[Phần 2] Cập nhật Blog1 lên version 2: Hiển thị bài viết trên trang index


Khác trang bài viết (item), trang tĩnh (page), trang lỗi (error page) thì được gọi là trang index. Trang index bao gồm trang chủ, các trang search (search time, search label, search query) và trang lưu trữ. Trong phần 2 này ta sẽ tìm hiểu cách hiển thị nó như giao diện blog1 v1

Theo như phân tích ở trên ta sẽ viết tiếp cho thẻ <b:includable id='post' var='post'> ở phần 1 như sau

<b:includable id='post' var='post'>
    <div class='post'>
        <b:if cond='data:view.isPost'>
            <b:include data='post' name='postTitle' />
            <b:include data='post' name='postMeta' />
            <b:include data='post' name='postBody' />
            <b:include data='post' name='postFooter' />
            <b:else/>
            <b:if cond='data:view.isPage'>
                <b:include data='post' name='postTitle' />
                <b:include data='post' name='postBody' />
                <b:else/>
                <!-- Nội dung hiển thị trên trang index -->
            </b:if>
        </b:if>
    </div>
</b:includable>

Trang index có thể được coi là một trang thu nhỏ của trang bài viết, nó chứa ảnh thumbnail, tiêu đề, mô tả, đoạn trích ngắn. Như vậy ta sẽ dùng 2 thẻ <b:includable id='postMeta' var='post' để hiển thị mô tả (như tiêu đề, tác giả, đoạn trích ngắn), và <b:includable id='postBodySnippet' var='post'> có thể dùng để hiển thị thumbnail

Viết tiếp nội dung cho thẻ <b:includable id='postMeta' var='post'> [nhớ cập nhật thẻ gọi dữ liệu] (minh họa)

<b:if cond='data:view.isMultipleItems'>
    <div class='post-detail'>
        <b:if cond='data:post.title'>
            <font class='retitle'>
                <h2 class='post-title entry-title'>
                    <b:if cond='data:post.link'>
                        <a expr:href='data:post.link'>
                            <data:post.title/>
                          </a>
                        <b:else/>
                        <b:if cond='data:post.url'>
                            <a expr:href='data:post.url'>
                              <data:post.title/>
                            </a>
                            <b:else/>
                            <data:post.title/>
                        </b:if>
                    </b:if>
                </h2>
            </font>
        </b:if>
        <div class='date-header'>
            <div id='meta-post'>
                <a class='g-profile' expr:href='data:post.author.profileUrl' expr:title='data:post.author.name' rel='author'><span itemprop='name'><data:post.author.name/></span></a>
                <abbr class='published timeago' expr:title='data:post.date.iso8601'><data:post.date.iso8601/></abbr>
            </div>
            <div class='resumo'><span><data:post.snippets.short/></span></div>
        </div>
    </div>
</b:if>

Viết code thumbnail cho thẻ <b:includable id='postBodySnippet' var='post'> (minh họa)

<b:includable id='postBodySnippet' var='post'>
    <b:if cond='data:view.isMultipleItems'>
        <b:if cond='data:post.thumbnailUrl'>
            <div class='block-image'>
                <div class='thumb'>
                    &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.thumbnailUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                </div>
                <div class='postags'>
                    <b:if cond='data:post.labels'>
                        <b:loop values='data:post.labels' var='label'>
                            <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                        </b:loop>
                    </b:if>
                </div>
            </div>
            <b:else/>
            <b:if cond='data:post.featuredImage'>
                <div class='block-image'>
                    <div class='thumb'>
                        &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.firstImageUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                    </div>
                    <div class='postags'>
                        <b:if cond='data:post.labels'>
                            <b:loop values='data:post.labels' var='label'>
                                <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                            </b:loop>
                        </b:if>
                    </div>
                </div>
                <b:else/>
                <div class='block-image'>
                    <div class='thumb'>
                        &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                    </div>
                    <div class='postags'>
                        <b:if cond='data:post.labels'>
                            <b:loop values='data:post.labels' var='label'>
                                <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                            </b:loop>
                        </b:if>
                    </div>
                </div>
            </b:if>
        </b:if>
    </b:if>
</b:includable>


Cuối cùng là gọi chúng vào thẻ <b:includable id='post' var='post'>. Ví dụ tôi đặt code như sau

<b:includable id='post' var='post'>
    <div class='post'>
        <b:if cond='data:view.isPost'>
            <b:include data='post' name='postTitle' />
            <b:include data='post' name='postMeta' />
            <b:include data='post' name='postBody' />
            <b:include data='post' name='postFooter' />
            <b:else/>
            <b:if cond='data:view.isPage'>
                <b:include data='post' name='postTitle' />
                <b:include data='post' name='postBody' />
                <b:else/>
                   <b:include data='post' name='postMeta' />
                   <b:include data='post' name='postBodySnippet' />
            </b:if>
        </b:if>
    </div>
</b:includable>

Hiển thị


Rất dễ hiểu đúng không, theo thứ tự sắp xếp lần lượt trong b:includable thì ngoài trang index nó cũng hiển thị đúng như vậy

Lồng code vào nhau

<b:includable id='post' var='post'>
    <div class='post'>
        <b:if cond='data:view.isPost'>
            <b:include data='post' name='postTitle' />
            <b:include data='post' name='postMeta' />
            <b:include data='post' name='postBody' />
            <b:include data='post' name='postFooter' />
            <b:else/>
            <b:if cond='data:view.isPage'>
                <b:include data='post' name='postTitle' />
                <b:include data='post' name='postBody' />
                <b:else/>
                <b:include data='post' name='postBodySnippet'>
                    <b:include data='post' name='postMeta' />
                </b:include>
            </b:if>
        </b:if>
    </div>
</b:includable>

Hiển thị


Đây là cách hiển thị tôi mong muốn, vì khi sắp xếp thẻ b:includable, div cha div con đúng vị trí thì css sẽ valid và hiển thị giống blog1 v1. Như vậy trong quá trình upgrade bạn cũng cần hết sức để ý đến những div cha div con để css không bị sai

Hết phần 2, hẹn gặp lại ở phần 3 !