開始使用
- 安裝擴充套件
yarn add @sheriffmoose/storybook-md -D
- 在你的 main.js 中加入擴充套件並更新 stories 的匯入
module.exports = {
...
"stories": [
"../*.@(md|html)",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@sheriffmoose/storybook-md",
...
],
...
}
- 如果需要,您可以選擇性地傳遞
mdInclude
和/或mdExclude
選項,如下所示
module.exports = {
addons: [
{
name: '@sheriffmoose/storybook-md',
options: {
mdInclude: path.join(process.cwd(), 'src'),
mdExclude: [/\.component\.html/] // Disable loading Angular component files
}
}
]
}
這樣就完成了。現在您可以在 Storybook 側邊欄中找到 README 和 CHANGELOG,以及您想要的 HTML 文件,您可以打開它們並查看內容。
閱讀更多
我寫了一系列文章來解釋這個擴充套件背後的動機和目的。歡迎閱讀。
Addon-Kit 是開發人員夢寐以求的工具
Storybook Markdown 文件 (非 mdx)
Storybook Markdown 文件 (非 mdx) 第二部分
用於自動 Markdown 匯入的 Storybook 擴充套件
在 Storybook 中支援 .html 檔案
也請務必查看這些使此擴充套件成為可能的 PR