From d9aa7d9cc52cdc6cb4fe664132f5689a5549eb44 Mon Sep 17 00:00:00 2001
From: sunlei <yemu2333@outlook.com>
Date: Wed, 1 Jul 2026 14:57:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8C=89WordPress=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=8D=9A=E5=AE=A2=E9=A1=B6=E9=83=A8=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__tests__/App.spec.ts          |  3 +-
 src/__tests__/useBlogTheme.spec.ts | 50 ++++++++++++++++++++++++++++++
 src/components/blog/BlogHeader.tsx | 42 +++++++++++++------------
 src/hooks/useBlogTheme.ts          | 40 ++++++++++++++++++++++++
 4 files changed, 114 insertions(+), 21 deletions(-)

diff --git a/src/__tests__/App.spec.ts b/src/__tests__/App.spec.ts
index 5d236dd..33254fd 100644
--- a/src/__tests__/App.spec.ts
+++ b/src/__tests__/App.spec.ts
@@ -137,7 +137,8 @@ describe('App', () => {
     });
 
     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 () => {
diff --git a/src/__tests__/useBlogTheme.spec.ts b/src/__tests__/useBlogTheme.spec.ts
index 63989f2..4173936 100644
--- a/src/__tests__/useBlogTheme.spec.ts
+++ b/src/__tests__/useBlogTheme.spec.ts
@@ -109,6 +109,7 @@ describe('useBlogTheme', () => {
           label: '首页',
         },
       ],
+      headerMenuVisible: false,
       home: 'https://blog.kwitsukasa.top',
       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')");
   });
 
+  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 () => {
     const { applyWordpressThemeConfig, siteConfig } = useBlogTheme();
 
diff --git a/src/components/blog/BlogHeader.tsx b/src/components/blog/BlogHeader.tsx
index 0252758..be2a8f8 100644
--- a/src/components/blog/BlogHeader.tsx
+++ b/src/components/blog/BlogHeader.tsx
@@ -106,26 +106,28 @@ export default defineComponent({
                   </div>
                 </div>
 
-                <ul class="kt-blog__header-nav kt-blog__header-nav--hover">
-                  {siteConfig.value.headerMenu.map((item) => (
-                    <li key={item.label} class="kt-blog__header-nav-item">
-                      {item.external ? (
-                        <a
-                          class="kt-blog__header-nav-link"
-                          href={item.href}
-                          rel="noopener noreferrer"
-                          target="_blank"
-                        >
-                          {item.label}
-                        </a>
-                      ) : (
-                        <RouterLink class="kt-blog__header-nav-link" to={item.href}>
-                          {item.label}
-                        </RouterLink>
-                      )}
-                    </li>
-                  ))}
-                </ul>
+                {siteConfig.value.headerMenuVisible && siteConfig.value.headerMenu.length > 0 && (
+                  <ul class="kt-blog__header-nav kt-blog__header-nav--hover">
+                    {siteConfig.value.headerMenu.map((item) => (
+                      <li key={item.label} class="kt-blog__header-nav-item">
+                        {item.external ? (
+                          <a
+                            class="kt-blog__header-nav-link"
+                            href={item.href}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                          >
+                            {item.label}
+                          </a>
+                        ) : (
+                          <RouterLink class="kt-blog__header-nav-link" to={item.href}>
+                            {item.label}
+                          </RouterLink>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                )}
 
                 <ul class="kt-blog__header-nav kt-blog__header-nav--end">
                   <li class="kt-blog__header-search-item">
diff --git a/src/hooks/useBlogTheme.ts b/src/hooks/useBlogTheme.ts
index abb2b06..1d3cba3 100644
--- a/src/hooks/useBlogTheme.ts
+++ b/src/hooks/useBlogTheme.ts
@@ -66,6 +66,7 @@ export interface WordpressArgonThemeConfig {
   darkmodeAutoSwitch?: 'alwaysoff' | 'alwayson' | 'system' | 'time' | string;
   enableCustomThemeColor?: boolean;
   headerMenu?: BlogThemeMenuItem[];
+  headerMenuVisible?: boolean | string;
   htmlClass?: string | string[];
   site?: {
     authorAvatar?: string;
@@ -92,6 +93,7 @@ interface BlogRuntimeThemeConfig {
   backgroundOpacity: number;
   bodyClass: string[];
   headerMenu: BlogThemeMenuItem[];
+  headerMenuVisible: boolean;
   siteAuthorAvatar: string;
   htmlClass: string[];
   immersionColor: boolean;
@@ -142,6 +144,7 @@ const runtimeConfig = reactive<BlogRuntimeThemeConfig>({
   backgroundOpacity: 1,
   bodyClass: ['home', 'blog', 'wp-theme-argon'],
   headerMenu: [...defaultHeaderMenu],
+  headerMenuVisible: false,
   htmlClass: [
     'triple-column',
     'immersion-color',
@@ -173,6 +176,7 @@ const siteConfig = computed(() => ({
   authorName: runtimeConfig.siteAuthorName,
   description: runtimeConfig.siteDescription,
   headerMenu: runtimeConfig.headerMenu,
+  headerMenuVisible: runtimeConfig.headerMenuVisible,
   home: runtimeConfig.siteHome,
   sidebarMenu: runtimeConfig.sidebarMenu,
   title: runtimeConfig.siteTitle,
@@ -296,6 +300,7 @@ function applyWordpressThemeConfig(config: WordpressArgonThemeConfig) {
       config.site?.home || config.site?.url || runtimeConfig.siteHome || runtimeConfig.siteUrl,
     );
   }
+  runtimeConfig.headerMenuVisible = normalizeHeaderMenuVisible(config);
   runtimeConfig.tripleColumn = hasRemoteHtmlClass
     ? nextHtmlClass.includes('triple-column')
     : runtimeConfig.tripleColumn;
@@ -915,6 +920,41 @@ function normalizePositiveNumber(value?: number | string) {
   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.
  * @returns CSS `url(...)` token after replacing legacy Argon demo placeholders with previous blog assets.