mirror of
https://github.com/CaiJimmy/hugo-theme-stack.git
synced 2024-11-23 10:21:46 +01:00
feat: article page widget support (#488)
* feat: article page widget support * refactor: get rid of article toolbar Same 3 column layout for article page and homepage * add missing space
This commit is contained in:
Jimmy Cai
GitHub
parent
0fbbc12949
commit
4d552a9df5
13 changed files with 71 additions and 133 deletions
|
|
@ -122,67 +122,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-page.has-toc {
|
|
||||||
.left-sidebar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-sidebar {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
@include respond(xl) {
|
|
||||||
display: block;
|
|
||||||
top: var(--main-top-padding);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#article-toolbar {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
@include respond(md) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include respond(xl) {
|
|
||||||
margin-top: 0;
|
|
||||||
position: sticky;
|
|
||||||
top: var(--main-top-padding);
|
|
||||||
flex-shrink: 1;
|
|
||||||
|
|
||||||
a {
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
border: 1px solid var(--body-text-color);
|
|
||||||
width: 100%;
|
|
||||||
margin-right: 0;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-container {
|
|
||||||
align-items: start;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
@include respond(xl) {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
padding-top: 0;
|
|
||||||
|
|
||||||
@include respond(xl) {
|
|
||||||
padding-top: var(--main-top-padding);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.widget--toc {
|
.widget--toc {
|
||||||
background-color: var(--card-background);
|
background-color: var(--card-background);
|
||||||
border-radius: var(--card-border-radius);
|
border-radius: var(--card-border-radius);
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-sidebar {
|
.right-sidebar {
|
||||||
flex-shrink: 0;
|
width: 100%;
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&.sticky {
|
&.sticky {
|
||||||
|
|
|
||||||
12
config.yaml
12
config.yaml
|
|
@ -108,16 +108,8 @@ params:
|
||||||
id:
|
id:
|
||||||
|
|
||||||
widgets:
|
widgets:
|
||||||
enabled:
|
homepage: []
|
||||||
- search
|
page: []
|
||||||
- archives
|
|
||||||
- tag-cloud
|
|
||||||
|
|
||||||
archives:
|
|
||||||
limit: 5
|
|
||||||
|
|
||||||
tagCloud:
|
|
||||||
limit: 10
|
|
||||||
|
|
||||||
opengraph:
|
opengraph:
|
||||||
twitter:
|
twitter:
|
||||||
|
|
|
||||||
|
|
@ -132,16 +132,16 @@ params:
|
||||||
host:
|
host:
|
||||||
id:
|
id:
|
||||||
widgets:
|
widgets:
|
||||||
enabled:
|
homepage:
|
||||||
- search
|
- type: search
|
||||||
- archives
|
- type: archives
|
||||||
- tag-cloud
|
params:
|
||||||
|
limit: 5
|
||||||
archives:
|
- type: tag-cloud
|
||||||
limit: 5
|
params:
|
||||||
|
limit: 10
|
||||||
tagCloud:
|
page:
|
||||||
limit: 10
|
- type: toc
|
||||||
|
|
||||||
opengraph:
|
opengraph:
|
||||||
twitter:
|
twitter:
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,8 @@
|
||||||
</head>
|
</head>
|
||||||
<body class="{{ block `body-class` . }}{{ end }}">
|
<body class="{{ block `body-class` . }}{{ end }}">
|
||||||
{{- partial "head/colorScheme" . -}}
|
{{- partial "head/colorScheme" . -}}
|
||||||
<div class="container main-container flex {{ block `container-class` . }}on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}{{ end }}">
|
{{- $hasWidget := default (gt (len .Site.Params.widgets.homepage) 0) (.Scratch.Get "hasWidget") -}}
|
||||||
|
<div class="container main-container flex on-phone--column {{ if $hasWidget }}extended{{ else }}compact{{ end }}">
|
||||||
{{- block "left-sidebar" . -}}
|
{{- block "left-sidebar" . -}}
|
||||||
{{ partial "sidebar/left.html" . }}
|
{{ partial "sidebar/left.html" . }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
|
||||||
|
|
@ -77,5 +77,5 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "right-sidebar" }}
|
{{ define "right-sidebar" }}
|
||||||
{{ partialCached "sidebar/right.html" . }}
|
{{ partial "sidebar/right.html" (dict "Context" . "Scope" "homepage") }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,15 +1,26 @@
|
||||||
{{ define "body-class" }}
|
{{ define "body-class" }}
|
||||||
{{ $TOCEnabled := default (default false .Site.Params.article.toc) .Params.toc }}
|
article-page
|
||||||
{{- .Scratch.Set "hasTOC" (and (ge (len .TableOfContents) 100) $TOCEnabled) -}}
|
{{/*
|
||||||
article-page {{ if (.Scratch.Get "hasTOC") }}has-toc{{ end }}
|
Enable the right sidebar if
|
||||||
{{ end }}
|
- Widget different from 'TOC' is enabled
|
||||||
|
- TOC is enabled and not empty
|
||||||
|
*/}}
|
||||||
|
{{- $HasWidgetNotTOC := false -}}
|
||||||
|
{{- $TOCWidgetEnabled := false -}}
|
||||||
|
{{- range .Site.Params.widgets.page -}}
|
||||||
|
{{- if ne .type "toc" -}}
|
||||||
|
{{ $HasWidgetNotTOC = true -}}
|
||||||
|
{{- else -}}
|
||||||
|
{{ $TOCWidgetEnabled = true -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
|
||||||
{{ define "container-class" }}
|
{{- $TOCManuallyDisabled := eq .Params.toc false -}}
|
||||||
{{ if (.Scratch.Get "hasTOC") }}
|
{{- $TOCEnabled := and (not $TOCManuallyDisabled) $TOCWidgetEnabled -}}
|
||||||
extended
|
{{- $hasTOC := ge (len .TableOfContents) 100 -}}
|
||||||
{{ else }}
|
{{- .Scratch.Set "TOCEnabled" (and $TOCEnabled $hasTOC) -}}
|
||||||
on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
|
|
||||||
{{ end }}
|
{{- .Scratch.Set "hasWidget" (or $HasWidgetNotTOC (and $TOCEnabled $hasTOC)) -}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
|
|
@ -30,32 +41,6 @@
|
||||||
{{ partialCached "article/components/photoswipe" . }}
|
{{ partialCached "article/components/photoswipe" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "left-sidebar" }}
|
|
||||||
{{ if (.Scratch.Get "hasTOC") }}
|
|
||||||
<div id="article-toolbar">
|
|
||||||
<a href="{{ .Site.BaseURL | relLangURL }}" class="back-home">
|
|
||||||
{{ (resources.Get "icons/back.svg").Content | safeHTML }}
|
|
||||||
<span>{{ T "article.back" }}</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{{ else }}
|
|
||||||
{{ partial "sidebar/left.html" . }}
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ define "right-sidebar" }}
|
{{ define "right-sidebar" }}
|
||||||
{{ if (.Scratch.Get "hasTOC") }}
|
{{ if .Scratch.Get "hasWidget" }}{{ partial "sidebar/right.html" (dict "Context" . "Scope" "page") }}{{ end}}
|
||||||
<aside class="sidebar right-sidebar sticky">
|
|
||||||
<section class="widget archives">
|
|
||||||
<div class="widget-icon">
|
|
||||||
{{ partial "helper/icon" "hash" }}
|
|
||||||
</div>
|
|
||||||
<h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
|
|
||||||
|
|
||||||
<div class="widget--toc">
|
|
||||||
{{ .TableOfContents }}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</aside>
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -15,5 +15,5 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ define "right-sidebar" }}
|
{{ define "right-sidebar" }}
|
||||||
{{ partial "sidebar/right.html" . }}
|
{{ partial "sidebar/right.html" (dict "Context" . "Scope" "homepage") }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,8 +1,13 @@
|
||||||
{{ if .Site.Params.widgets.enabled }}
|
{{- $scope := default "homepage" .Scope -}}
|
||||||
{{ $context := . }}
|
{{- $context := .Context -}}
|
||||||
|
{{- with (index .Context.Site.Params.widgets $scope) -}}
|
||||||
<aside class="sidebar right-sidebar sticky">
|
<aside class="sidebar right-sidebar sticky">
|
||||||
{{ range $widget := .Site.Params.widgets.enabled }}
|
{{ range $widget := . }}
|
||||||
{{ partial (printf "widget/%s" $widget) $context }}
|
{{ if templates.Exists (printf "partials/widget/%s.html" .type) }}
|
||||||
|
{{ partial (printf "widget/%s" .type) (dict "Context" $context "Params" .params) }}
|
||||||
|
{{ else }}
|
||||||
|
{{ warnf "Widget %s not found" .type }}
|
||||||
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</aside>
|
</aside>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
{{- $query := first 1 (where .Site.Pages "Layout" "==" "archives") -}}
|
{{- $query := first 1 (where .Context.Site.Pages "Layout" "==" "archives") -}}
|
||||||
|
{{- $context := .Context -}}
|
||||||
|
{{- $limit := default 5 .Params.limit -}}
|
||||||
{{- if $query -}}
|
{{- if $query -}}
|
||||||
{{- $archivesPage := index $query 0 -}}
|
{{- $archivesPage := index $query 0 -}}
|
||||||
<section class="widget archives">
|
<section class="widget archives">
|
||||||
|
|
@ -7,17 +9,17 @@
|
||||||
</div>
|
</div>
|
||||||
<h2 class="widget-title section-title">{{ T "widget.archives.title" }}</h2>
|
<h2 class="widget-title section-title">{{ T "widget.archives.title" }}</h2>
|
||||||
|
|
||||||
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
|
{{ $pages := where $context.Site.RegularPages "Type" "in" $context.Site.Params.mainSections }}
|
||||||
{{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
|
{{ $notHidden := where $context.Site.RegularPages "Params.hidden" "!=" true }}
|
||||||
{{ $filtered := ($pages | intersect $notHidden) }}
|
{{ $filtered := ($pages | intersect $notHidden) }}
|
||||||
{{ $archives := $filtered.GroupByDate "2006" }}
|
{{ $archives := $filtered.GroupByDate "2006" }}
|
||||||
|
|
||||||
<div class="widget-archive--list">
|
<div class="widget-archive--list">
|
||||||
{{ range $index, $item := first (add .Site.Params.widgets.archives.limit 1) ($archives) }}
|
{{ range $index, $item := first (add $limit 1) ($archives) }}
|
||||||
{{- $id := lower (replace $item.Key " " "-") -}}
|
{{- $id := lower (replace $item.Key " " "-") -}}
|
||||||
<div class="archives-year">
|
<div class="archives-year">
|
||||||
<a href="{{ $archivesPage.RelPermalink }}#{{ $id }}">
|
<a href="{{ $archivesPage.RelPermalink }}#{{ $id }}">
|
||||||
{{ if eq $index $.Site.Params.widgets.archives.limit }}
|
{{ if eq $index $limit }}
|
||||||
<span class="year">{{ T "widget.archives.more" }}</span>
|
<span class="year">{{ T "widget.archives.more" }}</span>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
<span class="year">{{ .Key }}</span>
|
<span class="year">{{ .Key }}</span>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
{{- $query := first 1 (where .Site.Pages "Layout" "==" "search") -}}
|
{{- $query := first 1 (where .Context.Site.Pages "Layout" "==" "search") -}}
|
||||||
{{- if $query -}}
|
{{- if $query -}}
|
||||||
{{- $searchPage := index $query 0 -}}
|
{{- $searchPage := index $query 0 -}}
|
||||||
<form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
|
<form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
{{- $context := .Context -}}
|
||||||
|
{{- $limit := default 10 .Params.limit -}}
|
||||||
<section class="widget tagCloud">
|
<section class="widget tagCloud">
|
||||||
<div class="widget-icon">
|
<div class="widget-icon">
|
||||||
{{ partial "helper/icon" "tag" }}
|
{{ partial "helper/icon" "tag" }}
|
||||||
|
|
@ -5,7 +7,7 @@
|
||||||
<h2 class="widget-title section-title">{{ T "widget.tagCloud.title" }}</h2>
|
<h2 class="widget-title section-title">{{ T "widget.tagCloud.title" }}</h2>
|
||||||
|
|
||||||
<div class="tagCloud-tags">
|
<div class="tagCloud-tags">
|
||||||
{{ range first .Site.Params.widgets.tagCloud.limit .Site.Taxonomies.tags.ByCount }}
|
{{ range first $limit $context.Site.Taxonomies.tags.ByCount }}
|
||||||
<a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
|
<a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
|
||||||
{{ .Page.Title }}
|
{{ .Page.Title }}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
12
layouts/partials/widget/toc.html
Normal file
12
layouts/partials/widget/toc.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
{{ if (.Context.Scratch.Get "TOCEnabled") }}
|
||||||
|
<section class="widget archives">
|
||||||
|
<div class="widget-icon">
|
||||||
|
{{ partial "helper/icon" "hash" }}
|
||||||
|
</div>
|
||||||
|
<h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
|
||||||
|
|
||||||
|
<div class="widget--toc">
|
||||||
|
{{ .Context.TableOfContents }}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
Loading…
Reference in a new issue