Docs 主题
Nextra Docs 主题是一个包含构建现代文档网站所需几乎所有内容的主题。它包括顶部导航栏、搜索栏、页面侧边栏、目录 (TOC) 和其他内置组件。
此网站本身就是使用 Nextra Docs 主题构建的。
从模板快速开始
部署到 Vercel
您可以通过创建自己的 Nextra 网站并点击链接将其部署到 Vercel 来开始。
Vercel 将 fork Nextra Docs 模板 并为您部署网站。完成后，存储库中的每次提交都将自动部署。
Fork 模板
您也可以手动 fork 模板存储库。
作为新项目开始
安装
要手动创建 Nextra Docs 网站，您必须安装 **Next.js**、**React**、**Nextra** 和 **Nextra Docs 主题**。在您的项目目录中，运行以下命令以安装依赖项
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 配置可以在 指南 中找到。
创建 Docs 主题配置
最后，在项目的根目录中创建相应的 theme.config.jsx 文件。这将用于配置 Nextra Docs 主题
export default {
logo: <span>My Nextra Documentation</span>,
project: {
link: 'https://github.com/shuding/nextra'
}
// ... other theme options
}完整的主题配置可以在这里找到 这里。
创建 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接下来，查看下一节以了解如何组织文档结构和配置网站主题