From ed91cb76293411884cbe88793d8a3394ac72e95f Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Sat, 12 Sep 2020 10:33:53 +0200
Subject: [PATCH 1/2] refactor(layouts): move layout HTML to baseof.html
For better maintainability
---
assets/scss/partials/layout/article.scss | 4 +-
layouts/404.html | 16 ++----
layouts/_default/baseof.html | 10 +++-
layouts/_default/list.html | 29 ++++------
layouts/_default/single.html | 41 ++++++--------
layouts/_default/term.html | 72 +++++++++++-------------
layouts/index.html | 34 +++++------
layouts/page/archive.html | 62 +++++++++-----------
layouts/page/single.html | 22 +++-----
9 files changed, 122 insertions(+), 168 deletions(-)
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 23b8763..76e0fad 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -1,6 +1,6 @@
@import "variables.scss";
-.article-and-sidebar {
+.keep-sidebar {
@media (min-width: $on-phone) and (max-width: $on-tablet) {
--main-top-padding: 50px;
}
@@ -13,7 +13,7 @@
}
}
- .left-sidebar {
+ &:not(.keep-sidebar) .left-sidebar {
@media (max-width: $on-tablet) {
display: none;
}
diff --git a/layouts/404.html b/layouts/404.html
index d882c30..dd5e49d 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,13 +1,7 @@
-{{ define "body_class" }}2-column{{ end }}
{{ define "main" }}
-<div class="container extended flex on-phone--column align-items--flex-start">
- {{ partial "sidebar/left.html" . }}
-
- <main class="main full-width">
- <div class="not-found-card">
- <h1 class="article-title">{{ T "notFoundTitle" }}</h1>
- <h2 class="article-subtitle">{{ T "notFoundSubtitle" }}</h2>
- </div>
- </main>
-</div>
+ <div class="not-found-card">
+ <h1 class="article-title">{{ T "notFoundTitle" }}</h1>
+ <h2 class="article-subtitle">{{ T "notFoundSubtitle" }}</h2>
+ </div>
+ {{ partialCached "footer/footer" . }}
{{ end }}
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 52e5df2..bf3d511 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,9 +1,13 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
{{- partial "head/head.html" . -}}
- <body>
- <div id="content">
- {{- block "main" . }}{{- end }}
+ <body class="{{ block `body-class` . }}{{ end }}">
+ <div class="container extended flex on-phone--column align-items--flex-start {{ block `container-class` . }}{{end}}">
+ {{ partial "sidebar/left.html" . }}
+ <main class="main full-width">
+ {{- block "main" . }}{{- end }}
+ </main>
+ {{- block "right-sidebar" . -}}{{ end }}
</div>
{{ partial "footer/script.html" . }}
{{ partial "footer/style.html" . }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 54206c4..8bd33d0 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,24 +1,19 @@
-{{ define "body_class" }}3-column{{ end }}
{{ define "main" }}
-<div class="container extended flex on-phone--column align-items--flex-start">
- {{ partialCached "sidebar/left.html" . }}
+ <div class="widget">
+ <h3 class="widget-title">{{ .Title }}</h3>
+ </div>
- <main class="main full-width">
- <div class="widget">
- <h3 class="widget-title">{{ .Title }}</h3>
- </div>
+ <section class="article-list--compact">
+ {{ range .Paginator.Pages }}
+ {{ partial "article-list/compact" . }}
+ {{ end }}
+ </section>
- <section class="article-list--compact">
- {{ range .Paginator.Pages }}
- {{ partial "article-list/compact" . }}
- {{ end }}
- </section>
+ {{- partial "pagination.html" . -}}
- {{- partial "pagination.html" . -}}
-
- {{ partialCached "footer/footer" . }}
- </main>
+ {{ partialCached "footer/footer" . }}
+{{ end }}
+{{ define "right-sidebar" }}
{{ partialCached "sidebar/right.html" . }}
-</div>
{{ end }}
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 82013b3..aabeee7 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,30 +1,21 @@
-{{ define "body_class" }}2-column{{ end }}
+{{ define "container-class" }}article-page with-toolbar{{ end }}
{{ define "main" }}
-<div class="container extended flex on-phone--column align-items--flex-start article-page with-toolbar">
- {{ partial "sidebar/left.html" . }}
-
- <div class="flex column do-not-overflow full-width">
- <main class="main">
- <div id="article-toolbar">
- <a href="{{ .Site.BaseURL }}" class="back-home">
- {{ (resources.Get "icons/back.svg").Content | safeHTML }}
- <span>Back</span>
- </a>
- </div>
-
- {{ partial "article/article.html" . }}
-
- {{ partial "article/components/related-contents" . }}
-
- {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}}
- {{ partial "comments/include" . }}
- {{ end }}
-
- {{ partialCached "footer/footer" . }}
- </main>
+ <div id="article-toolbar">
+ <a href="{{ .Site.BaseURL }}" class="back-home">
+ {{ (resources.Get "icons/back.svg").Content | safeHTML }}
+ <span>Back</span>
+ </a>
</div>
-</div>
-{{- partial "article/components/photoswipe.html" . -}}
+ {{ partial "article/article.html" . }}
+ {{ partial "article/components/related-contents" . }}
+
+ {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}}
+ {{ partial "comments/include" . }}
+ {{ end }}
+
+ {{ partialCached "footer/footer" . }}
+
+ {{- partial "article/components/photoswipe.html" . -}}
{{ end }}
\ No newline at end of file
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index 9bf62fe..0d0a35f 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -1,45 +1,37 @@
-{{ define "body_class" }}2-column{{ end }}
{{ define "main" }}
-<div class="container extended flex on-phone--column">
- {{ partial "sidebar/left.html" . }}
-
- <main class="main">
-
- <h3 class="taxonomy-type">{{ .Type | singularize | humanize }}</h3>
- <div class="taxonomy-card">
- <div class="taxonomy-details">
- <h3 class="taxonomy-count">{{ len .Pages }} post{{ if gt (len .Pages) 1 }}s{{ end }}</h3>
- <h1 class="taxonomy-term">{{ .Title }}</h1>
- {{ with .Params.description }}
- <h2 class="taxonomy-description">{{ . }}</h2>
- {{ end }}
- </div>
-
- {{ $image := partial "helper/image" (dict "Context" . "Type" "taxonomy") }}
- {{ if $image.exists }}
- <div class="taxonomy-image">
- {{ if $image.resource }}
- {{- $thumbnail := $image.resource.Fill "120x120" -}}
- <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
- height="{{ $thumbnail.Height }}" loading="lazy">
- {{ else }}
- <img src="{{ $image.permalink }}" loading="lazy">
- {{ end }}
- </div>
+ <h3 class="taxonomy-type">{{ .Type | singularize | humanize }}</h3>
+ <div class="taxonomy-card">
+ <div class="taxonomy-details">
+ <h3 class="taxonomy-count">{{ len .Pages }} post{{ if gt (len .Pages) 1 }}s{{ end }}</h3>
+ <h1 class="taxonomy-term">{{ .Title }}</h1>
+ {{ with .Params.description }}
+ <h2 class="taxonomy-description">{{ . }}</h2>
{{ end }}
</div>
-
- <section class="article-list--compact">
- {{ $v2 := where .Pages "Params.hidden" "!=" true }}
- {{ $pag := .Paginate (.Pages) }}
- {{ range $pag.Pages }}
- {{ partial "article-list/compact" . }}
- {{ end }}
- </section>
-
- {{- partial "pagination.html" . -}}
- {{ partialCached "footer/footer" . }}
- </main>
-</div>
+ {{ $image := partial "helper/image" (dict "Context" . "Type" "taxonomy") }}
+ {{ if $image.exists }}
+ <div class="taxonomy-image">
+ {{ if $image.resource }}
+ {{- $thumbnail := $image.resource.Fill "120x120" -}}
+ <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
+ height="{{ $thumbnail.Height }}" loading="lazy">
+ {{ else }}
+ <img src="{{ $image.permalink }}" loading="lazy">
+ {{ end }}
+ </div>
+ {{ end }}
+ </div>
+
+ <section class="article-list--compact">
+ {{ $v2 := where .Pages "Params.hidden" "!=" true }}
+ {{ $pag := .Paginate (.Pages) }}
+ {{ range $pag.Pages }}
+ {{ partial "article-list/compact" . }}
+ {{ end }}
+ </section>
+
+ {{- partial "pagination.html" . -}}
+
+ {{ partialCached "footer/footer" . }}
{{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index f3559b3..1811bd2 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,25 +1,19 @@
-{{ define "body_class" }}3-column{{ end }}
{{ define "main" }}
-<div class="container extended flex on-phone--column align-items--flex-start">
- {{ partialCached "sidebar/left.html" . }}
+ {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
+ {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
+ {{ $filtered := ($pages | intersect $notHidden) }}
+ {{ $pag := .Paginate ($filtered) }}
- <main class="main full-width">
- {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
- {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
- {{ $filtered := ($pages | intersect $notHidden) }}
- {{ $pag := .Paginate ($filtered) }}
-
- <section class="article-list">
- {{ range $index, $element := $pag.Pages }}
- {{ partial "article-list/default" . }}
- {{ end }}
- </section>
-
- {{- partial "pagination.html" . -}}
+ <section class="article-list">
+ {{ range $index, $element := $pag.Pages }}
+ {{ partial "article-list/default" . }}
+ {{ end }}
+ </section>
- {{ partialCached "footer/footer" . }}
- </main>
-
+ {{- partial "pagination.html" . -}}
+ {{ partialCached "footer/footer" . }}
+{{ end }}
+
+{{ define "right-sidebar" }}
{{ partialCached "sidebar/right.html" . }}
-</div>
{{ end }}
\ No newline at end of file
diff --git a/layouts/page/archive.html b/layouts/page/archive.html
index 6751ff3..b68e40a 100644
--- a/layouts/page/archive.html
+++ b/layouts/page/archive.html
@@ -1,42 +1,34 @@
-{{ define "body_class" }}2-column{{ end }}
+{{ define "body-class" }}template-archive{{ end }}
{{ define "main" }}
-<div class="container extended flex on-phone--column align-items--flex-start">
-
- {{ partial "sidebar/left.html" . }}
-
- <main class="main template-archive">
- {{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
- {{ if $categories }}
- <div class="widget">
- <h1 class="widget-title">Categories</h1>
- <div class="category-list">
- <div class="article-list--tile">
- {{ range $categories }}
- {{ partial "article-list/tile" (dict "context" . "size" "250x150") }}
- {{ end }}
- </div>
- </div>
- </div>
- {{ end }}
-
- {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
- {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
- {{ $filtered := ($pages | intersect $notHidden) }}
-
- {{ range $filtered.GroupByDate "2006" }}
- {{ $id := lower (replace .Key " " "-") }}
- <div class="archive-group" id="{{ $id }}">
- <h3 class="archive-date"><a href="{{ $.Permalink }}#{{ $id }}">{{ .Key }}</a></h3>
- <div class="article-list--compact">
- {{ range .Pages }}
- {{ partial "article-list/compact" . }}
+ {{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
+ {{ if $categories }}
+ <div class="widget">
+ <h1 class="widget-title">Categories</h1>
+ <div class="category-list">
+ <div class="article-list--tile">
+ {{ range $categories }}
+ {{ partial "article-list/tile" (dict "context" . "size" "250x150") }}
{{ end }}
</div>
</div>
- {{ end }}
+ </div>
+ {{ end }}
- {{ partialCached "footer/footer" . }}
- </main>
-</div>
+ {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
+ {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
+ {{ $filtered := ($pages | intersect $notHidden) }}
+ {{ range $filtered.GroupByDate "2006" }}
+ {{ $id := lower (replace .Key " " "-") }}
+ <div class="archive-group" id="{{ $id }}">
+ <h3 class="archive-date"><a href="{{ $.Permalink }}#{{ $id }}">{{ .Key }}</a></h3>
+ <div class="article-list--compact">
+ {{ range .Pages }}
+ {{ partial "article-list/compact" . }}
+ {{ end }}
+ </div>
+ </div>
+ {{ end }}
+
+ {{ partialCached "footer/footer" . }}
{{ end }}
\ No newline at end of file
diff --git a/layouts/page/single.html b/layouts/page/single.html
index e5a1ed8..edf53fb 100644
--- a/layouts/page/single.html
+++ b/layouts/page/single.html
@@ -1,20 +1,12 @@
-{{ define "body_class" }}2-column{{ end }}
+{{ define "body-class" }}article-page keep-sidebar{{ end }}
{{ define "main" }}
-<div class="container extended flex on-phone--column align-items--flex-start article-and-sidebar">
+ {{ partial "article/article.html" . }}
- {{ partial "sidebar/left.html" . }}
+ {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}}
+ {{ partial "comments/include" . }}
+ {{ end }}
- <main class="main article-page do-not-overflow full-width">
- {{ partial "article/article.html" . }}
-
- {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}}
- {{ partial "comments/include" . }}
- {{ end }}
-
- {{ partialCached "footer/footer" . }}
- </main>
-</div>
-
-{{ partial "article/components/photoswipe" . }}
+ {{ partialCached "footer/footer" . }}
+ {{ partial "article/components/photoswipe" . }}
{{ end }}
\ No newline at end of file
From d14a39913c2f775abc09adb1d0274a91c95f47d7 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Sat, 12 Sep 2020 10:37:55 +0200
Subject: [PATCH 2/2] style(partial/article): remove empty space in classname
---
layouts/partials/article/article.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/layouts/partials/article/article.html b/layouts/partials/article/article.html
index c7c9064..1f453aa 100644
--- a/layouts/partials/article/article.html
+++ b/layouts/partials/article/article.html
@@ -1,4 +1,4 @@
-<article class="{{ if .Params.image }}has-image{{ end }} main-article">
+<article class="{{ if .Params.image }}has-image {{ end }}main-article">
{{ partial "article/components/header" . }}
{{ partial "article/components/content" . }}