修改Joe再续前缘主题跳转界面美化教程

由于Joe再续前缘主题1.34版本中的跳转界面外部引用css文件失效，导致这个界面显示异常

跳转界面

于是我找ai帮我生成了一个跳转界面，下面我就分享给大家，直接复制粘贴即可，修改usr/themes/Joe/module中的goto.php文件

效果图

修改前的goto.php代码

1
<?php
2
if (!defined('__TYPECHO_ROOT_DIR__') || empty($_SERVER['HTTP_HOST'])) {
3
  http_response_code(404);
4
  exit;
5
}
6
?>
7
<!DOCTYPE html>
8
<html lang='zh-CN'>
9

10
<head>
11
  <meta name="referrer" content="no-referrer">
12
  <title>即将跳转到外部网站 - <?= Helper::options()->title ?></title>
13
  <meta content='noindex, nofollow' name='robots'>
14
  <meta charset='utf-8'>
15
  <link rel="shortcut icon" href="<?= Helper::options()->JFavicon ?>" />
16
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.0, user-scalable=no' name='viewport'>
17
  <link rel="stylesheet" media="all" href="https://cn-assets.gitee.com/assets/external_link/app-cdbd476d857bfad8751f35a067840adf.css" />
18
</head>
19

20
<body>
21
  <div class='gitee-external-link-wrapper'>
22
    <img class="logo-img" src="<?= Helper::options()->JLogo ?>" alt="Logo black" />
23
    <div class='content-box'>
24
      <div class='content-title'>即将跳转到外部网站</div>
25
      <div class='content-text'>您将要访问的链接不属于 <?= Helper::options()->title ?> ，请关注您的账号安全。</div>
26
      <div class='content-link'>
27
        <div class='external-link-href'></div>
28
      </div>
29
      <div style="background:#409eff" class='ui button orange external-link-btn'>继续前往</div>
30
    </div>
31
  </div>
32
</body>
33

34
</html>
35
<script>
36
  window.is_black = false;
37
  (function() {
38
    var e = document.querySelector(".external-link-href");
39
    // var t = window.atob(new URLSearchParams(location.search).get("url"));
40
    var t = `<?= $location ?>`;
41
    if (t && (e.innerText = t, !window.is_black)) {
42
      var n = document.querySelector(".external-link-btn");
43
      n && n.addEventListener("click", function() {
44
        window.location.href = t
45
      })
46
    }
47
  }());
48
</script>

修改后的goto.php文件

1
<?php
2
if (!defined('__TYPECHO_ROOT_DIR__') || empty($_SERVER['HTTP_HOST'])) {
3
  http_response_code(404);
4
  exit;
5
}
6
?>
7
<!DOCTYPE html>
8
<html lang='zh-CN'>
9

10
<head>
11
  <meta name="referrer" content="no-referrer">
12
  <title>即将跳转到外部网站 - <?= $this->options->title ?></title>
13
  <meta content='noindex, nofollow' name='robots'>
14
  <meta charset='utf-8'>
15
  <link rel="shortcut icon" href="<?= $this->options->JFavicon ?>" />
16
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.0, user-scalable=no' name='viewport'>
17
</head>
18

19
<body>
20
    <style>
21
           * {
22
            margin: 0;
23
            padding: 0;
24
            box-sizing: border-box;
25
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
26
        }
27

28
        body {
29
            min-height: 100vh;
30
            display: flex;
31
            justify-content: center;
32
            align-items: center;
33
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
34
                        url('https://t.alcy.cc/fj') center/cover fixed;
35
            padding: 20px;
36
        }
37

38
        .container {
39
            background: rgba(255, 255, 255, 0.15);
40
            backdrop-filter: blur(12px) saturate(180%);
41
            -webkit-backdrop-filter: blur(12px) saturate(180%);
42
            border-radius: 20px;
43
            padding: 40px;
44
            max-width: 600px;
45
            width: 90%;
46
            text-align: center;
47
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
48
            border: 1px solid rgba(255, 255, 255, 0.15);
49
        }
50

51
        h1 {
52
            color: #fff;
53
            margin-bottom: 20px;
54
            font-size: 2.2em;
55
            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
56
        }
57

58
        p {
59
            color: rgba(255, 255, 255, 0.95);
60
            line-height: 1.6;
61
            margin: 15px 0;
62
            font-size: 1.1em;
63
        }
64

65
        .time {
66
            color: #FFD740;
67
            font-weight: 600;
68
            font-size: 1.2em;
69
            margin: 20px 0;
70
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
71
        }
72

73
        .loader {
74
            width: 50px;
75
            height: 50px;
76
            border: 4px solid rgba(255, 255, 255, 0.2);
77
            border-top-color: #fff;
78
            border-radius: 50%;
79
            margin: 20px auto;
80
            animation: spin 1s linear infinite;
81
        }
82

83
        @keyframes spin {
84
            to { transform: rotate(360deg); }
85
        }
86

87
        .external-link-btn {
88
            background: rgba(255, 255, 255, 0.25);
89
            color: #fff;
90
            border: none;
91
            padding: 12px 30px;
92
            border-radius: 30px;
93
            font-size: 1em;
94
            cursor: pointer;
95
            margin-top: 20px;
96
            transition: all 0.3s ease;
97
            backdrop-filter: blur(4px);
98
            font-weight: 500;
99
        }
100

101
        .refresh-btn:hover {
102
            background: rgba(255, 255, 255, 0.35);
103
            transform: translateY(-2px);
104
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
105
        }
106

107
        @media (max-width: 480px) {
108
            .container {
109
                padding: 25px;
110
            }
111
            h1 {
112
                font-size: 1.8em;
113
            }
114
            p {
115
                font-size: 1em;
116
            }
117
        }
118
    </style>
119
  <div class="container">
120
        <div class="loader"></div>
121
        <h1>即将跳转到外部网站</h1>
122
        <p>您将要访问的链接不属于 <?= $this->options->title ?> ，请关注您的账号安全</p>
123
                   <div class='content-link'>
124
        <div class='external-link-href'></div>
125
      </div>
126
        <button class="ui button orange external-link-btn">继续前往</button>
127
    </div>
128
    </div>
129
</body>
130

131
</html>
132
<script>
133
  window.is_black = false;
134
  (function() {
135
    var e = document.querySelector(".external-link-href");
136
    var t = window.atob(new URLSearchParams(location.search).get("url"));
137
    if (t && (e.innerText = t, !window.is_black)) {
138
      var n = document.querySelector(".external-link-btn");
139
      n && n.addEventListener("click", function() {
140
        window.location.href = t
141
      })
142
    }
143
  }());
144
</script>