博客外链跳转到中间页
本文最后更新于 250 天前, 如有失效请评论区留言.
今天看到Koobai: HUGO 外链跳转到中间页, 他说的也很有道理，寻思怎么博客也给支持上哈。
实现
在他的基础上，我借鉴了一下
js操作
function checkParent(element, classNames) {
while (element) {
if (element.classList && classNames.some(cn => element.classList.contains(cn))) {
return true;
}
element = element.parentElement;
}
return false;
}
var excludedClasses = ['base-button']; // 添加需要排除的a标签类名class
window.addEventListener('load', (event) => {
document.body.addEventListener('click', function (e) {
let target = e.target;
while (target && target.nodeName !== 'A') {
target = target.parentNode;
}
if (target && target.nodeName === 'A' &&
!checkParent(target, excludedClasses) &&
target.href.startsWith('http') &&
!target.href.includes('ysicing.me') &&
!target.href.includes('ysicing.net') &&
!target.href.includes('12306.work') &&
!target.href.includes('github.com') &&
target.hostname !== window.location.hostname) {
e.preventDefault();
let encodedUrl = btoa(target.href); // Base64 encode the URL
let url = '/ops/tiaozhuan?target=' + encodedUrl;
window.open(url, '_blank');
}
});
});
因为全站都需要使用这个功能，所以我直接在main.js中添加了.
go程序
# 新增一个路由处理
app.Get("/ops/tiaozhuan", tiaozhuan)
来加载相关模版
func tiaozhuan(c *fiber.Ctx) error {
dstr := "https://ysicing.me"
domain := c.Query("target", "aHR0cHM6Ly95c2ljaW5nLm1lLw=")
d, err := base64.StdEncoding.DecodeString(domain)
if err == nil {
dstr = string(d)
}
if !strings.HasPrefix(dstr, "http") {
dstr = "https://" + dstr
}
suddomain := strings.Split(dstr, "//")[1]
suddomain = strings.Split(suddomain, "/")[0]
dstr = strings.TrimRight(dstr, "\n")
log.Debugf("tiaozhuan to [%s]", dstr)
c.Status(http.StatusOK).Render("default/tiaozhuan", injectSiteData(c, fiber.Map{
"title": c.Locals(solitudes.CtxTranslator).(*translator.Translator).T("tiaozhuan"),
"domain": dstr,
"subdomain": suddomain,
}))
return nil
}
模板处理
在模板default目录下，新建一个 html，如tiaozhuan.html
{{define "default/tiaozhuan"}}
{{template "default/header" .}}
<body class="max-width mx-auto px3 ltr">
{{template "default/menu" .}}
<article class="post" itemscope="" itemtype="http://schema.org/BlogPosting">
<div class="content" itemprop="articleBody">
<section id="tz">
<span class="h2">{{.Tr.T "tzmsg"}}</span>
<div class="row">
<div class="tiaozhuan-info">请自行识别该链接 <b>{{.Data.subdomain}}</b> 是否安全，并保管好个人信息。</div>
<div class="base-button">
<a href='{{.Data.domain}}' target="_blank">{{.Tr.T "tiaozhuan"}}</a>
</div>
</div>
</section>
</div>
</article>
{{template "default/footer" .}}
{{end}}
完结
发布，基本就结束了。
原理
js文件识别a标签，同时base64编码url，然后通过go程序解码，渲染模板，返回给浏览器，浏览器打开新页面。
其他
如果有问题，可以和我反馈😂。
