在Agron主题中实现仅在首页启用顶部Banner

在Agron原版主题中,顶部Banner仅有全局开关,不可针对各类页面做到分别启用。

为了提高文章可读性,提升用户阅读感受,应在文章阅览页禁用顶部Banner,为此,需要在页尾脚本与额外CSS中,增添代码以实现仅在首页启用顶部Banner。

使Argon主题首页Banner标题打字动画支持HTML格式在Agron主题中实现仅在首页启用顶部Banner会有部分冲突,为此将页尾脚本分为两个版本,即仅在Agron主题中实现仅在首页启用顶部Banner版本和包含使Argon主题首页Banner标题打字动画支持HTML格式版本。

页尾脚本(仅在Agron主题中实现仅在首页启用顶部Banner):

<script>
(function () {
    function isSinglePostPage() {
        return document.querySelector('.page-information-card-container') !== null;
    }

    function updateBannerState() {
        var banner = document.getElementById('banner');
        if (!banner) return;

        // 先清理残留状态
        banner.style.removeProperty('display');
        document.body.classList.remove('article-no-banner');

        // 仅文章页隐藏 Banner
        if (isSinglePostPage()) {
            banner.style.setProperty('display', 'none', 'important');
            document.body.classList.add('article-no-banner');
        }

        // 通知页面重新计算布局
        setTimeout(function () {
            window.dispatchEvent(new Event('scroll'));
            window.dispatchEvent(new Event('resize'));
        }, 50);
    }

    function initBannerControl() {
        updateBannerState();
    }

    // 首次加载
    document.addEventListener('DOMContentLoaded', initBannerControl);

    // PJAX 完成
    document.addEventListener('pjax:complete', function () {
        setTimeout(initBannerControl, 50);
    });

    // 包装已有 pjaxLoaded,避免覆盖别的脚本
    var oldPjaxLoaded = window.pjaxLoaded;
    window.pjaxLoaded = function () {
        if (typeof oldPjaxLoaded === 'function') {
            oldPjaxLoaded();
        }
        initBannerControl();
    };

    // 兜底执行一次,清掉旧残留
    setTimeout(initBannerControl, 100);
})();
</script>

页尾脚本(包含使Argon主题首页Banner标题打字动画支持HTML格式):

<script>
(function () {
    function isSinglePostPage() {
        // 只认 single.php 中明确存在的标志
        return document.querySelector('.page-information-card-container') !== null;
    }

    function updateBannerState() {
        var banner = document.getElementById('banner');
        if (!banner) return;

        // 每次先清理历史残留,避免首页被遗留的 display:none 影响
        banner.style.removeProperty('display');
        document.body.classList.remove('article-no-banner');

        // 只有文章页才隐藏 Banner
        if (isSinglePostPage()) {
            banner.style.setProperty('display', 'none', 'important');
            document.body.classList.add('article-no-banner');
        }

        setTimeout(function () {
            window.dispatchEvent(new Event('scroll'));
            window.dispatchEvent(new Event('resize'));
        }, 50);
    }

    function ensureCursorStyle() {
        if (document.getElementById('typewriter-cursor-style')) return;
        var style = document.createElement('style');
        style.id = 'typewriter-cursor-style';
        style.innerHTML = `
            .typing-cursor{
                border-left:2px solid currentColor;
                margin-left:2px;
                animation:blink .7s infinite;
                vertical-align:middle;
            }
            @keyframes blink{
                0%,100%{opacity:1;}
                50%{opacity:0;}
            }
        `;
        document.head.appendChild(style);
    }

    function typeIt(el, contentToType, speed, callback) {
        if (!el || el.getAttribute('data-is-typing') === 'true') return;

        el.innerHTML = "";
        el.style.opacity = "1";
        el.style.visibility = "visible";
        el.setAttribute('data-is-typing', 'true');

        var fullHtml = (contentToType || '').trim();
        if (fullHtml === "") {
            el.removeAttribute('data-is-typing');
            if (callback) callback();
            return;
        }

        var i = 0;
        var timer = setInterval(function () {
            if (i < fullHtml.length) {
                if (fullHtml[i] === '<') {
                    var closeIndex = fullHtml.indexOf('>', i);
                    i = closeIndex === -1 ? fullHtml.length : closeIndex + 1;
                } else {
                    i++;
                }
                el.innerHTML = fullHtml.substring(0, i) + (i < fullHtml.length ? '<span class="typing-cursor"></span>' : '');
            } else {
                clearInterval(timer);
                el.innerHTML = fullHtml;
                el.removeAttribute('data-is-typing');
                if (callback) callback();
            }
        }, speed);
    }

    // 只在“banner存在且当前不是文章页”时执行打字机
    function runTypewriter() {
        if (isSinglePostPage()) return;

        var banner = document.getElementById('banner');
        var titleInner = document.querySelector('.banner-title-inner');
        var subTitle = document.querySelector('.banner-subtitle');

        if (!banner || !titleInner) return;

        // 防止 PJAX 下重复打字
        if (titleInner.getAttribute('data-typed') === 'true') return;
        titleInner.setAttribute('data-typed', 'true');

        ensureCursorStyle();

        var mainTitleContent = `<p style="text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);">
  <span style="white-space: nowrap; font-size: 2rem;">永不落幕的崇高传说;</span>
  <span style="white-space: nowrap; font-size: 2rem;">孤独观测者的浪漫理想乡</span>
</p>`;

        var subTitleContent = `<p style="font-size: clamp(1.1rem, 2vw, 1.3rem); text-shadow: 0px 0px 10px rgba(0,0,0,1);">
  <span style="white-space: nowrap;">
    <span style="color: gold; font-size: 1.1em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); padding: 0 4px;">N</span>ever
    <span style="color: gold; font-size: 1.1em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); padding: 0 4px;">E</span>nding
    <span style="color: gold; font-size: 1.1em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); padding: 0 4px;">E</span>xalted
    <span style="color: gold; font-size: 1.1em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); padding: 0 4px;">T</span>ale;
  </span>
  <span style="white-space: nowrap;">
    <span style="color: gold; font-size: 1.1em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); padding: 0 4px;">L</span>onely
    <span style="color: gold; font-size: 1.1em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); padding: 0 4px;">O</span>bserver's
    <span style="color: gold; font-size: 1.1em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); padding: 0 4px;">R</span>omantic
    <span style="color: gold; font-size: 1.1em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,0.8); padding: 0 4px;">D</span>reamland
  </span>
</p>`;

        if (subTitle) {
            subTitle.style.visibility = 'hidden';
            subTitle.style.opacity = '0';
            subTitle.innerHTML = '';
        }

        setTimeout(function () {
            typeIt(titleInner, mainTitleContent, 50, function () {
                if (subTitle) {
                    setTimeout(function () {
                        typeIt(subTitle, subTitleContent, 30, null);
                    }, 400);
                }
            });
        }, 200);
    }

    function initPageEffects() {
        updateBannerState();
        runTypewriter();
    }

    // 首次加载
    document.addEventListener('DOMContentLoaded', initPageEffects);

    // PJAX 结束
    document.addEventListener('pjax:complete', function () {
        setTimeout(initPageEffects, 50);
    });

    // 兼容 Argon 自己的 pjaxLoaded 回调
    var oldPjaxLoaded = window.pjaxLoaded;
    window.pjaxLoaded = function () {
        if (typeof oldPjaxLoaded === 'function') {
            oldPjaxLoaded();
        }
        initPageEffects();
    };

    // 兜底执行一次,清理首页历史残留状态
    setTimeout(initPageEffects, 100);
})();
</script>

额外CSS:

/* 文章页隐藏 Banner 后,补偿顶部间距 */
body.article-no-banner #content,
body.article-no-banner .site-content {
    margin-top: 70px !important;
    padding-top: 20px !important;
}

/* 避免主内容区继续额外顶上去 */
body.article-no-banner #primary,
body.article-no-banner .content-area,
body.article-no-banner .site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇