zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed 评论区夜间模式bug

Browse Source
This commit is contained in:
Vaica committed 2026-01-24 17:08:10 +08:00
1 parent 4ace470668
commit b75c434847
2 files changed
+249 -121
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/Ying/assets/js/mypjax.js
+17 -3
View File
@@ -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
})
}
// 重载评论弹幕
themes/Ying/layouts/_default/tiaozhuan.html
+232 -118
View File
@@ -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>