IT博客汇 | 博客外链跳转到中间页

博客外链跳转到中间页

ysicing (i@ysicing.me)发表于 2024-02-22 15:17:06

今天看到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程序解码，渲染模板，返回给浏览器，浏览器打开新页面。

其他

如果有问题，可以和我反馈😂。