Sử dụng thẻ tag b:includable và b:include trong thiết kế bài viết

Từ trước tới nay người thiết kế template vẫn thường đặt html vào chung một thẻ tag b:includable chẳng hạn như thẻ tag <b:includable id='post' var='post'>...</b:includable> làm cho template không được tối ưu giảm tốc độ tải trang và khi chỉnh sửa cũng rất khó khăn khi muốn chỉnh sửa mục nào đó.

Thiết kế theo phương pháp này không còn được sử dụng ngày nay thay vào đó là phương pháp được xem là hiện đại tối ưu hơn sử dụng thẻ tag b:includable và b:include hiểu theo cách đơn giản sử dụng thẻ tag b:includable đăng ký dữ liệu cho một hay nhiều mục hiển thị còn b:include là thẻ tag con dùng gọi dữ liệu từ thẻ tag b:includable.

Lấy ví dụ khi đăng ký hiển thị nội dung bài viết tại trang index trong thẻ tag <b:includable id='postBodySnippet' var='post'>...</b:includable> như sau:

Copy

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

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

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

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

    <h2 class='post_title'>

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

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

      <b:else/>

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

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

      </b:if></b:if>

    </h2>

  </b:if>

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

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

</b:includable>

Và sau đó sử dụng thẻ tag <b:include data='post' name='postBodySnippet'/> dùng gọi dữ liệu đặt trong thẻ tag <b:includable id='post' var='post'>...</b:includable>, như vậy khi muốn chỉnh sửa mục nào đó của bài viết trong trang index chỉ cần sửa trong thẻ tag <b:includable id='postBodySnippet' var='post'>

Trong thẻ tag <b:includable id='postBodySnippet' var='post'> lại có những thẻ b:include gọi dữ liệu của những thẻ b:includable khác lấy ví dụ với thẻ tag <b:include data='post' name='snippetedPostByline'/> được lấy dữ liệu của thẻ tag b:includable sau:

Copy

<b:includable id='snippetedPostByline'>

  <div class='post_snippet'>

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

  </div>

</b:includable>

để gọi dữ liệu tóm tắt bài viết.

Một vài nguyên tắc trong thiết kế thẻ tag b:includable và b:include

+ Các thẻ tag được sắp xếp hiển thị trong template lấy chữ cái đầu tiên sắp xếp từ trên xuống dưới

+ Các thẻ tag b:includable mặc định của Blog không xóa được chỉ xóa được nội dung bên trong ví dụ với thẻ tag <b:includable id='previousPageLink'>...</b:includable> nếu muốn xóa nội dung thì chỉ sửa thành <b:includable id='previousPageLink'/> và xóa đoạn ...</b:includable>

+ Có thể đăng ký mới thẻ tag b:includable nhưng id không được trùng tên với các thẻ tag b:includable đã có

+ Nội dung html hay javascript trong thẻ tag b:includable khi tải trang phải đóng không bị vỡ, ví dụ:

Copy

<b:includable id='testScript'>

  <script>//<![CDATA[

    // javascript

  //]]></script>

</b:includable>

Khi tải trang sẽ bị vỡ không đóng được phải sửa lại như sau ví dụ:

Copy

<b:includable id='testScript'>

  <b:if cond='!data:view.isPost'>

    <script>//<![CDATA[

      // javascript

    //]]></script>

  </b:if>

</b:includable>

Hoặc:

Copy

<b:includable id='testScript'>

  <div class='test_script'

    <script>//<![CDATA[

      // javascript

    //]]></script>

  </div>

</b:includable>

+ Có thể đặt điều kiện trực tiếp trong thẻ gọi dữ liệu b:include ví dụ:

Copy

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

thay vì:

Copy

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

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

</b:if>

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

Nội dung chính