优化性能提交新功能
This commit is contained in:
zqlit committed
1 parent
7f42647833
commit
775c60182d
6 files changed
+506
-245
No files matched your search
+91
-141
@@ -236,7 +236,7 @@ code::-webkit-scrollbar {
|
||||
}
|
||||
|
||||
.code-expand-btn {
|
||||
display: none;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
@@ -256,9 +256,11 @@ code::-webkit-scrollbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Show button when collapsed */
|
||||
.code-fold-container.collapsed .code-expand-btn {
|
||||
display: flex;
|
||||
.code-fold-container:not(.collapsed) .code-expand-btn {
|
||||
position: sticky;
|
||||
bottom: 10px;
|
||||
margin: 10px auto 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Button Pill Style */
|
||||
@@ -433,12 +435,48 @@ table td {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 4px;
|
||||
font-weight: 300;
|
||||
border-left: 3.8px solid rgb(80 80 80);
|
||||
background-color: rgba(51 51 51/5%);
|
||||
padding-left: 20px;
|
||||
word-break: break-all;
|
||||
position: relative;
|
||||
margin: 1.2rem 0;
|
||||
padding: 14px 17px 14px 20px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-left: 4px solid rgba(0, 0, 0, 0.72);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
|
||||
color: rgba(30, 30, 30, 0.92);
|
||||
font-size: 0.95em;
|
||||
font-weight: 400;
|
||||
line-height: 1.68;
|
||||
word-break: break-word;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "“";
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 13px;
|
||||
color: rgba(0, 0, 0, 0.08);
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
font-family: Georgia, serif;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
position: relative;
|
||||
margin: 0.25rem 0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] blockquote {
|
||||
border-color: rgba(148, 163, 184, 0.18);
|
||||
border-left-color: rgba(168, 181, 205, 0.82);
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.78));
|
||||
color: rgba(226, 232, 240, 0.96);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
[data-theme="dark"] blockquote::before {
|
||||
color: rgba(203, 213, 225, 0.16);
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -567,16 +605,22 @@ ul {
|
||||
}
|
||||
|
||||
.header-avatar {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-right: 16px;
|
||||
padding: 0;
|
||||
padding: 8px 10px 8px 8px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.avatar-theme-tip {
|
||||
margin-left: 10px;
|
||||
margin-left: 0;
|
||||
pointer-events: none;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #111827;
|
||||
@@ -1416,52 +1460,6 @@ ul {
|
||||
background: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
/* Expandable Code Blocks */
|
||||
.highlight.collapsed {
|
||||
max-height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlight.collapsed::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: linear-gradient(to bottom, transparent, #f6f8fa);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .highlight.collapsed::after {
|
||||
background: linear-gradient(to bottom, transparent, #282a36);
|
||||
}
|
||||
|
||||
.expand-btn-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.highlight.collapsed .expand-btn-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
background: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .highlight {
|
||||
background: #282a36; /* Night Mode: Dark BG (Dracula) */
|
||||
color: #f8f8f2; /* Night Mode: Light Text */
|
||||
@@ -3018,59 +3016,6 @@ input[type=submit] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.post-content .sen-image-frame[data-title]::after,
|
||||
.entry-content .sen-image-frame[data-title]::after {
|
||||
content: attr(data-title);
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
max-width: calc(100% - 20px);
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: rgba(0, 0, 0, 0.82);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(4px) translateZ(0);
|
||||
transition: opacity 0.4s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
|
||||
transform 0.4s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.post-content .sen-image-frame.is-visible[data-title]::after,
|
||||
.entry-content .sen-image-frame.is-visible[data-title]::after {
|
||||
opacity: 1;
|
||||
transform: translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .post-content .sen-image-frame[data-title]::after,
|
||||
[data-theme="dark"] .entry-content .sen-image-frame[data-title]::after {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
background: rgba(0, 0, 0, 0.62);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.post-content .sen-image-frame[data-title]::after,
|
||||
.entry-content .sen-image-frame[data-title]::after {
|
||||
left: 8px;
|
||||
bottom: 8px;
|
||||
max-width: calc(100% - 16px);
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置进度条的背景色 */
|
||||
.bar {
|
||||
background: #2aae67 !important;
|
||||
@@ -3582,8 +3527,8 @@ input[type=submit] {
|
||||
.floating-tools a {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
color: rgba(24, 24, 27, 0.86);
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
@@ -3591,30 +3536,30 @@ input[type=submit] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
|
||||
transform: translateZ(0);
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.floating-tools a:hover {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
background: #fff;
|
||||
transform: translateZ(0) translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .floating-tools a {
|
||||
background: rgba(30, 30, 35, 0.62);
|
||||
color: rgba(220, 220, 230, 0.78);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
|
||||
background: rgba(30, 41, 59, 0.94);
|
||||
color: rgba(241, 245, 249, 0.9);
|
||||
border-color: rgba(148, 163, 184, 0.22);
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .floating-tools a:hover {
|
||||
background: rgba(45, 45, 50, 0.78);
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
|
||||
background: rgba(51, 65, 85, 0.98);
|
||||
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
|
||||
/* ── ViewImage — Apple-style lightbox ── */
|
||||
@@ -3710,7 +3655,7 @@ input[type=submit] {
|
||||
.img-grid {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin: 0.6rem 0;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.img-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
|
||||
@@ -3740,17 +3685,23 @@ input[type=submit] {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Suppress title overlay inside grids */
|
||||
.img-grid .sen-image-frame[data-title]::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile: reduce to 2 columns */
|
||||
@media screen and (max-width: 480px) {
|
||||
/* Mobile: reduce columns for smaller screens */
|
||||
@media screen and (max-width: 640px) {
|
||||
.img-grid.cols-3,
|
||||
.img-grid.cols-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.img-grid .sen-image-frame {
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.img-grid.cols-2,
|
||||
.img-grid.cols-3,
|
||||
.img-grid.cols-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Toast ── */
|
||||
@@ -3777,8 +3728,8 @@ input[type=submit] {
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 0.28s ease, transform 0.28s ease;
|
||||
pointer-events: auto;
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
@@ -3814,8 +3765,8 @@ input[type=submit] {
|
||||
[data-theme="dark"] .ying-toast--info {
|
||||
background: rgba(159, 196, 244, 0.22);
|
||||
color: #f3f7fd;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@@ -4545,8 +4496,7 @@ hr,
|
||||
color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
fill 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
/* --- Transition Effects (Deprecated old block) --- */
|
||||
|
||||
@@ -154,75 +154,257 @@ window.initArtalk = function() {
|
||||
setTimeout(saveConf, 2000);
|
||||
setTimeout(saveConf, 5000);
|
||||
|
||||
// Handle list-loaded event for lazy loading avatars and animations
|
||||
artalk.on('list-loaded', function() {
|
||||
if (window.artalkConfig.aiComment) {
|
||||
var ai = window.artalkConfig.aiComment;
|
||||
var listBody = document.querySelector('.atk-list .atk-list-body');
|
||||
if (listBody && !listBody.querySelector('.atk-ai-comment')) {
|
||||
var aiCommentHtml = `
|
||||
<div class="atk-comment-wrap atk-comment atk-ai-comment" id="atk-comment-ai">
|
||||
<div class="atk-avatar" uk-scrollspy="cls: uk-animation-scale-up; delay: 200">
|
||||
<img src="${ai.avatar}" alt="${ai.name}">
|
||||
</div>
|
||||
<div class="atk-main" uk-scrollspy="cls: uk-animation-slide-right-small; delay: 300">
|
||||
<div class="atk-header">
|
||||
<span class="atk-nick" uk-scrollspy="cls: uk-animation-slide-top-small; delay: 350">${ai.name}</span>
|
||||
<span class="atk-badge">${window.artalkConfig.aiBadge || 'AI'}</span>
|
||||
<span class="atk-date">${ai.date}</span>
|
||||
</div>
|
||||
<div class="atk-body">
|
||||
<div class="atk-content">${ai.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
listBody.insertAdjacentHTML('afterbegin', aiCommentHtml);
|
||||
|
||||
// Hide "No Comment" placeholder if it exists
|
||||
var noComment = document.querySelector('.atk-list-no-comment');
|
||||
if (noComment) {
|
||||
noComment.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
// ── Badge system: 友链 / 友圈 / 评论等级 ──
|
||||
var badgesInjected = false;
|
||||
|
||||
// Add staggered animation to the comment list
|
||||
var list = document.querySelector('.atk-list');
|
||||
if (list) {
|
||||
list.setAttribute('uk-scrollspy', 'target: > .atk-comment-wrap; cls: uk-animation-slide-bottom-small; delay: 50');
|
||||
}
|
||||
var normalizeHost = function(h) {
|
||||
return (h || '').replace(/^www\./, '');
|
||||
};
|
||||
|
||||
// Apply granular animations to inner elements
|
||||
document.querySelectorAll('.atk-comment-wrap:not(.atk-ai-comment)').forEach(function(wrap) {
|
||||
var avatar = wrap.querySelector('.atk-avatar');
|
||||
if (avatar) avatar.setAttribute('uk-scrollspy', 'cls: uk-animation-scale-up; delay: 200');
|
||||
|
||||
var main = wrap.querySelector('.atk-main');
|
||||
if (main) main.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-right-small; delay: 300');
|
||||
|
||||
var nick = wrap.querySelector('.atk-nick');
|
||||
if (nick) nick.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-top-small; delay: 350');
|
||||
});
|
||||
|
||||
// Find all avatars in the comment list
|
||||
// We let lazyload.js handle the avatars automatically by calling lazyLoadAgain()
|
||||
// which will find these new images, set the placeholder, and observe them.
|
||||
|
||||
// Trigger lazy load update
|
||||
if (window.lazyLoadAgain) {
|
||||
window.lazyLoadAgain();
|
||||
}
|
||||
|
||||
// Force hide "No Comment" if AI comment exists
|
||||
if (window.artalkConfig.aiComment) {
|
||||
var noComment = document.querySelector('.atk-list-no-comment');
|
||||
var aiComment = document.querySelector('.atk-ai-comment');
|
||||
if (aiComment && noComment) {
|
||||
noComment.style.display = 'none';
|
||||
}
|
||||
}
|
||||
var buildMap = function(data) {
|
||||
var hosts = new Map();
|
||||
var names = new Map();
|
||||
if (data && data.hosts) {
|
||||
data.hosts.forEach(function(item) {
|
||||
if (item.host) hosts.set(item.host, item.title || item.host);
|
||||
});
|
||||
}
|
||||
if (data && data.names) {
|
||||
data.names.forEach(function(n) {
|
||||
if (n.lower) names.set(n.lower, n.title);
|
||||
});
|
||||
}
|
||||
return { hosts: hosts, names: names };
|
||||
};
|
||||
|
||||
var linkMap = null;
|
||||
var feedMap = null;
|
||||
|
||||
// Comment rank table — Song dynasty 九品十八阶
|
||||
var RANK_TABLE = [
|
||||
{ min: 2000, title: '正一品·太师', short: '太师', color: '#b8860b', bg: 'rgba(184,134,11,0.22)' },
|
||||
{ min: 1400, title: '从一品·太尉', short: '太尉', color: '#b8860b', bg: 'rgba(184,134,11,0.18)' },
|
||||
{ min: 1050, title: '正二品·参知政事', short: '参知政事', color: '#7c3aed', bg: 'rgba(124,58,237,0.18)' },
|
||||
{ min: 800, title: '从二品·节度使', short: '节度使', color: '#7c3aed', bg: 'rgba(124,58,237,0.15)' },
|
||||
{ min: 600, title: '正三品·御史中丞', short: '御史中丞', color: '#a855f7', bg: 'rgba(168,85,247,0.15)' },
|
||||
{ min: 480, title: '从三品·秘书监', short: '秘书监', color: '#a855f7', bg: 'rgba(168,85,247,0.12)' },
|
||||
{ min: 380, title: '正四品·谏议大夫', short: '谏议大夫', color: '#c084fc', bg: 'rgba(192,132,252,0.12)' },
|
||||
{ min: 300, title: '从四品·侍读学士', short: '侍读学士', color: '#c084fc', bg: 'rgba(192,132,252,0.10)' },
|
||||
{ min: 240, title: '正五品·给事中', short: '给事中', color: '#dc2626', bg: 'rgba(220,38,38,0.15)' },
|
||||
{ min: 190, title: '从五品·知州', short: '知州', color: '#dc2626', bg: 'rgba(220,38,38,0.12)' },
|
||||
{ min: 150, title: '正六品·侍御史', short: '侍御史', color: '#ef4444', bg: 'rgba(239,68,68,0.12)' },
|
||||
{ min: 115, title: '从六品·通判', short: '通判', color: '#ef4444', bg: 'rgba(239,68,68,0.10)' },
|
||||
{ min: 85, title: '正七品·知县', short: '知县', color: '#059669', bg: 'rgba(5,150,105,0.15)' },
|
||||
{ min: 60, title: '从七品·殿中侍御史', short: '殿中侍御史', color: '#059669', bg: 'rgba(5,150,105,0.12)' },
|
||||
{ min: 40, title: '正八品·大理评事', short: '大理评事', color: '#10b981', bg: 'rgba(16,185,129,0.12)' },
|
||||
{ min: 25, title: '从八品·录事参军', short: '录事参军', color: '#10b981', bg: 'rgba(16,185,129,0.10)' },
|
||||
{ min: 15, title: '正九品·主簿', short: '主簿', color: '#a16207', bg: 'rgba(161,98,7,0.15)' },
|
||||
{ min: 5, title: '从九品·司户参军', short: '司户参军', color: '#a16207', bg: 'rgba(161,98,7,0.12)' },
|
||||
{ min: 0, title: '庶民', short: '庶民', color: '#9ca3af', bg: 'rgba(156,163,175,0.12)' }
|
||||
];
|
||||
|
||||
var getRank = function(count) {
|
||||
for (var i = 0; i < RANK_TABLE.length; i++) {
|
||||
if (count >= RANK_TABLE[i].min) return RANK_TABLE[i];
|
||||
}
|
||||
return RANK_TABLE[RANK_TABLE.length - 1];
|
||||
};
|
||||
|
||||
// localStorage-based cross-page user comment counter with page dedup
|
||||
var USER_COUNT_KEY = 'atk_user_counts_v2';
|
||||
var loadUserCounts = function() {
|
||||
try {
|
||||
var raw = localStorage.getItem(USER_COUNT_KEY);
|
||||
return raw ? JSON.parse(raw) : { _pages: {} };
|
||||
} catch(e) { return { _pages: {} }; }
|
||||
};
|
||||
var saveUserCounts = function(counts) {
|
||||
try { localStorage.setItem(USER_COUNT_KEY, JSON.stringify(counts)); } catch(e) {}
|
||||
};
|
||||
var getPageKey = function() {
|
||||
return window.artalkConfig ? (window.artalkConfig.pageKey || window.location.pathname) : window.location.pathname;
|
||||
};
|
||||
|
||||
var processBadges = function() {
|
||||
if (!linkMap && !feedMap) return;
|
||||
|
||||
var data = loadUserCounts();
|
||||
var pageKey = getPageKey();
|
||||
var pages = data._pages || {};
|
||||
var isNewPage = !pages[pageKey];
|
||||
|
||||
// Count per-user comments on current page
|
||||
var pageCounts = {};
|
||||
document.querySelectorAll('.atk-comment-wrap:not(.atk-ai-comment)').forEach(function(wrap) {
|
||||
var nickEl = wrap.querySelector('.atk-nick');
|
||||
if (!nickEl) return;
|
||||
var name = (nickEl.textContent || '').trim();
|
||||
if (name) pageCounts[name] = (pageCounts[name] || 0) + 1;
|
||||
});
|
||||
|
||||
// Accumulate: only add counts if this page hasn't been processed before
|
||||
var userCounts = {};
|
||||
for (var name in pageCounts) {
|
||||
var prev = data[name] || 0;
|
||||
if (isNewPage) {
|
||||
data[name] = prev + pageCounts[name];
|
||||
}
|
||||
userCounts[name] = data[name];
|
||||
}
|
||||
if (isNewPage) {
|
||||
pages[pageKey] = true;
|
||||
data._pages = pages;
|
||||
}
|
||||
saveUserCounts(data);
|
||||
|
||||
document.querySelectorAll('.atk-comment-wrap:not(.atk-ai-comment)').forEach(function(wrap) {
|
||||
var nickEl = wrap.querySelector('.atk-nick');
|
||||
var avatarEl = wrap.querySelector('.atk-avatar');
|
||||
if (!nickEl) return;
|
||||
|
||||
var nickText = (nickEl.textContent || '').trim();
|
||||
var nickLower = nickText.toLowerCase();
|
||||
var nickLink = nickEl.querySelector('a[href]');
|
||||
var commentHost = null;
|
||||
if (nickLink) {
|
||||
try { commentHost = normalizeHost(new URL(nickLink.getAttribute('href')).hostname); } catch(e) {}
|
||||
}
|
||||
|
||||
// 1. 友链 badge (green gradient) — from /api/links?all=1
|
||||
if (linkMap && !nickEl.querySelector('.atk-link-badge')) {
|
||||
var linkMatch = null;
|
||||
if (commentHost && linkMap.hosts.has(commentHost)) {
|
||||
linkMatch = linkMap.hosts.get(commentHost);
|
||||
} else if (linkMap.names.has(nickLower)) {
|
||||
linkMatch = linkMap.names.get(nickLower);
|
||||
}
|
||||
if (linkMatch) {
|
||||
var lb = document.createElement('span');
|
||||
lb.className = 'atk-link-badge';
|
||||
lb.textContent = '友链';
|
||||
lb.title = '友链: ' + linkMatch;
|
||||
nickEl.appendChild(lb);
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 友圈 badge (gold gradient) — from /api/feeds
|
||||
if (feedMap && !nickEl.querySelector('.atk-feed-badge')) {
|
||||
var feedMatch = null;
|
||||
if (commentHost && feedMap.hosts.has(commentHost)) {
|
||||
feedMatch = feedMap.hosts.get(commentHost);
|
||||
} else if (feedMap.names.has(nickLower)) {
|
||||
feedMatch = feedMap.names.get(nickLower);
|
||||
}
|
||||
if (feedMatch) {
|
||||
var fb = document.createElement('span');
|
||||
fb.className = 'atk-feed-badge';
|
||||
fb.textContent = '友圈';
|
||||
fb.title = '友圈: ' + feedMatch;
|
||||
nickEl.appendChild(fb);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Comment rank badge — inline next to name
|
||||
if (!nickEl.querySelector('.atk-rank-badge')) {
|
||||
var count = userCounts[nickText] || 0;
|
||||
var rank = getRank(count);
|
||||
var rb = document.createElement('span');
|
||||
rb.className = 'atk-rank-badge';
|
||||
rb.textContent = rank.short;
|
||||
rb.title = rank.title + ' (' + count + '条评论)';
|
||||
var idx = RANK_TABLE.indexOf(rank);
|
||||
if (idx > 0) {
|
||||
var next = RANK_TABLE[idx - 1];
|
||||
var diff = next.min - count;
|
||||
if (diff > 0) {
|
||||
var progress = Math.round((count - rank.min) / (next.min - rank.min) * 100);
|
||||
rb.title += ' — 距' + next.short + '还差' + diff + '条 (' + progress + '%)';
|
||||
}
|
||||
}
|
||||
nickEl.appendChild(rb);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var injectAllBadges = function() {
|
||||
if (badgesInjected) return;
|
||||
badgesInjected = true;
|
||||
|
||||
if (window.friendLinks) linkMap = buildMap(window.friendLinks);
|
||||
if (window.friendFeeds) feedMap = buildMap(window.friendFeeds);
|
||||
|
||||
if (linkMap || feedMap) {
|
||||
processBadges();
|
||||
}
|
||||
};
|
||||
|
||||
artalk.on('list-loaded', function() {
|
||||
// Badge injection
|
||||
badgesInjected = false;
|
||||
setTimeout(injectAllBadges, 300);
|
||||
|
||||
if (window.artalkConfig.aiComment) {
|
||||
var ai = window.artalkConfig.aiComment;
|
||||
var listBody = document.querySelector('.atk-list .atk-list-body');
|
||||
if (listBody && !listBody.querySelector('.atk-ai-comment')) {
|
||||
var aiCommentHtml = `
|
||||
<div class="atk-comment-wrap atk-comment atk-ai-comment" id="atk-comment-ai">
|
||||
<div class="atk-avatar" uk-scrollspy="cls: uk-animation-scale-up; delay: 200">
|
||||
<img src="${ai.avatar}" alt="${ai.name}">
|
||||
</div>
|
||||
<div class="atk-main" uk-scrollspy="cls: uk-animation-slide-right-small; delay: 300">
|
||||
<div class="atk-header">
|
||||
<span class="atk-nick" uk-scrollspy="cls: uk-animation-slide-top-small; delay: 350">${ai.name}</span>
|
||||
<span class="atk-badge">${window.artalkConfig.aiBadge || 'AI'}</span>
|
||||
<span class="atk-date">${ai.date}</span>
|
||||
</div>
|
||||
<div class="atk-body">
|
||||
<div class="atk-content">${ai.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
listBody.insertAdjacentHTML('afterbegin', aiCommentHtml);
|
||||
|
||||
var noComment = document.querySelector('.atk-list-no-comment');
|
||||
if (noComment) {
|
||||
noComment.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add staggered animation to the comment list
|
||||
var list = document.querySelector('.atk-list');
|
||||
if (list) {
|
||||
list.setAttribute('uk-scrollspy', 'target: > .atk-comment-wrap; cls: uk-animation-slide-bottom-small; delay: 50');
|
||||
}
|
||||
|
||||
// Apply granular animations to inner elements
|
||||
document.querySelectorAll('.atk-comment-wrap:not(.atk-ai-comment)').forEach(function(wrap) {
|
||||
var avatar = wrap.querySelector('.atk-avatar');
|
||||
if (avatar) avatar.setAttribute('uk-scrollspy', 'cls: uk-animation-scale-up; delay: 200');
|
||||
|
||||
var main = wrap.querySelector('.atk-main');
|
||||
if (main) main.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-right-small; delay: 300');
|
||||
|
||||
var nick = wrap.querySelector('.atk-nick');
|
||||
if (nick) nick.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-top-small; delay: 350');
|
||||
});
|
||||
|
||||
// Trigger lazy load update
|
||||
if (window.lazyLoadAgain) {
|
||||
window.lazyLoadAgain();
|
||||
}
|
||||
|
||||
// Force hide "No Comment" if AI comment exists
|
||||
if (window.artalkConfig.aiComment) {
|
||||
var noComment = document.querySelector('.atk-list-no-comment');
|
||||
var aiComment = document.querySelector('.atk-ai-comment');
|
||||
if (aiComment && noComment) {
|
||||
noComment.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
console.error('Artalk init failed:', e);
|
||||
|
||||
@@ -1,43 +1,41 @@
|
||||
function themeSweep(newTheme, callback) {
|
||||
var veil = document.createElement('div');
|
||||
var gradient = newTheme === 'dark'
|
||||
? 'linear-gradient(135deg,rgba(2,6,23,0.18),rgba(15,23,42,0.55) 45%,rgba(30,41,59,0.36))'
|
||||
: 'linear-gradient(135deg,rgba(255,247,237,0.28),rgba(252,250,245,0.62) 45%,rgba(254,243,199,0.32))';
|
||||
// View Transition API — browser-native crossfade, zero JS animation overhead.
|
||||
// Same principle as image lightbox transitions. Chrome/Edge 111+, Opera 97+.
|
||||
if (document.startViewTransition) {
|
||||
document.startViewTransition(function() { callback(); });
|
||||
return;
|
||||
}
|
||||
|
||||
veil.style.cssText =
|
||||
// Fallback: lightweight overlay for Safari / Firefox
|
||||
var oldTheme = document.documentElement.getAttribute('data-theme');
|
||||
var tint = oldTheme === 'dark'
|
||||
? 'rgba(15,23,42,0.95)'
|
||||
: 'rgba(255,255,255,0.95)';
|
||||
|
||||
var overlay = document.createElement('div');
|
||||
overlay.style.cssText =
|
||||
'position:fixed;inset:0;z-index:9999;pointer-events:none;' +
|
||||
'background:' + gradient + ';' +
|
||||
'opacity:0;transition:opacity 0.42s cubic-bezier(0.22,0.61,0.36,1);' +
|
||||
'background:' + tint + ';opacity:1;' +
|
||||
'transition:opacity 0.22s ease;' +
|
||||
'will-change:opacity;contain:paint;';
|
||||
document.body.appendChild(veil);
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
var cleaned = false;
|
||||
function cleanup() {
|
||||
if (cleaned) return;
|
||||
cleaned = true;
|
||||
if (veil.parentNode) veil.parentNode.removeChild(veil);
|
||||
if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
|
||||
}
|
||||
|
||||
var applied = false;
|
||||
function applyTheme() {
|
||||
if (applied) return;
|
||||
applied = true;
|
||||
callback();
|
||||
veil.style.opacity = '0';
|
||||
}
|
||||
callback();
|
||||
overlay.offsetWidth;
|
||||
overlay.style.opacity = '0';
|
||||
|
||||
veil.offsetWidth;
|
||||
veil.style.opacity = '1';
|
||||
|
||||
setTimeout(applyTheme, 300);
|
||||
veil.addEventListener('transitionend', function(e) {
|
||||
if (!applied || e.propertyName !== 'opacity') return;
|
||||
overlay.addEventListener('transitionend', function(e) {
|
||||
if (e.propertyName !== 'opacity') return;
|
||||
cleanup();
|
||||
});
|
||||
setTimeout(function() {
|
||||
applyTheme();
|
||||
cleanup();
|
||||
}, 950);
|
||||
setTimeout(cleanup, 380);
|
||||
}
|
||||
|
||||
// Toast Message Helper
|
||||
@@ -85,23 +83,36 @@ window.initThemeToggle = function() {
|
||||
window.initCodeFold = function() {
|
||||
var codeBlocks = document.querySelectorAll('.highlight');
|
||||
codeBlocks.forEach(function(block) {
|
||||
if (block.offsetHeight > 360) {
|
||||
if (block.parentNode.classList.contains('code-fold-container')) return;
|
||||
var wrapper = block.parentNode && block.parentNode.classList.contains('code-fold-container') ? block.parentNode : null;
|
||||
if (!wrapper && block.scrollHeight <= 360 && block.offsetHeight <= 360) return;
|
||||
|
||||
var wrapper = document.createElement('div');
|
||||
if (!wrapper) {
|
||||
wrapper = document.createElement('div');
|
||||
wrapper.className = 'code-fold-container collapsed';
|
||||
block.parentNode.insertBefore(wrapper, block);
|
||||
wrapper.appendChild(block);
|
||||
}
|
||||
|
||||
var btn = document.createElement('button');
|
||||
var btn = wrapper.querySelector(':scope > .code-expand-btn');
|
||||
if (!btn) {
|
||||
btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'code-expand-btn';
|
||||
btn.innerHTML = '<span><i class="ri-arrow-down-s-line" style="margin-right:4px;"></i> 展开代码 </span>';
|
||||
btn.onclick = function() {
|
||||
wrapper.classList.remove('collapsed');
|
||||
btn.style.display = 'none';
|
||||
};
|
||||
wrapper.appendChild(btn);
|
||||
}
|
||||
|
||||
var syncButton = function() {
|
||||
var collapsed = wrapper.classList.contains('collapsed');
|
||||
btn.innerHTML = collapsed
|
||||
? '<span><i class="ri-arrow-down-s-line" style="margin-right:4px;"></i> 展开代码 </span>'
|
||||
: '<span><i class="ri-arrow-up-s-line" style="margin-right:4px;"></i> 收起代码 </span>';
|
||||
};
|
||||
|
||||
btn.onclick = function() {
|
||||
wrapper.classList.toggle('collapsed');
|
||||
syncButton();
|
||||
};
|
||||
syncButton();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -26,6 +26,69 @@
|
||||
color: #ffffff !important;
|
||||
background: #ff6262 !important;
|
||||
}
|
||||
.atk-link-badge,
|
||||
.atk-feed-badge,
|
||||
.atk-rank-badge {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
line-height: 18px;
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.atk-link-badge {
|
||||
color: #059669;
|
||||
background: rgba(5,150,105,0.08);
|
||||
border: 1px solid rgba(5,150,105,0.15);
|
||||
}
|
||||
.atk-feed-badge {
|
||||
color: #d97706;
|
||||
background: rgba(217,119,6,0.08);
|
||||
border: 1px solid rgba(217,119,6,0.15);
|
||||
}
|
||||
.atk-rank-badge {
|
||||
color: #fff;
|
||||
background: #3b82f6;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
[data-theme="dark"] .atk-link-badge {
|
||||
color: #34d399;
|
||||
background: rgba(52,211,153,0.12);
|
||||
border-color: rgba(52,211,153,0.2);
|
||||
}
|
||||
[data-theme="dark"] .atk-feed-badge {
|
||||
color: #fbbf24;
|
||||
background: rgba(251,191,36,0.12);
|
||||
border-color: rgba(251,191,36,0.2);
|
||||
}
|
||||
[data-theme="dark"] .atk-rank-badge {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
/* 覆盖 Artalk 原版 .atk-badge（博主）/ .atk-pinned-badge（置顶）尺寸 */
|
||||
.atk-comment>.atk-main>.atk-header .atk-badge {
|
||||
font-size: 12px;
|
||||
padding: 0 6px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
color: #fff !important;
|
||||
background: #1a1a1a !important;
|
||||
}
|
||||
.atk-comment>.atk-main>.atk-header .atk-pinned-badge {
|
||||
font-size: 12px;
|
||||
padding: 0 6px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
<!-- Artalk -->
|
||||
<div id="Comments" uk-scrollspy="target: > *; cls: uk-animation-slide-bottom-small; delay: 100">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{{ if .Site.Params.barrage.enable }}
|
||||
{{ $barrage := resources.Get "js/modules/barrage.js" | resources.Minify | resources.Fingerprint }}
|
||||
<script>
|
||||
window.barrageConfig = {
|
||||
enableHitokoto: {{ .Site.Params.barrage.enableHitokoto | default false }},
|
||||
@@ -7,4 +8,5 @@
|
||||
};
|
||||
</script>
|
||||
<div class="barrager"></div>
|
||||
{{ end }}
|
||||
<script defer src="{{ $barrage.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
@@ -51,7 +51,6 @@
|
||||
{{ $uikit := resources.Get "js/libs/uikit.min.js" }}
|
||||
{{ $easylazyload := resources.Get "js/modules/lazyload.js" }}
|
||||
{{ $viewimage := resources.Get "js/libs/view-image.min.js" }}
|
||||
{{ $barrage := resources.Get "js/modules/barrage.js" }}
|
||||
{{ $main := resources.Get "js/main.js" }}
|
||||
{{ $mypjax := resources.Get "js/modules/mypjax.js" }}
|
||||
{{ $nprogress := resources.Get "js/libs/nprogress.js" }}
|
||||
@@ -69,7 +68,7 @@
|
||||
{{ $artalkModule := resources.Get "js/modules/artalk.js" }}
|
||||
{{ $pjaxLib := resources.Get "js/libs/pjax.js" }}
|
||||
|
||||
{{ $scripts := slice $iconfont $uikit $easylazyload $viewimage $barrage $utils $loader $cache $search $floatingTools $paragraphComments $infiniteScroll $artalkModule $nprogress $pjaxLib $main $mypjax $toast $tiaozhuan $reward | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint }}
|
||||
{{ $scripts := slice $iconfont $uikit $easylazyload $viewimage $utils $loader $cache $search $floatingTools $paragraphComments $infiniteScroll $artalkModule $nprogress $pjaxLib $main $mypjax $toast $tiaozhuan $reward | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint }}
|
||||
|
||||
{{ $aiGreetings := "static/js/ai_greetings.js" }}
|
||||
{{ if os.FileExists $aiGreetings }}
|
||||
@@ -78,6 +77,60 @@
|
||||
<script>
|
||||
window.enableInfiniteScroll = {{ .Site.Params.infiniteScroll.enable | default false }};
|
||||
</script>
|
||||
{{/* Fetch friend data at build time — no runtime network requests */}}
|
||||
{{ $linkHosts := slice }}
|
||||
{{ $linkNames := slice }}
|
||||
{{ with resources.GetRemote "https://api.usj.cc/api/links?all=1" }}
|
||||
{{ with .Err }}
|
||||
{{ warnf "Links API fetch failed: %s" . }}
|
||||
{{ else }}
|
||||
{{ with .Content | transform.Unmarshal }}
|
||||
{{ range .links }}
|
||||
{{ $host := "" }}
|
||||
{{ with .url | urls.Parse }}
|
||||
{{ $host = .Host | strings.TrimPrefix "www." }}
|
||||
{{ end }}
|
||||
{{ $title := .name | default "" }}
|
||||
{{ if $host }}
|
||||
{{ $linkHosts = $linkHosts | append (dict "host" $host "title" $title) }}
|
||||
{{ end }}
|
||||
{{ if $title }}
|
||||
{{ $linkNames = $linkNames | append (dict "lower" (lower $title) "title" $title) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<script>
|
||||
window.friendLinks = {{ dict "hosts" $linkHosts "names" $linkNames | jsonify | safeJS }};
|
||||
</script>
|
||||
|
||||
{{ $feedHosts := slice }}
|
||||
{{ $feedNames := slice }}
|
||||
{{ with resources.GetRemote "https://api.usj.cc/api/feeds" }}
|
||||
{{ with .Err }}
|
||||
{{ warnf "Feeds API fetch failed: %s" . }}
|
||||
{{ else }}
|
||||
{{ with .Content | transform.Unmarshal }}
|
||||
{{ range .feeds }}
|
||||
{{ $host := "" }}
|
||||
{{ with .url | urls.Parse }}
|
||||
{{ $host = .Host | strings.TrimPrefix "www." }}
|
||||
{{ end }}
|
||||
{{ $title := .feedTitle | default "" }}
|
||||
{{ if $host }}
|
||||
{{ $feedHosts = $feedHosts | append (dict "host" $host "title" $title) }}
|
||||
{{ end }}
|
||||
{{ if $title }}
|
||||
{{ $feedNames = $feedNames | append (dict "lower" (lower $title) "title" $title) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<script>
|
||||
window.friendFeeds = {{ dict "hosts" $feedHosts "names" $feedNames | jsonify | safeJS }};
|
||||
</script>
|
||||
<script defer src="{{ $scripts.RelPermalink }}"></script>
|
||||
<script async src="/js/bsz.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in new issue
Block a user