使用教學
自定義組件

自定義組件

你可以利用自定義組件改進你的文章

使用 import { ... } from "@components/mdx" 輕鬆導入自定義組件!

Accordion

想告訴使用者額外的詳細資訊?使用 Accordion 組件!

import { Accordion } from "@components/mdx";
 
**這裡有一條鯊魚**
 
<Accordion title="Money是一隻鯊魚">Yeahhhhh</Accordion>;

這裡有一條鯊魚

Money是一隻鯊魚

Admonition

想給使用者提示或警告? 你可以使用 Admonition 組件

它支持多種類型:TipWarningInfoError

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 樣式,這意味著你可以輕鬆地建立組件。

💡
重要提示請確保它們同時支持淺色和深色模式

我們正在使用這些函式庫

你可以在你的文檔中使用它們!

自定義組件 (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%"],
  }}
/>

我們建議您了解它們,可以為使用者建立更好的使用者體驗