Tùy Chỉnh mdBook cho Thương Hiệu, Phân Tích và CTA (với Ví Dụ Thực Tế 🚀)

Giới thiệu

mdBook là một công cụ tuyệt vời để viết tài liệu và sách hướng dẫn bằng Markdown. Mặc định, nó sạch sẽ và chức năng nhưng lại có phần... chung chung. Khi tôi phát hành cuốn sách mới của mình, Momentum Hacks, tôi muốn nó trở thành một phần của hệ sinh thái Indie10k. Điều này có nghĩa là:

Thêm Google Analytics để theo dõi
Đưa logo + tiêu đề của Indie10k vào thanh bên
Kết thúc mỗi chương với một CTA để tham gia Indie10k

Dưới đây là cách tôi tùy chỉnh giao diện mặc định của mdBook để thực hiện điều đó.

1. Tập Tin Cần Chỉnh Sửa

Trong thư mục giao diện của cuốn sách của bạn, bạn sẽ tìm thấy:

Copy

ls theme
head.hbs  indie10k.css  indie10k.js

head.hbs → chèn GA, meta, hoặc các thẻ <head> khác
indie10k.css → phong cách tùy chỉnh cho thanh bên, CTA, v.v.
indie10k.js → các script DOM để chèn thương hiệu và nhắc nhở đăng ký

2. Thêm Google Analytics

Mở theme/head.hbs và chèn đoạn mã GA của bạn ngay trước </head>:

Copy

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Bây giờ, mỗi trang mdBook sẽ gửi sự kiện pageview.

3. Thương Hiệu Thanh Bên

Trong indie10k.js, tôi đã chèn một tiêu đề tùy chỉnh vào thanh bên của mdBook:

javascript Copy

(function () { function ready(fn) { if (document.readyState !== 'loading') return fn(); document.addEventListener('DOMContentLoaded', fn); }
  ready(function () { var sidebar = document.getElementById('sidebar'); if (!sidebar || sidebar.querySelector('.indie10k-header')) return; var header = document.createElement('div');
    header.className = 'indie10k-header'; // Logo + Tiêu đề  var link = document.createElement('a');
    link.href = '/';
    link.setAttribute('aria-label', 'Indie10k Home'); var logo = document.createElement('img');
    logo.src = '/logo.png';
    logo.alt = 'Logo Indie10k';
    logo.className = 'indie10k-logo'; var titleWrap = document.createElement('div');
    titleWrap.className = 'indie10k-title'; var name = document.createElement('span');
    name.className = 'indie10k-name';
    name.textContent = 'Indie10k'; var subtitle = document.createElement('span');
    subtitle.className = 'indie10k-subtitle';
    subtitle.textContent = 'Momentum Hacks';

    titleWrap.appendChild(name);
    titleWrap.appendChild(subtitle);
    link.appendChild(logo);
    link.appendChild(titleWrap);
    header.appendChild(link); // Liên kết: Đăng Nhập / Đăng Ký  var links = document.createElement('div');
    links.className = 'indie10k-links'; var signIn = document.createElement('a');
    signIn.href = '/login';
    signIn.textContent = 'Đăng Nhập'; var signUp = document.createElement('a');
    signUp.href = '/register';
    signUp.textContent = 'Đăng Ký';
    signUp.className = 'signup';

    links.appendChild(signIn);
    links.appendChild(signUp);
    header.appendChild(links); // Chèn vào đầu thanh bên  var scrollbox = sidebar.querySelector('.sidebar-scrollbox');
    sidebar.insertBefore(header, scrollbox || sidebar.firstChild); // Điều chỉnh độ cao khu vực cuộn  try { var h = header.getBoundingClientRect().height; if (h && scrollbox) scrollbox.style.top = h + 'px';
    } catch (_) {}
  });
})();

Điều này đưa thương hiệu Indie10k lên đầu mỗi trang.

4. Thêm Call-to-Action

Ở cuối mỗi chương, tôi muốn có một lời nhắc đăng ký nhất quán.

javascript Copy

(function () { function ready(fn) { if (document.readyState !== 'loading') return fn(); document.addEventListener('DOMContentLoaded', fn); }
  ready(function () { var content = document.querySelector('#content main'); if (!content || document.querySelector('.indie10k-cta')) return; var cta = document.createElement('section');
    cta.className = 'indie10k-cta'; var h = document.createElement('h1');
    h.textContent = 'Sẵn sàng bắt đầu hành trình độc lập của bạn?'; var p = document.createElement('p');
    p.textContent = 'Tham gia hàng ngàn nhà phát triển xây dựng con đường đến $10k'; var a = document.createElement('a');
    a.href = '/register';
    a.className = 'indie10k-cta-btn';
    a.textContent = 'Thử Indie10k Miễn Phí';

    cta.appendChild(h);
    cta.appendChild(p);
    cta.appendChild(a);

    content.appendChild(cta);
  });
})();

Nó tinh tế, nhất quán và không gây rối.

5. Tùy Chỉnh Giao Diện

Tất cả những điều này được hỗ trợ bởi indie10k.css cho logo, nút và phong cách thanh bên. Hãy giữ cho CSS của bạn được giới hạn với các lớp .indie10k-* để không làm hỏng các mặc định của mdBook.

Tại Sao Phải Làm Điều Này?

Bởi vì cuốn sách của bạn không chỉ là nội dung—nó là một tài sản. Với một chút tùy chỉnh:

Độc giả biết nó thuộc về thương hiệu của bạn
Bạn theo dõi sự tương tác với GA
Bạn đưa ra bước tiếp theo rõ ràng (đăng ký, tham gia, mua)

Đó là cách bạn biến một cuốn sách tĩnh thành một động cơ tăng trưởng sống động.

Ví Dụ Thực Tế

Bạn muốn xem nó hoạt động không? Hãy xem cuốn sách miễn phí mới của tôi:

👉 Momentum Hacks

Đó là một sách hướng dẫn cho các nhà phát triển độc lập: 30 thủ thuật, 15 phút một lần, và một thông điệp cốt lõi:

Động lực vượt qua động lực. Mỗi lần.

Tùy chỉnh mdBook cho Thương hiệu, Phân tích và CTA