linux使用WebStack-Hugo主题搭建导航网站
主要步骤:
1、linux 安装hugo:参考:https://cloud.tencent.com/developer/article/1834210
2、使用主题模板,参考 shenweiyan/WebStack-Hugo: WebStack 网址导航 Hugo 主题,无需服务器,支持导航一键配置的纯静态网址导航网站
3、修改配置文件:网站根目录(themes的上一级目录)的toml文件、data子文件夹里的yml文件。
4、hugo -D生成静态文件到public
5、宝塔面板修改网站根目录路径。
添加点击链接-倒计时跳转功能
(由通意灵码生成)
1、在themes/WebStack-Hugo/static/assets路径,新增文件countdown.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Redirecting...</title> <style> body { text-align: center; } </style> <script> let seconds = 3; //倒计时3秒 const redirectUrl = sessionStorage.getItem('redirectUrl'); function countdown() { if (seconds === 0) { window.location.href = redirectUrl; } else { document.getElementById('timer').textContent = seconds; seconds--; setTimeout(countdown, 1000); } } window.onload = function() { countdown(); }; </script> </head> <body> <h1>Redirecting in <span id="timer"></span> seconds...</h1> </body> </html>
2、修改themes/WebStack-Hugo/layouts/partials 中的header.html 文件,文末</head>前添加一下代码
<script> document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('a').forEach(link => { link.addEventListener('click', function(event) { event.preventDefault(); // 阻止默认行为 const url = new URL(this.href); if (url.protocol !== 'javascript:' &&!url.hostname.includes('yourdomain.com')) { // 替换为你的域名。排除javascript sessionStorage.setItem('redirectUrl', url.href); // 存储目标URL window.open('countdown.html', '_blank'); // 打开新标签页 } else { window.location.href = this.href; } }); }); }); </script>
3、在网站根目录(themes的上一级目录)里执行 hugo -D命令