Cài Đặt Cơ Bản Giao Diện

Để bắt đầu quy trình cá nhân hóa giao diện, người dùng cần vào mục Điểm Duyệt để chọn mẫu Custom. Trong các tùy chọn hiển thị chỉ đánh dấu mục Ghi chú và Danh Mục Bài Viết. Trang chủ mặc định nên được thiết lập để chỉ hiển thị tên bài viết kèm tóm tắt ngắn gọn.

Tham Số Định Danh Màu Sắc

Màu chủ đạo của toàn bộ website được điều khiển qua biến CSS trong khối :root. Để thay đổi tông màu chính, hãy cập nhật giá trị của --primary-color. Lưu ý rằng màu sắc biểu tượng trên menu không nằm trong scope này, đòi hỏi việc xác định Selector riêng để can thiệp style.

/* Cấu hình biến màu cho chủ đề */
:root {
  /* Giá trị RGB chuyển đổi sang màu chủ đạo mong muốn */
  --theme-primary: rgba(33, 160, 139, 0.9); 
  --bg-body: #f5f7f9; 
  --bg-content: #fff; 
  --color-heading: rgba(0, 0, 0, 0.85); 
  --font-main: #353535; 
  --font-subtext: rgba(0, 0, 0, 0.45);
  --font-disabled: rgba(0, 0, 0, 0.25); 
  --link-href: #555; 
  --code-block-bg: #f0f0f0; 
}

/* Điều chỉnh biểu tượng trong thanh điều hướng */
.nav-menu .menu-item-inner i {
  color: rgba(33, 160, 139, 0.9);
}

Việc vô hiệu hóa CSS mặc định của giao diện gốc là bắt buộc để đảm bảo các bản vá CSS mới được áp dụng đúng quy luật ưu tiên (specificity). Sau đó tiến hành dán mã CSS mở rộng vào khu vực tùy chỉnh.

Tích Hợp JavaScript Xử Lý DOM Động

Phần quan trọng nằm ở kịch bản xử lý phía chân trang (Footer). Đoạn mã dưới đây tự động hóa các thành phần như thanh cuộn tiến độ, liên kết Github, mục lục bài viết và thông tin tác giả. Các biến cấu hình cần được chỉnh sửa thành thông tin tài khoản đích của bạn.

Dưới đây là ví dụ về cơ chế lấy ảnh đại diện và cấu hình nền tảng:

/**
 * Cập nhật thông tin hồ sơ kỹ thuật số cho Blog
 */
const siteSettings = {
  avatarPath: 'https://pic.cnblogs.com/avatar/[YOUR_ID]/[TIMESTAMP].png',
  socialGithub: 'username_github',
  photoAlbumID: null // Để trống nếu không có
};

// Kịch bản khởi tạo sau khi tải xong nội dung
document.addEventListener('DOMContentLoaded', () => {
  // Thiết lập dữ liệu meta tiêu đề
  const headerTitle = document.getElementById('Header1_HeaderTitle');
  
  // Gán lại đường dẫn Avatar
  const imgElement = $('.author_avatar').attr('src', siteSettings.avatarPath);
  
  // Kích hoạt tính năng cuộn mượt
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

Cấu Trúc HTML Phần Đầu Trang

Mã HTML nhúng cần được thêm vào khung "Page Header HTML" hoặc tương đương. Cần chú ý đến các thuộc tính href để trỏ về trang chính xác.

• Thanh Tiến Trình: Thay đổi màu sắc thông qua biến CSS đã khai báo trước.
• Nút Github: Trỏ URL về repository cá nhân.
• Điều Hướng: Liên kết首页 (Trang chủ) và Archives (Lưu trữ) phải phù hợp với cấu trúc slug của Blog.

Kỹ thuật viên cần đảm bảo mã SVG icon GitHub có thuộc tính aria-label đầy đủ để hỗ trợ khả năng tiếp cận (accessibility).

Xử Lý Bố Cục Phản Ứng (Responsive)

Đối với màn hình nhỏ hơn 991px, cấu trúc Layout sẽ thay đổi đáng kể. Các thành phần như thư mục bên phải (#sideBar) và góc Github thường bị ẩn để tối ưu trải nghiệm di động. Các thẻ @media cần được kiểm tra kỹ để đảm bảo khoảng cách đệm (padding) hợp lý trên điện thoại.

Một số lưu ý kỹ thuật khi triển khai:

• Khóa Căn Giữa Nội Dung để tránh tràn lề trên mobile.
• Tối ưu Khoảng Cách Dòng (line-height) cho văn bản đọc.
• Đảm bảo các liên kết Social Media có biểu tượng Font Awesome tương thích.