该 HTML 模板用于创建一个 GO 页面，旨在在用户访问外部链接时提供提示和倒计时功能。页面采用简洁的设计风格，使用 CSS 自定义颜色和布局，确保在不同设备上都能良好显示。主要组件包括容器、卡片、警告图标、访问提示标题、目标 URL 显示框、警告文本，以及包含继续访问和返回按钮的操作区域。页面顶部展示一个 logo，底部为版权信息，并显示使用的 ShortLinks 插件。JavaScript 部分实现了动态倒计时功能，用户可在倒计时时间内点击继续访问或返回。倒计时结束后，继续访问按钮文本将变更为“正在跳转...”，同时提供了返回按钮用于取消跳转。整体设计关注用户体验，提醒用户谨慎访问可能存在风险的外部链接。
Spimes 《小灯泡主题+绑定插件Deng》
NewAdmin 《后台美化》
TePass 《积分付费》
ShortLinks 《go页面》
picates 《批量增加分类》
TEReplace 《快速替换Typecho标题/内容关键字插件》
<!--ShortLinks插件新增GO页面样式-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="{{delay}};url='{{url}}';">
<title>{{title}} - 即将访问</title>
<style>
:root {
--primary-color: #1a73e8;
--warning-color: #fbbc04;
--text-primary: #2d3748;
--text-secondary: #718096;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body {
background: #f7fafc;
line-height: 1.6;
color: var(--text-primary);
}
.container {
max-width: 768px;
margin: 2rem auto;
padding: 0 1rem;
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.header {
padding: 1.5rem;
border-bottom: 1px solid #e2e8f0;
}
.logo {
height: 40px;
}
.content {
padding: 2rem 1.5rem;
}
.warning-icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
display: block;
}
.title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
}
.url-box {
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
margin: 1.5rem 0;
word-break: break-all;
border: 1px solid #e2e8f0;
}
.warning-text {
color: var(--warning-color);
font-weight: 500;
margin: 1.5rem 0;
}
.actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.btn {
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
transition: var(--transition);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: var(--primary-color);
color: white !important;
}
.btn-secondary {
color: var(--text-secondary);
border: 1px solid #e2e8f0;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.footer {
text-align: center;
margin-top: 2rem;
color: var(--text-secondary);
font-size: 0.875rem;
}
.progress-bar {
height: 4px;
background: #e2e8f0;
margin-top: 1.5rem;
border-radius: 2px;
overflow: hidden;
}
.progress {
width: 100%;
height: 100%;
background: var(--primary-color);
animation: progress {{delay}}s linear forwards;
}
@keyframes progress {
from { width: 100%; }
to { width: 0; }
}
@media (max-width: 480px) {
.container {
margin: 1rem auto;
}
.btn {
flex: 1 1 100%;
justify-content: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="header">
<img src="{{logoUrl}}" alt="{{title}} Logo" class="logo">
</div>
<div class="content">
<svg class="warning-icon" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="144" height="144" viewBox="0 0 48 48">
<linearGradient id="SVGID_1__mlGFFVpf8RJs_gr1" x1="33.252" x2="14.748" y1="7.976" y2="40.024" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#60fea4"></stop><stop offset=".033" stop-color="#6afeaa"></stop><stop offset=".197" stop-color="#97fec4"></stop><stop offset=".362" stop-color="#bdffd9"></stop><stop offset=".525" stop-color="#daffea"></stop><stop offset=".687" stop-color="#eefff5"></stop><stop offset=".846" stop-color="#fbfffd"></stop><stop offset="1" stop-color="#fff"></stop></linearGradient><circle cx="24" cy="24" r="18.5" fill="url(#SVGID_1__mlGFFVpf8RJs_gr1)"></circle><path fill="none" stroke="#10e36c" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M34.282,39.382C31.342,41.351,27.805,42.5,24,42.5C13.783,42.5,5.5,34.217,5.5,24 c0-4.423,1.552-8.484,4.142-11.667"></path><path fill="none" stroke="#10e36c" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M20.103,5.911C21.359,5.642,22.663,5.5,24,5.5c10.217,0,18.5,8.283,18.5,18.5c0,2.864-0.651,5.576-1.813,7.996"></path><polyline fill="none" stroke="#10e36c" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" points="16.5,24.5 21.5,29.5 31.5,19.5"></polyline>
</svg>
<h1 class="title">访问提示</h1>
<div class="url-box">
{{url}}
</div>
<div class="warning-text">
请注意：该网页不属于 "{{title}}"，可能存在未知风险，请谨慎访问！
</div>
<div class="progress-bar">
<div class="progress"></div>
</div>
<div class="actions">
<a href="{{url}}" class="btn btn-primary" rel="nofollow" id="continueBtn">
继续访问《<span id="countdown">{{delay}}</span>》秒
</a>
<a href="{{siteUrl}}" class="btn btn-secondary" rel="nofollow" id="returnBtn">
返回咻商店
</a>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © {{siteCreatedYear}}-{{currentYear}}
<a href="{{siteUrl}}" target="_blank">{{title}}</a>
• Powered by ShortLinks
</p>
</div>
</div>
<script>
// 动态倒计时功能
let currentTime = parseInt(document.getElementById('countdown').textContent);
const countdownElement = document.getElementById('countdown');
const continueBtn = document.getElementById('continueBtn');
// 倒计时更新函数
const updateCountdown = () => {
currentTime -= 1;
countdownElement.textContent = currentTime;
if(currentTime <= 0) {
clearInterval(timer);
continueBtn.innerHTML = '正在跳转...';
}
};
// 启动计时器
let timer = setInterval(updateCountdown, 1000);
// 返回按钮点击处理
document.getElementById('returnBtn').addEventListener('click', () => {
clearInterval(timer);
document.querySelector('.progress').style.animationPlayState = 'paused';
countdownElement.textContent = '0';
continueBtn.innerHTML = '跳转已取消';
continueBtn.removeAttribute('href');
});
</script>
</body>
</html>原创文章，作者：xiyoyo，如若转载，请注明出处：https://store.xiyoyo.cn/archives/9/
