thuliteio / doks

Everything you need to build a stellar documentation website. Fast, accessible, and easy to use.
https://getdoks.org
MIT License
2.06k stars 357 forks source link

How to replace "Doks" in top left of screen #909

Open h-enk opened 2 years ago

h-enk commented 2 years ago

Discussed in https://github.com/h-enk/doks/discussions/905

Originally posted by **purplefox** September 19, 2022 Hi, I am new to Doks and interested in using it for my project website. I would like to replace "Doks" in the top left of the screen (which links to the home page) with my project logo, but I couldn't figure out how to configure doks to do that. Any help greatly appreciated
github-actions[bot] commented 1 year ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

LazyScholar commented 1 year ago

Pull the Starter Theme and insert the image html in layouts/partials/header/header.html:

diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
index bb5ae72..c4b2f18 100644
--- a/layouts/partials/header/header.html
+++ b/layouts/partials/header/header.html
@@ -1,3 +1,5 @@
+{{ $logo := resources.Get (printf "%s%s" "images/" site.Params.logo) }}
+
 {{ if .Site.Params.alert -}}
   {{ partial "header/alert.html" . }}
 {{ end -}}
@@ -12,7 +14,7 @@
   <nav class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} flex-wrap flex-lg-nowrap" aria-label="Main navigation">

     <a class="navbar-brand order-0" href="{{ .Site.BaseURL | relLangURL }}" aria-label="{{ .Site.Params.Title }}">
-      {{ .Site.Params.Title }}
+      <img src="{{ $logo.Permalink }}" alt="{{ .Site.Params.Title }}" style="width: auto; height: auto; display: inline; max-height: 1.75em;"/>
     </a>

     {{ if (in .Site.Params.sections.sectionNav .Section) -}}