2019/09/10
コンポーネントを使ってみよう！
Dev
下のエディターを使っていろんなコンポーネントを試してみよう！
＊コンポーネントを使用する際の注意事項
- 半角英数字を使用使ってください。
- コンポーネントが意図したように表示されない場合は下の画像のようにコンポーネントの上下を改行してみましょう。
- プロパティ(url や title など)に代入する値は必ず ’ ’ (シングルクオーテーション)または ” ” (ダブルクオーテーション)で囲んでください。
- コンポーネントは通常のマークダウン形式では利用できず、MDXと呼ばれるマークダウンを拡張したものを利用しなければなりません。これはサイトを開発する前に設定するものですので、開発者に確認する必要があります。
Link
この Link コンポーネントはサイト内のページに移動する際に利用でき、ページの表示速度を早くすることができます。（下でaタグでの表示速度とくらべてます。）
Link コンポーネントが先頭、語尾にくる際は<p></p>で囲んでください。
1こちらは a タグで [Home](/) にもどります。23こちらは Link で <Link to='/' text='Home' /> にもどります。45<p><Link to='/rich-text/about-rich-text' text='Rich Text' /> にとびます。</p>67<p>マークダウンに関する記事は<Link to='/markdown/about-markdown' text='こちら' /></p>
こちらは a タグで Home にもどります。
こちらは Link で Home にもどります。
Rich Text にとびます。
マークダウンに関する記事はこちら
Spotify Music Song
1<Spotify2 url="https://open.spotify.com/track/0RoA7ObU6phWpqhlC9zH4Z?si=YmloCnQpT7erHmZzGqrhbQ"3 title='A Million Dreams'4/>
Spotify Music Playlist
1<Spotify2 url="https://open.spotify.com/playlist/37i9dQZF1DWXYO300IYLDB?si=SLKO-3imRMWIY1lp5_Wwbg"3 height="380"4 title='アコースティック メロディーズ'5/>
Spotify Podcast
1<Spotify2 url="https://open.spotify.com/show/3KEwGJMIxcUH94KMJVis0F?si=u9Wn6vWUSb6pjPWNesNfYQ"3 title='Takram ポッドキャスト'4/>
Twitter ツイート
1<TwitterTweet url='https://twitter.com/honobono3o/status/922052836497637376?s=20' />
Twitter タイムライン
name には表示したいアカウント名を入力してください。 type は下記から選ぶことができ、表示する内容を変更できます。記述しない場合は profile が自動で設定されます。 profile | likes | list | collection | URL | widget
1<TwitterTimeline name='contentful' />
1<TwitterTimeline2 name='honobono3o'3 type='likes'4 width='600'5/>
Video
1<Video url='//videos.ctfassets.net/d43i7wzic99c/5YcNcGCUuFxULQpXTJwvkY/173f8b7c23cb2bc08482f758720abc26/video-components.mov' />
Youtube
1<Video url='https://youtu.be/XfOYqVnFVrs' />
