mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-02 11:47:23 +02:00
feat(v2): allow specifying custom target for logo link (#2344)
* feat(v2): allow specify custom target for logo link * refactor: use isInternalUrl
This commit is contained in:
parent
36163773ec
commit
c1716096de
2 changed files with 16 additions and 8 deletions
|
@ -9,6 +9,7 @@ import React, {useCallback, useState} from 'react';
|
|||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
|
||||
import SearchBar from '@theme/SearchBar';
|
||||
import Toggle from '@theme/Toggle';
|
||||
|
@ -77,13 +78,17 @@ function Navbar() {
|
|||
);
|
||||
|
||||
const logoLink = logo.href || baseUrl;
|
||||
const isExternalLogoLink = /http/.test(logoLink);
|
||||
const logoLinkProps = isExternalLogoLink
|
||||
? {
|
||||
rel: 'noopener noreferrer',
|
||||
target: '_blank',
|
||||
}
|
||||
: null;
|
||||
let logoLinkProps = {};
|
||||
|
||||
if (logo.target) {
|
||||
logoLinkProps = {target: logo.target};
|
||||
} else if (!isInternalUrl(logoLink)) {
|
||||
logoLinkProps = {
|
||||
rel: 'noopener noreferrer',
|
||||
target: '_blank',
|
||||
};
|
||||
}
|
||||
|
||||
const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src;
|
||||
const logoImageUrl = useBaseUrl(logoSrc);
|
||||
|
||||
|
|
|
@ -47,7 +47,9 @@ module.exports = {
|
|||
|
||||
### Navbar Title & Logo
|
||||
|
||||
You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. You can also set a different logo for dark mode.
|
||||
You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. In addition, you can override a value for the target attribute of logo link, it can come in handy if you are hosting docs website in a subdirectory of your main website, and in which case you probably do not need a link in the logo to the main website will open in a new tab.
|
||||
|
||||
To improve dark mode support, you can also set a different logo for this mode.
|
||||
|
||||
```js {6-12}
|
||||
// docusaurus.config.js
|
||||
|
@ -61,6 +63,7 @@ module.exports = {
|
|||
src: 'img/logo.svg',
|
||||
srcDark: 'img/logo_dark.svg', // default to logo.src
|
||||
href: 'https://v2.docusaurus.io/', // default to siteConfig.baseUrl
|
||||
target: '_self', // by default, this value is calculated based on the `href` attribute (the external link will open in a new tab, all others in the current one)
|
||||
},
|
||||
},
|
||||
...
|
||||
|
|
Loading…
Add table
Reference in a new issue