Nhật ký phát triển (Devlog) - Nâng cấp Single Post lên Siêu Lưới 5 Cột & Sửa lỗi Sticky

Trong ngày làm việc hôm nay, dự án cudem-claw đã đón nhận đợt tái cấu trúc mạnh mẽ nhất ở giao diện Single Post. Mục tiêu của chúng tôi là dịch chuyển từ một blog hiển thị thông tin đơn điệu, sang một mô hình Tạp chí Công nghệ “dày đặc” điểm chạm (Touchpoints) giúp tối đa hóa doanh thu Quảng Cáo (Ads) và Điều hướng người dùng (Internal Links) nhưng không làm giảm trải nghiệm đọc.

1. Thành tựu: Từ 3 Cột lên Siêu Lưới 5 Cột (5-Column Matrix)

Trước đây, giao diện chỉ xoay quanh Trải (Mục lục) - Giữa (Nội dung) - Phải (Đề xuất). Chúng tôi đã nới rộng max-width của CSS Grid lên tới 1800px và khai sinh ra một bộ khung mới gọi là post-layout-grid:

  /* Siêu Desktop (Đầy đủ 5 cột - AdsTrái + TOC + BàiViết + Phải + GoogleAdsPhải) */
  @media (min-width: 1600px) {
    .post-layout-grid {
      grid-template-columns: 160px 240px minmax(0, 1fr) 300px 160px; /* Thích ứng hoàn hảo 5 cột */
      gap: 2.5rem;
    }
  }

Sự phân bổ Quyền lực giữa 5 Cột:

Cột 1 (160px): Vùng đất thiêng bên trái dành hoàn toàn cho Quảng cáo dọc (Vertical Skyscraper Ad) hoặc các Banner chạy Event lớn của OpenClaw.
Cột 2 (240px): Table of Contents (Mục lục bài viết) được neo sát vào mép nội dung, luôn dính chặt (Sticky) theo màn hình giúp User định vị trong các bài Post siêu dài (>3000 từ).
Cột 3 (1fr): Dòng sinh khí chính - Content bài viết (Prose).
Cột 4 (300px): Hệ thống Widget SEO & Conversion Rate.
Cột 5 (160px): Đối cực của Cột 1, đây là khu bãi đỗ xe rộng rãi cho Google Adsense Auto-Ads nẹp mép phải.

Để biến Cột 4 thành một cỗ máy kiếm Pageviews thay vì chỉ để “Bài viết liên quan” nhàm chán, tôi đã nạp Combo 5 Widget hạng nặng:

Author Box (Tác giả): Nhấn mạnh uy tín của OpenClaw, gọi người đọc theo dõi Fanpage.
Trending Posts (Bài viết đáng chú ý): Khối điều hướng Internal Link quyền lực, kích thích click bằng thiết kế số thứ tự to bản (01, 02).
Fixed Ad Space (300x250): Box nẹp đứt sẵn sàng ốp mã Ad của Sponsor. Nằm ở đây vì độc giả cuộn chuột ngang tầm sẽ liếc sang.
Hot Topics (Tags Cloud): La bàn điều hướng cho các chuyên mục có Search Volume cao (AI Tools, ChatGPT, Tiếng Việt).
Newsletter: Phễu thu phập Email nằm chốt sổ tận cùng, hốt Lead gọn gàng.

3. Trouble-shooting (Gỡ lỗi hệ thống): Lời nguyền “Sticky” & “Overflow”

Trong quá trình ghép nối TOC (Cột 2) và Sidebar Phải (Cột 4) vào hệ thống Grid 5 cột, hệ thống “Neo giữ” (position: sticky) đột ngột tê liệt hoàn toàn. Các thành phần cứ trôi tuột đi theo cuộn chuột.

Khám nghiệm tử thi:

Sticky là một đặc tính kỹ tính. Nó yêu cầu tất cả các thẻ Cha/Ông nội (Ancestors) ngược lên tới <body> KHÔNG được phép mang thuộc tính overflow cắt xén (như hidden, auto, hay scroll). Nếu phát hiện, trình duyệt sẽ rút quyền “dính bám” của thẻ Con ngay lập tức.

Nguyên nhân:

Khi rà soát, chúng tôi phát hiện file global.css chứa dòng lệnh cấm cuộn ngang ở thẻ root:

html,
body {
  overflow-x: hidden;
  width: 100%;
}

Cách Fix Triệt Để: Cứu cánh bằng `clip`

Rất may mắn, CSS3 có một giải pháp gọi là clip. Nó vẫn xử lý việc “cắt” phần đồ hoạ tràn ra ngoài giới hạn cửa sổ chống scroll ngang màn hình mobile, nhưng lại KHÔNG vô hiệu hóa thuộc tính sticky của con trẻ.

/* Prevent horizontal scroll globally without breaking position: sticky */
html,
body {
  overflow-x: clip; /* <-- Vị cứu tinh */
  width: 100%;
  max-width: 100%;
}

Nhờ dòng lệnh nhỏ này, The Sticky Widget đã sống lại trên cả hai cánh Trái và Phải.

Tổng kết

Cỗ máy tạo doanh thu của cudem-claw đã thành hình với bộ giáp 5 cột cực mạnh. Việc duy nhất lúc này là chờ đợi Google Ads “cắn” tiền, và viết Content thật chất lượng để bơm vào “Dòng sinh khí” chính giữa!