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:

1. Đ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
2. 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
3. Sắp xếp lại sidebar và main content area để có tỷ lệ vàng
4. Đả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:

1. Link validation: Tự động kiểm tra URL có tồn tại và accessible không
2. Backlink check: Xác minh đối phương có gắn link trở lại website của tôi
3. Scheduled re-check: Hệ thống định kỳ kiểm tra lại các liên kết hiện có
4. 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ỏ

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

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

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

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#

1. Chuyển đổi máy chủ US sang HongKong để truy cập nhanh hơn ở nước nhà.
2. Thêm chức năng thu gọn mã với giá trị mặt định
3. Fix reply bình luận bị mất emoji
4. Cải thiện tệp cấu hình với thứ tự và chú thích mới
5. 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
6. Đã 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
7. 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

Câu hỏi thường gặp về quá trình xây dựng và tối ưu blog#