nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 卡片效果使用站长自定义设置，统一全局样式

Browse Source 
- 新增毛玻璃饱和度设置 (argon_card_saturate)，默认 180%
- 更新默认值为最优设置：
  - 卡片透明度: 0.7 (原 1)
  - 毛玻璃模糊: 20px (原 8px)
  - 毛玻璃饱和度: 180%
- CSS 使用变量 --card-opacity, --card-blur, --card-saturate
- 玻璃风格样式改用 CSS 变量，跟随站长设置
- 所有页面(首页/文章页/页面模板)统一应用相同设置
- 设置页预览支持饱和度实时预览
- 暗色模式卡片背景色统一为 rgba(66,66,66,opacity)
This commit is contained in:
nanhaoluo
2026-01-12 10:03:42 +08:00
parent 05820ba105
commit 21bf48d34e
3 changed files with 100 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
settings.php
View File

@@ -1226,20 +1226,30 @@ function themeoptions_page(){
<div style="margin-bottom: 20px;">
<label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('卡片透明度', 'argon');?></label>
<div style="display: flex; align-items: center; gap: 12px;">
<input type="range" name="argon_post_background_opacity" id="argon_post_bg_opacity_slider" min="0" max="1" step="0.01" value="<?php echo (get_option('argon_post_background_opacity') == '' ? '1' : get_option('argon_post_background_opacity')); ?>" style="flex: 1; cursor: pointer; height: 6px;">
<span id="argon_post_bg_opacity_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_post_background_opacity') == '' ? '1.00' : number_format(floatval(get_option('argon_post_background_opacity')), 2)); ?></span>
<input type="range" name="argon_post_background_opacity" id="argon_post_bg_opacity_slider" min="0" max="1" step="0.01" value="<?php echo (get_option('argon_post_background_opacity') == '' ? '0.7' : get_option('argon_post_background_opacity')); ?>" style="flex: 1; cursor: pointer; height: 6px;">
<span id="argon_post_bg_opacity_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_post_background_opacity') == '' ? '0.70' : number_format(floatval(get_option('argon_post_background_opacity')), 2)); ?></span>
</div>
<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('控制文章、评论等卡片的背景透明度', 'argon');?></p>
<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('控制文章、评论等卡片的背景透明度，推荐 0.7', 'argon');?></p>
</div>
<!-- 毛玻璃模糊 -->
<div style="margin-bottom: 10px;">
<div style="margin-bottom: 20px;">
<label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('毛玻璃模糊', 'argon');?></label>
<div style="display: flex; align-items: center; gap: 12px;">
<input type="range" name="argon_card_blur" min="0" max="20" step="1" value="<?php echo (get_option('argon_card_blur', '8')); ?>" id="argon_card_blur_slider" style="flex: 1; cursor: pointer; height: 6px;">
<span id="argon_card_blur_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_card_blur', '8')); ?>px</span>
<input type="range" name="argon_card_blur" min="0" max="30" step="1" value="<?php echo (get_option('argon_card_blur', '20')); ?>" id="argon_card_blur_slider" style="flex: 1; cursor: pointer; height: 6px;">
<span id="argon_card_blur_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_card_blur', '20')); ?>px</span>
</div>
<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('为卡片添加毛玻璃模糊效果，推荐 8px', 'argon');?></p>
<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('为卡片添加毛玻璃模糊效果，推荐 20px', 'argon');?></p>
</div>
<!-- 毛玻璃饱和度 -->
<div style="margin-bottom: 10px;">
<label style="display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327;"><?php _e('毛玻璃饱和度', 'argon');?></label>
<div style="display: flex; align-items: center; gap: 12px;">
<input type="range" name="argon_card_saturate" min="100" max="250" step="10" value="<?php echo (get_option('argon_card_saturate', '180')); ?>" id="argon_card_saturate_slider" style="flex: 1; cursor: pointer; height: 6px;">
<span id="argon_card_saturate_value" style="min-width: 50px; text-align: center; font-family: monospace; font-size: 13px; background: #f0f0f1; padding: 4px 8px; border-radius: 4px;"><?php echo (get_option('argon_card_saturate', '180')); ?>%</span>
</div>
<p style="margin: 6px 0 0; font-size: 12px; color: #646970;"><?php _e('毛玻璃背景的色彩饱和度，推荐 180%', 'argon');?></p>
</div>
</div>
@@ -1252,7 +1262,7 @@ function themeoptions_page(){
<img id="effect_preview_bg" src="<?php echo esc_url($page_bg_url); ?>" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: <?php echo get_option('argon_page_background_opacity', '1'); ?>;">
<?php } ?>
<div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
<div id="blur_preview_card" style="width: 140px; height: 85px; background: rgba(255,255,255,<?php echo get_option('argon_post_background_opacity', '1'); ?>); border-radius: 10px; backdrop-filter: blur(<?php echo get_option('argon_card_blur', '8'); ?>px); -webkit-backdrop-filter: blur(<?php echo get_option('argon_card_blur', '8'); ?>px); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.4);">
<div id="blur_preview_card" style="width: 140px; height: 85px; background: rgba(255,255,255,<?php echo get_option('argon_post_background_opacity', '0.7'); ?>); border-radius: 10px; backdrop-filter: blur(<?php echo get_option('argon_card_blur', '20'); ?>px) saturate(<?php echo get_option('argon_card_saturate', '180'); ?>%); -webkit-backdrop-filter: blur(<?php echo get_option('argon_card_blur', '20'); ?>px) saturate(<?php echo get_option('argon_card_saturate', '180'); ?>%); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,0.4);">
<span style="font-size: 12px; font-weight: 500; color: #333;"><?php _e('卡片效果', 'argon'); ?></span>
<span id="blur_preview_info" style="font-size: 10px; color: #666; margin-top: 4px;"></span>
</div>
@@ -1272,6 +1282,8 @@ function themeoptions_page(){
var postBgValue = document.getElementById('argon_post_bg_opacity_value');
var blurSlider = document.getElementById('argon_card_blur_slider');
var blurValue = document.getElementById('argon_card_blur_value');
var saturateSlider = document.getElementById('argon_card_saturate_slider');
var saturateValue = document.getElementById('argon_card_saturate_value');
var previewBg = document.getElementById('effect_preview_bg');
var previewCard = document.getElementById('blur_preview_card');
@@ -1279,16 +1291,17 @@ function themeoptions_page(){
function updatePreview() {
var pageBgOpacity = pageBgSlider ? pageBgSlider.value : 1;
var postBgOpacity = postBgSlider ? postBgSlider.value : 1;
var blur = blurSlider ? blurSlider.value : 8;
var postBgOpacity = postBgSlider ? postBgSlider.value : 0.7;
var blur = blurSlider ? blurSlider.value : 20;
var saturate = saturateSlider ? saturateSlider.value : 180;
if (previewBg) {
previewBg.style.opacity = pageBgOpacity;
}
if (previewCard) {
previewCard.style.background = 'rgba(255,255,255,' + postBgOpacity + ')';
previewCard.style.backdropFilter = 'blur(' + blur + 'px)';
previewCard.style.webkitBackdropFilter = 'blur(' + blur + 'px)';
previewCard.style.backdropFilter = 'blur(' + blur + 'px) saturate(' + saturate + '%)';
previewCard.style.webkitBackdropFilter = 'blur(' + blur + 'px) saturate(' + saturate + '%)';
}
if (previewInfo) {
previewInfo.textContent = '<?php _e("透明度", "argon"); ?> ' + parseFloat(postBgOpacity).toFixed(2) + ' / <?php _e("模糊", "argon"); ?> ' + blur + 'px';
@@ -1316,6 +1329,13 @@ function themeoptions_page(){
});
}
if (saturateSlider) {
saturateSlider.addEventListener('input', function() {
saturateValue.textContent = this.value + '%';
updatePreview();
});
}
updatePreview();
})();
</script>
@@ -5234,6 +5254,8 @@ function argon_update_themeoptions(){
argon_update_option('argon_card_blur');
argon_update_option('argon_card_saturate');
argon_update_option('argon_page_background_banner_style');
argon_update_option('argon_hide_name_email_site_input');