Vue Storybookのサンプルページの構造
Storybookのフロントページをいじくってみる。
下の方にフロントページのソースのパスがあるので、それを編集。
TipEdit the Markdown in src/stories/Introduction.stories.mdx
ちなみに、my-projectにstorybookをインストールすると、srcの下に新たにstoriesという名前のレポジトリができるんですね。
mdxの構成
mdxの中身は、3つの構成に分かれている。
①importしている部分（1～9行目）
②CSS的なStyleを決めている部分（11～115行目）（styleのタグ）
③ほむぺのコンテンツの部分（117行目～一番下まで）
全部が1つのファイルに入っているのはVueあるあるなのかもしれないが…
③で突然Markdown書式が始まって、"# Welcome to Storybook"が来るのはかなりドギマギしてしまう。
③コンテンツ部分の構造
フリースタイルラップバトルのように自由な書き方。
マークダウンで"Welcome to Storybook"をつづった後に、126行目から<div>でHTMLの記述が始まる。今回は画像にリンクを貼って配置しているだけなのでシンプルな作り。
これHTMLではないといけないのかな…？未知数。
この記事が気に入ったらサポートをしてみませんか？