Các component

Wiki có một bộ nhỏ các component mà bạn thả vào bất kỳ hướng dẫn nào. Thanh công cụ của trình chỉnh sửa nháp sẽ chèn chúng cho bạn. Trang này là bản tham khảo đầy đủ. Mỗi phần cho thấy component trước, rồi tới code tạo ra nó.

Callout

Một hộp có màu cho cảnh báo, mẹo và ghi chú an toàn về Hàn Quốc/Trung Quốc. Dùng type="danger" cho rủi ro thật, info cho mẹo, warning cho "chỗ này có thể hỏng", và success cho xác nhận.

<Callout type="danger" title="Don't use custom skins in Korea or China">
  The anti-cheat there blocks all mods. Accounts get banned.
</Callout>

Props:

• type là info, warning, danger hoặc success. Mặc định là info.
• title là tùy chọn. Mỗi loại có một tiêu đề mặc định.

Cũng có ba loại level để đánh dấu độ khó bên trong một trang: lvl_beginner, lvl_intermediate và lvl_advanced. Nếu muốn một huy hiệu độ khó nhỏ ở đầu hướng dẫn, hãy dùng LevelPill thay vào đó.

Tabs

Các lộ trình thay thế nhau. Dùng tab cho các bước theo hệ điều hành hoặc quy trình theo công cụ. Mỗi <Tabs> cần một </Tabs> đóng lại, và mỗi <Tab> cần một </Tab>.

<Tabs items={["Windows", "macOS"]}>
  <Tab value="Windows">Windows steps here.</Tab>
  <Tab value="macOS">macOS steps here.</Tab>
</Tabs>

Accordion

Các phần có thể thu gọn. Hợp cho FAQ và chi tiết tùy chọn.

<Accordions>
  <Accordion title="Question here">Answer here.</Accordion>
</Accordions>

Hình ảnh

Một ảnh chụp màn hình. alt text là bắt buộc. Người duyệt sẽ từ chối ảnh thiếu nó. Giữ file dưới 500 KB và đặt vào public/wiki-images/. Người đọc có thể nhấn vào bất kỳ ảnh nào để phóng to.

<img
  src="/wiki-images/your-screenshot.png"
  alt="Short description of the image"
/>

Khối code

Một khối code được rào bằng dấu fence. Thêm một ngôn ngữ sau fence mở đầu để tô sáng cú pháp.

npm run dev

```bash
npm run dev
```

Bảng

Một bảng Markdown. Giữ vài cột thôi để nó đọc được trên điện thoại.

| Column A | Column B |
| -------- | -------- |
| Value    | Value    |

ToolCard

Một dòng công cụ với tên, một liên kết và một dòng mô tả. Dùng nó trên các trang danh sách công cụ.

<ToolCard
  name="Flint"
  href="/docs/lol/tools/modding-apps/flint"
  badge="Recommended"
>
  All-in-one skin creation tool.
</ToolCard>

Props:

• name và href là bắt buộc. Liên kết ngoài mở trong tab mới.
• badge là tùy chọn. Nó hiện dưới dạng một huy hiệu nhỏ ở bên phải.

LevelPill

Một dấu đánh độ khó. Đặt nó ở đầu hướng dẫn, ngay dưới tiêu đề. level là beginner, intermediate hoặc advanced.

<LevelPill level="beginner" />

Dùng prop tùy chọn label để đổi chữ: <LevelPill level="advanced" label="Expert" />.

ParameterList

Một bảng hai cột tên/mô tả cho các trang tham khảo.

<ParameterList
  parameters={[
    { name: "champion", description: "The champion the skin belongs to." },
    { name: "skin_id", description: "The numeric id of the base skin." },
  ]}
/>

PremiumCard

Một thẻ nổi bật với viền gradient cho một liên kết được làm nổi. Dùng nó để chỉ người đọc tới trang tiếp theo quan trọng nhất.

<PremiumCard title="Guided walkthrough" href="/docs/lol/guided-walkthrough">
  Start here if you are new.
</PremiumCard>

GlowCTA

Một nút kêu gọi hành động phát sáng. Dùng nó cho một hành động duy nhất bạn muốn người đọc thực hiện. Nhiều nhất một cái mỗi trang.

<GlowCTA href="/docs/lol">Browse the guides</GlowCTA>

Props:

• variant là primary (phát sáng tím, mặc định), solid, secondary hoặc ghost.
• size là md (mặc định) hoặc lg.

YouTube

Một video YouTube được nhúng. Truyền id của video, không phải cả URL. Id là phần sau watch?v= hoặc youtu.be/.

<YouTube id="xqB84ga55hI" title="What the video shows" />

Props:

• id là bắt buộc.
• title mô tả video cho trình đọc màn hình.
• start là tùy chọn. Nó bắt đầu phát ở giây đó.

Lối tắt: dán một liên kết YouTube thường trên một dòng riêng và wiki sẽ biến nó thành một video nhúng cho bạn.

Icon

Một biểu tượng nội dòng. Dùng bất kỳ tên icon Lucide nào, hoặc một trong các tên thương hiệu: Maya, Blender, Discord, LeagueOfLegends.

<Icon name="Wrench" />

Dùng prop tùy chọn className để đổi kích thước, ví dụ className="size-4".