Hướng dẫn thiết kế bài viết trong tiện ích widget Blog1 version 2

Tiện ích (widget) Blog1 version 2 được cho là rất khác biệt so với phiên bản cũ version 1 đặc biệt là việc sắp xếp các thẻ tag khác hoàn toàn chỉ một vài thẻ tag được giữ lại ví dụ như <b:includable id='post' var='post'>.

Nếu bạn muốn thiết kế bài viết trong widget này hoặc muốn nâng cấp từ version 1 lên có thể tham khảo bài viết tuy không quá chi tiết nhưng cũng đưa ra vài nét căn bản trong thiết kế

Dữ liệu bố cục tổng thể của widget Blog1 version 2

Copy

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='2' visible='true'>

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

  <b:includable id='main'>...</b:includable>

  <b:includable id='aboutPostAuthor'>...</b:includable>

  <b:includable id='addComments'>...</b:includable>

  <b:includable id='commentAuthorAvatar'>...</b:includable>

  <b:includable id='commentDeleteIcon' var='comment'>...</b:includable>

  <b:includable id='commentForm' var='post'>...</b:includable>

  <b:includable id='commentFormIframeSrc' var='post'>...</b:includable>

  <b:includable id='commentItem' var='comment'>...</b:includable>

  <b:includable id='commentList' var='comments'>...</b:includable>

  <b:includable id='commentPicker' var='post'>...</b:includable>

  <b:includable id='comments' var='post'>...</b:includable>

  <b:includable id='commentsLink'>...</b:includable>

  <b:includable id='commentsTitle'>...</b:includable>

  <b:includable id='defaultAdUnit'>...</b:includable>

  <b:includable id='feedLinks'>...</b:includable>

  <b:includable id='feedLinksBody' var='links'>...</b:includable>

  <b:includable id='headerByline'>...</b:includable>

  <b:includable id='homePageLink'>...</b:includable>

  <b:includable id='iframeComments' var='post'>...</b:includable>

  <b:includable id='inlineAd' var='post'>...</b:includable>

  <b:includable id='nextPageLink'>...</b:includable>

  <b:includable id='post' var='post'>...</b:includable>

  <b:includable id='postBody' var='post'>...</b:includable>

  <b:includable id='postBodySnippet' var='post'>...</b:includable>

  <b:includable id='postCommentsAndAd' var='post'>...</b:includable>

  <b:includable id='postCommentsLink'>...</b:includable>

  <b:includable id='postFooter' var='post'>...</b:includable>

  <b:includable id='postFooterAuthorProfile' var='post'>...</b:includable>

  <b:includable id='postFooterJumpLink'>...</b:includable>

  <b:includable id='postHeader' var='post'>...</b:includable>

  <b:includable id='postJumpLink'>...</b:includable>

  <b:includable id='postLabels'>...</b:includable>

  <b:includable id='postMeta' var='post'>...</b:includable>

  <b:includable id='postPagination'>...</b:includable>

  <b:includable id='postShareButtons' var='post'>...</b:includable>

  <b:includable id='postTitle' var='post'>...</b:includable>

  <b:includable id='previousPageLink'>...</b:includable>

  <b:includable id='snippetedPostByline'>...</b:includable>

  <b:includable id='threadedCommentForm' var='post'>...</b:includable>

  <b:includable id='threadedCommentJs' var='post'>...</b:includable>

  <b:includable id='threadedComments' var='post'>...</b:includable>

</b:widget>

Những vấn đề quan trọng bạn cần lưu ý:

+ Thẻ data dữ liệu của version 2 cũng rất khác so với phiên bản cũ, các bạn tham khảo bài viếtDanh sách thẻ data dữ liệu của widget Blog1 vesion 2

+ Nội dung bài viết được đặt trong thẻ tag <b:includable id='postCommentsAndAd' var='post'> mà trước đây trong version 1 nội dung này được đặt trong thẻ tag <b:includable id='main' var='top'>

+ Dữ liêu bài viết được đặt trong thẻ tag <b:includable id='post' var='post'> mà trong thẻ này lại bao gồm các thẻ tag b:include gọi dữ liệu từ các thẻ tag b:includable bên ngoài cụ thể như sau:

Copy

  <div class='post'>

    <b:include data='post' name='postMeta'/> // Gọi dữ liệu của thẻ <b:includable id='postMeta' var='post'>

    <b:include data='post' name='postTitle'/>  // Gọi dữ liệu của thẻ <b:includable id='postTitle' var='post'>

    <b:include name='headerByline'/> // Gọi dữ liệu của thẻ <b:includable id='headerByline'>

    <b:if cond='data:view.isSingleItem'> // Điều kiện trang bài viết

      <b:include data='post' name='postBody'/> // Gọi dữ liệu của thẻ <b:includable id='postBody' var='post'>

    <b:else/>

      <b:include data='post' name='postBodySnippet'/> // Gọi dữ liệu của thẻ <b:includable id='postBodySnippet' var='post'>

      <b:include data='post' name='postJumpLink'/> // Gọi dữ liệu của thẻ <b:includable id='postJumpLink'>

    </b:if>

    <b:include data='post' name='postFooter'/> // Gọi dữ liệu của thẻ <b:includable id='postFooter' var='post'>

  </div>

Như vậy phân tích ra các thẻ dữ liệu ta phân ra làm 2 trang index và trang bài viết ( post + page ) như sau:

- Trang index bao gồm các 6 cặp thẻ tag:

Copy

<b:includable id='postMeta' var='post'>...</b:includable>

<b:includable id='postTitle' var='post'>...</b:includable>

<b:includable id='headerByline'>...</b:includable>

<b:includable id='postBodySnippet' var='post'>...</b:includable>

<b:includable id='postJumpLink'>...</b:includable>

<b:includable id='postFooter' var='post'>...</b:includable>

- Trang bài viết bao gồm 5 cặp thẻ tag:

Copy

<b:includable id='postMeta' var='post'>...</b:includable>

<b:includable id='postTitle' var='post'>...</b:includable>

<b:includable id='headerByline'>...</b:includable>

<b:includable id='postBody' var='post'>...</b:includable>

<b:includable id='postFooter' var='post'>...</b:includable>

Để đơn giản hơn trong thiết kết bạn đặt lại thẻ tag b:include trong <b:includable id='post' var='post'> như sau:

Copy

<b:includable id='post' var='post'>

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

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

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

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

  <b:else/>

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

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

  </b:if>

</b:includable>

Như vậy với trang bài viết chỉ cần 3 cặp thẻ tag:

Copy

<b:includable id='postHeader' var='post'>...</b:includable>

<b:includable id='postBody' var='post'>...</b:includable>

<b:includable id='postFooter' var='post'>...</b:includable>

Với trang index chỉ bao gồm 2 thẻ tag:

Copy

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

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

Bây giờ đi vào thiết kế lại trong các cặp thẻ tag của mỗi trang bằng các class, id và thẻ data gọi dữ liệu.

1. Sửa lại bố cục nội dung bài viết 

Trong thẻ tag <b:includable id='postCommentsAndAd' var='post'>...</b:includable> sửa lại như sau:

Copy

<b:includable id='postCommentsAndAd' var='post'>

 <article class='post'>

   <!-- Post title and body -->

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

   <!-- Comments -->

     <b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>

   <!-- Show ad inside post container, after comments, if single item. -->

     <b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd'/>

  </article>

   <!-- Show ad outside post container (between posts) for feed pages. -->

     <b:include cond='data:view.isMultipleItems and data:post.includeAd' data='post' name='inlineAd'/>

</b:includable>

2. Đặt HTML cho trang index

Trong thẻ tag <b:includable id='postBodySnippet' var='post'>...</b:includable> với nội dung như sau:

- Lấy dữ liệu ảnh bài viết sử dụng class post-thumb

Copy

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

  <div class='post-thumb'

    <b:include data='{image: data:post.featuredImage,imageSizes: [256, 512, 945, 1684], imageRatio: &quot;945:600&quot;,sourceSizes: &quot;(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)&quot;,enhancedSourceset: data:highRes}' name='responsiveImage'/>

  </div>

<b:else/>

  <div class='post-thumb'>

    <img expr:alt='data:post.title' src='/no-image.jpg'/>

  </div>

</b:if>

- Lấy dữ liệu tiêu đề bài viết sử dụng class post-title

Copy

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

  <h2 class='post-title'>

    <a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'><data:post.title/></a>

  </h2>

<b:else/>

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

  <h2 class='post-title'>

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

  </h2>

</b:if>

</b:if>

- Lấy dữ liệu thông tin như: tác giả, thời gian đăng bài, số nhận xét sử dụng class post-meta

Copy

<div class='post-meta'>



  <!-- Tác giả sử dụng class post-author -->

  <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 đăng bài sử dụng class post-date -->

  <span class='post-date'>

    <data:post.date/> // Ngày đăng hoặc <data:post.lastUpdated/> // Cập nhật

  </span>



  <!-- Số nhận xét sử dụng class post-comment -->

  <span class='post-comment'>

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

  </span>



</div>

- Lấy dữ liệu tóm tắt bài viết sử dụng class post-snippet

Copy

<p class='post-snippet'>

  <b:eval expr='data:post.body snippet { length: 100, links: false, linebreaks: false }'/>

</p>

- Lấy dữ liệu nút đọc thêm sử dụng class post-jumplink

Copy

<div class='post-jumplink'

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

</div>

Bây giờ chúng ta sẽ phân bổ các dữ liệu trên vào trong các thẻ tag b:includable như sau:

- Dữ liệu tiêu đề bài viết đặt trong thẻ tag:

Copy

<b:includable id='postTitle' var='post'>

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

  <h2 class='post-title'>

    <a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'><data:post.title/></a>

  </h2>

<b:else/>

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

  <h2 class='post-title'>

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

  </h2>

</b:if>

</b:if>

</b:includable>

- Dữ liệu thông tin đặt trong thẻ tag:

Copy

<b:includable id='postMeta' var='post'>

<div class='post-meta'>



  <!-- Tác giả sử dụng class post-author -->

  <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 đăng bài sử dụng class post-date -->

  <span class='post-date'>

    <data:post.date/> // Ngày đăng hoặc <data:post.lastUpdated/> // Cập nhật

  </span>



  <!-- Số nhận xét sử dụng class post-comment -->

  <span class='post-comment'>

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

  </span>



</div>

</b:includable>

- Dữ liệu tóm tắt đặt trong thẻ tag:

Copy

<b:includable id='snippetedPostByline'>

<p class='post-snippet'>

  <b:eval expr='data:post.body snippet { length: 100, links: false, linebreaks: false }'/>

</p>

</b:includable>

- Dữ liệu nút đọc thêm đặt trong thẻ tag:

Copy

<b:includable id='postJumpLink'>

<div class='post-jumplink'

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

</div>

</b:includable>

Tổng hợp ta sẽ đặt các thẻ tag b:include trong thẻ tag <b:includable id='postBodySnippet' var='post'>...</b:includable> như sau:

Copy

<b:includable id='postBodySnippet' var='post'>

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

    <div class='post-thumb'

      <b:include data='{image: data:post.featuredImage,imageSizes: [256, 512, 945, 1684], imageRatio: &quot;945:600&quot;,sourceSizes: &quot;(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)&quot;,enhancedSourceset: data:highRes}' name='responsiveImage'/>

    </div>

  <b:else/>

     <div class='post-thumb'>

       <img expr:alt='data:post.title' src='/no-image.jpg'/>

     </div>

  </b:if>

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

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

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

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

</b:includable>

3. Đặt HTML cho trang bài viết

+ Đặt dữ liệu trong thẻ tag <b:includable id='postHeader' var='post'>...</b:includable>

Copy

<b:includable id='postHeader' var='post'>

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

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

</b:includable>

Với dữ liệu tiêu đề bài viết trong thẻ tag <b:include data='post' name='headerByline'/> được đặt trong thẻ tag:

Copy

<b:includable id='headerByline'>

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

    <h1 class='post-title'><data:post.title/></h1>

  </b:if>

</b:includable>

+ Đặt dữ liệu trong thẻ tag <b:includable id='postFooter' var='post'>...</b:includable>

Copy

<b:includable id='postFooter' var='post'>

  <div class='post-footer'

    <!-- Các nút chia sẻ sử dụng class post-share -->

      <b:include data='posts' name='postShareButtons'/>

    <!-- Tên các nhãn trong bài viết sử dụng class post-tags

      <b:include data='posts' name='postLabels'/>

    <!-- Bài viết liên quan sử dụng class related-posts

    <div class='related-posts'>

      // Javascript sử dụng Feed gọi dữ liệu

    </div>

  </div>

</b:includable>

Với dữ liệu <b:include data='posts' name='postShareButtons'/> đặt dữ liệu trong thẻ tag <b:includable id='postShareButtons' var='post'>...</b:includable>

Copy

<b:includable id='postShareButtons' var='post'>

  <div class='social-share'>

    <a expr:href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=googleplus&quot;' onclick='window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;' target='_blank' title='Chia sẻ lên Google+'></a>

    <a expr:href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=twitter&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Chia sẻ lên Twitter'><span class='twitter-icon social-icon'/></a>   

    <a expr:href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Chia sẻ lên Facebook'><span class='facebook-icon social-icon'/></a>

  </div>

</b:includable>

Với dữ liệu <b:include data='posts' name='postLabels'/> đặt trong thẻ tag  <b:includable id='postLabels'>...</b:includable>

Copy

<b:includable id='postLabels'>

  <div class='post-tags'>

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

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

    </b:loop>

  </div>

</b:includable>

4. Tạo phân trang đánh số thứ tự nếu cần

Phân trang đánh số thứ tự được đặt trong thẻ tag <b:includable id='postPagination'>...</b:includable>, ví dụ:

Copy

<b:includable id='postPagination'>

  <div class='blog-pager' id='blog-pager'>

    <script>//<![CDATA[

      var perPage = 15;

      var numPages = 3;

      var firstText = '<span class="firstText"></span>';

      var lastText = '<span class="lastText"></span>';

      var prevText = '<span class="prevText"></span>';

      var nextText = '<span class="nextText"></span>';

      var urlactivepage = location.href;

      var home_page = "/";

    //]]></script>

    <script src='https://cdn.rawgit.com/ns24h/js/master/blog-paper.js'/>

  </div>

  <div class='clear'/>

</b:includable>

5. Viết css cho bố cục bài viết

Phần viết css cho class có thể đặt style cho hai trang riệng biệt trên </head> và đặt một số class không thay đổi trong <b:skin> ví dụ:

Copy

<b:skin><![CDATA[/

// CSS

  ]]></b:skin>

<!-- Viết css cho trang index -->

Copy

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

<style>

h2.post-title {}

.post-thumb {}

.post-meta {}

.post-meta .post-label {}

.post-meta .post-author {}

.post-meta .post-date {}

.post-meta .post-comment {}

.post-snippet {}

post-jumplink  {}

....

</style>

</b:if>

<!-- Viết css cho trang bài viết -->

Copy

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

<style>

.post-header {}

h1.post-tile {}

.post-meta {}

.post-body {}

.post-body .separator {}

.post-body .tr-caption-container {}

.post-body img {}

.post-body ifame {}

.post-body blockquote {}

.post-body ol {}

.post-body ol li {}

.post-body ul{}

.post-body ul li {}

.post-body h2 {}

.post-body h3 {}

.post-footer

.post-footer .post-share {}

.post-footer .post-tags {}

.post-footer .related-posts {}

...

</style>

</b:if>

Trên đây là hướng dẫn thiết kế bài viết trong tiện ích widget Blog1 version 2 tuy không chi tiết nhưng cũng đủ cho các bạn mới tập làm quen với thiết kế các bài viết theo sở thích.

Nội dung chính