附加文档的故事书/HTML答案

【问题标题】：Storybook/HTML for Addon-Docs附加文档的故事书/HTML
【发布时间】：2020-07-12 23:21:43
【问题描述】：

如何在 Storybook/HTML 中为我的故事添加“mdx”格式的文档？如何将我的 example.stories.js 与 example.stories.mdx 连接起来，example.stories.mdx 应该是什么样子？在官方文档中有一个 React 示例，但我找不到专门用于 Storybook/HTML 的指南。

【问题讨论】：

标签： storybook

【解决方案1】：

关键是分别编写故事和文档，使用它们的 ID 将故事嵌入到文档中（故事的 ID 可以在 URL 中找到，例如 stories--story）。

假设你有这个index.stories.js 文件：

import docs from './docs.mdx';  // this import is important

export default {
  title: 'Demo',
  parameters: {  // specify the docs MDX content here
    docs: {
      page: docs, 
    }
  }
};

export const Heading = () => '<h1>Hello World</h1>';

export const Button = () => {
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.innerText = 'Hello Button';
  btn.addEventListener('click', e => console.log(e));
  return btn;
};

相应的docs.mdx 文件将包含嵌入的故事：

import { Story, Preview } from '@storybook/addon-docs/blocks';

# Index

Writing `Markdown` here:

<Preview>
  <Story id="demo--heading" />
  <Story id="demo--button" />
</Preview>

And an individual story:

<Story id="demo--heading" />

了解更多：

MDX reference 嵌入故事
Installation requirements for MDX

【讨论】：