refactor(layouts): move layout HTML to baseof.html
For better maintainability
This commit is contained in:
Jimmy Cai
parent
cca10c7947
commit
ed91cb7629
9 changed files with 122 additions and 168 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
@import "variables.scss";
|
@import "variables.scss";
|
||||||
|
|
||||||
.article-and-sidebar {
|
.keep-sidebar {
|
||||||
@media (min-width: $on-phone) and (max-width: $on-tablet) {
|
@media (min-width: $on-phone) and (max-width: $on-tablet) {
|
||||||
--main-top-padding: 50px;
|
--main-top-padding: 50px;
|
||||||
}
|
}
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-sidebar {
|
&:not(.keep-sidebar) .left-sidebar {
|
||||||
@media (max-width: $on-tablet) {
|
@media (max-width: $on-tablet) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,7 @@
|
||||||
{{ define "body_class" }}2-column{{ end }}
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="container extended flex on-phone--column align-items--flex-start">
|
<div class="not-found-card">
|
||||||
{{ partial "sidebar/left.html" . }}
|
<h1 class="article-title">{{ T "notFoundTitle" }}</h1>
|
||||||
|
<h2 class="article-subtitle">{{ T "notFoundSubtitle" }}</h2>
|
||||||
<main class="main full-width">
|
</div>
|
||||||
<div class="not-found-card">
|
{{ partialCached "footer/footer" . }}
|
||||||
<h1 class="article-title">{{ T "notFoundTitle" }}</h1>
|
|
||||||
<h2 class="article-subtitle">{{ T "notFoundSubtitle" }}</h2>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,9 +1,13 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ .Site.LanguageCode }}">
|
<html lang="{{ .Site.LanguageCode }}">
|
||||||
{{- partial "head/head.html" . -}}
|
{{- partial "head/head.html" . -}}
|
||||||
<body>
|
<body class="{{ block `body-class` . }}{{ end }}">
|
||||||
<div id="content">
|
<div class="container extended flex on-phone--column align-items--flex-start {{ block `container-class` . }}{{end}}">
|
||||||
{{- block "main" . }}{{- end }}
|
{{ partial "sidebar/left.html" . }}
|
||||||
|
<main class="main full-width">
|
||||||
|
{{- block "main" . }}{{- end }}
|
||||||
|
</main>
|
||||||
|
{{- block "right-sidebar" . -}}{{ end }}
|
||||||
</div>
|
</div>
|
||||||
{{ partial "footer/script.html" . }}
|
{{ partial "footer/script.html" . }}
|
||||||
{{ partial "footer/style.html" . }}
|
{{ partial "footer/style.html" . }}
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,19 @@
|
||||||
{{ define "body_class" }}3-column{{ end }}
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="container extended flex on-phone--column align-items--flex-start">
|
<div class="widget">
|
||||||
{{ partialCached "sidebar/left.html" . }}
|
<h3 class="widget-title">{{ .Title }}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
<main class="main full-width">
|
<section class="article-list--compact">
|
||||||
<div class="widget">
|
{{ range .Paginator.Pages }}
|
||||||
<h3 class="widget-title">{{ .Title }}</h3>
|
{{ partial "article-list/compact" . }}
|
||||||
</div>
|
{{ end }}
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="article-list--compact">
|
{{- partial "pagination.html" . -}}
|
||||||
{{ range .Paginator.Pages }}
|
|
||||||
{{ partial "article-list/compact" . }}
|
|
||||||
{{ end }}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{{- partial "pagination.html" . -}}
|
{{ partialCached "footer/footer" . }}
|
||||||
|
{{ end }}
|
||||||
{{ partialCached "footer/footer" . }}
|
|
||||||
</main>
|
|
||||||
|
|
||||||
|
{{ define "right-sidebar" }}
|
||||||
{{ partialCached "sidebar/right.html" . }}
|
{{ partialCached "sidebar/right.html" . }}
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,30 +1,21 @@
|
||||||
{{ define "body_class" }}2-column{{ end }}
|
{{ define "container-class" }}article-page with-toolbar{{ end }}
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="container extended flex on-phone--column align-items--flex-start article-page with-toolbar">
|
<div id="article-toolbar">
|
||||||
{{ partial "sidebar/left.html" . }}
|
<a href="{{ .Site.BaseURL }}" class="back-home">
|
||||||
|
{{ (resources.Get "icons/back.svg").Content | safeHTML }}
|
||||||
<div class="flex column do-not-overflow full-width">
|
<span>Back</span>
|
||||||
<main class="main">
|
</a>
|
||||||
<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>
|
</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 }}
|
{{ end }}
|
||||||
|
|
@ -1,45 +1,37 @@
|
||||||
{{ define "body_class" }}2-column{{ end }}
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="container extended flex on-phone--column">
|
<h3 class="taxonomy-type">{{ .Type | singularize | humanize }}</h3>
|
||||||
{{ partial "sidebar/left.html" . }}
|
<div class="taxonomy-card">
|
||||||
|
<div class="taxonomy-details">
|
||||||
<main class="main">
|
<h3 class="taxonomy-count">{{ len .Pages }} post{{ if gt (len .Pages) 1 }}s{{ end }}</h3>
|
||||||
|
<h1 class="taxonomy-term">{{ .Title }}</h1>
|
||||||
<h3 class="taxonomy-type">{{ .Type | singularize | humanize }}</h3>
|
{{ with .Params.description }}
|
||||||
<div class="taxonomy-card">
|
<h2 class="taxonomy-description">{{ . }}</h2>
|
||||||
<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>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</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" . }}
|
{{ $image := partial "helper/image" (dict "Context" . "Type" "taxonomy") }}
|
||||||
</main>
|
{{ if $image.exists }}
|
||||||
</div>
|
<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 }}
|
{{ end }}
|
||||||
|
|
@ -1,25 +1,19 @@
|
||||||
{{ define "body_class" }}3-column{{ end }}
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="container extended flex on-phone--column align-items--flex-start">
|
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
|
||||||
{{ partialCached "sidebar/left.html" . }}
|
{{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
|
||||||
|
{{ $filtered := ($pages | intersect $notHidden) }}
|
||||||
|
{{ $pag := .Paginate ($filtered) }}
|
||||||
|
|
||||||
<main class="main full-width">
|
<section class="article-list">
|
||||||
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
|
{{ range $index, $element := $pag.Pages }}
|
||||||
{{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
|
{{ partial "article-list/default" . }}
|
||||||
{{ $filtered := ($pages | intersect $notHidden) }}
|
{{ end }}
|
||||||
{{ $pag := .Paginate ($filtered) }}
|
</section>
|
||||||
|
|
||||||
<section class="article-list">
|
|
||||||
{{ range $index, $element := $pag.Pages }}
|
|
||||||
{{ partial "article-list/default" . }}
|
|
||||||
{{ end }}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{{- partial "pagination.html" . -}}
|
|
||||||
|
|
||||||
{{ partialCached "footer/footer" . }}
|
{{- partial "pagination.html" . -}}
|
||||||
</main>
|
{{ partialCached "footer/footer" . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ define "right-sidebar" }}
|
||||||
{{ partialCached "sidebar/right.html" . }}
|
{{ partialCached "sidebar/right.html" . }}
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,42 +1,34 @@
|
||||||
{{ define "body_class" }}2-column{{ end }}
|
{{ define "body-class" }}template-archive{{ end }}
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="container extended flex on-phone--column align-items--flex-start">
|
{{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
|
||||||
|
{{ if $categories }}
|
||||||
{{ partial "sidebar/left.html" . }}
|
<div class="widget">
|
||||||
|
<h1 class="widget-title">Categories</h1>
|
||||||
<main class="main template-archive">
|
<div class="category-list">
|
||||||
{{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
|
<div class="article-list--tile">
|
||||||
{{ if $categories }}
|
{{ range $categories }}
|
||||||
<div class="widget">
|
{{ partial "article-list/tile" (dict "context" . "size" "250x150") }}
|
||||||
<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" . }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{ partialCached "footer/footer" . }}
|
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
|
||||||
</main>
|
{{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
|
||||||
</div>
|
{{ $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 }}
|
{{ end }}
|
||||||
|
|
@ -1,20 +1,12 @@
|
||||||
{{ define "body_class" }}2-column{{ end }}
|
{{ define "body-class" }}article-page keep-sidebar{{ end }}
|
||||||
{{ define "main" }}
|
{{ 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">
|
{{ partialCached "footer/footer" . }}
|
||||||
{{ 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" . }}
|
|
||||||
|
|
||||||
|
{{ partial "article/components/photoswipe" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
Loading…
Reference in a new issue