在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;
}




