出来上がったもの

画像下部のTwitter, Facebook, Lineのボタン。

環境

• Nuxt.js
• Contentful
• Font Awesome
• Font Awesome Animation

記事データ類はContentfulにおいてNuxt.jsで取得して静的htmlをgenerateしています。マウスオーバーした際に動きを出したかったのでFont Awesome Animationも使用しています。

コード

作成時のcommitはこちら。

nuxt-fontawesome というライブラリもあったものの, CDNから取得して使うだけの方が個人的には楽だったのでそうしています。Font Awesomeそのままだと色味がなくて見分けづらかったので色つけました。サイト全体としては白黒をメインとしてあまり色を入れないようにしていたものの, ここは色があった方がいいと思ったのでつけました。出来るだけ落ち着いた色になるようにしてみました。

<a :href="snslink.twitter" target="_blank">
  <i class="fab fa-twitter-square faa-shake animated-hover my-link-twitter mx-1"></i>
</a>

aタグのhrefに渡すURLについて, 当初は "https://twitter.com/intent/tweet?url=https://blog.youyo.io/posts/post.fields.slug&text=post.fields.title" このようにしようと思っていたのですが, nuxt generate時にエラーが出てしまったのでjs側でURLを生成して <a :href="snslink.twitter"> のように渡すこととしました。