Dark

nuxt-linkで移動すると埋め込みツイートがうまく表示されない問題を解決する

問題

本ブログで起きていた問題です。埋め込みツイートはこのようなhtmlです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Deno🐍かわいい</p>&mdash; くさころ🌸🍣 (@9sako6) 
  <a href="https://twitter.com/9sako6/status/1260183905212043264?ref_src=twsrc%5Etfw">May 12, 2020</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

https://platform.twitter.com/widgets.jsで見た目が整形されます。本ブログでは、contentfulのエディタにこれを貼り付けてv-htmlで読み込んでいます。外部ページから記事を開くとうまく表示されるのですが、nuxt-linkでページ移動してくると、埋め込んだツイートが整形されず<blockquote>.*</blockquote>のままになっていました。

nonembedtweet

解決策

nuxt.config.jshttps://platform.twitter.com/widgets.jsを読み込み、記事コンポーネントのmounted()window.twttr.widgets.load()を実行するようにするとうまく表示されるようになりました。

  head: {
    script: [
      { src: 'https://platform.twitter.com/widgets.js', async: true }
    ],
  },
  mounted() {
    window?.twttr?.widgets?.load(); // 整形する関数
  },

原因はよくわからない...

参考

  1. https://qiita.com/kai-ono/items/48cadf3d8ed3ae9effdd

(小ネタ)

埋め込んだtweetを中央寄せする方法です。<blockquote>のclassにtw-align-centerを追加するだけです。

<blockquote class="twitter-tweet tw-align-center" data-conversation="none" >
<p lang="ja" dir="ltr">katexを入れてみてるんですけど累乗が下付き文字になるのなに(下付き文字はもっと下付きになる <a href="https://t.co/7QvHoIbzew">pic.twitter.com/7QvHoIbzew</a></p>&mdash; くさころ🌸🍣 (@9sako6) 
<a href="https://twitter.com/9sako6/status/1249237287168163840?ref_src=twsrc%5Etfw">April 12, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

簡単に埋め込みtweetを中央寄せできました。

center_align_tweet_sample

最近嬉しかった記事より)

Share:
記事一覧
Dark