自定義組件
你可以利用自定義組件改進你的文章
使用 import { ... } from "@components/mdx" 輕鬆導入自定義組件!
Accordion
想告訴使用者額外的詳細資訊？使用 Accordion 組件！
import { Accordion } from "@components/mdx";
**這裡有一條鯊魚**
<Accordion title="Money是一隻鯊魚">Yeahhhhh</Accordion>;這裡有一條鯊魚
Money是一隻鯊魚
Admonition
想給使用者提示或警告? 你可以使用 Admonition 組件
它支持多種類型：Tip、Warning、Info、Error：
import { Admonition, Error, Tip, Warning, Info } from "@components/mdx";
<Admonition title="Default" />
<Tip title="Tip" />
<Warning title="warning" />
<Info title="info" />💡
Default
💡
Tip
⚠️
warning
info
Card
您可以使用它來將使用者重定向到不同的頁面，記得傳遞 href 道具
import { Card } from "@components/mdx";
<Card title="重定向到部落格" href="/blog/welcome-to-v2" />
<Card title="重定向到部落格" href="/blog/welcome-to-v2" arrow />重定向到部落格
重定向到部落格→
鏈接按鈕
插入網址太難看？您可以使用按鈕代替它!
你可能需要
w-fit 否則按鈕會太寬import { LinkButton } from "@components/mdx";
<LinkButton
href="/blog/welcome-to-v2"
children="免費體驗"
variant="secondary"
/>
<LinkButton
href="/blog/welcome-to-v2"
target="_blank"
icon={<BsDownload />}
children="免費體驗"
variant="primary"
link={{ className: "w-fit" }}
/>步驟
當您編寫教學文件時，此組件對於顯示每個步驟之間的關係非常有用
您可以輕鬆地使用 className 來達到這個效果，使用 ### (h3) 標題添加一個步驟：
<div className='steps-container'>
### 去睡覺
你覺得累
### 去工作
你需要賺錢
</div>選項卡
它們來自外部的套件 nextra-theme-docs，但您可以在文檔中使用它：
import {(Tab, Tabs)} from "nextra-theme-docs";
<Tabs items={['凱恩', 'Money']}>
<Tab>
在人類的歷史中，我們總是盡了一切努力想搞懂 Rust，對 Rust 進行深入研究，如果此時我們選擇忽略 Rust，那後果可想而知。儘管 Rust 看似不顯眼，卻佔據了我的腦海。
</Tab>
<Tab>
I don't know programming
</Tab>
</Tabs>在人類的歷史中，我們總是盡了一切努力想搞懂 Rust，對 Rust 進行深入研究，如果此時我們選擇忽略 Rust，那後果可想而知。儘管 Rust 看似不顯眼，卻佔據了我的腦海。
文件列表
顯示文件和文件夾，對於教程很有用
import { FileTree } from "nextra-theme-docs";
<FileTree>
<FileTree.Folder name="你的文件" defaultOpen>
<FileTree.Folder name="frameworks" defaultOpen>
<FileTree.File name="react.mdx" />
<FileTree.File name="svelte.mdx" />
<FileTree.File name="vue.mdx" />
</FileTree.Folder>
<FileTree.Folder name="fruits" defaultOpen>
<FileTree.File name="apple.mdx" />
<FileTree.File name="banana.mdx" />
</FileTree.Folder>
<FileTree.File name="_meta.json" />
<FileTree.File name="about.mdx" />
<FileTree.File name="index.mdx" />
</FileTree.Folder>
</FileTree>建立自己的組件
Mdx 能夠與 React 和 Next.js 一起使用，您可以在 .mdx 檔案中使用 jsx 語法。
同時我們將 Tailwind CSS 用於內部的 css 樣式，這意味著你可以輕鬆地建立組件。
💡
重要提示請確保它們同時支持淺色和深色模式
我們正在使用這些函式庫
你可以在你的文檔中使用它們!
- framer-motion
nextranextra-docs-theme
自定義組件 (Tailwind CSS)
<div className="border-2 border-black p-3 dark:border-white">Hello World</div>Hello World
Framer Motion
它可以讓您輕鬆建立炫酷的動畫
<motion.div
animate={{
scale: [1, 2, 2, 1, 1],
rotate: [0, 0, 270, 270, 0],
borderRadius: ["20%", "20%", "50%", "50%", "20%"],
}}
/>我們建議您了解它們，可以為使用者建立更好的使用者體驗
