Nền tảng cnblogs cho phép người dùng can thiệp sâu vào giao diện thông qua CSS và JavaScript tùy chỉnh. Việc tối ưu hóa giao diện không chỉ giúp blog chuyên nghiệp hơn mà còn cải thiện trải nghiệm đọc cho người dùng.

1. Thiết lập cấu hình cơ bản

Trong trang quản trị của cnblogs, bạn có thể thực hiện các thay đổi cơ bản sau:

• Chọn Skin: Hệ thống cung cấp sẵn các bộ giao diện mặc định làm nền tảng.
• Quản lý Sidebar: Tùy chỉnh các widget hiển thị ở cột bên trong phần tùy chọn điều khiển.
• Tải tệp tin: Bạn có thể upload trực tiếp các tệp .css hoặc .js lên máy chủ của blog để nhúng vào trang thay vì viết code trực tiếp vào khung cấu hình.
• Khu vực nhúng mã: Trong mục "Settings", chú ý các ô nhập liệu: Page Custom CSS, Page Header HTML và Page Footer HTML.

2. Tích hợp JavaScript tùy biến

Để sử dụng JavaScript trên cnblogs, bạn cần gửi yêu cầu cấp quyền (JS Permission) trong phần cài đặt. Sau khi được phê duyệt, bạn có thể nhúng các tính năng nâng cao như:

• Tự động tạo mục lục (TOC): Sử dụng các script để quét các thẻ tiêu đề (H1, H2, H3) và tạo menu điều hướng nhanh.
• Hiệu ứng tương tác: Các hiệu ứng khi di chuột hoặc click chuột (như hiệu ứng trái tim, pháo hoa).

3. Tối ưu hóa CSS và Highlighting cho mã nguồn

Trình soạn thảo mặc định của cnblogs thường không hỗ trợ highlight cú pháp tốt. Việc chuyển sang sử dụng trình soạn thảo Markdown là bước đầu tiên để cải thiện hiển thị code.

Để tùy chỉnh sâu hơn, bạn có thể sử dụng các Stylesheet từ highlight.js. Dưới đây là đoạn CSS mẫu để ghi đè giao diện khối mã, giúp mã nguồn dễ đọc hơn:

/* Đảm bảo CSS có hiệu lực bằng cách sử dụng selector .cnblogs-markdown */
.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    padding: 1rem !important;
    background: #fafafa !important;
    color: #333;
    font-size: 14px !important;
    max-height: 750px;
    line-height: 1.5;
    font-family: "Cascadia Code", "Consolas", monospace !important;
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

4. Triển khai thực tế

Để áp dụng các thay đổi, bạn đưa các đoạn mã vào các trường tương ứng trong trang quản trị.

Cấu hình CSS nền (Custom CSS):

body {
    /* Sử dụng hình nền cố định và tối ưu hóa hiển thị */
    background: #f4f7f9 url('https://example.com/background.jpg') fixed no-repeat !important;
    background-size: cover;
}

Nhúng CSS bên ngoài (Header HTML):

<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/yourname/custom_style.css"/>

Nhúng Script chức năng (Footer HTML):

<!-- Script tạo mục lục tự động -->
<script src="https://blog-static.cnblogs.com/files/yourname/toc_generator.js" type="text/javascript"></script>
<!-- Script hiệu ứng click -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/yourname/click_effect.js"></script>

5. Thêm biểu tượng liên kết GitHub

Để tạo điểm nhấn cho blog, bạn có thể thêm biểu tượng "GitHub Corner" vào góc trang web bằng đoạn mã SVG sau trong phần Header HTML:

<a href="https://github.com/yourusername" class="github-link" title="Follow me on GitHub">
    <svg width="70" height="70" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000;" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg>
</a>