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>
<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'> <a href='<data:post.url/>' style='background:url(<data:post.thumbnailUrl/>) no-repeat center center;background-size:cover'></a> </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'> <a href='<data:post.url/>' style='background:url(<data:post.firstImageUrl/>) no-repeat center center;background-size:cover'></a> </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'> <a href='<data:post.url/>' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNnjmo0d6R1NIRB9qEIrXWKmi02Un5yi9JKz7vaPKf2jQa-TuwTOJL9Q8Xv3Xetk0Qy6nhLrGXq46HLLS8KdDnpdos7XCyGIzBVetlF1L-TahRkj3wM3-9h484_CES414KLmqTBlOQztU/s1600-r/nth.png) no-repeat center center;background-size:cover'></a> </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 !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên