快速开始

⚠️

本主题的文档正在建设中。

💡

博客主题的示例可以在这里 (opens in a new tab)找到，源代码在这里 (opens in a new tab)。

与文档主题类似，您可以使用以下命令安装博客主题：

从模板快速开始

作为新项目开始

安装

要手动创建一个 Nextra 文档站点，您必须安装Next.js、React、Nextra和Nextra Blog Theme。在项目目录中，运行以下命令安装依赖项：

npm i next react react-dom nextra nextra-theme-blog

💡

如果您的项目中已经安装了 Next.js，您只需要安装nextra和nextra-theme-blog作为附加组件。

添加 Next.js 配置

在您项目的根目录中创建以下next.config.js文件：

next.config.js

const withNextra = require('nextra')({
  theme: 'nextra-theme-blog',
  themeConfig: './theme.config.jsx'
})
 
module.exports = withNextra()
 
// 如果你有其他 Next.js 配置，你可以将它们作为参数传递:
// module.exports = withNextra({ /* other next.js config */ })

通过上述配置，Nextra 可以处理您 Next.js 项目中的 Markdown 文件，并使用指定的主题。其他 Nextra 配置可以在指南中找到。

创建博客主题配置

最后，在您项目的根目录中创建相应的theme.config.jsx文件。这将用于配置 Nextra 博客主题：

theme.config.jsx

export default {
  footer: <p>MIT 2023 © Nextra.</p>,
  head: ({ title, meta }) => (
    <>
      {meta.description && (
        <meta name="description" content={meta.description} />
      )}
      {meta.tag && <meta name="keywords" content={meta.tag} />}
      {meta.author && <meta name="author" content={meta.author} />}
    </>
  ),
  readMore: 'Read More →',
  postFooter: null,
  darkMode: false,
  navs: [
    {
      url: 'https://github.com/shuding/nextra',
      name: 'Nextra'
    }
  ]
}

准备就绪！

现在，您可以运行package.json中指定的next或next dev命令来开始开发项目！🎉

博客主题自定义主题