Minor layouts rework #170
Minor layouts rework #170
Conversation
|
This sounds great to me, in particular the suggestions you're making about how to build on the changes here as I love the idea of nesting the layouts like this. I'm still very new to Hugo, so PRs like this are perfect for me to better understand things. Let's get @XhmikosR to weigh in before we figure out an approach. |
|
I'll have a close look tomorrow, thanks for the PR! And I definitely agree we should use a baseof.html, which is something we need to do in Bootstrap's docs too and leverage Hugo's template lookup hierarchy (I really need to find some time and get some help there 🙂)
|
|
Let's land this and you can make the other layout changes to another PR, @inwardmovement. Thanks! |
* remove layout from icons content files * remove unnecessary layout in home content file * remove layout in 404 content file and move 404.html * create default single and list layouts
Fixes #162
content/_index.md) as Hugo's template lookup order make them uselayouts/icons/single.html(for icons pages) andlayouts/home.html(for home page) automatically.single.htmlandlist.htmllayouts to get rid of the warning, but I suggest we use abaseof.htmldefault template that would fetch amainblock from other templates and include thescriptspartial (which would fetch JQuery, Popper, Bootstrap...)Suggested layouts organization (I could take care of this):
baseof.html
single.html
{{ define "main" }} {{ partial "hero" . }} <main class="container" id="content" role="main"> {{ .Content }} </main> {{ end }}list.html
{{ define "main" }} {{ partial "hero" . }} <main class="container" id="content" role="main"> <ul> {{ range .Pages }} <li> <a href="{{ .Permalink }}">{{.Title}}</a> </li> {{ end }} </ul> </main> {{ end }}home.html
{{ define "main" }} {{ partial "hero" . }} <main class="container" id="content" role="main"> {{ partial "icons" . }} {{ .Content }} </main> {{ end }}icons/single.html
{{ define "main" }} <main class="container" id="content" role="main"> <nav> <ul class="breadcrumb my-4 text-muted bg-transparent p-0"> <li class="breadcrumb-item"><a href="/">Icons</a></li> <li class="breadcrumb-item">{{ .Title }}</li> </ul> </nav> <div class="row align-items-md-center"> <div class="col-md-8"> <h1>{{ .Title }}</h1> <p class="mb-3 mb-md-0">Tags: {{ with .Params.tags }}{{ delimit . ", " }}{{ end }}</p> </div> <div class="col-md-4"> <script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script> </div> </div> <hr class="my-4"> {{- $filenameWithExt := split .Name "." -}} {{- $filename := index $filenameWithExt 0 -}} {{- $name := humanize $filename -}} <div class="row mb-4"> <div class="col-md-6"> <div class="d-flex align-items-center justify-content-center p-3 py-5 mb-2 bg-light rounded" style="font-size: 20em;"> {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }} </div> </div> <div class="col-md-3"> <div class="d-flex align-items-center justify-content-center p-3 py-5 mb-2 bg-light rounded" style="font-size: 10em"> {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }} </div> </div> <div class="col-md-2"> <div class="d-flex align-items-center justify-content-center p-3 py-5 mb-2 bg-light rounded" style="font-size: 2em"> {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }} </div> </div> <div class="col-md-1"> <div class="d-flex align-items-center justify-content-center p-3 py-4 mb-2 bg-light rounded" style="font-size: 1em"> {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }} </div> </div> </div> <h2 class="h4 mb-3">Copy SVG code</h2> <div class="alert alert-info">Copy to clipboard button hopefully coming in next release, sorry!</div> {{- $source := readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) }} {{ highlight $source "html" "" }} </main> {{ end }}