Docusaurus 2 如何在导航栏添加自定义 React 组件（如登录按钮）

以下是两种可落地的实现方案，可根据项目版本和需求选择：

方案一：使用自定义导航项（推荐，适配v2.4及以上版本） #

该方案无需修改核心导航栏结构，轻量无侵入：

• 第一步：在项目src/theme/Navbar/Item/目录下新建CustomLoginButton.jsx组件，写入登录按钮逻辑，示例代码如下：

import React from 'react';

export default function CustomLoginButton() {
  const handleLogin = () => {
    // 自定义登录逻辑，可跳转登录页或唤起登录弹窗
    window.location.href = '/login';
  };

  return (
    <button 
      className="button button--primary margin-left--md" 
      onClick={handleLogin}
    >
      登录
    </button>
  );
}

• 第二步：修改docusaurus.config.js的导航栏配置，在navbar.items中添加对应自定义项：

module.exports = {
  themeConfig: {
    navbar: {
      items: [
        // 保留原有导航项
        {
          type: 'custom-LoginButton',
          position: 'right', // 配置按钮在导航栏左侧/右侧
        },
      ]
    }
  }
}

• 第三步：可在src/css/custom.css中添加自定义样式，调整按钮的大小、边距、配色，和现有导航栏风格匹配即可。

方案二：Swizzle 导航栏组件（适合复杂自定义场景） #

如果你的Docusaurus版本较低，或者需要对导航栏做更多定制化修改，可以用官方Swizzle能力导出核心导航栏组件修改：

• 第一步：执行命令导出导航栏内容组件：
  npm run swizzle @docusaurus/theme-classic Navbar/Content -- --eject
  如果使用yarn或pnpm，替换为对应包管理工具的命令即可，执行后会在src/theme/Navbar/Content/目录下生成可编辑的导航栏组件文件。
• 第二步：在组件的合适位置引入你的登录按钮组件，比如在导航栏右侧原有导航项、搜索框的前后插入即可。
• 第三步：如果需要适配移动端，可同时Swizzle移动端导航栏组件Navbar/MobileSidebar/Header，将登录按钮插入移动端导航栏的对应位置，也可以通过CSS媒体查询控制按钮仅在桌面端显示。

内容的提问来源于stack exchange，提问作者Kevin Kihata