Đây là hướng dẫn tối ưu hóa giao diện skin Geek của plugin awescnb trên nền tảng Blog Garden, tập trung vào hai cải tiến chính: ẩn khối lịch tùy chỉnh và tích hợp động thống kê blog (blogStats) vào khu vực hồ sơ người dùng.

Cài đặt skin

Plugin awescnb là công cụ phổ biến để cá nhân hóa giao diện Blog Garden. Skin Geek cung cấp thiết kế tối giản, đậm chất kỹ thuật — phù hợp để áp dụng các điều chỉnh CSS/JS nâng cao.

Tối ưu hóa

1. Ẩn khối lịch tùy chỉnh ở góc trên phải

Sử dụng quy tắc CSS đơn giản để loại bỏ phần tử <div id="custom-calendar"> khỏi luồng hiển thị:

1. Vào Blog Garden → Quản lý → Cài đặt → Mã CSS tùy chỉnh
2. Thêm đoạn sau:

#custom-calendar { display: none !important; }

Thuộc tính display: none loại bỏ hoàn toàn phần tử khỏi DOM về mặt hiển thị (không chiếm không gian bố cục), còn !important đảm bảo độ ưu tiên cao nhất khi có xung đột CSS.

2. Nhúng thống kê blog (blogStats) vào khu vực hồ sơ

API blogStats của Blog Garden trả về dữ liệu dạng HTML trong thẻ <div class="blogStats">. Mục tiêu là chèn nội dung này vào vị trí linh hoạt gần khối thông tin tuổi (class="profile-age"), với hành vi khác nhau dựa trên chiều rộng màn hình:

• Khi chiều rộng vùng nội dung (#main) > 800px: chèn ngay sau phần tử cha của .profile-age.
• Khi ≤ 800px: chèn vào cuối phần tử cha của phần tử cha đó, bao trong thẻ <p> để đảm bảo giãn cách và khả năng đọc tốt trên thiết bị di động.

1. Vào Blog Garden → Quản lý → Cài đặt → Mã HTML chân trang
2. Thêm đoạn JavaScript sau:

function injectBlogStats() {
  const mainEl = document.getElementById('main');
  const statsEl = document.querySelector('.blogStats');
  const ageEl = document.querySelector('.profile-age');

  if (!statsEl || !ageEl) return;

  const parent = ageEl.parentElement;
  const grandParent = parent?.parentElement;

  setTimeout(() => {
    if (mainEl && mainEl.offsetWidth > 800) {
      parent?.insertAdjacentElement('afterend', statsEl);
    } else if (grandParent) {
      const wrapper = document.createElement('p');
      wrapper.innerHTML = statsEl.innerHTML;
      grandParent.insertAdjacentElement('beforeend', wrapper);
    }
  }, 1500);
}

document.addEventListener('DOMContentLoaded', injectBlogStats);

Lưu ý: Sử dụng querySelector thay vì getElementsByClassName để tăng tính ổn định; thêm kiểm tra tồn tại phần tử trước khi thao tác; thời gian chờ giảm còn 1500ms để phản hồi nhanh hơn.

3. Điều chỉnh kiểu dáng cho nội dung thống kê

Để đồng bộ phong cách khi nội dung được chèn dưới dạng <p>, bổ sung CSS sau trong phần Mã CSS tùy chỉnh:

.profile-msg p:last-of-type {
  margin-top: 14px;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 0 4px rgba(21, 23, 40, 0.85);
}

Quy tắc :last-of-type giúp nhắm chính xác vào đoạn văn mới chèn, tránh ảnh hưởng tới các phần tử khác trong cùng khối .profile-msg.