zqlit
36e74d46f4
Deploy to Production / pre-check (push) Successful in 39s
Deploy to Production / build (push) Successful in 4m55s
Deploy to Production / deploy-edgeone (push) Successful in 4m1s
Deploy to Production / finalize (push) Successful in 25s
Deploy to Production / notify-failure (push) Skipped
190 lines
6.7 KiB
HTML
190 lines
6.7 KiB
HTML
{{ $artalkCss := resources.Get "css/libs/Artalk.css" | resources.Minify | resources.Fingerprint }}
|
|
<link id="artalk-css" rel="stylesheet" href="{{ $artalkCss.RelPermalink }}">
|
|
<style>
|
|
.atk-loading{
|
|
background: #FFFFFF;
|
|
}
|
|
.atk-loading-editor-box {
|
|
margin-bottom: 30px;
|
|
border: 1px solid var(--frame-color);
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
background: #fff;
|
|
}
|
|
[data-theme="dark"] .atk-loading-editor-box {
|
|
border-color: var(--frame-dark-color);
|
|
background: transparent;
|
|
}
|
|
/*对artalk评论暗夜模式进行微调*/
|
|
@media (prefers-color-scheme: dark) {
|
|
.atk-pinned-badge {
|
|
color: #ffffff !important;
|
|
background: #ff6262 !important;
|
|
}
|
|
}
|
|
[data-theme="dark"] .atk-pinned-badge {
|
|
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: #6b7280;
|
|
background: rgba(107,114,128,0.08);
|
|
border: 1px solid rgba(107,114,128,0.15);
|
|
font-weight: 600;
|
|
}
|
|
/* 头衔徽章（金色）——与友链/友圈/官职同风格：浅底彩字描边 */
|
|
.atk-title-badge {
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
padding: 0 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border-radius: 3px;
|
|
line-height: 18px;
|
|
vertical-align: middle;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
color: #b8860b;
|
|
background: rgba(184,134,11,0.08);
|
|
border: 1px solid rgba(184,134,11,0.22);
|
|
}
|
|
[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 {
|
|
color: rgb(148,163,184);
|
|
background: rgba(148,163,184,0.1);
|
|
border-color: rgba(148,163,184,0.18);
|
|
}
|
|
[data-theme="dark"] .atk-title-badge {
|
|
color: #fbbf24;
|
|
background: rgba(251,191,36,0.12);
|
|
border-color: rgba(251,191,36,0.2);
|
|
}
|
|
|
|
/* 覆盖 Artalk 原版 .atk-badge（博主）尺寸/配色 —— 改成与友链/友圈/官职
|
|
同风格的浅底描边款（原版黑底白字过于突兀），黑字保留博主辨识度 */
|
|
.atk-comment>.atk-main>.atk-header .atk-badge {
|
|
font-size: 12px;
|
|
padding: 0 6px;
|
|
font-weight: 600;
|
|
line-height: 18px;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
color: #374151 !important;
|
|
background: rgba(55,65,81,0.06) !important;
|
|
border: 1px solid rgba(55,65,81,0.18);
|
|
}
|
|
[data-theme="dark"] .atk-comment>.atk-main>.atk-header .atk-badge {
|
|
color: #e5e7eb !important;
|
|
background: rgba(229,231,235,0.08) !important;
|
|
border-color: rgba(229,231,235,0.2);
|
|
}
|
|
.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;
|
|
}
|
|
.atk-main {
|
|
backface-visibility: hidden;
|
|
will-change: transform;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
</style>
|
|
<!-- Artalk -->
|
|
<div id="Comments" uk-scrollspy="target: > *; cls: uk-animation-slide-bottom-small; delay: 100">
|
|
<!-- Loading Skeleton -->
|
|
<div class="atk-loading-placeholder">
|
|
<!-- Editor Skeleton -->
|
|
<div class="atk-loading-editor-box">
|
|
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
|
|
<div class="atk-loading-line" style="width: 32%; height: 34px; border-radius: 4px; margin-bottom: 0;"></div>
|
|
<div class="atk-loading-line" style="width: 32%; height: 34px; border-radius: 4px; margin-bottom: 0;"></div>
|
|
<div class="atk-loading-line" style="width: 32%; height: 34px; border-radius: 4px; margin-bottom: 0;"></div>
|
|
</div>
|
|
<div class="atk-loading-line" style="width: 100%; height: 120px; border-radius: 4px; margin-bottom: 10px;"></div>
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div class="atk-loading-line" style="width: 120px; height: 20px; margin-bottom: 0;"></div>
|
|
<div class="atk-loading-line" style="width: 80px; height: 34px; border-radius: 4px; margin-bottom: 0;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comment List Skeleton -->
|
|
<div class="atk-loading-item">
|
|
<div class="atk-loading-avatar"></div>
|
|
<div class="atk-loading-content">
|
|
<div class="atk-loading-line width-name"></div>
|
|
<div class="atk-loading-line width-80"></div>
|
|
<div class="atk-loading-line width-60"></div>
|
|
</div>
|
|
</div>
|
|
<div class="atk-loading-item">
|
|
<div class="atk-loading-avatar"></div>
|
|
<div class="atk-loading-content">
|
|
<div class="atk-loading-line width-name"></div>
|
|
<div class="atk-loading-line width-60"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- JS -->
|
|
<!-- <script src="/js/Artalk.js"></script> -->
|
|
<script>
|
|
// Configuration for Artalk and AI Comment
|
|
window.artalkConfig = {
|
|
el: '#Comments',
|
|
server: '{{ .Site.Params.artalk.server }}',
|
|
site: '{{ .Site.Params.artalk.site }}',
|
|
pageKey: '{{ .RelPermalink }}',
|
|
emoticons: '{{ .Site.Params.artalk.emoticons | absURL }}',
|
|
aiComment: null
|
|
};
|
|
|
|
// Execute Initialization immediately if function exists (PJAX re-execution),
|
|
// otherwise wait for DOMContentLoaded (Initial load)
|
|
(function() {
|
|
if (typeof window.initArtalk === 'function') {
|
|
window.initArtalk();
|
|
} else {
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
if (typeof window.initArtalk === 'function') {
|
|
window.initArtalk();
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
</script> |