fix: 修复页面加载时的样式跳变问题

- 在 header.php 中添加预加载脚本,页面渲染前应用用户样式设置
- 优化强制刷新逻辑,避免二次刷新
- 移除 argontheme.js 中重复的样式应用代码
- 修复字体、阴影、滤镜、UI 样式的闪烁问题
This commit is contained in:
2026-01-20 18:30:08 +08:00
parent 7fcd460723
commit dcaa19f5bc
2 changed files with 72 additions and 24 deletions

View File

@@ -831,11 +831,8 @@ if (argonConfig.waterflow_columns != "1") {
$("html").addClass("use-serif");
localStorage['Argon_Use_Serif'] = "true";
});
if (localStorage['Argon_Use_Serif'] == "true"){
$("html").addClass("use-serif");
}else if (localStorage['Argon_Use_Serif'] == "false"){
$("html").removeClass("use-serif");
}
// 字体设置已在 header.php 中预加载,此处无需重复应用
//阴影
$("#blog_setting_shadow_small").on("click" , function(){
$("html").removeClass("use-big-shadow");
@@ -845,11 +842,7 @@ if (argonConfig.waterflow_columns != "1") {
$("html").addClass("use-big-shadow");
localStorage['Argon_Use_Big_Shadow'] = "true";
});
if (localStorage['Argon_Use_Big_Shadow'] == "true"){
$("html").addClass("use-big-shadow");
}else if (localStorage['Argon_Use_Big_Shadow'] == "false"){
$("html").removeClass("use-big-shadow");
}
// 阴影设置已在 header.php 中预加载,此处无需重复应用
//滤镜
function setBlogFilter(name){
if (name == undefined || name == ""){
@@ -865,7 +858,9 @@ if (argonConfig.waterflow_columns != "1") {
$("#blog_setting_filters .blog-setting-filter-btn[filter-name='" + name + "']").addClass("active");
localStorage['Argon_Filter'] = name;
}
setBlogFilter(localStorage['Argon_Filter']);
// 滤镜设置已在 header.php 中预加载,此处只需设置按钮状态
let currentFilter = localStorage['Argon_Filter'] || 'off';
$("#blog_setting_filters .blog-setting-filter-btn[filter-name='" + currentFilter + "']").addClass("active");
$(".blog-setting-filter-btn").on("click" , function(){
setBlogFilter(this.getAttribute("filter-name"));
});
@@ -883,7 +878,9 @@ if (argonConfig.waterflow_columns != "1") {
$(".blog-setting-style-btn[style-name='" + style + "']").addClass("active");
localStorage['Argon_UI_Style'] = style;
}
setUIStyle(localStorage['Argon_UI_Style']);
// UI 样式设置已在 header.php 中预加载,此处只需设置按钮状态
let currentUIStyle = localStorage['Argon_UI_Style'] || 'default';
$(".blog-setting-style-btn[style-name='" + currentUIStyle + "']").addClass("active");
$(".blog-setting-style-btn").on("click" , function(){
setUIStyle(this.getAttribute("style-name"));
});

View File

@@ -254,7 +254,39 @@
<meta name="theme-version" content="<?php echo $GLOBALS['theme_version']; ?>">
<!-- 预加载用户样式设置 - 避免样式跳变 -->
<script>
(function() {
var html = document.documentElement;
var ls = localStorage;
// 字体设置
if (ls.getItem('Argon_Use_Serif') === 'true') {
html.classList.add('use-serif');
} else if (ls.getItem('Argon_Use_Serif') === 'false') {
html.classList.remove('use-serif');
}
// 阴影设置
if (ls.getItem('Argon_Use_Big_Shadow') === 'true') {
html.classList.add('use-big-shadow');
} else if (ls.getItem('Argon_Use_Big_Shadow') === 'false') {
html.classList.remove('use-big-shadow');
}
// 滤镜设置
var filter = ls.getItem('Argon_Filter');
if (filter && filter !== 'off') {
html.classList.add('filter-' + filter);
}
// UI 样式设置
var uiStyle = ls.getItem('Argon_UI_Style');
if (uiStyle && uiStyle !== 'default') {
html.classList.add('style-' + uiStyle);
}
})();
</script>
<link rel="profile" href="http://gmpg.org/xfn/11">
@@ -302,8 +334,38 @@
// 版本变化时清除所有缓存
if (lastVersion !== currentVersion) {
// 如果不是首次访问且需要刷新,先标记再刷新
if (lastVersion !== null) {
// 设置刷新标记
sessionStorage.setItem('argon_needs_refresh', '1');
// 清除 sessionStorage 中的其他数据
var needsRefresh = sessionStorage.getItem('argon_needs_refresh');
try {
var keys = Object.keys(sessionStorage);
keys.forEach(function(key) {
if (key !== 'argon_needs_refresh') {
sessionStorage.removeItem(key);
}
});
} catch(e) {}
// 更新版本号
localStorage.setItem(forceRefreshKey, currentVersion);
// 强制硬刷新(绕过缓存)
window.location.reload(true);
return; // 阻止后续代码执行
}
// 首次访问,只更新版本号
localStorage.setItem(forceRefreshKey, currentVersion);
}
// 检查是否是刷新后的页面
if (sessionStorage.getItem('argon_needs_refresh') === '1') {
sessionStorage.removeItem('argon_needs_refresh');
// 清除 Service Worker 缓存
if ('caches' in window) {
caches.keys().then(function(names) {
@@ -321,17 +383,6 @@
});
});
}
// 如果不是首次访问,强制硬刷新
if (lastVersion !== null) {
// 清除 sessionStorage
try { sessionStorage.clear(); } catch(e) {}
// 强制硬刷新(绕过缓存)
if (window.location.reload) {
window.location.reload(true);
}
}
}
})();
</script>