hugo-bear-blog : support 'lastmod' and add darkmode toggle
This commit is contained in:
parent
cbfa056a96
commit
e437c66e80
@ -1,6 +1,7 @@
|
|||||||
+++
|
+++
|
||||||
title = "{{ replace .Name "-" " " | title }}"
|
title = "{{ replace .Name "-" " " | title }}"
|
||||||
date = "{{ .Date }}"
|
date = "{{ .Date }}"
|
||||||
|
lastmod = "{{ .Lastmod }}
|
||||||
|
|
||||||
#
|
#
|
||||||
# description is optional
|
# description is optional
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
{{ end -}}
|
{{ end -}}
|
||||||
|
|
||||||
{{- partial "style.html" . -}}
|
{{- partial "style.html" . -}}
|
||||||
|
{{- partial "script.html" . -}}
|
||||||
|
|
||||||
<!-- A partial to be overwritten by the user.
|
<!-- A partial to be overwritten by the user.
|
||||||
Simply place a custom_head.html into
|
Simply place a custom_head.html into
|
||||||
@ -37,6 +38,7 @@
|
|||||||
<!-- A partial to be overwritten by the user.
|
<!-- A partial to be overwritten by the user.
|
||||||
Simply place a custom_body.html into
|
Simply place a custom_body.html into
|
||||||
your local /layouts/partials-directory -->
|
your local /layouts/partials-directory -->
|
||||||
|
{{- partial "script_bottom.html" -}}
|
||||||
{{- partial "custom_body.html" . -}}
|
{{- partial "custom_body.html" . -}}
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
@ -6,6 +6,12 @@
|
|||||||
<time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
|
<time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
|
||||||
{{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
|
{{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
|
||||||
</time>
|
</time>
|
||||||
|
{{ if ne .Lastmod .Date }}
|
||||||
|
/ <b>EDIT :
|
||||||
|
<time datetime='{{ .Lastmod.Format "2006-01-02" }}'>
|
||||||
|
{{ .Lastmod.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
|
||||||
|
</time></b>
|
||||||
|
{{ end }}
|
||||||
</i>
|
</i>
|
||||||
</p>
|
</p>
|
||||||
{{ end }}{{ end }}
|
{{ end }}{{ end }}
|
||||||
|
@ -5,3 +5,6 @@
|
|||||||
{{ with .Site.GetPage "/blog" }}
|
{{ with .Site.GetPage "/blog" }}
|
||||||
<a href="{{ "blog" | relURL }}">Blog</a>
|
<a href="{{ "blog" | relURL }}">Blog</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
<a id="dark-mode-button" onclick="darkmode()" >
|
||||||
|
<span>Toggle-Dark-Mode</span>
|
||||||
|
</a>
|
25
layouts/partials/script.html
Normal file
25
layouts/partials/script.html
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<script>
|
||||||
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') === null) {
|
||||||
|
localStorage.setItem('dark-mode', 'true');
|
||||||
|
}
|
||||||
|
|
||||||
|
function darkmode() {
|
||||||
|
if (localStorage.getItem('dark-mode') === 'false') {
|
||||||
|
darkmode_enable();
|
||||||
|
} else if (localStorage.getItem('dark-mode') === null) {
|
||||||
|
darkmode_enable();
|
||||||
|
} else {
|
||||||
|
darkmode_disable();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function darkmode_enable() {
|
||||||
|
document.body.classList.add("dark-mode");
|
||||||
|
localStorage.setItem('dark-mode', 'true');
|
||||||
|
}
|
||||||
|
|
||||||
|
function darkmode_disable() {
|
||||||
|
document.body.classList.remove("dark-mode");
|
||||||
|
localStorage.setItem('dark-mode', 'false');
|
||||||
|
}
|
||||||
|
</script>
|
5
layouts/partials/script_bottom.html
Normal file
5
layouts/partials/script_bottom.html
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
if (localStorage.getItem('dark-mode') === 'true') {
|
||||||
|
darkmode_enable()
|
||||||
|
}
|
||||||
|
</script>
|
@ -126,48 +126,46 @@
|
|||||||
color: #8b6fcb;
|
color: #8b6fcb;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
.dark-mode {
|
||||||
body {
|
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
.dark-mode h1,
|
||||||
h2,
|
.dark-mode h2,
|
||||||
h3,
|
.dark-mode h3,
|
||||||
h4,
|
.dark-mode h4,
|
||||||
h5,
|
.dark-mode h5,
|
||||||
h6,
|
.dark-mode h6,
|
||||||
strong,
|
.dark-mode strong,
|
||||||
b {
|
.dark-mode b {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.dark-mode a {
|
||||||
color: #8cc2dd;
|
color: #8cc2dd;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
.dark-mode code {
|
||||||
background-color: #777;
|
background-color: #777;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre code {
|
.dark-mode pre code {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
.dark-mode blockquote {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea,
|
.dark-mode textarea,
|
||||||
input {
|
.dark-mode input {
|
||||||
background-color: #252525;
|
background-color: #252525;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.helptext {
|
.dark-mode .helptext {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user