Cách chặn và tải temp authorization.css mặc định của Blogger

Đọc qua tiêu đề nghe có vẻ mâu thuẫn quá các bạn nhỉ, nhưng nội dung mình muốn đề cập chặn temp authorization.css mặc định này trước và sau đó chỉ tải temp khi cần đến. Trước hết tìm hiểu qua tại sao temp này lại được tạo ra để làm gì? Tại sao phải chặn nó? Và cuối cùng tại sao lại tải nó khi cần?

Nội dung bên trong temp này chỉ vỏn vẹn 2 dòng thuộc tính css

Thế nhưng nó lại làm nhiệm vụ quản lý class bằng thuộc tính display, cụ thể trong tiện ích Bài đăng trên blog (widget Blog) có 2 thẻ dữ liệu cho tác giả blog như sau:

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

  <data:post.adminClass/>

  <b:loop values='data:post.comments' var='comment'>

    <data:comment.adminClass/>

  </b:loop>

</b:loop>

Trong khi thẻ data:post.adminClass sử dụng cho biểu tượng chiếc bút chì chỉnh sửa nhanh bài viết thì thẻ dữ liệu data:comment.adminClass sử dụng cho nút Xóa nhận xét. Cả 2 thẻ dữ liệu này khi trích xuất html đều có dạng

blog-admin pid-PID_USER

Ví dụ

blog-admin pid-195124159

Khi bạn thiết lập thuộc tính display:none; cho class "blog-admin" (.blog-admin{display:none}) thì biểu tượng cây bút chì cũng như nút xóa nhận xét bị ẩn đi và khi temp authorization.css tải thì chúng sẽ hiển thị bằng thuộc tính display:inline. Điều đặc biệt ở chỗ chỉ có tác già blog mới nhìn thấy => đây chính là lý do temp được sinh ra.

Temp authorization.css có tác dụng nhưng nó cũng có nhược điểm gây ảnh hưởng đến hiệu xuất tải trang, bị pagespeed cảnh báo và đặc biệt temp không được lưu trong cache trình duyệt với cache-control: no-cache, no-store, max-age=0 => đây là lý do cần phải chặn không cho temp tải.

Tất nhiên khi chặn temp authorization.css thì làm sao hiển thị được class cho admin => do đó cần tải temp trở lại khi cần đến, cụ thể là hiển thị nút xóa nhận xét còn biểu tượng cây bút chì giờ ít blog sử dụng. Và sử dụng phương pháp tải css bằng script dưới đây sẽ không gây ảnh hưởng đến hiệu suất của trang, cũng không bị pagespeed cảnh báo.

Hướng dẫn chặn temp authorization.css

Temp authorization.css chỉ được tải tại 2 trang bài viết (post) và trang tĩnh (page), do đó để chặn temp này trong theme tìm đến thẻ đóng </head> thay thế bằng dòng bên dưới

<b:if cond='data:view.isSingleItem'>&lt;!--</b:if></head><b:if cond='data:view.isSingleItem'>--&gt;&lt;/head&gt;</b:if>

Hướng dẫn tải temp authorization.css

Sử dụng đoạn script bằng jquery sau đây để tải temp đặt script trước thẻ đóng </body>

<b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:view.isSingleItem'>

<script>var blogId="<data:blog.blogId/>"</script>

<script>//<![CDATA[

function loadCSS(filename,filetype){

  if(filetype=='css'){

    var fileref=document.createElement('link')

    fileref.setAttribute('rel','stylesheet')

    fileref.setAttribute('href',filename)

  }

  if(typeof fileref!='undefined'){document.getElementsByTagName('head')[0].appendChild(fileref)}

}

$(window).bind('load', function() {

  var url = window.location.href

  if (url.indexOf('?showComment') != -1) {

    loadCSS('https://www.blogger.com/dyn-css/authorization.css?targetBlogID='+blogId,'css')

  } else if ($('#comments').hasClass('threaded')){

    var load_css = false

    $(document).on('scroll', function() {

      if ($(this).scrollTop() >= $('#comments').position().top-100) {

        if (!load_css) {

          load_css = true

          loadCSS('https://www.blogger.com/dyn-css/authorization.css?targetBlogID='+blogId,'css')

        }

      }

    })

  }

})

//]]></script>

</b:if>

Giải thích code

Đầu tiên sẽ đặt đoạn script trong điều kiện nếu nhận xét không bị tắt và chỉ tải ở trang bài viết và trang tĩnh, tiếp theo trong script sử dụng điều kiện check url của trang trước nếu theo sau có tham số "?showComment" sẽ load ngay temp authorization.css, còn không lại check phần tử element với id tên "comments" nếu trong element này có class "threaded" (bài viết có nhận xét sẽ có class này) mới load temp authorization.css khi scroll gần đến khung nhận xét.