feat: add tags to post pages (#193)

uci-hugo-doc
Robert Kaussow 2021-09-01 10:18:00 +02:00 committed by GitHub
parent 95417625bb
commit 3f296625fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 203 additions and 29 deletions

View File

@ -20,9 +20,13 @@ markup:
startLevel: 1 startLevel: 1
endLevel: 9 endLevel: 9
taxonomies:
tag: tags
params: params:
# geekdocMenuBundle: true # geekdocMenuBundle: true
geekdocToC: 3 geekdocToC: 3
geekdocTagsToMenu: true
geekdocRepo: https://github.com/thegeeklab/hugo-geekdoc geekdocRepo: https://github.com/thegeeklab/hugo-geekdoc
geekdocEditPath: edit/main/exampleSite/content geekdocEditPath: edit/main/exampleSite/content

View File

@ -2,6 +2,8 @@
title: Hello Geekdoc title: Hello Geekdoc
type: posts type: posts
date: 2020-01-06 date: 2020-01-06
tags:
- Documentation
--- ---
This is the first release of the Geekdoc theme. This is the first release of the Geekdoc theme.

View File

@ -29,6 +29,9 @@ enableGitInfo = true
startLevel = 1 startLevel = 1
endLevel = 9 endLevel = 9
[taxonomies]
tag = "tags"
[params] [params]
# (Optional, default 6) Set how many table of contents levels to be showed on page. # (Optional, default 6) Set how many table of contents levels to be showed on page.
# Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/) # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
@ -97,6 +100,9 @@ enableGitInfo = true
# (Optional, default true) Display a "Back to top" link in the site footer. # (Optional, default true) Display a "Back to top" link in the site footer.
geekdocBackToTop = true geekdocBackToTop = true
# (Optional, default false) Enable or disable adding tags for post pages automatically to the navigation sidebar.
geekdocTagsToMenu = true
``` ```
{{< /tab >}} {{< /tab >}}
@ -123,6 +129,9 @@ markup:
startLevel: 1 startLevel: 1
endLevel: 9 endLevel: 9
taxonomies:
tag: tags
params: params:
# (Optional, default 6) Set how many table of contents levels to be showed on page. # (Optional, default 6) Set how many table of contents levels to be showed on page.
# Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/) # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
@ -196,6 +205,9 @@ params:
# (Optional, default true) Display a "Back to top" link in the site footer. # (Optional, default true) Display a "Back to top" link in the site footer.
geekdocBackToTop: true geekdocBackToTop: true
# (Optional, default false) Enable or disable adding tags for post pages automatically to the navigation sidebar.
geekdocTagsToMenu: true
``` ```
{{< /tab >}} {{< /tab >}}

View File

@ -63,6 +63,9 @@ To prepare your new site environment just a few steps are required:
[markup.tableOfContents] [markup.tableOfContents]
startLevel = 1 startLevel = 1
endLevel = 9 endLevel = 9
[taxonomies]
tag = "tags"
``` ```
5. Test your site. 5. Test your site.

View File

@ -1,5 +1,6 @@
{{ define "main" }} {{ define "main" }}
{{ partial "page-header" . }} {{ partial "page-header" . }}
<article class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.GeekdocAlign | lower) }}"> <article class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.GeekdocAlign | lower) }}">
<h1>{{ partial "title" . }}</h1> <h1>{{ partial "title" . }}</h1>
{{ partial "content" . }} {{ partial "content" . }}

View File

@ -10,6 +10,22 @@
{{ end }} {{ end }}
</section> </section>
{{ if and (in (slice "posts" "tags") .Section) (default false .Site.Params.GeekdocTagsToMenu) }}
<section class="gdoc-nav--tags">
<h2>Tags</h2>
<ul class="gdoc-nav__list">
{{ $currentPage := .RelPermalink }}
{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
{{ with $.Site.GetPage (printf "/tags/%s" $name) }}
<li>
<a class="gdoc-nav__entry {{ if eq $currentPage .RelPermalink }} is-active {{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a>
</li>
{{ end }}
{{ end }}
</ul>
</section>
{{ end }}
<section class="gdoc-nav--more"> <section class="gdoc-nav--more">
{{ if .Site.Data.menu.more.more }} {{ if .Site.Data.menu.more.more }}
<h2>More</h2> <h2>More</h2>

View File

@ -3,24 +3,60 @@
<article class="gdoc-markdown gdoc-post"> <article class="gdoc-markdown gdoc-post">
<header class="gdoc-post__header"> <header class="gdoc-post__header">
<h1 class="gdoc-post__title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1> <h1 class="gdoc-post__title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
<div class="gdoc-post__date">
<svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
<time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
Updated on
{{ end }}
{{ .Lastmod.Format "Jan 2, 2006" }}
</time>
</div>
</header> </header>
<section> <section>
{{ .Summary }} {{ .Summary }}
</section> </section>
{{ if .Truncated }}
<div class="gdoc-post__readmore"> <div class="gdoc-post__readmore">
{{ if .Truncated }}
<a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a> <a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
</div>
{{ end }} {{ end }}
</div>
<footer class="gdoc-post__footer">
<span class="no-wrap">
<svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
<span class="gdoc-post__tag">
<time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
Updated on
{{ end }}
{{ .Lastmod.Format "Jan 2, 2006" }}
</time>
</span>
</span>
<span class="no-wrap">
<svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
<span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
</span>
{{ $tc := 0 }}
{{ with .Params.tags }}
{{ range sort . }}
{{ $name := . }}
{{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
{{ if eq $tc 0 }}
<span class="no-wrap">
<svg class="icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
{{ template "post-tag" dict "name" $name "page" . }}
</span>
{{ else }}
{{ template "post-tag" dict "name" $name "page" . }}
{{ end }}
{{ end }}
{{ $tc = (add $tc 1) }}
{{ end }}
{{ end }}
</footer>
</article> </article>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ define "post-tag" }}
<span class="gdoc-post__tag">
<span class="gdoc-button">
<a class="gdoc-button__link" href="{{ .page.RelPermalink }}" title="All posts tagged with '{{ .name }}'">{{ .name }}</a>
</span>
</span>
{{ end }}

View File

@ -2,14 +2,23 @@
<article class="gdoc-markdown gdoc-post"> <article class="gdoc-markdown gdoc-post">
<header class="gdoc-post__header"> <header class="gdoc-post__header">
<h1 class="gdoc-post__title">{{ .Title }}</h1> <h1 class="gdoc-post__title">{{ .Title }}</h1>
<div class="gdoc-post__date"> <div class="gdoc-post__meta">
<span class="no-wrap">
<svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg> <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
<span class="gdoc-post__tag">
<time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}"> <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }} {{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
Updated on Updated on
{{ end }} {{ end }}
{{ .Lastmod.Format "Jan 2, 2006" }} {{ .Lastmod.Format "Jan 2, 2006" }}
</time> </time>
</span>
</span>
<span class="no-wrap">
<svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
<span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
</span>
</div> </div>
</header> </header>
<div> <div>

View File

@ -0,0 +1,62 @@
{{ define "main" }}
{{ range .Paginator.Pages }}
<article class="gdoc-markdown gdoc-post">
<header class="gdoc-post__header">
<h1 class="gdoc-post__title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
</header>
<section>
{{ .Summary }}
</section>
<div class="gdoc-post__readmore">
{{ if .Truncated }}
<a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
{{ end }}
</div>
<footer class="gdoc-post__footer">
<span class="no-wrap">
<svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
<span class="gdoc-post__tag">
<time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ if .Lastmod.After (.Date.AddDate 0 0 1) }}
Updated on
{{ end }}
{{ .Lastmod.Format "Jan 2, 2006" }}
</time>
</span>
</span>
<span class="no-wrap">
<svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
<span class="gdoc-post__tag">{{ .ReadingTime }} min read</span>
</span>
{{ $tc := 0 }}
{{ with .Params.tags }}
{{ range sort . }}
{{ $name := . }}
{{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
{{ if eq $tc 0 }}
<span class="no-wrap">
<svg class="icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
{{ template "post-tag" dict "name" $name "page" . }}
</span>
{{ else }}
{{ template "post-tag" dict "name" $name "page" . }}
{{ end }}
{{ end }}
{{ $tc = (add $tc 1) }}
{{ end }}
{{ end }}
</footer>
</article>
{{ end }}
{{ end }}
{{ define "post-tag" }}
<span class="gdoc-post__tag">
<span class="gdoc-button">
<a class="gdoc-button__link" href="{{ .page.RelPermalink }}" title="All posts tagged with '{{ .name }}'">{{ .name }}</a>
</span>
</span>
{{ end }}

5
src/icons/timer.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>timer</title>
<path d="M16 29q4.428 0 7.536-3.143t3.107-7.571-3.107-7.536-7.536-3.107-7.536 3.107-3.107 7.536 3.107 7.571 7.536 3.143zM26.714 9.786q1.214 1.571 2.107 4.036t0.893 4.464q0 5.643-4 9.678t-9.714 4.036-9.714-4.036-4-9.678 4-9.678 9.714-4.036q1.929 0 4.464 0.929t4.107 2.143l2.143-2.214q1.143 0.929 2.143 2.143zM14.5 19.857v-9.143h3v9.143h-3zM20.571 0.001v3.071h-9.143v-3.071h9.143z"></path>
</svg>

After

Width:  |  Height:  |  Size: 547 B

View File

@ -278,7 +278,7 @@ img {
cursor: pointer; cursor: pointer;
.icon { .icon {
font-size: 0.7rem; font-size: $font-size-12;
} }
} }
@ -311,6 +311,7 @@ img {
font-weight: bold; font-weight: bold;
} }
&--tags,
&--more { &--more {
padding-top: $padding-8; padding-top: $padding-8;
} }
@ -437,14 +438,6 @@ img {
} }
} }
&__date {
margin: 1em 0;
.icon {
font-size: 1.2em;
}
}
&:first-child { &:first-child {
border-top: 0; border-top: 0;
@ -468,6 +461,33 @@ img {
text-decoration: none !important; text-decoration: none !important;
} }
} }
&__tag {
margin: $padding-4 0 !important;
.gdoc-button {
background: var(--body-background);
&__link {
padding: $padding-4 $padding-8;
}
}
}
&__meta {
padding-bottom: $padding-16;
}
&__footer,
&__meta {
:not(:first-child).no-wrap {
margin-left: $padding-8;
}
.icon {
font-size: $font-size-20;
}
}
} }
.gdoc-footer { .gdoc-footer {

View File

@ -57,6 +57,10 @@
text-align: center; text-align: center;
} }
.no-wrap {
white-space: nowrap;
}
.hidden { .hidden {
display: none; display: none;
} }