如何配置Storybook隐藏Docs页面中重复显示的首个故事？

你可以通过以下几种方式配置，只保留集合标题和描述，移除那个带控件的首个故事副本：

方式一：全局生效（所有组件集合） #

在.storybook/preview.js文件中添加配置，全局禁用所有Docs页面的预览区域：

export const parameters = {
  docs: {
    preview: {
      disable: true,
    },
  },
};

方式二：单个组件集合生效 #

如果只需要针对某个组件的故事集合修改，在该组件的故事文件（比如Button.stories.js）的默认导出中添加参数：

export default {
  title: 'Components/Button',
  description: '按钮组件用于触发操作，支持多种尺寸和状态',
  parameters: {
    docs: {
      preview: {
        disable: true,
      },
    },
  },
};

备选方案：自定义Docs页面布局 #

如果上述参数配置不生效，可以自定义Docs页面组件，手动保留标题和描述，剔除预览区域：

1. 创建自定义Docs页面组件（比如.storybook/CustomDocsPage.jsx）：

import { DocsPage, Title, Description } from '@storybook/addon-docs';

export const CustomDocsPage = ({ children, context }) => {
  return (
    <DocsPage context={context}>
      <Title />
      <Description />
      {/* 仅保留标题和描述，跳过默认的预览模块 */}
      {children}
    </DocsPage>
  );
};

2. 在.storybook/preview.js中配置使用自定义页面：

import { CustomDocsPage } from './CustomDocsPage';

export const parameters = {
  docs: {
    page: CustomDocsPage,
  },
};

这样就能精准保留你需要的标题和描述，移除无意义的首个故事预览副本了。

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