小村のポートフォリオサイト開発(4) レイアウト、ヘッダの記述

  • こんばんは、小村だよ!

  • ポートフォリオ作成における現時点までの苦労した点を記録するよ!

  • 今回はレイアウトとヘッダあたりを書いていきまふ

  • サイト:Little Village

  • 下図が記事作成時点でのTopページになるよ!よろしくね!

f:id:kom314_prog:20210708231432p:plain



目次

  1. レイアウトの記述について
  2. ヘッダコンポーネントの記述について
  3. v-app-barを使うか否か
  4. Mixinの使い方
  5. タイトルやボタンの表記に小文字が使えない



記録

レイアウトの記述について

  • まずはレイアウトについてですね

  • nuxt.jsは通常、全ページ共通でlayoutsdefault.vueを読み込みます

  • 私は現在下記のように記述しています

f:id:kom314_prog:20210711151725p:plain
<template>
  <v-app>
    <v-container>
      <Header />
    </v-container>
    <v-main>
      <v-container>
        <nuxt />
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import Header from '../components/Header.vue'
export default {
  components: {
    Header,
  },
}
</script>




ヘッダの記述について

  • 次に、default.vueから呼び出しているHeaderコンポーネントを見ていきます

  • 全容は以下。このうち、記述する中で悩んだことを書いていきます

f:id:kom314_prog:20210711154054p:plain
<template>
  <div>
    <v-toolbar color="backgroundHeader" flat>
      <v-btn plain text to="/">
        <v-icon class="mr-3">holiday_village</v-icon>
        <v-toolbar-title>
          <span class="button_text">Little Village</span>
        </v-toolbar-title>
      </v-btn>
      <v-spacer />
      <v-btn icon @click="setMordInversion()">
        <v-icon v-if="isDark">dark_mode</v-icon>
        <v-icon v-else>light_mode</v-icon>
      </v-btn>
    </v-toolbar>
    <v-toolbar color="backgroundMenu" dense flat>
      <v-spacer />
      <v-btn-toggle v-model="menu_selected" tile group>
        <v-btn
          v-for="button in menu_buttons"
          :key="button.id"
          :value="button.value"
          :to="button.to"
        >
          <span class="button_text">{{ button.disp }}</span>
        </v-btn>
      </v-btn-toggle>
    </v-toolbar>
  </div>
</template>
<script>
import Mixin from '../plugins/mixin'

export default {
  mixins: [Mixin],
  data() {
    return {
      menu_selected: 0,
      menu_buttons: [
        { id: 0, value: 'brog', to: '/', disp: 'Brog' },
        { id: 1, value: 'about', to: '/about', disp: 'About' },
        { id: 2, value: 'contact', to: '/contact', disp: 'Contact' },
      ],
    }
  },
}
</script>
<style lang="scss" scoped>
.button_text {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: bold;
  text-transform: none;
}
</style>


v-app-barを使うか否か

  • Header.vueを記述するうえで一番悩んだことは、v-app-barを使うかどうか

    • ちなみに今でも悩んでまス
  • v-app-barを使えば、高機能なヘッダやそれっぽいメニューが作れます

  • 特に今回のサイトは、下記サンプルを参考にすればほぼ同等のものが作れそう

  • 参考:App bars

f:id:kom314_prog:20210711155521p:plain


  • ただなぁ、と

  • 今回私はヘッダを上付きにしたいーとかそういうことはあまり考えておらず

  • そうなると、色々簡単にできるv-app-barの魅力が活かしづらいなぁと

  • むしろ色々書き方に制約が出てきてめんどくさそうだなぁと思いやめました

  • ひとまずは上述の通り、v-toolbarを組み合わせてヘッダを作っております


Mixinの使い方

  • 前回の記事で作成したMixinを、このヘッダで使用してます

  • 記述箇所は下記の通り

f:id:kom314_prog:20210711160357p:plain
f:id:kom314_prog:20210711160428p:plain


  • 上記の通り、インポートしてmixins: [Mixin],と記述すれば使えます

  • 使っているものは2つ、isDarksetMordInversionを利用してます

f:id:kom314_prog:20210711160836p:plain
  computed: {
    isDark: {
      get() {
        return this.$vuetify.theme.dark
      },
    },
  methods: {
    setMordInversion() {
      return (this.$vuetify.theme.dark = !this.$vuetify.theme.dark)
    },
  },
  • isDark:ダークモードかどうかを判定

  • setMordInversion:画面モードを切り替え

  • nuxt.config.jsの値にアクセスには上記の通りthis.$vuetify.~と記述します


タイトルやボタンの表記に小文字が使えない

  • デフォルトではv-toolbar-titlev-btnに英小文字が、大文字に変換されます

  • 大きなお世話すぎる!!!

  • これに関しては、csstext-transform: none;にて解除できます

  • タイトルやボタンに下記のクラスを適用し、同時にフォントも変更してます

~
<style lang="scss" scoped>
.button_text {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: bold;
  text-transform: none;
}
</style>



おわりに

  • ヘッダについてはこれくらいかなー

  • もしかしたら将来、パンくずリストを追加するかもしれません

  • 次回はメインコンテンツ部分の悩んだヵ所を記述していくよ!

  • ではでは、まったね~~~!