hugo-bearblog : add _index.md for blog and add random color gimmick

This commit is contained in:
minoplhy 2024-03-09 17:59:51 +07:00
parent e437c66e80
commit afc4681a01
Signed by: minoplhy
GPG Key ID: 41D406044E2434BF
3 changed files with 37 additions and 1 deletions

View File

@ -6,6 +6,8 @@
<a href="{{ "blog" | relURL }}">Remove filter</a>
</small>
{{ end }}
<!-- blog/_index.md content will goes here. -->
{{ .Content }}
<ul class="blog-posts">
{{ range .Pages }}
<li>
@ -16,7 +18,7 @@
</time>
</i>
</span>
<a href="{{ .Permalink }}">{{ .Title }}</a>
<a class="random-color blog-link" href="{{ .Permalink }}">{{ .Title }}</a>
</li>
{{ else }}
<li>
@ -24,6 +26,9 @@
</li>
{{ end }}
</ul>
{{- partial "random_color.html" -}}
{{ if .Data.Singular }}
{{else}}
<small>

View File

@ -0,0 +1,27 @@
<script>
const links = document.querySelectorAll('.random-color');
// To avoid too bright and too dark color being generated
function getRandomColor(minBrightness = 100, maxBrightness = 230) {
// Generate random color components within a specific brightness range
let red = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
let green = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
let blue = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
// Convert components to hexadecimal string format
red = red.toString(16).padStart(2, '0');
green = green.toString(16).padStart(2, '0');
blue = blue.toString(16).padStart(2, '0');
return `#${red}${green}${blue}`;
}
function setRandomColors() {
links.forEach(link => {
link.style.color = getRandomColor();
});
}
window.onload = setRandomColors;
</script>

View File

@ -126,6 +126,10 @@
color: #8b6fcb;
}
.blog-link {
text-decoration: none;
}
.dark-mode {
background-color: #333;
color: #ddd;