Khôi phục widget thống kê blogger sau khi tắt js mặc định

Nếu bạn từng tối ưu template Blogger bằng cách tắt JavaScript mặc định của Blogspot (widgets.js) để giảm dung lượng tải trang và tăng tốc độ hiển thị, và cá nhân mình đã gặp một vấn đề cực kỳ khó chịu: một số tiện ích mặc định của Blogger sẽ ngừng hoạt động.
Trong đó, widget Thống kê blog (Blog Stats) là một ví dụ điển hình. Mình đã thử thay thế các bằng cách sử dụng Cloudflare Worker + KV để thay thế nhưng nó không đúng với thực tế, kiểu như hiển thị và cũng nhảy số cho có thôi.
Nhưng sau một thời gian tìm hiểu, mình đã tìm được cách khôi phục lại widget này mà không cần bật lại toàn bộ widgets.js. Bài viết này sẽ hướng dẫn chi tiết cách thực hiện.

Nguyên nhân

Khi bạn tắt file

https://www.blogger.com/static/v1/widgets/xxxxxxxx-widgets.js

Blogger sẽ không còn khởi tạo các widget mặc định.
Widget Thống kê chỉ còn lại HTML:

<div id="Stats1_content">
    <span id="Stats1_totalCount"></span>
</div>

Do không còn đoạn JavaScript của Blogger xử lý nên #Stats1_totalCount sẽ luôn rỗng

Cách lấy dữ liệu thống kê

Sau khi kiểm tra source, mình phát hiện Blogger đã khai báo sẵn một URL để lấy dữ liệu thống kê:

'statsUrl':'//www.tenmiencuaban.com/b/stats?style=BLACK_TRANSPARENT&timeRange=ALL_TIME&token=xxxxxxxxxxxxxxxx'

Đây chính là URL mà widgets.js sử dụng.
Khi truy cập URL này sẽ nhận được dữ liệu JSON như sau:

{
  "total":523118,
  "sparklineData":[...],
  "nextTickMs":400000
}

Trong đó:

• total: Tổng lượt xem của blog
• sparklineData: Dữ liệu biểu đồ
• nextTickMs: Thời gian gợi ý cập nhật lại

Điều đó có nghĩa là chúng ta hoàn toàn có thể tự viết JavaScript thay thế mà không cần nạp toàn bộ widgets.js

JavaScript

(async function () {

    const statsUrl = "https://www.tenmiencuaban.com/b/stats?style=BLACK_TRANSPARENT&timeRange=ALL_TIME&token=xxxxxxxxxxxxxxxx";

    try {

        const res = await fetch(statsUrl);
        const data = await res.json();

        const value = data.total.toLocaleString("vi-VN");

        const container = document.getElementById("Stats1_totalCount");

        container.innerHTML = "";

        [...value].forEach(ch => {

            if (ch === "." || ch === ",") {

                const sep = document.createElement("span");
                sep.className = "sep";
                container.appendChild(sep);

            } else {

                const digit = document.createElement("span");
                digit.className = "digit";
                digit.textContent = ch;
                container.appendChild(digit);

            }

        });

        document.getElementById("Stats1_content").style.display = "";

    } catch (err) {

        console.error(err);

    }

})();

Để lấy được token=xxxxxxxxxxxxxxxx các bạn xem nguồn (Ctrl + U) rồi tìm từ khóa:

statsUrl

Sẽ thấy đoạn tương tự

'statsUrl': '//www.vncoding.com/b/stats?style\x3dBLACK_TRANSPARENT\x26timeRange\x3dALL_TIME\x26token\x3dAFVZEFziXKTGjif15Tlxxs2GgLMT_YhpM08oRLUQVQnbjziSBa2zsJylpS7tlcRWMgfcBieaDp2ogBAyaAdXqxM'

Khôi phục giao diện cho thống kê

Nếu bạn tắt luôn CSS mặc định của blogspot thì sử dụng đoạn CSS sau

#Stats1_totalCount{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
}

#Stats1_totalCount .digit{
    width:34px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    font-weight:bold;
    color:#fff;
    border-radius:5px;
    background:linear-gradient(to bottom,#55647c 0%,#374154 48%,#111827 49%,#050b15 100%);
    box-shadow:0 2px 5px rgba(0,0,0,.35);
    position:relative;
}

#Stats1_totalCount .digit::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:rgba(255,255,255,.15);
}

#Stats1_totalCount .sep{
    width:8px;
}

Kết luận

Mình khá bất ngờ khi phát hiện Blogger vẫn cung cấp sẵn API thống kê cho widget Thống kê, chỉ là toàn bộ quá trình gọi API đều được đóng gói trong widgets.js.
Ngoài tổng lượt xem, endpoint này còn trả về nhiều dữ liệu khác nữa, vì vậy nếu nắm bắt vấn đề cốt lõi được chúng ta hoàn toàn có thể tự "lôi ra" những widget phụ thuộc vào mã JavaScript mặc định của Blogger sau khi đã tắt.