由于Joe再续前缘主题1.34版本中的跳转界面外部引用css文件失效，导致这个界面显示异常
于是我找ai帮我生成了一个跳转界面，下面我就分享给大家，直接复制粘贴即可，修改usr/themes/Joe/module中的goto.php文件
效果图
修改前的goto.php代码
<?php
if (!defined('__TYPECHO_ROOT_DIR__') || empty($_SERVER['HTTP_HOST'])) {
http_response_code(404);
exit;
}
?>
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta name="referrer" content="no-referrer">
<title>即将跳转到外部网站 - <?= Helper::options()->title ?></title>
<meta content='noindex, nofollow' name='robots'>
<meta charset='utf-8'>
<link rel="shortcut icon" href="<?= Helper::options()->JFavicon ?>" />
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.0, user-scalable=no' name='viewport'>
<link rel="stylesheet" media="all" href="https://cn-assets.gitee.com/assets/external_link/app-cdbd476d857bfad8751f35a067840adf.css" />
</head>
<body>
<div class='gitee-external-link-wrapper'>
<img class="logo-img" src="<?= Helper::options()->JLogo ?>" alt="Logo black" />
<div class='content-box'>
<div class='content-title'>即将跳转到外部网站</div>
<div class='content-text'>您将要访问的链接不属于 <?= Helper::options()->title ?> ，请关注您的账号安全。</div>
<div class='content-link'>
<div class='external-link-href'></div>
</div>
<div style="background:#409eff" class='ui button orange external-link-btn'>继续前往</div>
</div>
</div>
</body>
</html>
<script>
window.is_black = false;
(function() {
var e = document.querySelector(".external-link-href");
// var t = window.atob(new URLSearchParams(location.search).get("url"));
var t = `<?= $location ?>`;
if (t && (e.innerText = t, !window.is_black)) {
var n = document.querySelector(".external-link-btn");
n && n.addEventListener("click", function() {
window.location.href = t
})
}
}());
</script>修改后的goto.php文件
<?php
if (!defined('__TYPECHO_ROOT_DIR__') || empty($_SERVER['HTTP_HOST'])) {
http_response_code(404);
exit;
}
?>
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta name="referrer" content="no-referrer">
<title>即将跳转到外部网站 - <?= $this->options->title ?></title>
<meta content='noindex, nofollow' name='robots'>
<meta charset='utf-8'>
<link rel="shortcut icon" href="<?= $this->options->JFavicon ?>" />
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.0, user-scalable=no' name='viewport'>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
url('https://t.alcy.cc/fj') center/cover fixed;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 20px;
padding: 40px;
max-width: 600px;
width: 90%;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.15);
}
h1 {
color: #fff;
margin-bottom: 20px;
font-size: 2.2em;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}
p {
color: rgba(255, 255, 255, 0.95);
line-height: 1.6;
margin: 15px 0;
font-size: 1.1em;
}
.time {
color: #FFD740;
font-weight: 600;
font-size: 1.2em;
margin: 20px 0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.loader {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top-color: #fff;
border-radius: 50%;
margin: 20px auto;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.external-link-btn {
background: rgba(255, 255, 255, 0.25);
color: #fff;
border: none;
padding: 12px 30px;
border-radius: 30px;
font-size: 1em;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
font-weight: 500;
}
.refresh-btn:hover {
background: rgba(255, 255, 255, 0.35);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 480px) {
.container {
padding: 25px;
}
h1 {
font-size: 1.8em;
}
p {
font-size: 1em;
}
}
</style>
<div class="container">
<div class="loader"></div>
<h1>即将跳转到外部网站</h1>
<p>您将要访问的链接不属于 <?= $this->options->title ?> ，请关注您的账号安全</p>
<div class='content-link'>
<div class='external-link-href'></div>
</div>
<button class="ui button orange external-link-btn">继续前往</button>
</div>
</div>
</body>
</html>
<script>
window.is_black = false;
(function() {
var e = document.querySelector(".external-link-href");
var t = window.atob(new URLSearchParams(location.search).get("url"));
if (t && (e.innerText = t, !window.is_black)) {
var n = document.querySelector(".external-link-btn");
n && n.addEventListener("click", function() {
window.location.href = t
})
}
}());
</script>
评论 (0)