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命令

 

posted @ 2024-08-23 11:33  总统先生  阅读(1)  评论(0编辑  收藏  举报