@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が埋め込めるようになった。

参考


Related #gridsome

PWA対応後にiOSで記事が更新されない現象が発生

skipWaitingを有効にした

Gridsomeで構造化マークアップに対応する

metaInfoにJSON-LD用のscript設定を追加する

GridsomeとContentfulとCircleCIを組み合わせて予約投稿ができるようにする

CircleCIのSchedule Jobsを使って定期ビルドするようにした