小村のポートフォリオサイト開発（６）　トップページ（右）について

Webサイト構築

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

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

  • 今回はトップページの右側部分について書いていきまふ

  • サイト：Little Village

  • 下図が記事作成時点でのTopページになるよ！よろしくね！
f:id:kom314_prog:20210708231432p:plain



目次

  1. BlogCalendar.vueについて
  2. 日本語化について
  3. 幅などの調整について
  4. BlogCategory.vueについて



記録

BlogCalendar.vueについて
f:id:kom314_prog:20210715235510p:plain 
<template>
  <v-date-picker
    v-model="date"
    color="blogCalendar"
    width="270"
    height="0"
    next-icon="arrow_right"
    prev-icon="arrow_left"
    locale="ja-jp"
    :day-format="(date) => new Date(date).getDate()"
    class="mb-5"
  ></v-date-picker>
</template>

<script>
import Mixin from '../plugins/mixin'
export default {
  mixins: [Mixin],
  data() {
    return {
      date: '',
    }
  },
}
</script>

  • 全容は上記の通り

  • Vuetifyで使用できるカレンダー要素はv-calendarとv-date-pickerがあるよ！

  • 最初v-calendarで作ろうとしてたけど、v-date-pickerのほうがいい感じにできまちた



日本語化について
f:id:kom314_prog:20210716000117p:plain

  • v-date-pickerやv-calendarは最初英語の設定なので、日本語化設定が必要です

  • locale="ja-jp"を入れることで日本語設定されるんだけど、下記みたいになる
f:id:kom314_prog:20210716000245p:plain


  • 日うっっっっっっっざ！！！！！

  • 日の主張が強すぎるので消した～～～い！！！

  • という要望に応えるのが下の:day-format="(date) => new Date(date).getDate()"になるよ！



幅などの調整について
f:id:kom314_prog:20210716000636p:plain

  • v-date-pickerの大きさが理想より大きかったので調整しました

  • 幅などの調整はvariables.scssで行います

  • 設定項目は下記公式リファレンスを見ながら設定します

  • ひとまずは画像の通り設定したけど、まだ完全体ではないです

  • というのも、画面サイズをちっさくしたときとか、下図のようにずれちゃう
f:id:kom314_prog:20210717161247p:plain

  • SCSSはif文を書くことができるので、画面サイズに応じて設定する必要ありそう

  • このへんはそのうち本格的にレスポンシブデザイン対応した時にやりまーす！



BlogCategory.vueについて
f:id:kom314_prog:20210717162717p:plain 
  <v-card>
    <v-toolbar flat>
      <v-toolbar-subtitle>
        <span class="title_text">Category</span>
      </v-toolbar-subtitle>
    </v-toolbar>
    <v-list dense>
      <v-list-item-group v-model="selectedItem" color="blogCategory">
        <v-list-item v-for="(item, i) in items" :key="i">
          <v-list-item-content>
            <v-list-item-title v-text="item.text + ' (' + item.count + ')'">
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>
<script>
export default {
  data: () => ({
    selectedItem: undefined,
    items: [
      { text: '日記', count: 1 },
      { text: '開発環境構築記録', count: 13 },
      { text: '技術情報', count: 2 },
      { text: 'エラー調査', count: 1 },
      { text: '技術書', count: 1 },
    ],
  }),
}
</script>
<style lang="scss" scoped>
.title_text {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: bold;
  text-transform: none;
}
</style>

  • BlogCategory.vueについては正直目新しいことはないですね

  • うんないな、今までに書いてきた要素しかつかってない



おわりに

  • ひとまずここまで作成しました！

  • １週間分のブログ記事を書き溜めできたので、この間に続き作っていきまーす！

  • ではでは、ちゃお～～～！