feat(v2): allow specify custom link for logo

facebook · Jan 29, 2020 · 07acd9c · 07acd9c
1 parent 4b5ef84
commit 07acd9c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -72,7 +72,16 @@ function Navbar() {
     [setTheme],
   );
 
-  const logoUrl = useBaseUrl(logo.src);
+  const logoLink = logo.link || baseUrl;
+  const isExternalLink = /http/.test(logoLink);
+  const logoLinkProps = isExternalLink
+    ? {
+        rel: 'noopener noreferrer',
+        target: '_blank',
+      }
+    : null;
+  const logoImageUrl = useBaseUrl(logo.src);
+
   return (
     <nav
       ref={navbarRef}
@@ -107,9 +116,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
@@ -151,9 +160,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>

diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
@@ -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',
+        link: 'https://v2.docusaurus.io/', // default to siteConfig.baseUrl
       },
     },
     ...