入门
与文档主题类似，您可以使用以下命令安装 博客主题：
作为新项目启动
安装
要手动创建一个 Nextra 博客站点，您需要安装 Next.js、 React、Nextra 和 Nextra Blog Theme。在您的项目目录中，运行 以下命令来安装依赖项：
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'
// Set up Nextra with its configuration
const withNextra = nextra({
// ... Add Nextra-specific options here
})
// Export the final Next.js config with Nextra included
export default withNextra({
// ... Add regular Next.js options here
})With this configuration, Nextra will handle Markdown files in your Next.js project. For more Nextra configuration options, check out the Guide.
Add mdx-components file
Setup search
To set up search, follow the instructions on the Search Engine page.
Create the root layout
Next, create the root layout of your application inside the app folder. This
layout will be used to configure your Nextra Theme:
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="#"
style={{
textDecoration: 'underline',
textUnderlinePosition: 'from-font'
}}
>
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布局属性
| Name | Type | Default |
|---|---|---|
children | ReactNode | |
nextThemes | Omit<ThemeProviderProps, "children"> | |
banner | ReactNode |