feat(v2): allow specify custom link for logo (#2253)

* feat(v2): allow specify custom link for logo

* Improve naming

* Improve naming: link -> href
This commit is contained in:
Alexey Pyltsyn 2020-02-01 00:18:04 +03:00 committed by GitHub
parent e27c8d0d0b
commit daa9a6a044
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions

View file

@ -69,7 +69,16 @@ function Navbar() {
[setLightTheme, setDarkTheme],
);
const logoUrl = useBaseUrl(logo.src);
const logoLink = logo.href || baseUrl;
const isExternalLogoLink = /http/.test(logoLink);
const logoLinkProps = isExternalLogoLink
? {
rel: 'noopener noreferrer',
target: '_blank',
}
: null;
const logoImageUrl = useBaseUrl(logo.src);
return (
<nav
ref={navbarRef}
@ -104,9 +113,9 @@ function Navbar() {
/>
</svg>
</div>
<Link className="navbar__brand" to={baseUrl}>
<Link className="navbar__brand" to={logoLink} {...logoLinkProps}>
{logo != null && (
<img className="navbar__logo" src={logoUrl} alt={logo.alt} />
<img className="navbar__logo" src={logoImageUrl} alt={logo.alt} />
)}
{title != null && (
<strong
@ -148,9 +157,13 @@ function Navbar() {
/>
<div className="navbar-sidebar">
<div className="navbar-sidebar__brand">
<Link className="navbar__brand" onClick={hideSidebar} to={baseUrl}>
<Link
className="navbar__brand"
onClick={hideSidebar}
to={logoLink}
{...logoLinkProps}>
{logo != null && (
<img className="navbar__logo" src={logoUrl} alt={logo.alt} />
<img className="navbar__logo" src={logoImageUrl} alt={logo.alt} />
)}
{title != null && <strong>{title}</strong>}
</Link>

View file

@ -45,7 +45,7 @@ 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).
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.
```js
// docusaurus.config.js
@ -57,6 +57,7 @@ module.exports = {
logo: {
alt: 'Site Logo',
src: 'img/logo.svg',
href: 'https://v2.docusaurus.io/', // default to siteConfig.baseUrl
},
},
...