文件主題
Nextra 文件主題是一個包含構建現代文件網站所需幾乎所有功能的主題。它包含頂部導航欄、搜尋欄、頁面側邊欄、目錄 (TOC) 和其他內建組件。
本網站本身就是使用 Nextra 文件主題構建的。
從範本快速開始
部署到 Vercel
您可以點擊連結，建立自己的 Nextra 網站並部署到 Vercel
Vercel 會 Fork Nextra 文件範本 並為您部署網站。完成後，儲存庫中的每次提交都會自動部署。
Fork 範本
您也可以手動 Fork 範本儲存庫。
作為新專案開始
安裝
要手動建立 Nextra 文件網站，您必須安裝 **Next.js**、**React**、**Nextra** 和 **Nextra 文件主題**。在您的專案目錄中，運行以下命令來安裝依賴項
npm i next react react-dom nextra nextra-theme-docs如果您的專案中已安裝 Next.js，您只需安裝 nextra 和 nextra-theme-docs 作為附加組件。
在 package.json 中新增以下腳本
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},您可以根據您的套件管理器使用以下命令啟動開發模式下的伺服器
npm run dev或在生產模式下
npm run build
npm run start如果您不熟悉 Next.js，請注意，開發模式會明顯較慢，因為 Next.js 會編譯您導航到的每個頁面。
新增 Next.js 設定
在專案的根目錄中建立以下 next.config.mjs 檔案
import nextra from 'nextra'
const withNextra = nextra({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.jsx'
})
export default withNextra()
// If you have other Next.js configurations, you can pass them as the parameter:
// export default withNextra({ /* other next.js config */ })透過上述設定，Nextra 可以使用指定的主題處理 Next.js 專案中的 Markdown 檔案。其他 Nextra 設定可以在 指南 中找到。
建立文件主題設定
最後，在專案的根目錄中建立相應的 theme.config.jsx 檔案。這將用於設定 Nextra 文件主題
export default {
logo: <span>My Nextra Documentation</span>,
project: {
link: 'https://github.com/shuding/nextra'
}
// ... other theme options
}完整的zh-TW: 主題設定可以在 這裡 找到。
建立 Next.js App 組件
使用以下內容建立 pages/_app.jsx 檔案
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}準備就緒！
現在，您可以建立您的第一個 MDX 頁面，命名為 pages/index.mdx
# Welcome to Nextra
Hello, world!並執行 package.json 中指定的 dev 命令開始開發專案！ 🎉
npm run dev接下來，查看下一節，了解如何組織文件結構和設定網站主題