Clean up templates a whole bunch by making single page layout, a true single page layout

This commit is contained in:
Justin Nguyen 2020-12-23 00:44:50 -08:00
parent 50b7892a15
commit 5992889676
4 changed files with 93 additions and 143 deletions

View File

@ -1,7 +1,7 @@
baseurl = "https://example.com/" baseurl = "https://example.com/"
languageCode = "en-us" languageCode = "en-us"
theme = "hugo-theme-terminal" theme = "hugo-theme-terminal"
paginate = 5 paginate = 10
[params] [params]
contentTypeName = "post" contentTypeName = "post"
@ -10,14 +10,10 @@ paginate = 5
fullWidthTheme = false fullWidthTheme = false
centerTheme = false centerTheme = false
# singlePageSite moves pages from the main nav menu to sections on the homepage. # singlePageSite moves pages from the main nav menu to sections on the homepage.
# These only menu items with a url set to "/#section-name" will be displayed. # These only menu items with a url starting with "/#" will be displayed using the
# A collection is displayed for the menu identifier which matches contentTypeName. # front matter defined in "homepage/". A collection is displayed for other menu items.
# The collection items use the "post" archetypes.
singlePageSite = true singlePageSite = true
# For singlePageSites the collection is paginated but it would not make sense to homepagePaginateCount = 10 # If you want the homepage to paginate a different numebr of items
# paginate in the middle of a section, so a link to see more can be specified below.
singlePageCollectionSeeMoreText = "Check out my projects!"
singlePageCollectionSeeMoreLink = "/portfolio"
[params.twitter] [params.twitter]
creator = "@justinnuwin" creator = "@justinnuwin"

View File

@ -1,5 +1,6 @@
{{ define "main" }} {{ define "main" }}
{{ if .Content }} {{ if .Content }}
<div class="index-content {{ if .Params.framed -}}framed{{- end -}}"> <div class="index-content {{ if .Params.framed -}}framed{{- end -}}">
{{ .Content }} {{ .Content }}
@ -14,98 +15,50 @@
{{ if .IsHome }} {{ if .IsHome }}
{{ $PageContext = .Site }} {{ $PageContext = .Site }}
{{ end }} {{ end }}
{{ $paginator := .Paginate (where $PageContext.RegularPages "Type" $contentTypeName) }}
<div class="sections">
{{ range .Site.Menus.main }} {{ if $.Site.Params.singlePageSite }}
{{ if eq (first 2 .URL) "/#" }} <div class="sections">
{{ range .Site.Menus.main }}
<section id="{{ .Identifier }}" class="posts section"> <section id="{{ .Identifier }}" class="posts section">
{{ if $.Site.Params.singlePageSite }} {{ if eq (first 2 .URL) "/#" }}
<h1 class="section-header">{{ .Name }}<a href="#{{ .Identifier }}" class="hanchor" arialabel="Anchor"></a></h1> <h1 class="section-header">{{ .Name }}<a href="#{{ .Identifier }}" class="hanchor" arialabel="Anchor"></a></h1>
{{ end }} <div class="post">
{{ if ne .Identifier $.Site.Params.contentTypeName }} {{ $section := path.Join "homepage" .Identifier }}
{{ if $.Site.Params.singlePageSite }} {{ with $.Site.GetPage $section }}
<div class="post"> {{ partial "section.html" . }}
{{ $section := path.Join "homepage" .Identifier }} {{ end }}
{{ with $.Site.GetPage $section }} </div>
{{ partial "section.html" . }}
{{ end }}
</div>
{{ end }}
{{ else }} {{ else }}
{{ range $paginator.Pages.ByDate.Reverse }} <h1 class="section-header">{{ .Name }}<a href="{{ .URL }}" class="hanchor" arialabel="Anchor"></a></h1>
<article class="post on-list"> {{ $thisSectionsPages := where $PageContext.RegularPages "Type" .Identifier }}
<h1 class="post-title"> {{ range first $.Site.Params.homepagePaginateCount $thisSectionsPages.ByDate.Reverse }}
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a> {{ partial "collection.html" . }}
</h1>
<div class="post-meta">
<span class="post-date">
{{ with .Params.daterange }}
{{ . }}
{{ else }}
{{ .Date.Format "01-02-2006" }}
{{ end }}
</span>
{{ with .Params.Author }}
<span class="post-author">:: {{ . }}</span>
{{ end }}
</div>
{{ if .Params.tags }}
<span class="post-tags">
{{ range .Params.tags }}
#<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
{{- . -}}
</a>&nbsp;
{{ end }}
</span>
{{ end }}
{{ if .Params.Cover }}
<img src="{{ .Params.Cover | absURL }}" class="post-cover" alt="{{ .Title | plainify | default " " }}" />
{{ end }}
<div class="post-content">
{{ if .Params.showFullContent }}
{{ .Content | markdownify }}
{{ else if .Description }}
{{ .Description | markdownify }}
{{ else }}
{{ if .Truncated }}
{{ .Summary | markdownify }}
{{ end }}
{{ end }}
</div>
{{ if not .Params.showFullContent }}
<div>
<a class="read-more button"
href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
</div>
{{ end }}
</article>
{{ end }} {{ end }}
{{ if $.Site.Params.singlePageSite }} <div class="pagination">
<div class="pagination"> <div class="pagination__buttons">
<div class="pagination__buttons"> <span class="button previous">
<span class="button previous"> <a href="{{ .URL }}">
<a href="{{ $.Site.Params.singlePageCollectionSeeMoreLink }}"> <span class="button__icon"></span>
<span class="button__icon"></span> <span class="button__text">See more {{ .Name | pluralize }}</span>
<span class="button__text">{{ $.Site.Params.singlePageCollectionSeeMoreText }}</span> </a>
</a> </span>
</span>
</div>
</div> </div>
{{ else }} </div>
{{ partial "pagination.html" $ }} <!-- originally . instead of $ -->
{{ end }}
{{ end }} {{ end }}
</section> </section>
{{ if $.Site.Params.singlePageSite }} <hr class="section-separator">
<hr class="section-separator">
{{ end }}
{{ end }} {{ end }}
{{ end }} </div>
</div> {{ else }}
<div class="posts">
{{ $paginator := .Paginate (where $PageContext.RegularPages "Type" $contentTypeName) }}
{{ range $paginator.Pages.ByDate.Reverse }}
{{ partial "collection.html" . }}
{{ end }}
{{ partial "pagination.html" . }}
</div>
{{ end }}
{{ end }} {{ end }}

View File

@ -6,56 +6,7 @@
{{ end }} {{ end }}
<div class="posts"> <div class="posts">
{{ range .Pages.ByDate.Reverse }} {{ range .Pages.ByDate.Reverse }}
<article class="post on-list"> {{ partial "collection.html" . }}
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
</h1>
<div class="post-meta">
<span class="post-date">
{{ with .Params.daterange }}
{{ . }}
{{ else }}
{{ .Date.Format "01-02-2006" }}
{{ end }}
</span>
{{ with .Params.Author }}
<span class="post-author">:: {{ . }}</span>
{{ end }}
</div>
{{ if .Params.tags }}
<span class="post-tags">
{{ range .Params.tags }}
#<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
{{- . -}}
</a>&nbsp;
{{ end }}
</span>
{{ end }}
{{ if .Params.Cover }}
<img src="{{ .Params.Cover | absURL }}" class="post-cover" alt="{{ .Title | plainify | default " " }}" />
{{ end }}
<div class="post-content">
{{ if .Params.showFullContent }}
{{ .Content | markdownify }}
{{ else if .Description }}
{{ .Description | markdownify }}
{{ else }}
{{ if .Truncated }}
{{ .Summary | markdownify }}
{{ end }}
{{ end }}
</div>
{{ if not .Params.showFullContent }}
<div>
<a class="read-more button"
href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
</div>
{{ end }}
</article>
{{ end }} {{ end }}
{{ partial "pagination.html" . }} {{ partial "pagination.html" . }}
</div> </div>

View File

@ -0,0 +1,50 @@
<article class="post on-list">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
</h1>
<div class="post-meta">
<span class="post-date">
{{ with .Params.daterange }}
{{ . }}
{{ else }}
{{ .Date.Format "01-02-2006" }}
{{ end }}
</span>
{{ with .Params.Author }}
<span class="post-author">:: {{ . }}</span>
{{ end }}
</div>
{{ if .Params.tags }}
<span class="post-tags">
{{ range .Params.tags }}
#<a href="{{ (urlize (printf "tags/%s/" . )) | absLangURL }}">
{{- . -}}
</a>&nbsp;
{{ end }}
</span>
{{ end }}
{{ if .Params.Cover }}
<img src="{{ .Params.Cover | absURL }}" class="post-cover" alt="{{ .Title | plainify | default " " }}" />
{{ end }}
<div class="post-content">
{{ if .Params.showFullContent }}
{{ .Content | markdownify }}
{{ else if .Description }}
{{ .Description | markdownify }}
{{ else }}
{{ if .Truncated }}
{{ .Summary | markdownify }}
{{ end }}
{{ end }}
</div>
{{ if not .Params.showFullContent }}
<div>
<a class="read-more button"
href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore }} →</a>
</div>
{{ end }}
</article>