gatsby-transformer-remark
というプラグインを使って、Twitter投稿を埋め込めるようにする。
以下のようなことができる。
導入手順
1 プラグインを入れる(yarn add @raae/gatsby-remark-oembed)
2 gatsby-config.js で、プラグインの設定
3 Markdownに埋め込んでみる
1 プラグインを入れる(yarn add @raae/gatsby-remark-oembed)
yarn add @raae/gatsby-remark-oembed を実行
2 gatsby-config.js で、プラグインの設定
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `@raae/gatsby-remark-oembed`,
options: {
// usePrefix defaults to false
// usePrefix: true is the same as ["oembed"]
usePrefix: ["oembed", "video"],
providers: {
// Important to exclude providers
// that adds js to the page.
// If you do not need them.
exclude: ["Reddit"]
}
}
}
]
}
}
];
※、最初、以下のように書いて反映されずにハマった。。。
原因は、書く場所がダメだった。
resolve: gatsby-transformer-remark
, の下に、optionsとして、書くのが正解。
以下は、大元の plugins: の直下に書いていたので、うまく設定されていなかった。
plugins: [
{
{
resolve: `@raae/gatsby-remark-oembed`,
options: {
usePrefix: true, // usePrefix: true is the same as ["oembed"]
providers: {
include: [
'Twitter',
],
settings: {
// Ex. Show all Twitter embeds with the dark theme
Twitter: { theme: 'dark' },
},
},
},
}
}
]
3 Markdownに埋め込んでみる
以下のように書けばOK
`oembed: 埋め込めたいリンク`
Twitter投稿を埋め込み
Buckle up. #SiliconValleyHBO returns for the sixth and final season this October. pic.twitter.com/QZinkIqYNZ
— Silicon Valley (@SiliconHBO) July 24, 2019
Instagramを埋め込み
Youtubeを埋め込み
gitを埋め込み