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命令
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
2023-08-23 链接收藏
2020-08-23 身份证照片批量打印