Cách sử dụng thẻ b:includable và b:include trong blogspot

Trong chủ đề XML template, bạn sẽ nhìn thấy rất nhiều thẻ màu xanh <b:includable> và <b:include>, những thẻ này thường nằm bên trong các tiện ích. Vậy những thẻ tag này có tác dụng gì? và sử dụng như thế nào? Bài hôm nay mình sẽ làm rõ vấn đế đó.

Đặc điểm

Thẻ <b:includable> và <b:include> luôn đi cặp với nhau

Thẻ <b:includable> phải được đặt bên trong các thẻ <b:widget> hoặc <b:defaultmarkups>, thẻ này được tạo để lấy dữ liệu đầu vào. Mỗi thẻ <b:includable> phải được đặt một cho một id khác nhau nếu chúng nằm trong <b:widget>, ví dụ <b:includable id='commentForm' var='post'>

Thẻ <b:include> là thẻ trích xuất đầu ra hiển thị dữ liệu ở vị trí nào được đặt trong thẻ <b:includable> nếu <b:includable> đặt trong <b:widget> và đặt ở bất ký vị trí nào nếu <b:includable> đặt trong <b:defaultmarkups>. Tương tự như thẻ <b:includable> mỗi thẻ phải được đặt tên bằng id thì thẻ <b:include> phải có tên bằng name bên trong thẻ. Ví dụ thẻ trích xuất đầu vào <b:includable id='shareButtonsMenu'> thì thẻ trích xuất đầu ra là <b:include name='shareButtonsMenu'/>

Từ trước tới nay người thiết kế template vẫn thường đặt code html, xml vào chung một thẻ <b:includable> chẳng hạn như thẻ <b:includable id='post' var='post'>⋯</b:includable> trong tiện ích Bài đăng trên Blog, làm cho template không được tối ưu 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ẻ <b:includable> và <b:include>. Hiểu theo cách đơn giản sử dụng thẻ <b:includable> đăng ký dữ liệu cho một hay nhiều mục hiển thị còn <b:include> là thẻ con dùng gọi dữ liệu từ thẻ <b:includable>.

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

<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ẻ <b:include data='post' name='postBodySnippet'/> dùng gọi dữ liệu đặt trong thẻ <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ẻ <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ẻ <b:include data='post' name='snippetedPostByline'/> được lấy dữ liệu của thẻ <b:include> sau:

<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 tạo mới và trích xuất các thẻ <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ẻ <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ẻ <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ể tạo mới thẻ <b:includable> nhưng id không được trùng tên với các thẻ <b:includable> đã có

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

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

<b:includable id='testScript'>

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

    <script>//<![CDATA[

      // javascript

    //]]></script>

  </b:if>

</b:includable>

Hoặc:

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

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

thay vì:

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

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

</b:if>