Make site logo customizable

exampleSite/config.yaml

@@ -30,6 +30,13 @@ params:
   # background image of the landing page
   background: "images/background.jpg"
 
+  # Provide logos for your site. The inverted logo will be used in the initial
+  # transparent navbar and the main logo will be used in the non-transparent navbar.
+  # It will be default to the theme logos if not provided.
+  logo:
+    main: /assets/images/main-logo.png
+    inverted: /assets/images/inverted-logo.png
+
   # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site
 

layouts/partials/navigators/navbar-2.html

@@ -1,19 +1,30 @@
 <nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
-    <div class="container">
-       <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <a class="navbar-brand" href="{{ site.BaseURL }}">
-        <img src="/assets/images/logo.png">
-        {{- site.Title -}}
-      </a>
-      <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
-        <span class="navbar-toggler-icon"></span>
-      </button>
+  <div class="container">
+    {{ $mainLogo:="/assets/images/main-logo.png" }}
+    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+    {{ if .Site.Params.logo.main }}
+      {{ $mainLogo = .Site.Params.logo.main }}
+    {{ end }}
+    {{ if .Site.Params.logo.inverted }}
+      {{ $invertedLogo = .Site.Params.logo.inverted }}
+    {{ end }}
+      <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <a class="navbar-brand" href="{{ site.BaseURL }}">
+      <img src="{{ $mainLogo }}">
+      {{- site.Title -}}
+    </a>
+    <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
+      <span class="navbar-toggler-icon"></span>
+    </button>
 
-      <div class="collapse navbar-collapse" id="top-nav-items">
-        <ul class="navbar-nav ml-auto">
-        </ul>
-      </div>
+    <div class="collapse navbar-collapse" id="top-nav-items">
+      <ul class="navbar-nav ml-auto">
+      </ul>
     </div>
+  </div>
+  <!-- Store the logo information in a hidden img for the JS -->
+  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
 </nav>

layouts/partials/navigators/navbar.html

@@ -1,7 +1,15 @@
 <nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
+    {{ $mainLogo:="/assets/images/main-logo.png" }}
+    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+    {{ if .Site.Params.logo.main }}
+      {{ $mainLogo = .Site.Params.logo.main }}
+    {{ end }}
+    {{ if .Site.Params.logo.inverted }}
+      {{ $invertedLogo = .Site.Params.logo.inverted }}
+    {{ end }}
     <a class="navbar-brand" href="{{ .Site.BaseURL }}">
-      <img src="/assets/images/logo-inverted.png" id="logo">
+      <img src="{{ $invertedLogo }}" id="logo">
       {{- .Site.Title -}}
     </a>
     <button
@@ -50,4 +58,7 @@
       </ul>
     </div>
   </div>
+  <!-- Store the logo information in a hidden img for the JS -->
+  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
 </nav>

static/assets/js/navbar.js

@@ -15,7 +15,9 @@
         $('#navbar-toggler').removeClass('navbar-dark');
         $('#navbar-toggler').addClass('navbar-light');
 
-        $('#logo').attr("src","assets/images/logo.png");
+        // get the main logo from hidden img tag
+        let mainLogo = document.getElementById("main-logo").getAttribute("src");
+        $('#logo').attr("src", mainLogo);
       } else {
         $('#top-navbar').removeClass('final-navbar shadow');
         $('#top-navbar').addClass('initial-navbar');
@@ -23,7 +25,9 @@
         $('#navbar-toggler').removeClass('navbar-light');
         $('#navbar-toggler').addClass('navbar-dark');
 
-        $('#logo').attr("src","assets/images/logo-inverted.png");
+        // get the inverted logo from hidden img tag
+        let invertedLogo = document.getElementById("inverted-logo").getAttribute("src");
+        $('#logo').attr("src", invertedLogo);
       }
     });
   });