Thành phần | Nimbus

Bộ thành phần giao diện có sẵn trong bản khởi tạo, không nằm trong framework.

Bản khởi tạo có vài thành phần thiết yếu, dùng trực tiếp trong mọi file MDX mà không cần import:

<Aside>: hộp chú ý dạng note, tip, caution, danger
<Card> và <CardGrid>: trang giới thiệu và danh sách tính năng
<Tabs> và <TabItem>: nội dung có nhiều biến thể
<Steps> và <Step>: quy trình đánh số
<PackageManagers>: lệnh cài đặt cho npm, pnpm, yarn, bun

Aside

Thẻ

Steps

Quy trình đánh số cho hướng dẫn và bài thực hành.

Tabs

Nội dung nhiều biến thể: đoạn mã, hướng dẫn theo hệ điều hành, hoặc cùng một nội dung bằng nhiều ngôn ngữ lập trình.

Các bước

Cài Nimbus

Tạo dự án mới bằng pnpm create @cloudflare/nimbus-docs my-app.

Viết nội dung

Viết các file MDX trong src/content/vi/.

Đưa lên mạng

Chạy astro build rồi triển khai.

Trình quản lý gói

Với lệnh cài đặt, nên dùng <PackageManagers> thay cho <Tabs>: nó tạo đủ bốn lệnh từ một nguồn duy nhất và nhớ lựa chọn của người đọc giữa các trang.

npm i @cloudflare/nimbus-docs

yarn add @cloudflare/nimbus-docs

pnpm add @cloudflare/nimbus-docs

bun add @cloudflare/nimbus-docs

Tabs

Dùng <Tabs> cho nội dung không phải lệnh cài đặt: đoạn cấu hình, hướng dẫn theo hệ điều hành, ví dụ nhiều ngôn ngữ.

import nimbus from "@cloudflare/nimbus-docs";

export default {
  integrations: [nimbus({ /* … */ })],
};

import nimbus from "@cloudflare/nimbus-docs";

export default {
  integrations: [nimbus({ /* … */ })],
};

Video

Dùng <VideoPlayer> cho video. Nó dùng Video.js 10 và chỉ tải trình phát khi gần vào khung nhìn. Luôn đặt title.