Merge pull request #24 from apvarun/support-header-logo

Add logo support in navbar

Author: apvarun

README.md

@@ -94,6 +94,10 @@ From `exampleSite/`, copy `config.toml` to the root folder of your Hugo site and
 
 Menu in Blist theme is pre-set to have all section names. You can include custom links in header using the `menu.main` option config.toml.
 
+### Logo
+
+`logo` param in the site config will allow to use an image as the logo instead of the website name. It is localizable and so can have different logo for different languages
+
 ### Darkmode
 
 `[params.darkModeToggle]` enables the dark mode toggle in header. The preference is then saved so that the mode is automatically chosen for return visits.

exampleSite/config.toml

@@ -14,6 +14,7 @@ DefaultContentLanguageInSubdir = true
       introTitle = "Hey! I'm Katheryn Fox"
       introSubtitle = "26 y/o junior developer who enjoys social card games, blogging and painting"
       introPhoto = "/picture.jpg"
+      logo = "/blist-logo.png"
     [[languages.en.menu.main]]
         name = "Blog"
         url = "blog"
@@ -44,6 +45,7 @@ DefaultContentLanguageInSubdir = true
       introTitle = "Hallo, ich bin Katheryn Fox"
       introSubtitle = "26-jährige Junior-Entwicklerin, die Spaß an sozialen Kartenspielen, Bloggen und Malen hat"
       introPhoto = "/picture.jpg"
+      logo = "/blist-logo-de.png"
     [[languages.de.menu.main]]
         name = "Blog"
         url = "blog"

exampleSite/static/blist-logo-de.png

@@ -1,6 +1,10 @@
 <header class="container flex justify-between md:justify-between gap-4 flex-wrap p-6 mx-auto relative">
   <a href="{{ .Site.Home.Permalink }}" class="capitalize font-extrabold text-2xl">
+    {{ if .Site.Params.logo }}
+    <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}" class="h-8 max-w-full" />
+    {{ else }}
     {{ .Site.Title }}
+    {{ end }}
   </a>
   <button class="mobile-menu-button md:hidden">
     <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">