@gridsome/source-contentful利用時にTweetの埋め込みに対応させる
このブログはGridsomeを使って静的サイトとして生成している。
ブログ記事の管理にはContentfulを使っており、 @gridsome/source-contentfulを用いて連携を行っている。
Contentfulの記事はmarkdown形式で保存されているので、markdownのパーサーとしてmarkdown-itを使っているがTweetの埋め込みができていなかったので、できるように対応した。
そもそもとして、デフォルトのmarkdown-itの設定だとhtmlタグを認識してくれないの初期化時にhtmlオプションを有効にする。
const md = new MarkdownIt({
html: true,
});これで埋め込みタグに限らずhtmlが展開できるようになった。
Tweetの埋め込みの場合は追加で専用のjsを読み込む必要があるので、記事詳細ページのmetaInfoに以下の設定を追加。
// templates/ContentfulPost.vue
export default {
metaInfo() {
return {
title: this.$page.post.title,
script: [
{
src: "https://platform.twitter.com/widgets.js",
async: true,
body: true
}
]
};
},
// ...
}これでTweetが埋め込めるようになった。