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:
Alexey Pyltsyn 2020-02-29 14:27:56 +03:00 committed by GitHub
parent 36163773ec
commit c1716096de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 8 deletions

View file

@ -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);

View file

@ -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)
},
},
...