fix: 按WordPress配置隐藏博客顶部菜单
This commit is contained in:
parent
bc261f56b8
commit
d9aa7d9cc5
@ -137,7 +137,8 @@ describe('App', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.find('.kt-blog__header-collapse').exists()).toBe(true);
|
expect(wrapper.find('.kt-blog__header-collapse').exists()).toBe(true);
|
||||||
expect(wrapper.find('.kt-blog__header-nav').exists()).toBe(true);
|
expect(wrapper.find('.kt-blog__header-nav--hover').exists()).toBe(false);
|
||||||
|
expect(wrapper.find('.kt-blog__header-nav--end').exists()).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('loads local blog theme config by default', async () => {
|
it('loads local blog theme config by default', async () => {
|
||||||
|
|||||||
@ -109,6 +109,7 @@ describe('useBlogTheme', () => {
|
|||||||
label: '首页',
|
label: '首页',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
headerMenuVisible: false,
|
||||||
home: 'https://blog.kwitsukasa.top',
|
home: 'https://blog.kwitsukasa.top',
|
||||||
sidebarMenu: [
|
sidebarMenu: [
|
||||||
{
|
{
|
||||||
@ -147,6 +148,55 @@ describe('useBlogTheme', () => {
|
|||||||
expect(document.querySelector('#kt-blog-theme-style')?.textContent).toContain("url('http://s3.kwitsukasa.top/images/avatar-tsukasa-1.jpg')");
|
expect(document.querySelector('#kt-blog-theme-style')?.textContent).toContain("url('http://s3.kwitsukasa.top/images/avatar-tsukasa-1.jpg')");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('keeps toolbar menu hidden unless WordPress exposes an explicit visibility flag', async () => {
|
||||||
|
const { applyWordpressThemeConfig, siteConfig } = useBlogTheme();
|
||||||
|
|
||||||
|
applyWordpressThemeConfig({
|
||||||
|
headerMenu: [
|
||||||
|
{
|
||||||
|
href: 'https://blog.kwitsukasa.top',
|
||||||
|
label: '首页',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
site: {
|
||||||
|
home: 'https://blog.kwitsukasa.top',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await nextTick();
|
||||||
|
|
||||||
|
expect(siteConfig.value.headerMenu).toEqual([
|
||||||
|
{
|
||||||
|
external: false,
|
||||||
|
href: '/',
|
||||||
|
label: '首页',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
expect(siteConfig.value.headerMenuVisible).toBe(false);
|
||||||
|
|
||||||
|
applyWordpressThemeConfig({
|
||||||
|
headerMenu: [
|
||||||
|
{
|
||||||
|
href: 'https://blog.kwitsukasa.top/archives',
|
||||||
|
label: '归档',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
headerMenuVisible: 'true',
|
||||||
|
site: {
|
||||||
|
home: 'https://blog.kwitsukasa.top',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await nextTick();
|
||||||
|
|
||||||
|
expect(siteConfig.value.headerMenu).toEqual([
|
||||||
|
{
|
||||||
|
external: false,
|
||||||
|
href: '/archives',
|
||||||
|
label: '归档',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
expect(siteConfig.value.headerMenuVisible).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
it('maps legacy Argon placeholder image config back to previous blog static assets', async () => {
|
it('maps legacy Argon placeholder image config back to previous blog static assets', async () => {
|
||||||
const { applyWordpressThemeConfig, siteConfig } = useBlogTheme();
|
const { applyWordpressThemeConfig, siteConfig } = useBlogTheme();
|
||||||
|
|
||||||
|
|||||||
@ -106,6 +106,7 @@ export default defineComponent({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{siteConfig.value.headerMenuVisible && siteConfig.value.headerMenu.length > 0 && (
|
||||||
<ul class="kt-blog__header-nav kt-blog__header-nav--hover">
|
<ul class="kt-blog__header-nav kt-blog__header-nav--hover">
|
||||||
{siteConfig.value.headerMenu.map((item) => (
|
{siteConfig.value.headerMenu.map((item) => (
|
||||||
<li key={item.label} class="kt-blog__header-nav-item">
|
<li key={item.label} class="kt-blog__header-nav-item">
|
||||||
@ -126,6 +127,7 @@ export default defineComponent({
|
|||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
)}
|
||||||
|
|
||||||
<ul class="kt-blog__header-nav kt-blog__header-nav--end">
|
<ul class="kt-blog__header-nav kt-blog__header-nav--end">
|
||||||
<li class="kt-blog__header-search-item">
|
<li class="kt-blog__header-search-item">
|
||||||
|
|||||||
@ -66,6 +66,7 @@ export interface WordpressArgonThemeConfig {
|
|||||||
darkmodeAutoSwitch?: 'alwaysoff' | 'alwayson' | 'system' | 'time' | string;
|
darkmodeAutoSwitch?: 'alwaysoff' | 'alwayson' | 'system' | 'time' | string;
|
||||||
enableCustomThemeColor?: boolean;
|
enableCustomThemeColor?: boolean;
|
||||||
headerMenu?: BlogThemeMenuItem[];
|
headerMenu?: BlogThemeMenuItem[];
|
||||||
|
headerMenuVisible?: boolean | string;
|
||||||
htmlClass?: string | string[];
|
htmlClass?: string | string[];
|
||||||
site?: {
|
site?: {
|
||||||
authorAvatar?: string;
|
authorAvatar?: string;
|
||||||
@ -92,6 +93,7 @@ interface BlogRuntimeThemeConfig {
|
|||||||
backgroundOpacity: number;
|
backgroundOpacity: number;
|
||||||
bodyClass: string[];
|
bodyClass: string[];
|
||||||
headerMenu: BlogThemeMenuItem[];
|
headerMenu: BlogThemeMenuItem[];
|
||||||
|
headerMenuVisible: boolean;
|
||||||
siteAuthorAvatar: string;
|
siteAuthorAvatar: string;
|
||||||
htmlClass: string[];
|
htmlClass: string[];
|
||||||
immersionColor: boolean;
|
immersionColor: boolean;
|
||||||
@ -142,6 +144,7 @@ const runtimeConfig = reactive<BlogRuntimeThemeConfig>({
|
|||||||
backgroundOpacity: 1,
|
backgroundOpacity: 1,
|
||||||
bodyClass: ['home', 'blog', 'wp-theme-argon'],
|
bodyClass: ['home', 'blog', 'wp-theme-argon'],
|
||||||
headerMenu: [...defaultHeaderMenu],
|
headerMenu: [...defaultHeaderMenu],
|
||||||
|
headerMenuVisible: false,
|
||||||
htmlClass: [
|
htmlClass: [
|
||||||
'triple-column',
|
'triple-column',
|
||||||
'immersion-color',
|
'immersion-color',
|
||||||
@ -173,6 +176,7 @@ const siteConfig = computed(() => ({
|
|||||||
authorName: runtimeConfig.siteAuthorName,
|
authorName: runtimeConfig.siteAuthorName,
|
||||||
description: runtimeConfig.siteDescription,
|
description: runtimeConfig.siteDescription,
|
||||||
headerMenu: runtimeConfig.headerMenu,
|
headerMenu: runtimeConfig.headerMenu,
|
||||||
|
headerMenuVisible: runtimeConfig.headerMenuVisible,
|
||||||
home: runtimeConfig.siteHome,
|
home: runtimeConfig.siteHome,
|
||||||
sidebarMenu: runtimeConfig.sidebarMenu,
|
sidebarMenu: runtimeConfig.sidebarMenu,
|
||||||
title: runtimeConfig.siteTitle,
|
title: runtimeConfig.siteTitle,
|
||||||
@ -296,6 +300,7 @@ function applyWordpressThemeConfig(config: WordpressArgonThemeConfig) {
|
|||||||
config.site?.home || config.site?.url || runtimeConfig.siteHome || runtimeConfig.siteUrl,
|
config.site?.home || config.site?.url || runtimeConfig.siteHome || runtimeConfig.siteUrl,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
runtimeConfig.headerMenuVisible = normalizeHeaderMenuVisible(config);
|
||||||
runtimeConfig.tripleColumn = hasRemoteHtmlClass
|
runtimeConfig.tripleColumn = hasRemoteHtmlClass
|
||||||
? nextHtmlClass.includes('triple-column')
|
? nextHtmlClass.includes('triple-column')
|
||||||
: runtimeConfig.tripleColumn;
|
: runtimeConfig.tripleColumn;
|
||||||
@ -915,6 +920,41 @@ function normalizePositiveNumber(value?: number | string) {
|
|||||||
return Number.isFinite(numericValue) ? Math.max(0, numericValue) : null;
|
return Number.isFinite(numericValue) ? Math.max(0, numericValue) : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param config WordPress/Argon 主题配置,`headerMenu` 只表示菜单数据,不表示 toolbar 菜单位置已启用。
|
||||||
|
* @returns 是否渲染顶部工具栏菜单;未提供显式开关时默认关闭,复现当前线上 WordPress 未启用顶部菜单位置的行为。
|
||||||
|
*/
|
||||||
|
function normalizeHeaderMenuVisible(config: WordpressArgonThemeConfig) {
|
||||||
|
const rawValue = config.headerMenuVisible ?? config.toolbarMenuVisible ?? config.showHeaderMenu ?? config.showToolbarMenu;
|
||||||
|
|
||||||
|
return normalizeBooleanFlag(rawValue) === true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param value 后端或内联配置给出的布尔语义值,兼容 WordPress 字符串选项和真实 boolean。
|
||||||
|
* @returns 可识别的布尔值;无法识别时返回 undefined,避免把菜单数据误当成显隐开关。
|
||||||
|
*/
|
||||||
|
function normalizeBooleanFlag(value: unknown): boolean | undefined {
|
||||||
|
if (typeof value === 'boolean') {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof value !== 'string') {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalized = value.trim().toLowerCase();
|
||||||
|
if (['1', 'true', 'yes', 'on', 'show', 'visible', 'enabled'].includes(normalized)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (['0', 'false', 'no', 'off', 'hide', 'hidden', 'disabled'].includes(normalized)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param value Theme image URL returned by the API or static defaults.
|
* @param value Theme image URL returned by the API or static defaults.
|
||||||
* @returns CSS `url(...)` token after replacing legacy Argon demo placeholders with previous blog assets.
|
* @returns CSS `url(...)` token after replacing legacy Argon demo placeholders with previous blog assets.
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user