代码之家 › 专栏 › 技术社区 › Vladimir Humeniuk

指定故事书的默认页面

storybook

2

Vladimir Humeniuk · 技术社区 · 7 年前

yarn storybook 它总是打开同一个故事(它是自动选择的) selectedKind 和 selectedStory ) . 如何手动选择默认故事?

1 回复 | 直到 7 年前

1

10

Matty J 7 年前

根据URL查询参数(即。 http://localhost:9001/?selectedKind=Component&selectedStory=default Component 和蔼 default 故事)。如果您没有任何URL参数,则storybook将选择列表中的故事(无论您如何配置故事书,它都是通过加载的第一个故事)。

loadStories 作用于 .storybook/config.js 文件

但是,如果你想总是强制选择相同的故事,然后按照以下说明操作。

最好的方法是使用故事书的addonAPI。

// .storybook/addons.js
import addonAPI from '@storybook/addons';

let firstLoad = true;
addonAPI.register('my-organisation/my-addon', (storybookAPI) => {
  storybookAPI.onStory((kind, story) => {
    // when you enter a story, if you are just loading storybook up, default to a specific kind/story. 
    if (firstLoad) {
      firstLoad = false; // make sure to set this flag to false, otherwise you will never be able to look at another story.
      storybookAPI.selectStory('FirstKind', 'default story');
    }
  });
});

有了这个片段,不管你最终基于URL的故事是什么,你都可以选择第一个故事。

您可以在此处阅读有关故事书addonAPI的更多信息: https://storybook.js.org/addons/api/ 我可能会允许在URL中添加一个查询参数,以强制选择URL中的kind+故事。

注意:可能存在提供此功能的现有插件,但快速搜索不会产生可行的结果。

2

6

Bryan Adamss 4 年前

storybook v6 ,只需将默认页面的mdx压缩到 stories

演示

// .storybook/main.js

module.exports={
  stories:[
    '../packages/intro.stories.mdx', // default page
    '../packages/**/*.stories.mdx'
  ]
}

3

4

Stuart 6 年前

要在加载时选择特定的故事,如果未指定故事,请使用以下插件

// .storybook/addons.js
import { STORIES_CONFIGURED, STORY_MISSING } from '@storybook/core-events'
import addonAPI from '@storybook/addons'

addonAPI.register('my-organisation/first-page', storybookAPI => {
  storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
    if (storybookAPI.getUrlState().path === '/story/*') {
      storybookAPI.selectStory('Kind', 'Story')
    }
  })
  storybookAPI.on(STORY_MISSING, (kind, story) => {
    storybookAPI.selectStory('Kind', 'Story')
  })
})

替换 Kind Story /story/*