Git/hugo-theme-wondermod
1
0
Fork 0
mirror of https://github.com/Wonderfall/hugo-WonderMod.git synced 2025-10-30 19:35:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add list dynamic background

Browse Source
This commit is contained in:
nanxiaobei
2019-09-15 06:55:10 +08:00
parent 1b6c1399bb
commit ee1f7e5aee
3 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/partials/footer.html
View File

@@ -7,6 +7,6 @@
<span>Theme️ <a href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank">Paper</a></span> <span>Theme️ <a href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank">Paper</a></span>
</footer> </footer>
<script src="{{ "highlight.min.js" | absURL }}"></script> <script src="{{ "highlight.min.js" | absURL }}"></script>
<script>hljs.initHighlightingOnLoad();</script> <script src="{{ "main.js" | absURL }}"></script>
</body> </body>
</html> </html>

3
layouts/partials/header.html
View File

@@ -38,6 +38,9 @@
{{ end }} {{ end }}
</head> </head>
<body class="{{if eq .Kind `page` }}single{{else}}list{{ if .IsHome }} home{{ end }}{{end}}"> <body class="{{if eq .Kind `page` }}single{{else}}list{{ if .IsHome }} home{{ end }}{{end}}">
{{if ne .Kind `page` }}
<div class="list-bg"></div>
{{end}}
<header class="header"> <header class="header">
<nav class="nav"> <nav class="nav">
{{ if .IsHome }} {{ if .IsHome }}

24
static/main.js Normal file
View File

@@ -0,0 +1,24 @@
hljs.initHighlightingOnLoad();
const listBg = document.querySelector('.list-bg');
if (listBg) {
const halfAnHour = 1000 * 60 * 30;
function setListBgStyle() {
const now = new Date();
const time = now.getHours() + now.getMinutes() / 60;
let opacity = Math.abs(time - 14);
opacity = opacity > 12 ? 10 + Math.abs(opacity - 14) : opacity;
opacity = Number((opacity / 12).toFixed(2));
listBg.setAttribute('style', `opacity: ${opacity}`);
}
requestAnimationFrame(setListBgStyle);
setInterval(() => {
requestAnimationFrame(setListBgStyle);
}, halfAnHour);
}