blog/themes/Ying/layouts/_default/single.html

{{ define "main" }}
<div id="pjax-container">
    <!-- 用于 Pjax 获取当前文章 ID -->
    <div id="data-pid" style="display:none;">{{ .RelPermalink }}</div>
    <article style="margin-bottom: 1.5em;">
        <h1 class="post-title" itemprop="name headline" uk-scrollspy="cls: uk-animation-slide-top-small; delay: 200">{{ .Title }}</h1>
        <div class="meta" uk-scrollspy="cls: uk-animation-slide-bottom-small; delay: 300">
            <span class="meta-item">作者: {{ .Params.author | default .Site.Params.author.name }}</span>
            <span class="meta-item">浏览: <span id="busuanzi_value_page_uv"></span></span>
            <span class="meta-item">字数: {{ .WordCount }}</span>
            <span class="meta-item meta-item-reading-time">阅读: 约 {{ .ReadingTime }} 分钟</span>
            {{ with .GetTerms "categories" }}
            <span class="meta-item">分类:
                {{ range . }}
                <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
                {{ end }}
            </span>
            {{ end }}
        </div>
        


        <div class="post-content" id="post-writing" itemprop="articleBody">
            {{ .Content }}
        </div>

        <script>
        function initPostScrollspy() {
            var content = document.getElementById('post-writing');
            if (!content) return;
            // 只给关键元素加动画，减少 observer 数量
            content.querySelectorAll('h2, h3, blockquote, table, figure').forEach(function(el) {
                if (!el.hasAttribute('uk-scrollspy')) el.setAttribute('uk-scrollspy', 'cls: uk-animation-fade; delay: 60');
            });
            content.querySelectorAll('.post-video, .link-card').forEach(function(el) {
                if (!el.hasAttribute('uk-scrollspy')) el.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-bottom-small; delay: 100');
            });
            // 初始化视频播放器
            initVideoPlayers();
        }
        document.addEventListener('DOMContentLoaded', initPostScrollspy);

        // 视频 PJAX 适配
        function initVideoPlayers() {
            document.querySelectorAll('.post-content video, .post-video-wrapper video').forEach(function(video) {
                // 暗黑模式下视频控件适配
                if (document.documentElement.dataset.theme === 'dark') {
                    video.style.filter = 'brightness(0.95)';
                } else {
                    video.style.filter = '';
                }
                // 确保不自动播放
                video.removeAttribute('autoplay');
                video.pause();
            });
            // 嵌入视频（B站/YouTube）在 PJAX 后重新加载
            document.querySelectorAll('.video-embed iframe').forEach(function(iframe) {
                var src = iframe.src;
                if (src) {
                    iframe.src = src; // 触发重新加载
                }
            });
        }

        // PJAX 导航前暂停所有视频
        document.addEventListener('pjax:send', function() {
            document.querySelectorAll('video').forEach(function(video) {
                video.pause();
                video.removeAttribute('autoplay');
            });
        });

        // PJAX 加载完成后重新初始化
        document.addEventListener('pjax:complete', function() {
            setTimeout(initPostScrollspy, 100);
        });
        </script>


    </article>
    <hr class="uk-divider-icon">

    <!-- 打赏模块 -->
    {{ if .Site.Params.reward.enable }}
    <div class="reward-container" uk-scrollspy="cls: uk-animation-slide-bottom-small; delay: 600">
        <button id="reward-btn" class="reward-btn">
            <i class="ri-hand-coin-line"></i>打赏一下
        </button>
        <div id="reward-modal" class="reward-modal">
            <div class="reward-content">
                <div class="reward-close" id="reward-close">
                    <i class="ri-close-line"></i>
                </div>
                <h3 class="reward-title">请作者喝杯咖啡，鼓励一下吧！</h3>
                <div class="reward-qr-group">
                    {{ if .Site.Params.reward.items }}
                        {{ range .Site.Params.reward.items }}
                        <div class="reward-qr-item">
                            <div class="reward-qr-img-wrapper">
                                <img src="{{ .image }}" alt="{{ .name }}打赏" loading="lazy">
                            </div>
                            <span>{{ .name }}</span>
                        </div>
                        {{ end }}
                    {{ else }}
                        {{ with .Site.Params.reward.wechat }}
                        <div class="reward-qr-item">
                            <div class="reward-qr-img-wrapper">
                                <img src="{{ . }}" alt="微信打赏" loading="lazy">
                            </div>
                            <span>微信</span>
                        </div>
                        {{ end }}
                        {{ with .Site.Params.reward.alipay }}
                        <div class="reward-qr-item">
                            <div class="reward-qr-img-wrapper">
                                <img src="{{ . }}" alt="支付宝打赏" loading="lazy">
                            </div>
                            <span>支付宝</span>
                        </div>
                        {{ end }}
                        {{ with .Site.Params.reward.qq }}
                        <div class="reward-qr-item">
                            <div class="reward-qr-img-wrapper">
                                <img src="{{ . }}" alt="QQ打赏" loading="lazy">
                            </div>
                            <span>QQ</span>
                        </div>
                        {{ end }}
                    {{ end }}
                </div>
            </div>
        </div>
    </div>
    {{ end }}

    <div id="comments" class="comments-area">
        <!-- 评论区内容 -->

        {{ if or (eq .Type "about") (eq .Type "posts") }}
        {{ partial "artalk.html" . }}
        {{ end }}
        <!-- 评论区内容结束 -->
    </div>
</div>
{{ end }}