【Nuxt.js】ブログ作成の記録⑦　～作り直し&改修～

はじめに

ブログ作成の格闘記です。

【Nuxt.js】ブログ作成の記録⑥　～作り直し&デプロイ～

したいこと

Vuetifyを使いこなす

全体

挑戦

Vuetifyを使いこなす

・サイドバーのv-listにlinkを付ける。　参考

内部リンクは以下のようにtoを付ければ実装できました。(linkの意味は掴めませんでした。。。)

<v-list-item link to="/inspire">

外部リンクはtoではできず。aタグで囲みました。　公式のリンクに関するガイド

<a href="https://chobimusic.com/" target="_blank" style="text-decoration: none;">
  <v-list-item link>
    <v-list-item-action>
      <v-icon>mdi-email</v-icon>
    </v-list-item-action>
    <v-list-item-content>
      <v-list-item-title>Contact</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</a>

・サイドバーにプロフィールカードを付ける　参考

文字のサイズ調整参考(タイポグラフィ)

Spacing Helperの参考

最初は画像の上に名前とか入れようとしていろいろ試したけど、最終的にシンプルに画像のみにしました。笑

・CSSのグローバル適用

最初のプロジェクトでは上記赤線のようにとりあえずタグ内にstyleを書いてしまっていたため。よくない

公式参考

nuxt.config.js

  css: [
    // プロジェクト内の CSS ファイル
    '@/assets/css/common.css'
  ],

・アイコンを使う　公式

Vuetifyは初期アイコンがMaterial design iconsになってるけど、使い方がピンとこなかったので全てFont Awesomeを使うことに。(以前実装済み)

・コンテンツ制作　こちらでv-contentなど仕組みを復習。(ESLintオフる)

とりあえずv-flexまで一通りdefault.vueに記述してトライしてみます。

前回実装したものをpages/index.vueへコピペ。ここでなぜかESlintが暴走して起動しなかったのでオフりました。。。笑

レスポンシブ対応はコチラも確認しつつ、スマホの縦画面だけ対応してればいいかなとか思ったり。。。

・記事ページ

画像に関してはマークダウンをHTMLのimgタグに変えてあげれば変わった。　こちら参考

PCで見る用はimgの％で画面全体からの幅感で調整して、スマホでは固定にしてあげるのがいいかもしれない。

あとはPC画面の記事幅をmax-width1166pxででかくなりすぎないように、且つwidth70%でフレキシブルに動くように実装しました。

(参考にWordPress見ていてデザインよくできてるな~と思いました。。。笑)

・Flexboxの実装　参考

参考サイトが例の方のやつでとても参考になる。

今までじぶんのポートフォリオに実装したことなかった(機会がなかっ)けど、使ってみたらとても便利だった。

記事が幅を超えると見えなくなる現象が起きていたので、実装せざるを得なかったけど勉強になった。

・各種ページの実装

これは既に作っていたのでコピペで。

現状

割と完成に近いかもしれない。

PC画面

トップページ

記事ページ

スマホ画面

トップページと記事ページ

今後すること

・デプロイ

・デザイン詰める