如何让嵌入Next.js的Docusaurus导航栏标题触发硬导航？

问题描述 #

把Docusaurus站点嵌入大型Next.js项目后，点击导航栏的Logo标题链接时，Docusaurus会执行客户端软导航跳转到自身首页，无法跳转到项目的实际首页，需要通过硬导航实现预期跳转。

当前Docusaurus配置片段：

...

themeConfig: {
    // Replace with your project's social card
    image: 'img/docusaurus-social-card.jpg',
    navbar: {
      title: 'Satxuma',
      logo: {
        alt: 'Satxuma Logo',
        src: 'img/icon.svg',
        href: '/',
        target: '_self',
      },
      items: [
        {
          type: 'docSidebar',
          sidebarId: 'tutorialSidebar',
          position: 'left',
          label: 'Tutorial',
        },
        { to: '/blog', label: 'Blog', position: 'left' },
      ],
    },
    ...
}

解决方案 #

方法一：标记为外部链接 #

在logo配置中添加isExternal: true属性，让Docusaurus将该链接识别为外部链接，从而禁用客户端软导航，触发浏览器硬跳转：

logo: {
  alt: 'Satxuma Logo',
  src: 'img/icon.svg',
  href: '/',
  target: '_self',
  isExternal: true, // 新增属性
},

方法二：手动拦截点击事件强制硬导航 #

通过自定义onClick事件，直接修改浏览器location实现硬跳转，适用于更复杂的场景：

logo: {
  alt: 'Satxuma Logo',
  src: 'img/icon.svg',
  href: '/',
  target: '_self',
  onClick: (e) => {
    e.preventDefault();
    window.location.href = '/'; // 强制触发硬导航
  },
},

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