Steps 组件

将有序列表转换为步骤的可视化表示的内置组件。

示例

安装

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

添加 Next.js 配置

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

next.setting.js

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

创建文档主题配置

在项目的根目录中创建主题 theme.config.jsx 文件。

theme.config.jsx

export default {
  logo: <span>My Nextra Documentation</span>,
  project: {
    link: 'https://github.com/simplelife/nextra-template',
  },
  // ... 其他配置选项
};

启动

现在，您可以将您的第一个 MDX 页面创建为page/index.mdx：

page/index.mdx

# Welcome to SimpleLife
 
Hello, world!

在package.json配置启动命令，使用npm run dev运行你的项目

"scripts": {
"dev": "next dev",
},

用法

Step 1

步骤 1 的内容。

Step 2

步骤 2 的内容。

import { Steps } from 'nextra/components';
 
<Steps>### Step 1 步骤 1 的内容。 ### Step 2 步骤 2 的内容。</Steps>;

卡片文件树