show tags / categories directly at articles

This commit is contained in:
Lars Hoogestraat 2022-02-05 16:04:26 +01:00
parent de218b35b0
commit 53e91d8c91
10 changed files with 133 additions and 43 deletions

View File

@ -2,11 +2,15 @@
## Features ## Features
- Responsive - Responsive
- Dark / Light mode Theme - Honors dark and light color preference
- Syntax highlighting for dark and light theme - Syntax highlighting for dark and light colors
- Left and bottom navigation - Left and bottom navigation
- Layout for an archive page - Layout for an archive page
## Demo
- https://hugodemo.hoogi.eu
## Screenshot ## Screenshot
- Dark mode - Dark mode
@ -34,13 +38,16 @@
# Configuration # Configuration
It is currently just 'useSummary' available for configuring. To inject custom HEAD elements create a "head-custom.html" in '<YOUR_SITE>/layouts/partials'.
If set to 'true' a summary will be shown on list overview,
otherwise the complete post is shown. For changing colors see the overridden link visited example for the dark theme in 'exampleSite/layouts/partials/head-custom.html'.
``` ```
[Params] [params]
useSummary = true | false # If set to 'true' a summary will be shown on list overview, otherwise the complete post is shown.
useSummary = true | false
# Shows a right sidebar with all categories.
sidebar = true | false
``` ```
## License ## License

View File

@ -12,6 +12,7 @@ relativeURLs = false
[params] [params]
useSummary = true useSummary = true
sidebar = true
description = 'An example description' description = 'An example description'
[permalinks] [permalinks]

View File

@ -0,0 +1,7 @@
<style>
@media (prefers-color-scheme: dark) {
:root {
--link-visited-text-color: gray;
}
}
</style>

View File

@ -2,15 +2,16 @@
{{ range .Paginator.Pages }} {{ range .Paginator.Pages }}
<article> <article>
<header> <header>
<h1><a href="{{.Permalink}}">{{.Title}}</a></h1> {{ partial "article-header.html" . }}
<p>{{ if .Date }} written {{ if .Params.Author }} by {{ .Params.Author }} {{ end }} on <time>{{ .Date.Format "Jan 2, 2006" }}</time>{{ end }}</p>
</header> </header>
{{ if .Site.Params.useSummary }} {{ if .Site.Params.useSummary }}
{{ .Summary }} {{ .Summary }}
<p style="text-align: right"><a href='{{ .Permalink }}'>Read more &raquo;</a></p> {{ partial "article-footer.html" . }}
{{ else }} {{ else }}
{{.Content}} {{.Content}}
{{ partial "article-footer.html" . }}
{{ end }} {{ end }}
</article> </article>

View File

@ -0,0 +1,12 @@
<footer>
<div class="read-more"><a href='{{ .Permalink }}'>Read more &raquo;</a></div>
{{ if .Params.tags }}
<div class="tags">Tags:
{{ range .Params.tags }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">#{{ . }}</a>
{{ end }}
</div>
{{end}}
</footer>

View File

@ -0,0 +1,17 @@
<h1>
{{ if eq (.Scratch.Get "scope") "single" }}
{{.Title}}
{{ else }}
<a href="{{.Permalink}}">{{.Title}}</a>
{{ end }}
</h1>
<p>
{{ if .Date }} written {{ if .Params.Author }} by {{ .Params.Author }} {{ end }} on
<time>{{ .Date.Format "Jan 2, 2006" }}</time>{{ end }}
{{ if .Params.categories }}
in
{{ range .Params.categories }}
<a href="{{ $.Site.BaseURL }}categories/{{ . | urlize }}">{{ . | humanize }}</a>
{{ end }}
{{ end }}
</p>

View File

@ -1,4 +1,4 @@
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">

23
layouts/posts/list.html Normal file
View File

@ -0,0 +1,23 @@
{{ define "main" }}
{{ .Scratch.Set "scope" "list" }}
{{ range .Paginator.Pages }}
<article>
<header>
{{ partial "article-header.html" . }}
</header>
{{ if .Site.Params.useSummary }}
{{ .Summary }}
{{ partial "article-footer.html" . }}
{{ else }}
{{.Content}}
{{ partial "article-footer.html" . }}
{{ end }}
</article>
{{ end }}
{{ partial "pagination.html" . }}
{{ end }}

View File

@ -1,8 +1,8 @@
{{ define "main" }} {{ define "main" }}
{{ .Scratch.Set "scope" "single" }}
<article> <article>
<header> <header>
<h1>{{.Title}}</h1> {{ partial "article-header.html" . }}
{{ if .Date }}<p>written {{ if .Params.Author }} by {{ .Params.Author }} {{ end }} on <time datetime="{{.Date }}">{{ .Date.Format "Jan 2, 2006" }}</time></p>{{ end }}
</header> </header>
{{ .Content }} {{ .Content }}
</article> </article>

View File

@ -13,19 +13,24 @@
@font-face { @font-face {
font-family: 'rubik'; font-family: 'rubik';
font-style: normal;
font-weight: normal;
src: url("fonts/Rubik-Regular.ttf"); src: url("fonts/Rubik-Regular.ttf");
font-display: swap
} }
@font-face { @font-face {
font-family: 'rubik'; font-family: 'rubik';
src: url("fonts/Rubik-Bold.ttf"); src: url("fonts/Rubik-Bold.ttf");
font-weight: bold; font-weight: bold;
font-display: swap
} }
@font-face { @font-face {
font-family: 'rubik'; font-family: 'rubik';
src: url("fonts/Rubik-Italic.ttf"); src: url("fonts/Rubik-Italic.ttf");
font-style: italic; font-style: italic;
font-display: swap
} }
@font-face { @font-face {
@ -33,6 +38,7 @@
src: url("fonts/Rubik-BoldItalic.ttf"); src: url("fonts/Rubik-BoldItalic.ttf");
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
font-display: swap
} }
html { html {
@ -63,6 +69,7 @@ body {
--footer-bg-color: #1f1f1f;; --footer-bg-color: #1f1f1f;;
--footer-text-color: #ffffff; --footer-text-color: #ffffff;
--footer-active-link-color: #ffffff;
--headline-text-color: #285e8e; --headline-text-color: #285e8e;
--article-box-bg-color: #f8f8f8; --article-box-bg-color: #f8f8f8;
@ -89,6 +96,7 @@ body {
--footer-bg-color: #1f1f1f;; --footer-bg-color: #1f1f1f;;
--footer-text-color: #ffffff; --footer-text-color: #ffffff;
--footer-active-link-color: #ffffff;
--article-box-bg-color: #1f1f1f; --article-box-bg-color: #1f1f1f;
--headline-text-color: #3a8cd3; --headline-text-color: #3a8cd3;
@ -173,13 +181,13 @@ a:visited {
/* /*
* Layout positioning * Layout positioning
*/ */
main { #container>main {
grid-area: content; grid-area: content;
width: 100%; width: 100%;
padding: 0 1em 1em 1em; padding: 0 1em 1em 1em;
} }
header#page-header { #container>header#page-header {
display: flex; display: flex;
grid-area: header; grid-area: header;
align-items: center; align-items: center;
@ -187,13 +195,13 @@ header#page-header {
background-color: var(--header-bg-color); background-color: var(--header-bg-color);
} }
nav { #container>nav {
grid-area: nav; grid-area: nav;
background-color: var(--nav-bg-color); background-color: var(--nav-bg-color);
font-size: 1.1em; font-size: 1.1em;
} }
aside { #container>aside {
color: var(--nav-text-color); color: var(--nav-text-color);
grid-area: sidebar; grid-area: sidebar;
background-color: var(--nav-bg-color); background-color: var(--nav-bg-color);
@ -214,16 +222,16 @@ header#page-header {
* Navigation styles left and right side * Navigation styles left and right side
*/ */
aside ul li:first-child { #container>aside ul li:first-child {
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
font-size: 1.3em; font-size: 1.3em;
border-bottom: 0.0625rem solid var(--nav-border-color); border-bottom: 0.0625rem solid var(--nav-border-color);
} }
aside a, #container>aside a,
nav a, #container>nav a,
aside a:visited, #container>aside a:visited,
nav a:visited { #container>nav a:visited {
color: var(--nav-text-color); color: var(--nav-text-color);
display: inline-block; display: inline-block;
border-bottom: 0.0625rem solid var(--nav-border-color); border-bottom: 0.0625rem solid var(--nav-border-color);
@ -232,19 +240,19 @@ nav a:visited {
text-decoration: none; text-decoration: none;
} }
nav a:active, #container>nav a:active,
nav a:hover, #container>nav a:hover,
nav a:active, #container>nav a:active,
nav a.active { #container>nav a.active {
color: var(--nav-hover-color); color: var(--nav-hover-color);
background-color: var(--nav-hover-bg-color); background-color: var(--nav-hover-bg-color);
border-right: 0.3125rem solid var(--nav-border-color); border-right: 0.3125rem solid var(--nav-border-color);
} }
aside a:active, #container>aside a:active,
aside a:hover, #container>aside a:hover,
aside a:active, #container>aside a:active,
aside a.active { #container>aside a.active {
color: var(--nav-hover-color); color: var(--nav-hover-color);
background-color: var(--nav-hover-bg-color); background-color: var(--nav-hover-bg-color);
border-left: 0.3125rem solid var(--nav-border-color); border-left: 0.3125rem solid var(--nav-border-color);
@ -253,7 +261,7 @@ aside a.active {
/** /**
* Footer styles * Footer styles
*/ */
footer { #container>footer {
grid-area: footer; grid-area: footer;
background-color: var(--footer-bg-color); background-color: var(--footer-bg-color);
color: var(--footer-text-color); color: var(--footer-text-color);
@ -261,39 +269,39 @@ footer {
font-size: 0.9em; font-size: 0.9em;
} }
footer p { #container>footer p {
padding-top: 5px; padding-top: 5px;
padding-left: 5px; padding-left: 5px;
margin: auto; margin: auto;
} }
footer ul { #container>footer ul {
list-style-type: none; list-style-type: none;
} }
footer ul li { #container>footer ul li {
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
padding: 5px 0; padding: 5px 0;
} }
footer a, #container>footer a,
footer a:visited { #container>footer a:visited {
color: var(--footer-text-color); color: var(--footer-text-color);
width: 100%; width: 100%;
text-decoration: underline; text-decoration: underline;
} }
footer a:active, #container>footer a:active,
footer a:hover, #container>footer a:hover,
footer a:active, #container>ooter a:active,
footer a.active { #container>footer a.active {
color: #fff; color: var(--footer-active-link-color);
text-decoration: none; text-decoration: none;
} }
nav li, #container>nav li,
aside li { #container>aside li {
list-style-type: none; list-style-type: none;
} }
@ -407,6 +415,20 @@ article th {
font-weight: bold; font-weight: bold;
} }
article footer {
text-align: left;
}
article footer .tags {
text-align: left;
font-size: 0.9em;
}
article footer div.read-more {
text-align: right;
}
.footnotes { .footnotes {
margin-top: 0.4em; margin-top: 0.4em;
font-size: 0.7em; font-size: 0.7em;