Typecho实现简单独立页面跳转

qiangzai

发布于 2021-12-21 08:34:34

2.3K0

文章被收录于专栏：强仔博客强仔博客

博客友链是一个网站必不可少的一部分，简单的 a 标签跳转外链早已不够新颖，很多网站也引入了独立的跳转页，这样能更好的给访客留下深刻印象，其中引用的技术只是一段简单的js代码

图文教程

1.首页我们创建一个独立页面 Typecho博客创建新页面时间要想访问到我们自己创建的指定目录文件，必须后台开启伪静态，这样我们访问到我们创建的目录文件就可以直接域名/xx.html 了

2.引入JS和HTML代码这里如果你的博客用了什么编辑器，就需要用到他们编辑器指定的页面规则，这里我用的md编辑器，当前如果要在文章页面里引入网页元素，就需要用一对 !!! 把代码包起来

JS跳转代码

<script>
// 获取当前url地址
var url = window.location.href;
// 截取传递的url参数
url = url.match(/url=(\S*)/)[1];
document.getElementById("UrlId").href = url;
// 获取秒数显示id
var seconds = document.getElementById("seconds");
// 设置秒数
var num = 3;
var timer = setInterval(function () {
num--;
seconds.innerText = num;
if(num == 0){
window.location.href = url;
}
},1000)
</script>

显示秒数代码

我们可以定义一个秒数，秒数颜色可以自定义样式，显示不同文本颜色，更显眼

    <h1>您将在<span id="seconds">3</span>秒后进入强仔博客友链</h1>
    <p>亲亲欢迎联系强仔互换友链哦</p>
    <p>当前正在努力跳转中……</p>
    <a id="UrlId" href="">点我马上进入</a>

最后看一下简单效果我创建的是https://q6q.cc/haha.html

$(document).ready(function(){$(".galleryidpost").lightGallery({selector: ".yoniu-index-img",share: false,share: false,showThumbByDefault: false,autoplayControls: false});});

所以后面加上参数url=即可，

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-01-021，如有侵权请联系 cloudcommunity@tencent.com 删除

https