Hướng dẫn thiết kế bài viết trong tiện ích Bài đăng trên Blog

-->

Thiết kế Blogspot

Đăng vào tháng 6 09, 2018 / 0 bình luận

Hướng dẫn thiết kế bài viết trong tiện ích Bài đăng trên Blog

Thiết kế các bài viết trong tiện ích Bài đăng trên Blog thế nào cho phù hợp? Cách đặt HTML, class, id, thẻ data gọi dữ liệu chuẩn, tối ưu không thừa cũng không thiếu... sẽ được mình gói gọn trong bài viết này.

Dưới đây là hướng dẫn căn bản không quá chi tiết cho các bạn mới muốn thiết kế template

Trong thẻ <b:includable id='main' var='top'> nội dung HTML bên trong cặp thẻ này các bạn chỉ đặt như sau là đủ


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

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

    <b:include data='top' name='status-message'/>

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

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

      <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>

    </b:loop>

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

      <b:include name='nextprev'/>

    </b:if>

</b:includable>

Khi tải trang ví dụ ngoài trang chủ kiểm tra phần tử cho ra:


<div class="widget Blog" data-version="1" id="Blog1">

  <div class="breadcrumbs">...</div>

  <article class="post">...</article>

  <article class="post">...</article>

  <article class="post">...</article>

  <article class="post">...</article>

  <article class="post">...</article>

  <div class="blog-pager" id="blog-pager">...</div>

</div>

Phần quan trong nhất là đặt HTML nằm trong cặp thẻ <b:includable id='post' var='post'>...</b:includable> chúng ta sẽ thiết kế như sau:

+ Đầu tiên đặt <article class='post'> và kết thúc bằng </article>


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

  <article class='post'>

    // HTML đặt trong đây

  </article>

  <div class='clear'/>

</b:includable>

+ Tiếp theo các bạn lại phân ra làm 2 loại trang index và trang bài viết như sau

Đề xuất: Một số thẻ điều kiện thông dụng và cách sử dụng trong Blogspot


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

  <article class='post'>

    <!-- Bố cục trang index -->

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

      // HTML đặt trong đây

    </b:if>

    <!-- Kết thúc trang index -->

    <!-- Bố cục trang bài viết -->

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

      // HTML đặt trong đây

    </b:if>

    <!-- Kết thúc trang bài viết -->

  <div class='clear'/>

  </article>

</b:includable>

1. Đặt HTML cho trang index

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


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

  <div class='post-thumb'

    <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>

  </div>

<b:else/>

  <div class='post-thumb'>

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

  </div>

</b:if>

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


<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, nhãn, số nhận xét sử dụng class post-meta


<div class='post-meta'>

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

  <span class='post-author'>

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

  </span>

  <!-- Nhãn sử dụng class post-label -->

  <span class='post-label'>

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

    <b:if cond='data:label.isLast == &quot;true&quot;'>

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

    </b:if>

    </b:loop>

  </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.timestamp/> // Thời gian đăng hoặc kết hợp cả 2

  </span>

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

  <span class='post-comment'>

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>

  </span>

</div>

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


<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


<div class='post-jumplink'

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

</div>

Viết đầy đủ cho trang index như sau:


<!-- Bố cục trang index -->

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

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

  <div class='post-thumb'

    <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>

  </div>

<b:else/>

  <div class='post-thumb'>

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

  </div>

</b:if>

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

<div class='post-meta'>

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

  <span class='post-author'>

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

  </span>

  <!-- Nhãn sử dụng class post-label -->

  <span class='post-label'>

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

    <b:if cond='data:label.isLast == &quot;true&quot;'>

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

    </b:if>

    </b:loop>

  </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.timestamp/> // Thời gian đăng hoặc kết hợp cả 2

  </span>

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

  <span class='post-comment'>

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' erpr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>

  </span>

</div>

<p class='post-snippet'>

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

</p>

<div class='post-jumplink'

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

</div>

</b:if>

<!-- Kết thúc trang index -->

2. Đặt HTML trong trang bài viết

Bố cục bài viết sử dụng 3 class chính sau


<div class='post-header'>...</div>

<div class='post-body>...</div>

<div class='post-footer'>..</div>

- Lấy dữ liệu thông tin tiều đề bài viết, thời gian đăng bài, nhãn, số nhận xét trong class post-header


<div class='post-header'

  <!-- Tiêu đề bài viết sử dụng class post-title -->

  <h1 class='post-title'>

    <data:post.title/>

  </h1>

  <div class='post-meta'>

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

    <span class='post-author'>

      <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></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.timestamp/> // Thời gian đăng hoặc kết hợp cả 2

    </span>

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

    <span class='post-comment'>

      <a href='#comment-form' expr:onclick='data:post.addCommentOnclick' expr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>

    </span>

  </div>

</div>

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


<div class='post-body'>

  <data:post.body/>

</div>

- Lấy dữ liệu chân bài viết sử dụng class post-footer


<div class='post-footer'

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

  <div class='post-share'>

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

  </div>

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

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

Viết đầy đủ như sau:


<!-- Bố cục trang bài viết -->

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

<div class='post-header'

  <!-- Tiêu đề bài viết sử dụng class post-title -->

  <h1 class='post-title'>

    <data:post.title/>

  </h1>

  <div class='post-meta'>

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

    <span class='post-author'>

      <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></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.timestamp/> // Thời gian đăng hoặc kết hợp cả 2

    </span>

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

    <span class='post-comment'>

      <a href='#comment-form' expr:onclick='data:post.addCommentOnclick' expr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>

    </span>

  </div>

</div>

<div class='post-body'>

  <data:post.body/>

</div>

<div class='post-footer'

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

  <div class='post-share'>

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

  </div>

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

  <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à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:if>

<!-- Kết thúc trang bài viết -->

Tổng hợp ta có nội dụng trong cặp thẻ <b:includable id='post' var='post'>...</b:includable> như sau:


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

  <article class='post'>

   <!-- Bố cục trang index -->

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

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

  <div class='post-thumb'

    <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>

  </div>

<b:else/>

  <div class='post-thumb'>

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

  </div>

</b:if>

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

<div class='post-meta'>

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

  <span class='post-author'>

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

  </span>

  <!-- Nhãn sử dụng class post-label -->

  <span class='post-label'>

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

    <b:if cond='data:label.isLast == &quot;true&quot;'>

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

    </b:if>

    </b:loop>

  </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.timestamp/> // Thời gian đăng hoặc kết hợp cả 2

  </span>

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

  <span class='post-comment'>

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' erpr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>

  </span>

</div>

<p class='post-snippet'>

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

</p>

<div class='post-jumplink'

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

</div>

</b:if>

<!-- Kết thúc trang index -->

<!-- Bố cục trang bài viết -->

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

<div class='post-header'

  <!-- Tiêu đề bài viết sử dụng class post-title -->

  <h1 class='post-title'>

    <data:post.title/>

  </h1>

  <div class='post-meta'>

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

    <span class='post-author'>

      <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></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.timestamp/> // Thời gian đăng hoặc kết hợp cả 2

    </span>

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

    <span class='post-comment'>

      <a href='#comment-form' expr:onclick='data:post.addCommentOnclick' expr:title='data:commentLabel'><data:post.numComments/> <data:commentLabel/></a>

    </span>

  </div>

</div>

<div class='post-body'>

  <data:post.body/>

</div>

<div class='post-footer'

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

  <div class='post-share'>

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

  </div>

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

  <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à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:if>

<!-- Kết thúc trang bài viết -->

</article>

<div class='clear'/>

</b:includable>

3. 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ụ:


<b:skin><![CDATA[/

// CSS

</b:skin>


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


<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 Bài đăng trên Blog 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.

Chấm hết bài!!!

Đỗ Nhật √ - tháng 6 09, 2018 ngày Thứ Bảy, 9 tháng 6, 2018 - 0 bình luận
Tag Thiết kế Blogspot