Starlight UI Tweaks - Customize Starlight Beyond Defaults

Tổng quan

Starlight UI Tweaks là một plugin mở rộng các UI components mặc định của Starlight, bổ sung các tính năng marketing-ready như:

Custom navigation links
Ads/Monetization
Professional marketing footer
Cleaner theme toggle icon

Các tính năng

Thêm custom links vào navbar cho:

External resources
API references
Marketing pages
Social links

import starlightUiTweaks from 'starlight-ui-tweaks';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      plugins: [
        starlightUiTweaks({
          navbar: {
            links: [
              {
                label: 'GitHub',
                href: 'https://github.com/...',
                icon: 'github',
              },
              {
                label: 'API',
                href: '/api',
              },
            ],
          },
        }),
      ],
    }),
  ],
});

2. Cleaner Theme Selector

Thay thế text-based theme selector bằng icon hiện đại:

Tiết kiệm không gian
Giao diện đẹp hơn
Icon moon/sun tự động

starlightUiTweaks({
  themeToggle: true, // Tự động kích hoạt
})

3. Monetize Your Documentation

Thêm quảng cáo mà không làm gián đoạn trải nghiệm đọc:

starlightUiTweaks({
  ads: {
    enabled: true,
    slots: [
      {
        placement: 'sidebar', // 'sidebar' | 'header' | 'footer'
        content: '<div>Your ad here</div>',
      },
    ],
  },
})

Tạo footer marketing với nhiều cột:

starlightUiTweaks({
  footer: {
    links: [
      {
        title: 'Product',
        items: [
          { label: 'Features', href: '/features' },
          { label: 'Pricing', href: '/pricing' },
        ],
      },
      {
        title: 'Resources',
        items: [
          { label: 'Documentation', href: '/docs' },
          { label: 'Blog', href: '/blog' },
        ],
      },
      {
        title: 'Company',
        items: [
          { label: 'About', href: '/about' },
          { label: 'Contact', href: '/contact' },
        ],
      },
    ],
    copyright: '© 2026 Your Company',
  },
})

Lưu ý: Footer marketing chỉ hiển thị trên các trang sử dụng Starlight’s splash template (trang chủ), không hiển thị trên trang docs.

Cài đặt

npm install starlight-ui-tweaks

So sánh

Tính năng	Starlight Default	starlight-ui-tweaks
Navbar	Links cơ bản	Custom links + icons
Theme Toggle	Text dropdown	Icon buttons
Ads	❌ Không có	✅ Hỗ trợ
Footer	Basic	Marketing multi-column

Câu hỏi thường gặp

Plugin có ảnh hưởng đến Starlight config hiện tại không?

Không. Plugin chỉ thêm features mới mà không sửa đổi existing setup.

Có thể chỉ dùng một số tính năng không?

Hoàn toàn có thể. Mỗi feature độc lập và optional. Ví dụ: chỉ thêm navbar links mà không dùng footer.

Có hỗ trợ internationalization (i18n) không?

Có. Tất cả customizable content đều có thể translate cho different locales.

Có ảnh hưởng đến performance không?

Không. Plugin nhẹ và chỉ thêm minimal overhead.

Kết luận

Starlight UI Tweaks là plugin hoàn hảo để:

✅ Thêm professional touches cho documentation site
✅ Monetize docs mà không làm gián đoạn UX
✅ Tạo landing page đẹp hơn
✅ Custom navbar và footer theo nhu cầu

Phù hợp khi:

Docs cần marketing elements
Cần ads để kiếm thu nhập
Muốn professional footer với nhiều columns
Cần icon-based theme toggle thay thế dropdown