如何自定义Storybook浏览器标签页标题并去除默认后缀？

你之前尝试的两种方法失效的原因：

• 主题配置中的brandTitle仅控制Storybook界面内的品牌展示（比如左侧导航栏标题），不影响浏览器标签页标题；
• managerHead中直接设置document.title只会在页面初始加载时生效，Storybook切换故事/文档时会动态覆盖标签页标题，导致你的设置被冲掉。

以下是两种可行的解决方案：

方案1：监听标题变化并自动替换（简单高效） #

通过MutationObserver监听页面标题的变化，实时替换成你需要的内容。修改main.ts中的managerHead配置：

managerHead: (head) => 
  `${head}
  <script>
    // 创建观察者监听title元素的内容变化
    const titleObserver = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        if (mutation.target.nodeName === 'TITLE') {
          // 可选方式1：设置固定的自定义标题
          document.title = '你的自定义标题';
          
          // 可选方式2：保留原有前缀，移除"⋅ Storybook"后缀
          // document.title = document.title.replace('⋅ Storybook', '');
        }
      });
    });

    // 启动监听
    titleObserver.observe(document.querySelector('title'), { childList: true });
  </script>
  `,

这种方法会在每次Storybook更新标题时自动修正，确保标签页标题始终符合你的需求。

方案2：通过Manager组件监听导航事件（灵活可控） #

适合需要根据当前展示的故事/文档动态调整标题的场景。创建src/manager.tsx文件：

import { addons } from '@storybook/addons';
import { useEffect } from 'react';
import { useChannel } from '@storybook/manager-api';

// 保留你的主题配置（如果需要）
addons.setConfig({
  theme: create({
    brandTitle: "New Title",
    base: "light",
    brandImage: logo,
  })
});

export const managerEntries = () => [
  {
    name: 'custom-title-handler',
    render: () => {
      // 监听Storybook的导航事件
      const channel = useChannel({
        'storybook/navigation/navigate': (navArgs) => {
          // 根据当前故事的标题自定义标签页内容
          document.title = `${navArgs.title} - 你的自定义后缀`;
          // 或者设置固定标题：document.title = '你的自定义标题';
        },
      });

      // 页面初始化时设置一次标题
      useEffect(() => {
        document.title = '你的自定义标题';
      }, []);

      return null; // 无需渲染可见内容
    },
  },
];

然后在main.ts中配置引入这个自定义Manager文件：

export default {
  // 其他现有配置...
  managerEntries: ['./src/manager.tsx'],
};

内容的提问来源于stack exchange，提问作者jt25