blog/themes/Ying/layouts/partials/artalk.html

<!-- CSS -->
<!-- <link href="/css/Artalk.css" rel="stylesheet" /> -->
<style>
    .atk-loading{
        background: #FFFFFF;
    }
    /*对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;
    }
</style>
<!-- Artalk -->
<div id="Comments" uk-scrollspy="target: div,span,img; cls: uk-animation-slide-bottom-small;"></div>
<!-- JS -->
<!-- <script src="/js/Artalk.js"></script> -->
<script>
    // 等待 DOM 加载完成，确保 Artalk.js (在 footer 的 bundle.js 中) 已加载
    document.addEventListener("DOMContentLoaded", function() {
        if (document.querySelector("#Comments")) {
            // 检查 Artalk 是否已定义
            if (typeof Artalk !== 'undefined') {
                var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
                Artalk.init({
                    el: '#Comments',
                    server: '{{ .Site.Params.artalk.server }}',
                    site: '{{ .Site.Params.artalk.site }}',
                    pageKey: '{{ .RelPermalink }}',
                    flatMode: true,
                    darkMode: isDark,
                    emoticons: '{{ .Site.Params.artalk.emoticons | relURL }}'
                });
            } else {
                console.error('Artalk is not defined. Bundle js may not be loaded yet.');
            }
        }
    });
</script>