Mấy Ngày Vật Lộn Nâng Cấp Theme • .Thinhem Blog

Nâng Cấp Theme: Hành Trình “Vật Lộn” Để Hoàn Thiện Giao Diện#

Mấy ngày qua, tôi như người mắc kẹt trong mê cung code - cứ viết rồi xóa, chỉnh sửa rồi lại quay về điểm bắt đầu. Đã mấy ngày trôi qua mà không có bài viết mới nào ra lò, tất cả thời gian và năng lượng đều dồn vào việc nâng cấp theme. Nhưng cuối cùng, sau những giờ phút “vật lộn”, tôi cũng đã hoàn thành được những mục tiêu đặt ra.

1. Tối Ưu Giao Diện Desktop: Không Gian Không Lãng Phí#

Vấn đề đầu tiên tôi giải quyết là giao diện trên PC/desktop. Trước đây, layout có vẻ “thừa thãi” - khoảng trống không cần thiết, các element phân bố chưa hợp lý khiến trải nghiệm đọc không thực sự tối ưu.

Những gì tôi đã làm:

Điều chỉnh hệ thống grid và container widths để tận dụng tối đa không gian màn hình lớn
Tối ưu typography: điều chỉnh font sizes, line heights và margins phù hợp với độ rộng màn hình
Sắp xếp lại sidebar và main content area để có tỷ lệ vàng
Đảm bảo responsive breakpoints hoạt động mượt mà khi thu nhỏ cửa sổ

Kết quả: Giao diện desktop giờ đây trông “chắc chắn” hơn, không có cảm giác trống trải, và quan trọng nhất là tập trung vào nội dung.

2. Trang Liên Kết Bạn Bè: Từ Thụ Động Sang Chủ Động#

Đây có lẽ là phần tốn nhiều công sức nhất. Trang liên kết bạn bè trước đây chỉ đơn giản là một danh sách tĩnh. Giờ đây, tôi đã xây dựng hệ thống đăng ký tự động.

Tính năng mới:

Form đăng ký liên kết tích hợp trực tiếp trên trang
Hệ thống xét duyệt (pending/approved/rejected status)
Tự động sắp xếp theo thời gian đăng ký hoặc alphabet
Hệ thống xét duyệt bằng check liên kết đối phương có gắn liên kết mình không

Điều này giúp trang web trở nên “mở” hơn, cho phép cộng đồng tham gia một cách chủ động mà không cần tôi can thiệp thủ công.

3. Hệ Thống Check Liên Kết: Đảm Bảo Chất Lượng#

Một vấn đề thường gặp với trang liên kết bạn bè là “link chết” hoặc liên kết một chiều (đối phương không gắn backlink). Tôi đã xây dựng hệ thống tự động kiểm tra:

Kiểm tra hai chiều:

Link validation: Tự động kiểm tra URL có tồn tại và accessible không
Backlink check: Xác minh đối phương có gắn link trở lại website của tôi
Scheduled re-check: Hệ thống định kỳ kiểm tra lại các liên kết hiện có
Notification system: Thông báo khi phát hiện link có vấn đề

Hệ thống này giúp duy trì chất lượng trang liên kết, đảm bảo mối quan hệ “có đi có lại” thực sự.

4. Background lưới#

Mình đã thêm vào bản dựng 2 và mình đã loại bỏ

/* Biến nền lưới */
  --grid-color: hsl(var(--border) / 0.3);
  --grid-size: 24px;
  --grid-width: 1px;
}

/* Màu lưới chế độ tối */
.dark {
  --grid-color: hsl(var(--border) / 0.2);
}

/* Kiểu nền lưới */
body {
  background-image: 
    linear-gradient(var(--grid-color) var(--grid-width), transparent var(--grid-width)),
    linear-gradient(90deg, var(--grid-color) var(--grid-width), transparent var(--grid-width));
  background-size: var(--grid-size) var(--grid-size);
}

css

5. Dọn Dẹp: Loại Bỏ Tính Năng Không Cần Thiết#

Đôi khi, việc bỏ bớt cũng quan trọng như thêm vào. Tôi đã quyết định xóa tính năng RSS bạn bè trong trang liên kết vì:

Ít sử dụng: Phân tích cho thấy hầu như không ai dùng tính năng này
Gây nhiễu: Làm giao diện thêm phức tạp không cần thiết
Performance hit: Mỗi RSS feed cần được fetch định kỳ, ảnh hưởng đến tốc độ trang, tiêu tốn tài nguyên
Bảo trì: Thêm một điểm cần theo dõi và cập nhật

Việc loại bỏ tính năng này giúp trang liên kết tập trung hơn vào mục đích chính: giới thiệu và kết nối.

6. Thêm Những Thứ Mới Mẻ và Fix lỗi#

Chuyển đổi máy chủ US sang HongKong để truy cập nhanh hơn ở nước nhà.
Thêm chức năng thu gọn mã với giá trị mặt định
Fix reply bình luận bị mất emoji
Cải thiện tệp cấu hình với thứ tự và chú thích mới
Chỉnh sửa lại kiểu bảng màu và bán kính đường viền --primary-foreground thành --card
Đã thay đổi trình tải phông chữ thành trình tải phông chữ tích hợp sẵn của Astro
Hỗ trợ avatar liên kết bộ nhớ đệm

Nếu trang web bị mất css khi bạn vào là mình vừa deploy chỉ cần F5 vài lần hoặc xoá Cookie

Bài Học Rút Ra#

Mấy ngày “vật lộn” với code dạy tôi vài điều:

Đôi khi bế tắc là cần thiết - nó buộc tôi dừng lại, nhìn tổng thể và tìm giải pháp triệt để thay vì vá víu tạm thời
Tính năng không phải lúc nào cũng tốt - đôi khi đơn giản hóa mới mang lại trải nghiệm tốt nhất
Tự động hóa tiết kiệm thời gian về lâu dài - dù mất nhiều thời gian ban đầu để xây dựng

Giờ thì theme đã hoàn thiện hơn, trang liên kết bạn bè trở nên chuyên nghiệp và tự động hơn, và quan trọng nhất - tôi đã có thể quay lại viết bài. Có lẽ đôi khi, việc “không ra bài viết nào” lại cần thiết để tạo ra một nền tảng tốt hơn cho những bài viết sau này.

P/S: Nếu bạn đang đọc bài này, có lẽ bạn cũng đang “vật lộn” với một dự án nào đó. Hãy kiên nhẫn và đôi khi những ngày bế tắc nhất lại dẫn đến những đột phá lớn nhất.