Cách đặt điều kiện cho script theo tùy chọn hiển thị dữ liệu trong widget Blog

Khi bạn viết một tính năng nào đó cho theme blogspot chẳng hạn như live search, image zoom, add to wishlist, add to cart,.v.v., bằng script, có bao giờ bạn nghĩ đến thêm tùy chọn tắt tính năng mình đã viết chưa? Lấy ví dụ một tính năng chỉ có tác dụng khi nhận xét không bị vô hiệu hóa vậy khi bạn hay tác giả tắt nhận xét bài viết, console báo lỗi hoặc nếu không tính năng đó cũng không có tác dụng.

Bài hôm trước mình cũng đã chia sẻ cách đặt điều kiện cho script khi tải trang bằng thẻ b:if, bài hôm nay mình chia sẻ thêm một tùy chọn tắt tính năng script bằng điều kiện hiển thị dữ liệu bài viết trong widget Blog, các bạn đọc bài đó mới biết hết các tùy chọn hiển thị dữ liệu để vận dụng cho script trong bài này.

Khi các bạn vào phần Bố cục tiện ích chọn chỉnh sửa Bài đăng trên Blog và trong hộp thoại Định cấu hình bài đăng trên Blog có các tùy chọn hiển thị trong ô vuông tích vào là hiển thị còn bỏ tích là không hiển thị. Do đó bạn có thể tận dụng các tùy chọn hiển thị này cho script có thể là không tải hoặc không được kích hoạt dựa theo cài đặt chọn hoặc bỏ chọn dấu tích trong ô vuông.

Đầu tiên, bạn sẽ viết script đặt điều kiện trước

<script>

  var data={

    widget:{

      backlinks:"<b:if cond='data:widgets.Blog.first.allBylineItems.backlinks.label'>true</b:if>",

      reactions:"<b:if cond='data:widgets.Blog.first.allBylineItems.reactions'>true</b:if>"

    }

  }

</script>

Tiếp theo, đặt đoạn script thực thi trong điều kiện

<script>//<![CDATA[

  if(data.widget.backlinks=='true'){

    // Đặt JavaScript, Jquery

  }

  if(data.widget.reactions=='true'){

    // Đặt JavaScript, Jquery

  }

//]]></script>

Như vậy, khi tác giả blog bỏ chọn dấu tích trong ô vuông của Tạo một liên kết hay Phản ứng khi định cấu hình tiện ích Bài đăng trên Blog thì đoạn script đặt trong điều kiện sẽ bị vô hiệu hóa. Trong trường hợp nếu đó là một đoạn script dài độc lập thì bạn đặt script luôn trong điều kiện b:if, ví dụ

<b:if cond='data:widgets.Blog.first.allBylineItems.backlinks.label'>

<script>//<![CDATA[

  // Đặt JavaScript, Jquery

//]]></script>

</b:if>

Như vậy, khi tác giả blog bỏ chọn dấu tích trong ô vuông của Tạo một liên kết đồng nghĩa đoạn script sẽ bị tắt theo không được tải tương tự như bặn đặt thuộc tính b:js='false' trong html đầu trang để tắt js mặc định