开始使用
与文档主题类似，你可以通过以下命令安装博客主题：
开始一个新项目
安装
要手动创建 Nextra 博客站点，你需要安装 Next.js、React、Nextra 和 Nextra 博客主题。 在你的项目目录中，运行以下命令来安装依赖：
npm i next react react-dom nextra nextra-theme-blog如果你已经在项目中安装了 Next.js，你只需要安装 nextra 和 nextra-theme-blog 作为附加组件。
Add the following scripts to your package.json:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},You can enable Turbopack in development by appending the --turbopack flag to
the dev command:
- "dev": "next",
+ "dev": "next --turbopack",You can start the server in development mode with the following command according to your package manager:
npm run devor in production mode:
npm run build
npm run startIf you’re not familiar with Next.js, note that development mode is significantly slower since Next.js compiles every page you navigate to.
Add Next.js config
Create a next.config.mjs file in your project’s root directory with the
following content:
import nextra from 'nextra'
const withNextra = nextra({
// ... Other Nextra config options
})
// You can include other Next.js configuration options here, in addition to Nextra settings:
export default withNextra({
// ... Other Next.js config options
})With this configuration, Nextra will handle Markdown files in your Next.js project. For more Nextra configuration options, check out the Guide.
添加 mdx-components 文件
创建根布局
import { Footer, Layout, Navbar, ThemeSwitch } from 'nextra-theme-blog'
import { Banner, Head, Search } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-blog/style.css'
export const metadata = {
title: 'Blog Example'
}
export default async function RootLayout({ children }) {
const banner = (
<Banner storageKey="4.0-release">
🎉 Nextra 4.0 is released.{' '}
<a href="#" className="x:text-primary-600">
Read more →
</a>
</Banner>
)
return (
<html lang="en" suppressHydrationWarning>
<Head backgroundColor={{ dark: '#0f172a', light: '#fefce8' }} />
<body>
<Layout banner={banner}>
<Navbar pageMap={await getPageMap()}>
<Search />
<ThemeSwitch />
</Navbar>
{children}
<Footer>
<abbr
title="This site and all its content are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
style={{ cursor: 'help' }}
>
CC BY-NC 4.0
</abbr>{' '}
{new Date().getFullYear()} © Dimitri POSTOLOV.
<a href="/feed.xml" style={{ float: 'right' }}>
RSS
</a>
</Footer>
</Layout>
</body>
</html>
)
}Render MDX files
There are two ways to render MDX files using file-based routing, add your MDX
files via page files or
content directory convention.
Run the project
Run the dev command specified in package.json to start developing the
project! 🎉
npm run dev