kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(navigation): let CSS size the nav logo and drop the inline width cap

Browse Source 
The navbar logo carried an inline `height:36px;width:auto;max-width:{logo_width}px`
while `.navbar-logo > img` already owns `height:36px;padding:0 30px`. Under
`box-sizing:border-box` that max-width capped the border box, so the 60px of
horizontal padding stayed inside it and wide logos were squeezed against a
fixed height, breaking the intrinsic aspect ratio.

- Render the nav logo with no inline sizing; CSS alone sizes it.
- Add a `$lazy` argument to jio_get_adaptive_theme_img() so the navbar can emit
  the real src up front instead of a square lazyload placeholder; defaults to
  'auto' so every other caller keeps the lazy_other behaviour.
- Remove the superseded logo_width plumbing: the setting (PHP + VUE schemas),
  Settings::logo_width(), jio_get_site_logo_width(), the --jio-logo-width token
  and the unused has_logo context key.
- Cover the contract in the header reference test.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed 2026-11-05 17:50:56 +08:00
1 parent 3ce5bfc20c
commit 8e74b60570
9 files changed
+36 -43
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/admin/src/schema/sections/global/logo.js
-2
View File
@@ -13,7 +13,6 @@ export const logoSchema = {
site_logo_dark: '',
site_favicon: defaultFavicon,
site_icon: defaultFavicon,
logo_width: 150,
logo_text: '',
},
groups: [
@@ -24,7 +23,6 @@ export const logoSchema = {
fields: [
{ key: 'site_logo', label: '站点 Logo', type: 'media', help: '建议尺寸 300x80，支持 PNG/SVG 透明背景' },
{ key: 'site_logo_dark', label: '暗色模式 Logo', type: 'media', help: '暗色模式下显示的 Logo，留空则使用默认 Logo' },
{ key: 'logo_width', label: 'Logo 宽度 (px)', type: 'number', min: 50, max: 400, step: 10, help: '导航栏中 Logo 显示宽度' },
{ key: 'logo_text', label: 'Logo 文字', type: 'input', placeholder: '当无 Logo 图片时显示的文字', help: '同时作为首页标题和 alt 文本使用' },
],
},
inc/helpers/header/jio-header-render.php
+3 -6
View File
@@ -41,14 +41,12 @@ if (!function_exists('jio_get_header_nav_context')) :
$brand_name = $brand_name !== '' ? $brand_name : $site_name;
$logo_url = function_exists('jio_get_site_logo_url') ? trim((string) jio_get_site_logo_url()) : '';
$logo_dark = function_exists('jio_get_site_logo_dark_url') ? trim((string) jio_get_site_logo_dark_url()) : '';
$logo_width = function_exists('jio_get_site_logo_width') ? jio_get_site_logo_width() : 150;
$logo_more = $logo_width > 0
? 'style="height:36px;width:auto;max-width:' . max(36, (int) $logo_width) . 'px"'
: 'style="height:36px;width:auto"';
// 尺寸由 .navbar-logo > img 统一控制（height:36px / width:auto），
// 不叠加内联 max-width，否则 border-box 下的水平内边距会挤压图片。
$logo_html = '';
if ($logo_url !== '' || $logo_dark !== '') {
$logo_html = function_exists('jio_get_adaptive_theme_img')
? jio_get_adaptive_theme_img($logo_url, $logo_dark, $brand_name, $logo_more)
? jio_get_adaptive_theme_img($logo_url, $logo_dark, $brand_name, '', false)
: '';
}
@@ -80,7 +78,6 @@ if (!function_exists('jio_get_header_nav_context')) :
'scroll_down_hide' => (!isset($settings['nav_scroll_down_hide']) || !empty($settings['nav_scroll_down_hide'])) && $nav_fixed,
'brand_name' => $brand_name,
'logo_html' => $logo_html,
'has_logo' => $logo_html !== '',
'theme_positions' => is_array($theme_positions) ? $theme_positions : [],
'can_publish' => $can_publish,
'show_slide' => $show_slide,
inc/helpers/template-tags/media-brand.php
+14 -22
View File
@@ -104,35 +104,20 @@ function jio_get_site_logo_text(): string {
}
endif;
if (!function_exists('jio_get_site_logo_width')):
/**
* 获取导航 Logo 宽度
*
* @return int
*/
function jio_get_site_logo_width(): int {
if (class_exists('\Jio\Settings\Settings')) {
return \Jio\Settings\Settings::logo_width();
}
$width = (int) jio_get_setting('logo_width', 150);
return max(50, min(400, $width));
}
endif;
if (!function_exists('jio_get_adaptive_theme_img')):
/**
* Build a single light/dark adaptive image (legacy white-src/dark-src contract).
*
* theme.js syncThemeImages() swaps src via white-src / dark-src attributes.
*
* @param string $white_src Light mode image URL.
* @param string $dark_src Dark mode image URL.
* @param string $alt Alt text.
* @param string $more Extra attributes (already escaped by caller if needed).
* @param string $white_src Light mode image URL.
* @param string $dark_src Dark mode image URL.
* @param string $alt Alt text.
* @param string $more Extra attributes (already escaped by caller if needed).
* @param string|bool $lazy 'auto' follows lazy_other; false renders the real src up front.
* @return string
*/
function jio_get_adaptive_theme_img(string $white_src = '', string $dark_src = '', string $alt = '', string $more = ''): string {
function jio_get_adaptive_theme_img(string $white_src = '', string $dark_src = '', string $alt = '', string $more = '', $lazy = 'auto'): string {
$white_src = trim($white_src);
$dark_src = trim($dark_src);
@@ -148,6 +133,9 @@ function jio_get_adaptive_theme_img(string $white_src = '', string $dark_src = '
if ($alt === '') {
$alt = get_bloginfo('name');
}
if ($lazy === 'auto') {
$lazy = jio_is_lazy('lazy_other');
}
$is_dark = false;
if (class_exists('\Jio\Settings\Settings') && method_exists('\Jio\Settings\Settings', 'initial_theme_mode')) {
@@ -155,6 +143,10 @@ function jio_get_adaptive_theme_img(string $white_src = '', string $dark_src = '
}
$this_src = $is_dark ? $dark_src : $white_src;
return '<img' . jio_get_lazy_attr('lazy_other', (string) $this_src) . ' white-src="' . esc_url($white_src) . '" dark-src="' . esc_url($dark_src) . '" alt="' . esc_attr($alt) . '"' . ($more !== '' ? ' ' . $more : '') . '>';
$src_attr = $lazy
? jio_get_lazy_attr('lazy_other', (string) $this_src)
: ' src="' . esc_url((string) $this_src) . '"';
return '<img' . $src_attr . ' white-src="' . esc_url($white_src) . '" dark-src="' . esc_url($dark_src) . '" alt="' . esc_attr($alt) . '"' . ($more !== '' ? ' ' . $more : '') . '>';
}
endif;
src/Admin/Schema/GlobalSchema.php
-1
View File
@@ -158,7 +158,6 @@ class GlobalSchema {
['key' => 'logo', 'title' => 'Logo 设置', 'fields' => [
['key' => 'site_logo', 'label' => '站点 Logo', 'type' => 'media', 'default' => ''],
['key' => 'site_logo_dark', 'label' => '暗色模式 Logo', 'type' => 'media', 'default' => ''],
['key' => 'logo_width', 'label' => 'Logo 宽度', 'type' => 'number', 'default' => 150, 'min' => 50, 'max' => 400],
['key' => 'logo_text', 'label' => 'Logo 文字', 'type' => 'input', 'default' => ''],
]],
['key' => 'favicon', 'title' => '站点图标', 'fields' => [
src/Frontend/InlineStyleBuilder.php
-2
View File
@@ -18,7 +18,6 @@ class InlineStyleBuilder {
$main_radius = class_exists('\Jio\Settings\Settings') ? \Jio\Settings\Settings::main_radius() : 12;
$container_max = class_exists('\Jio\Settings\Settings') ? \Jio\Settings\Settings::container_max_width() : 1200;
$font_family = class_exists('\Jio\Settings\Settings') ? \Jio\Settings\Settings::font_family() : 'system';
$logo_width = class_exists('\Jio\Settings\Settings') ? \Jio\Settings\Settings::logo_width() : 150;
$sidebar_cfg = class_exists('\Jio\Settings\Settings') ? \Jio\Settings\Settings::get_sidebar_config() : ['width' => 311, 'enabled' => true, 'position' => 'right'];
$list_settings = class_exists('\Jio\Settings\Settings') ? \Jio\Settings\Settings::get_post_list_style_settings() : [];
@@ -47,7 +46,6 @@ class InlineStyleBuilder {
'--font-display' => $font_stacks['display'],
'--font-ui' => $font_stacks['ui'],
'--font-heading' => $font_stacks['ui'],
'--jio-logo-width' => $logo_width . 'px',
'--nav-height' => '60px',
];
src/Settings/DisplayPageGroups.php
-1
View File
@@ -149,7 +149,6 @@ trait DisplayPageGroups {
'site_logo' => self::logo_url(),
'site_logo_dark' => self::logo_dark_url(),
'logo_text' => self::logo_text(),
'logo_width' => self::logo_width(),
'site_favicon' => self::favicon_url(),
'theme_mode' => self::theme_mode(),
'theme_mode_button' => self::get_theme_mode_button_positions(),
src/Settings/FacadeBulk.php
-8
View File
@@ -199,14 +199,6 @@ trait FacadeBulk {
/** 获取导航 Logo 宽度 */
public static function logo_width(): int {
$width = (int) self::get_value('logo_width', 150);
return max(50, min(400, $width));
}
/** 获取Favicon URL */
public static function custom_favicon_url(): string {
$favicon = (string) self::get_value('site_favicon', '');
tests/navigation/header-reference-contract.test.cjs
+19
View File
@@ -131,3 +131,22 @@ test('header source restores the reference typography and Bootstrap control dime
assert.match(mainCss, /\.navbar-avatar\s*\{[^}]*margin-top:\s*3px;[^}]*width:\s*29px;[^}]*height:\s*29px;/s);
assert.doesNotMatch(css, /\.jio-navbar-account|\.jio-nav-avatar|\.navbar-form \.toggle-radius:not|navbar-form\.flex\.ac\s*\{[^}]*min-height|\.navbar-search(?:\.show)?\s*\{[^}]*transform:/s);
});
test('nav logo is sized by CSS alone so the image keeps its aspect ratio', () => {
const mainCss = read('assets/css/main.css');
const render = read('inc/helpers/header/jio-header-render.php');
const helper = read('inc/helpers/template-tags/media-brand.php');
// The reference owns the logo box in CSS: fixed 36px height, auto width, no cap.
assert.match(mainCss, /\.navbar-logo > img \{\s*\n\s*height: 36px;\s*\n\s*padding: 0 30px;\s*\n\}/);
// A max-width on the <img> would cap the border box while the 60px horizontal
// padding stays inside it (box-sizing: border-box), squeezing wide logos.
assert.doesNotMatch(render, /max-width:\s*\d+px[^;]*"\s*\)/);
assert.doesNotMatch(render, /style="height:36px/);
assert.doesNotMatch(helper, /jio_get_site_logo_width|logo_width/);
// Nav logo loads its real src up front; only the shared helper still lazy-loads elsewhere.
assert.match(render, /jio_get_adaptive_theme_img\(\$logo_url, \$logo_dark, \$brand_name, '', false\)/);
assert.match(helper, /\$lazy = 'auto'/);
});
tests/widget-system/post-thumbnail-render-harness.php
-1
View File
@@ -16,7 +16,6 @@ namespace Jio\Settings {
public static function container_max_width(): int { return 1200; }
public static function font_family(): string { return 'system'; }
public static function font_family_custom(): string { return ''; }
public static function logo_width(): int { return 150; }
public static function get_sidebar_config(): array { return ['width' => 311]; }
public static function get_header_theme_config(): array { return []; }
public static function background_css(string $key): string { return ''; }