show tags / categories directly at articles
This commit is contained in:
parent
de218b35b0
commit
53e91d8c91
21
README.md
21
README.md
|
@ -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
|
||||||
|
|
|
@ -12,6 +12,7 @@ relativeURLs = false
|
||||||
|
|
||||||
[params]
|
[params]
|
||||||
useSummary = true
|
useSummary = true
|
||||||
|
sidebar = true
|
||||||
description = 'An example description'
|
description = 'An example description'
|
||||||
|
|
||||||
[permalinks]
|
[permalinks]
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
<style>
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--link-visited-text-color: gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -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 »</a></p>
|
{{ partial "article-footer.html" . }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{.Content}}
|
{{.Content}}
|
||||||
|
|
||||||
|
{{ partial "article-footer.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
<footer>
|
||||||
|
<div class="read-more"><a href='{{ .Permalink }}'>Read more »</a></div>
|
||||||
|
|
||||||
|
{{ if .Params.tags }}
|
||||||
|
<div class="tags">Tags:
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">#{{ . }}</a>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
{{end}}
|
||||||
|
|
||||||
|
</footer>
|
|
@ -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>
|
|
@ -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">
|
||||||
|
|
||||||
|
|
|
@ -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 }}
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue