From af491dac12e931027d9eaf1f37cef75628b8d53c Mon Sep 17 00:00:00 2001
From: Vaica <94612053+zqlit@users.noreply.github.com>
Date: Sat, 24 Jan 2026 17:08:10 +0800
Subject: [PATCH] =?UTF-8?q?fixed=20=E8=AF=84=E8=AE=BA=E5=8C=BA=E5=A4=9C?=
 =?UTF-8?q?=E9=97=B4=E6=A8=A1=E5=BC=8Fbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Ying/assets/js/mypjax.js             |  20 +-
 themes/Ying/layouts/_default/tiaozhuan.html | 350 +++++++++++++-------
 2 files changed, 249 insertions(+), 121 deletions(-)

diff --git a/themes/Ying/assets/js/mypjax.js b/themes/Ying/assets/js/mypjax.js
index 60109f1b..db6b19a5 100644
--- a/themes/Ying/assets/js/mypjax.js
+++ b/themes/Ying/assets/js/mypjax.js
@@ -177,15 +177,29 @@ document.addEventListener("pjax:complete", function () {
     initCodeCopy()
     // 重载评论
     if (document.querySelector("#Comments")) {
+        var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        // 默认配置作为后备
+        var serverUrl = 'https://artalk.usj.cc';
+        var siteName = '优世界';
+        var emoticons = '/emotion/OwO.json';
+
+        // 尝试从 window.siteConfig 获取配置
+        if (window.siteConfig && window.siteConfig.artalk) {
+            serverUrl = window.siteConfig.artalk.server || serverUrl;
+            siteName = window.siteConfig.artalk.site || siteName;
+            emoticons = window.siteConfig.artalk.emoticons || emoticons;
+        }
+
         Artalk.init({
             el: '#Comments',                // 绑定元素的 Selector
-            server: 'https://artalk.usj.cc',  // 后端地址
-            site: '优世界',             // 你的站点名
+            server: serverUrl,  // 后端地址
+            site: siteName,             // 你的站点名
             // 使用全局变量或 DOM 读取 pageKey
             // 必须动态获取当前页面的 pid (RelPermalink)
             pageKey: document.getElementById('data-pid')?.textContent?.trim() || location.pathname,
             flatMode: true,
-            emoticons: '/emotion/OwO.json'
+            darkMode: isDark,
+            emoticons: emoticons
         })
     }
     // 重载评论弹幕
diff --git a/themes/Ying/layouts/_default/tiaozhuan.html b/themes/Ying/layouts/_default/tiaozhuan.html
index 51d696b1..57052bc2 100644
--- a/themes/Ying/layouts/_default/tiaozhuan.html
+++ b/themes/Ying/layouts/_default/tiaozhuan.html
@@ -5,156 +5,270 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover">
     <meta name="fragment" content="!">
+    <script>
+        (function() {
+            var theme = localStorage.getItem('theme');
+            if (!theme) {
+                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    theme = 'dark';
+                } else {
+                    theme = 'light';
+                }
+            }
+            document.documentElement.setAttribute('data-theme', theme);
+        })();
+    </script>
     <title>即将离开{{ site.Title }}</title>
     <style>
-        .page__link__wrapper {
-            padding: 0 16px;
-            padding-top: 64px;
-            color: var(--B8-t);
-            max-width: 788px;
-            margin: auto;
+        :root {
+            --bg-color: #f3f4f6;
+            --card-bg: #ffffff;
+            --text-primary: #111827;
+            --text-secondary: #4b5563;
+            --text-tertiary: #9ca3af;
+            --accent-color: #000000;
+            --accent-hover: #333333;
+            --accent-text: #ffffff;
+            --code-bg: #f9fafb;
+            --code-text: #6b7280;
+            --border-color: #e5e7eb;
+            --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
         }
 
-        @media (min-width: 1024px) {
-            .page__link__wrapper {
-                padding-top: 164px;
-            }
+        [data-theme="dark"] {
+            --bg-color: #0f172a;
+            --card-bg: #1e293b;
+            --text-primary: #f3f4f6;
+            --text-secondary: #9ca3af;
+            --text-tertiary: #6b7280;
+            --accent-color: #3b82f6;
+            --accent-hover: #2563eb;
+            --accent-text: #ffffff;
+            --code-bg: #020617;
+            --code-text: #94a3b8;
+            --border-color: #334155;
+            --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
         }
 
-        .page__link__wrapper .page__link {
-            background: var(--B1-t);
-            border-radius: 20px;
-            padding: 32px;
+        * {
+            box-sizing: border-box;
         }
 
-        @media (min-width: 1024px) {
-            .page__link__wrapper .page__link {
-                padding: 64px 80px 48px;
-            }
+        body {
+            background-color: var(--bg-color);
+            margin: 0;
+            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            color: var(--text-primary);
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
 
-        .page__link__wrapper .page__link .page__header {
-            text-align: center;
-        }
-
-        .page__link__wrapper .page__link .page__header img {
-            width: 112px;
-        }
-
-        @media (min-width: 1024px) {
-            .page__link__wrapper .page__link .page__header img {
-                width: 128px;
-            }
-        }
-
-        .page__link__wrapper .page__link .page__title {
-            font-size: 20px;
-            line-height: 28px;
-            font-weight: 500;
-            margin-top: 24px;
-            margin-bottom: 8px;
-            text-align: center;
-        }
-
-        .page__link__wrapper .page__link .page__desc {
-            font-size: 14px;
-            line-height: 20px;
-            text-align: center;
-            max-width: 494px;
-            margin: auto;
-            margin-bottom: 32px;
-        }
-
-        .page__link__wrapper .page__link .page__target {
-            cursor: pointer;
-            border-radius: 16px;
-            background: var(--B0);
-            font-size: 13px;
-            line-height: 16px;
-            padding: 12px 16px;
-            color: var(--B100);
-            word-break: break-word;
-            text-align: center;
-        }
-
-        .page__link__wrapper .page__link .btn__wrapper {
-            margin-top: 40px;
-            text-align: center;
-        }
-
-        .page__link__wrapper .page__link .btn__wrapper .btn {
-            width: 120px;
-            height: 48px;
-            background: #000;
-            color: #fff;
-            font-size: 17px;
-            line-height: 22px;
-            font-weight: 500;
-            border-radius: 12px;
-        }
-
-        .footer__txt {
-            text-align: center;
-            color: var(--B40);
-            position: absolute;
-            bottom: 0;
-            left: 0;
+        .container {
             width: 100%;
-            box-sizing: border-box;
-            padding: 24px;
+            max-width: 480px;
+            padding: 20px;
+        }
+
+        .card {
+            background: var(--card-bg);
+            border-radius: 24px;
+            padding: 40px 32px;
+            box-shadow: var(--shadow);
+            text-align: center;
+            transition: background-color 0.3s ease, box-shadow 0.3s ease;
+            border: 1px solid var(--border-color);
+        }
+
+        .card-icon {
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--code-bg);
+            border-radius: 50%;
+            overflow: hidden; /* 确保图片不溢出圆角 */
+        }
+
+        .card-icon img {
+            width: 100%; /* 宽度铺满 */
+            height: 100%; /* 高度铺满 */
+            object-fit: cover; /* 裁剪图片以填充容器，保持纵横比 */
+        }
+
+        .card-title {
+            font-size: 24px;
+            font-weight: 700;
+            margin: 0 0 12px;
+            color: var(--text-primary);
+        }
+
+        .card-desc {
+            font-size: 15px;
+            line-height: 1.6;
+            color: var(--text-secondary);
+            margin: 0 0 32px;
+        }
+
+        .link-preview {
+            background: var(--code-bg);
+            padding: 16px;
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            margin-bottom: 32px;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            transition: background-color 0.3s ease, border-color 0.3s ease;
+        }
+
+        .link-icon {
+            flex-shrink: 0;
+            color: var(--text-tertiary);
+        }
+
+        .link-url {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
             font-size: 13px;
-            line-height: 18px;
+            color: var(--code-text);
+            word-break: break-all;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
         }
 
-        .footer__txt .iconfont-logo-simple {
-            font-size: 32px;
-            margin-bottom: 16px;
+        .btn {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            padding: 14px 24px;
+            background-color: var(--accent-color);
+            color: var(--accent-text);
+            font-size: 16px;
+            font-weight: 600;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: background-color 0.2s ease, transform 0.1s ease;
+            text-decoration: none;
         }
 
-        .footer__txt a {
+        .btn:hover {
+            background-color: var(--accent-hover);
+        }
+
+        .btn:active {
+            transform: scale(0.98);
+        }
+
+        .footer {
+            margin-top: 40px;
+            font-size: 13px;
+            color: var(--text-tertiary);
+            text-align: center;
+        }
+
+        .footer a {
             color: inherit;
+            text-decoration: none;
+            border-bottom: 1px dashed var(--text-tertiary);
+            padding-bottom: 2px;
+            transition: color 0.2s ease;
         }
 
-        #root {
-            box-sizing: border-box;
-            padding-bottom: 116px;
+        .footer a:hover {
+            color: var(--text-secondary);
+            border-bottom-style: solid;
+        }
+
+        /* Animation */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .card {
+            animation: fadeIn 0.5s ease-out forwards;
         }
     </style>
 </head>
-<body class="page-tiaozhuan">
-    <div class="page__link__wrapper">
-        <div class="page__link">
-            <div class="page__header">
-                <img src="/image/otter__go.png" alt="即将离开{{ site.Title }}" width="128">
+<body>
+    <div class="container">
+        <div class="card">
+            <div class="card-icon">
+                <img src="{{ .Site.Params.author.avatar }}" alt="Icon">
             </div>
-            <div class="page__title">即将离开{{ site.Title }}</div>
-            <p class="page__desc">你访问的网站可能包含未知的安全风险，如需继续访问，请手动复制链接访问，并注意保护帐号和隐私信息</p>
-            <div id="target" class="page__target">
-                <span id="direct-link">https://cgartlab.com/analyzing-the-designers-second-brain-from-concept-to-practice/</span>
+            <h1 class="card-title">即将离开{{ site.Title }}</h1>
+            <p class="card-desc">
+                您正在尝试访问一个外部链接。请注意，外部网站可能包含未知的安全风险，请确保您信任该站点。
+            </p>
+            
+            <div class="link-preview" onclick="copyLink()" title="点击复制链接" style="cursor: pointer;">
+                <div class="link-icon">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                    </svg>
+                </div>
+                <div id="target-url" class="link-url">正在解析目标地址...</div>
             </div>
-            <div class="btn__wrapper">
-                <button class="btn" onclick="window.location.href=document.getElementById('direct-link').textContent">继续前往</button>
+
+            <a id="continue-btn" href="#" class="btn">继续访问</a>
+
+            <div class="footer">
+                <p>&copy; {{ now.Year }} {{ site.Title }} · <a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015735号-1</a></p>
             </div>
         </div>
-        <footer class="footer__txt">
-            <div>
-                <i class="iconfont iconfont-logo-simple"></i>
-            </div>
-            <div>© 2019-{{ now.Year }} {{ site.Title }}</div>
-            <a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015735号-1</a>
-        </footer>
     </div>
+
     <script>
+        // 解析 URL 参数
         const params = new URLSearchParams(window.location.search);
         const encodedTarget = params.get('target');
-        const target = atob(encodedTarget); // 使用 atob 进行 Base64 解码
+        let targetUrl = '';
 
-        if (target) {
-            document.getElementById('direct-link').textContent = target; // 显示目标地址    
+        try {
+            if (encodedTarget) {
+                targetUrl = atob(encodedTarget); // Base64 解码
+            }
+        } catch (e) {
+            console.error('解码失败', e);
+        }
+
+        const urlElement = document.getElementById('target-url');
+        const btnElement = document.getElementById('continue-btn');
+
+        if (targetUrl) {
+            urlElement.textContent = targetUrl;
+            btnElement.href = targetUrl;
         } else {
-            console.error('未指定重定向目标。');
+            urlElement.textContent = '无效的目标链接';
+            btnElement.classList.add('disabled');
+            btnElement.style.opacity = '0.5';
+            btnElement.style.pointerEvents = 'none';
+            btnElement.textContent = '无法继续';
+        }
+
+        // 复制链接功能
+        function copyLink() {
+            if (!targetUrl) return;
+            navigator.clipboard.writeText(targetUrl).then(() => {
+                const originalText = urlElement.textContent;
+                urlElement.textContent = '已复制到剪贴板';
+                setTimeout(() => {
+                    urlElement.textContent = originalText;
+                }, 2000);
+            }).catch(err => {
+                console.error('复制失败', err);
+            });
         }
     </script>
-    <script src="/js/tiaozhuan.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file