【Nuxt.js】ブログ作成の記録④ ~引き続きVuetifyを使ってみた~

はじめに

前回に引き続きブログ作成の格闘記です。(続きものなので前回の記事とフォーマット揃えよう。。。)

【Nuxt.js】ブログ作成の記録③ ~Vuetifyを使ってみた~

したいこと

Vuetifyを使いこなす

全体

エレベーション(高さの表現)

プロフィールはカードではなくもっとそれっぽく!笑

カルーセルで画像表示をスライドしておしゃれに!

タグ表示

レスポンシブ後

カードはHorizontal cardsで!!

ボトムナビゲーション

Popupの実装

JSの比較演算子なりVue.jsのmethodsを組み合わせればいけそう。。。

Vuetifyを使いこなしてデザイン改修

エレベーションの実装。

ボタンには実装できず。効かない⇒ボタンをVuesaxで実装していることを忘れていた。。。笑笑

Vuetifyで作ったボタンだったらエレベーションの実装可能だった。

ただボタンに関してはVuesax側でいい感じにグラデーション付きのボタンを作れたのでこのまま使うことにする。

既成レイアウトの編集

・最初の設定だとフッターが固定されていたので、absoluteに変更して修正。

タグ表示

・表示できずにいたけど、スクリプトとContentfulのフィールド名が違うだけだったので解決。。。笑

・@clickだとページ遷移できる形で実装できないので<nuxt-link>タグで。(知識不足)

チップコンポーネントのラベルを実装。色なしでシンプルに。

・タグの位置を固定

カテゴリーページ、タグページのデザイン統一

・アイテム一覧(カテゴリー、タグページ)各々にフレックスになるクラス名を付けてフレックス表示。

ポップアップ実装

必要最低限の実装でテスト(Vuesaxのボタンコンポーネント)

テンプレート側

<div class="centerx">
  <vs-button @click="popupActivo">ポップアップボタン</vs-button>
  <vs-popup   title="タイトル" :active.sync="popupActivo">
    <p>test</p>
  </vs-popup>
</div>

スクリプト側①

export default {
  data(){
    return {
      popupActivo:true, 
    }
  }
}

trueで表示 falseで非表示

スクリプト側②

export default {
  methods: {
    popupActivo: function(){
      popupActivo = true ? false : true
    }
  }
}

三項演算子。条件式 ? 式1:式2 trueなら1falseなら2を返す。はずだがひたすら表示される。。。

スクリプト側③

export default {
  methods: {
    popupActivo: function(){
      popupActivo = !popupActivo
    }
  }
}

こちらを参考に。ひたすら表示される。。。

スクリプト側④

export default {
  data(){
    return {
      popupchange:false,
    }
  },
  methods: {
    popupchange: function(){
    this.popupchange = !this.popupchange
    }
  }
}

引き続きこちらを参考に。これだとdata内を変えると表示が変わる。が、ボタンを押しても表示は変わらず。。。泣

一旦ステイします。。。

記事ページのデザイン

・プロフィールカードをトップのみの表示にするため、default.vueからpages/index.vueに移す。

・メインの画像をトップに表示(どんな画像かわかるよう大きめに)、カテゴリーのfaを適用

・フッターが記事に覆いかぶさる。⇒公式を参考に<v-card>で高さを追加。

・faの表示。これ各ページでインポートする必要ないよな??これ学習しないと。。。

・記事の文章を左寄りにしたい。⇒タグにとりあえずstyleを記載して左寄せに。

CSSを後々改修する際に確実にししづらい状況になっていると思う。。。ここ辺りもよう改善だ。。。

現状

とりあえず現状こんな感じです。

トップページ

プロフィールをカートコンポーネント使わずに再度に固定なりしたい。(てかシンプルにカードコンポーネント自体なしにしようかな)

記事ページ

それっぽくなってきました。

所感・気づき・メモ

気づき

・Font Awesomeでinfo-circleみたく-入りのやつは大文字で繋げれば表示される。

・おしゃれなサイトはもはやカードなどで囲って表示せずにべたっと表示させている。

メモ

今後すること

・レスポンシブ化 ⇒Nuxtのhead情報はnuxt.config.jsに記載されてる。Qiitaの記事も参考になる。既にViewportは設定されてるのね。

・CSS設計見直し

・引き続きVuetifyの実装(特にレスポンシブ対応後の)

・ポップアップなどの実装

・デプロイテスト

参考にしたサイト

コメントを残す