From 8df5d79f73f7b9babc4caf73137d3e80bc5ceb2c Mon Sep 17 00:00:00 2001 From: razonyang Date: Mon, 19 Jun 2023 15:59:48 +0800 Subject: [PATCH] feat: add the optional sidebar implementation --- assets/hb/modules/blog/scss/_sidebar.scss | 30 +++++++++ assets/hb/modules/blog/scss/index.scss | 1 + assets/hb/modules/blog/scss/post/_main.scss | 1 + .../hb/modules/blog/scss/variables.tmpl.scss | 2 + layouts/_default/term.html | 25 +++++--- .../modules/blog/functions/has-sidebar.html | 2 + layouts/partials/hb/modules/blog/index.html | 25 +++++--- layouts/partials/hb/modules/blog/list.html | 17 ++++-- .../partials/hb/modules/blog/post/card.html | 32 ++++++---- layouts/partials/hb/modules/blog/posts.html | 3 +- layouts/partials/hb/modules/blog/sidebar.html | 3 + layouts/partials/hb/modules/blog/single.html | 61 +++++++++++-------- .../hb/modules/blog/taxonomies/toggle.html | 2 +- 13 files changed, 142 insertions(+), 62 deletions(-) create mode 100644 assets/hb/modules/blog/scss/_sidebar.scss create mode 100644 assets/hb/modules/blog/scss/variables.tmpl.scss create mode 100644 layouts/partials/hb/modules/blog/functions/has-sidebar.html create mode 100644 layouts/partials/hb/modules/blog/sidebar.html diff --git a/assets/hb/modules/blog/scss/_sidebar.scss b/assets/hb/modules/blog/scss/_sidebar.scss new file mode 100644 index 00000000..c297f2ab --- /dev/null +++ b/assets/hb/modules/blog/scss/_sidebar.scss @@ -0,0 +1,30 @@ +@if $hb-blog-sidebar { + .hb-blog-main-container { + @include media-breakpoint-up(lg) { + display: grid; + grid-gap: 1rem; + grid-template-areas: "sidebar main"; + grid-template-columns: 1fr 3fr; + } + + @include media-breakpoint-up(xl) { + grid-template-columns: 1fr 4fr; + } + } + + .hb-blog-sidebar { + grid-area: sidebar; + + @include media-breakpoint-up(lg) { + height: calc(100vh - 80px); + overflow: auto; + position: sticky; + top: 80px; + } + } + + .hb-blog-main { + grid-area: main; + overflow: hidden; + } +} diff --git a/assets/hb/modules/blog/scss/index.scss b/assets/hb/modules/blog/scss/index.scss index 691f9d08..1266ec60 100644 --- a/assets/hb/modules/blog/scss/index.scss +++ b/assets/hb/modules/blog/scss/index.scss @@ -3,4 +3,5 @@ $hb-blog-toc-top: 86px !default; @import "archives"; @import "home"; @import "post"; +@import "sidebar"; @import "terms"; diff --git a/assets/hb/modules/blog/scss/post/_main.scss b/assets/hb/modules/blog/scss/post/_main.scss index 937ef555..ebed0e13 100644 --- a/assets/hb/modules/blog/scss/post/_main.scss +++ b/assets/hb/modules/blog/scss/post/_main.scss @@ -1,5 +1,6 @@ .hb-blog-post { display: grid; + grid-gap: .5rem; grid-template-areas: "intro" "toc" diff --git a/assets/hb/modules/blog/scss/variables.tmpl.scss b/assets/hb/modules/blog/scss/variables.tmpl.scss new file mode 100644 index 00000000..dd37fa9c --- /dev/null +++ b/assets/hb/modules/blog/scss/variables.tmpl.scss @@ -0,0 +1,2 @@ +{{- $hasSidebar := partialCached "hb/modules/blog/functions/has-sidebar" . }} +$hb-blog-sidebar: {{ $hasSidebar }}; diff --git a/layouts/_default/term.html b/layouts/_default/term.html index 68f709a0..4d617445 100644 --- a/layouts/_default/term.html +++ b/layouts/_default/term.html @@ -4,15 +4,22 @@ {{- end -}} {{- define "main" }} - {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }} - {{ partialCached "hb/modules/blog/term/profile" . . }} -
- {{- range .Paginator.Pages }} -
- {{ partial "hb/modules/blog/post/card" (dict "Page" .) }} +
+
+ {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }} + {{ partialCached "hb/modules/blog/term/profile" . . }} +
+ {{- range .Paginator.Pages }} +
+ {{ partial "hb/modules/blog/post/card" (dict "Page" .) }} +
+ {{- end }}
- {{- end }} + {{ partial "hb/modules/pagination/index" .Paginator }} + {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }} +
+
+ {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-sidebar" "Page" .) }} +
- {{ partial "hb/modules/pagination/index" .Paginator }} - {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }} {{- end -}} diff --git a/layouts/partials/hb/modules/blog/functions/has-sidebar.html b/layouts/partials/hb/modules/blog/functions/has-sidebar.html new file mode 100644 index 00000000..a6bd6cd2 --- /dev/null +++ b/layouts/partials/hb/modules/blog/functions/has-sidebar.html @@ -0,0 +1,2 @@ +{{/* Check whether the sidebar is enabled. */}} +{{- return partialCached "hugopress/functions/has-modules" "hb-blog-sidebar" }} diff --git a/layouts/partials/hb/modules/blog/index.html b/layouts/partials/hb/modules/blog/index.html index cbecb56e..e3dc20df 100644 --- a/layouts/partials/hb/modules/blog/index.html +++ b/layouts/partials/hb/modules/blog/index.html @@ -4,7 +4,7 @@ {{- end }}
{{- $pinnedPages := first 1 (where $pages ".Params.pinned" true) }} -
+
{{- $featuredCount := default 10 site.Params.hb.blog.home.featured_posts }} {{- $featuredPages := first $featuredCount (where $pages ".Params.featured" true) }} {{- partial "hb/modules/carousel/carousel" (dict "Pages" $featuredPages) -}} @@ -15,10 +15,19 @@
{{- end }}
-{{- if default true site.Params.hb.blog.home.taxonomies }} - {{ partialCached "hb/modules/blog/home/taxonomies" . }} -{{- end }} -{{- with .Paginator }} - {{ partial "hb/modules/blog/posts" (dict "Pages" .Pages "Cols" "row-cols-1 row-cols-md-2 row-cols-lg-3") }} - {{ partial "hb/modules/pagination/index" . }} -{{- end }} +
+
+ {{- if default true site.Params.hb.blog.home.taxonomies }} + {{ partialCached "hb/modules/blog/home/taxonomies" . }} + {{- end }} + {{- with .Paginator }} + {{- $cols := "row-cols-1 row-cols-md-2" }} + {{- if not (partialCached "hb/modules/blog/functions/has-sidebar" .) }} + {{- $cols = printf "%s row-cols-lg-3" $cols }} + {{- end }} + {{ partial "hb/modules/blog/posts" (dict "Pages" .Pages "Cols" $cols) }} + {{ partial "hb/modules/pagination/index" . }} + {{- end }} +
+ {{ partial "hb/modules/blog/sidebar" . }} +
diff --git a/layouts/partials/hb/modules/blog/list.html b/layouts/partials/hb/modules/blog/list.html index 4a469481..630e676e 100644 --- a/layouts/partials/hb/modules/blog/list.html +++ b/layouts/partials/hb/modules/blog/list.html @@ -1,4 +1,13 @@ -{{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }} -{{ partial "hb/modules/blog/posts" (dict "Pages" .Paginator.Pages) }} -{{ partial "hb/modules/pagination/index" .Paginator }} -{{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }} +
+
+ {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }} + {{- $cols := "row-cols-1 row-cols-md-2" }} + {{- if not (partialCached "hb/modules/blog/functions/has-sidebar" .) }} + {{- $cols = printf "%s row-cols-lg-3" $cols }} + {{- end }} + {{ partial "hb/modules/blog/posts" (dict "Pages" .Paginator.Pages "Cols" $cols) }} + {{ partial "hb/modules/pagination/index" .Paginator }} + {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }} +
+ {{ partial "hb/modules/blog/sidebar" . }} +
diff --git a/layouts/partials/hb/modules/blog/post/card.html b/layouts/partials/hb/modules/blog/post/card.html index 35341bbe..c1b9353e 100644 --- a/layouts/partials/hb/modules/blog/post/card.html +++ b/layouts/partials/hb/modules/blog/post/card.html @@ -1,27 +1,35 @@ {{- $page := .Page }} {{- $summary := default true .Summary }} {{- $readingTime := default true .ReadingTime }} +{{- $meta := default true .Meta }}
-
- {{ partialCached "hb/modules/blog/post/meta/authors" $page $page }} - {{ partialCached "hb/modules/blog/post/meta/date" $page $page }} - {{- if $readingTime }} - {{ partialCached "hb/modules/blog/post/meta/reading-time" $page $page }} - {{- end }} - {{ partialCached "hb/modules/blog/post/meta/first-section" $page $page }} -
+ {{- if $meta }} +
+ {{ partialCached "hb/modules/blog/post/meta/authors" $page $page }} + {{ partialCached "hb/modules/blog/post/meta/date" $page $page }} + {{- if $readingTime }} + {{ partialCached "hb/modules/blog/post/meta/reading-time" $page $page }} + {{- end }} + {{ partialCached "hb/modules/blog/post/meta/first-section" $page $page }} +
+ {{- end }} {{- if default true site.Params.hb.blog.post_thumbnail }} {{ partial "hb/modules/blog/post/card-img" $page }} {{- end }}
- + {{- $page.Title -}}
-
- {{ partialCached "hb/modules/blog/post/meta/taxonomies" $page $page }} -
+ {{- if $meta }} +
+ {{ partialCached "hb/modules/blog/post/meta/taxonomies" $page $page }} +
+ {{- end }} {{- if $summary }}
{{- $page.Summary -}} diff --git a/layouts/partials/hb/modules/blog/posts.html b/layouts/partials/hb/modules/blog/posts.html index ce2cc4eb..203be120 100644 --- a/layouts/partials/hb/modules/blog/posts.html +++ b/layouts/partials/hb/modules/blog/posts.html @@ -2,7 +2,8 @@
{{ range .Pages }}
- {{ partialCached "hb/modules/blog/post/card" . . }} + {{- $ctx := dict "Page" . }} + {{ partial "hb/modules/blog/post/card" $ctx }}
{{ end }}
diff --git a/layouts/partials/hb/modules/blog/sidebar.html b/layouts/partials/hb/modules/blog/sidebar.html new file mode 100644 index 00000000..a95afecc --- /dev/null +++ b/layouts/partials/hb/modules/blog/sidebar.html @@ -0,0 +1,3 @@ +
+ {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-sidebar" "Page" .) }} +
diff --git a/layouts/partials/hb/modules/blog/single.html b/layouts/partials/hb/modules/blog/single.html index 5d5e3dc0..13765817 100644 --- a/layouts/partials/hb/modules/blog/single.html +++ b/layouts/partials/hb/modules/blog/single.html @@ -1,30 +1,37 @@ -{{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }} -
-
-

{{ .Title }}

-
- {{ partialCached "hb/modules/blog/post/meta/authors" . . }} - {{ partialCached "hb/modules/blog/post/meta/date" . . }} - {{ partialCached "hb/modules/blog/post/meta/reading-time" . . }} - {{ partialCached "hb/modules/blog/post/meta/taxonomies" . . }} +
+
+ {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }} +
+
+

{{ .Title }}

+
+ {{ partialCached "hb/modules/blog/post/meta/authors" . . }} + {{ partialCached "hb/modules/blog/post/meta/date" . . }} + {{ partialCached "hb/modules/blog/post/meta/reading-time" . . }} + {{ partialCached "hb/modules/blog/post/meta/taxonomies" . . }} +
+
+
+ {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-begin" "Page" .) }} + {{- partialCached "hb/modules/blog/post/toc" . . }} + {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-end" "Page" .) }} +
+
+ {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-begin" "Page" .) }} + {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-content-begin" "Page" .) }} + {{- $attributes := partial "hugopress/functions/render-attributes" (dict "Page" . "Name" "hb-blog-post-content") }} +
+ {{ .Content }} +
+ {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-content-end" "Page" .) }} + {{- partial "hb/modules/blog/post/comments" . }} + {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-end" "Page" .) }} +
+ {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }}
-
- {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-begin" "Page" .) }} - {{- partialCached "hb/modules/blog/post/toc" . . }} - {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-end" "Page" .) }} -
-
- {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-begin" "Page" .) }} - {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-content-begin" "Page" .) }} - {{- $attributes := partial "hugopress/functions/render-attributes" (dict "Page" . "Name" "hb-blog-post-content") }} -
- {{ .Content }} -
- {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-content-end" "Page" .) }} - {{- partial "hb/modules/blog/post/comments" . }} - {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-end" "Page" .) }} -
+ {{ partial "hb/modules/blog/sidebar" . }}
-{{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }} diff --git a/layouts/partials/hb/modules/blog/taxonomies/toggle.html b/layouts/partials/hb/modules/blog/taxonomies/toggle.html index e765e373..fa899923 100644 --- a/layouts/partials/hb/modules/blog/taxonomies/toggle.html +++ b/layouts/partials/hb/modules/blog/taxonomies/toggle.html @@ -42,7 +42,7 @@ {{- break }} {{- end }} {{- $term.Page.Title -}} {{- if $count }}