在 Docusaurus 上，如何禁用外部链接 SVG？

Question

我正在尝试在 Docusaurus 导航栏上实现Sign in和按钮...Sign up

...但由于我的应用程序位于子域中，Docusaurus 认为它​​们是外部链接并添加了这个丑陋的 SVG。

如何禁用外部行为？我正在寻找external:false导航栏配置，但找不到它。我也尝试过设置target:_self，但没有删除 SVG。 https://docusaurus.io/docs/api/themes/configuration#navbar

Answer 1

我知道您不久前发布了这个问题，但我发现了一些比上面提出的解决方法更容易的方法。href您可以使用该属性来代替使用to。

在docusaurus.config.js中

{
    to: 'https://netdata.cloud',
    label: 'netdata.cloud',
    position: 'right',
},

该链接仍然有效，但不会触发主题附加 SVG 的冲动。

我希望这有帮助。

Answer 2

无论如何，我找不到禁用外部链接的方法，但也许您可以使用 svg，即使它只是文本。如果您查看 Docusaurus 网站上的 GitHub 徽标示例，如果您没有标签，则 svg 不会应用到它。

docusaurus.config.js

{
   // no 'label' property
    href: 'https://github.com/facebook/docusaurus',
    position: 'right',
    className: 'header-github-link',
    'aria-label': 'GitHub repository',
},

src/css/custom.css

.header-github-link::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

[data-theme='dark'] .header-github-link::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

更新：

其实，这是可行的，我不知道为什么我没有早点想到，只是设置内容值：

.header-search:before {
  content: "GitHub";
  display: flex;
  width: 24px;
  height: 24px;
}