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

はじめに

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

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

したいこと

Vuetifyを使いこなす

全体

挑戦

改修

・検索機能

Vuetifyをアレンジ(コンポーネントに検索機能を組み込めなかった)できなかったので、Vusaxのinputコンポーネントで実装しました。

ここにきて併用始めたけど特に問題なさそう。(ブラックボックス化しない程度にうまく使おう。)

・トップのボタンをリンク化

<nuxt-link>にCSSをインライン記述してる。あまり良くないけど一旦これで処置。

<nuxt-link to="/" style="color:white">
  <v-toolbar-title>
    <font-awesome-icon :icon="['fas', 'home']" /> chobilog
  </v-toolbar-title>
</nuxt-link>

・タグ

以下のように見た目を整えました。(インライン記述もやめてちゃんとCSSファイルに記載しました。笑)

うーん、割ともう満足。。。笑

ちゃんとした記事を1つ作ってみる。

実際ちゃんと作った記事がどうなるのかテスト。案の定問題がいくつか出てきたので改修していきます。

カードからいろいろと飛び出る。笑

①タグはそもそも3つ以上付けないように気を付けることにする。(ブログの書き方の問題もある)

②イメージはmax-width:100%にして修正。

・目次の作成　コチラ見ると拡張機能が沢山ある。とりあえずこちらとこちら②を参考にインストール。

markdown-it-tocをインストール。目次は<div class=”table-of-contents”></div>で囲まれるとのことなのでデザインを作ります。

ヘッダーに被らないように記事の目次となるh2にpadding-topを付けるも記事の体裁が微妙だったのでヘッダーの固定を解除。

これだけで実装できます。参考

<v-app-bar app color="blue" dark hide-on-scroll>

ついでにフッターは固定表示をなくしてさらにコピーライトの部分は押したらページの最上部に戻るようにしてみました。(気づきにくいけど。。。)

で、ここで気づきました。

Vuefity含めv-onやら@clickやら諸々動作しない現象。

原因がようやく掴めて、nuxt.config.jsのplugins内でmarkdownitを入れると動作しなくなることがわかった。

解消法がわからない。。。

目次はmarkdown-itの追加プラグインを使わずに検討することにしました。

最終的にコチラを参考に表示文字形式でリンクを実装することに。

目次のデザイン

こんな感じでデザインしてみました(改めてブログのデザインってめちゃくちゃ大変だなと。。。笑)

・Subtitle要らない説。カード内に続きを読む的な機能を実装する。　参考　①　②

と思ったけど本文を表示させたらHTMLには全文記載されてしまうような実装しかできず。

一応Subtitleの表示できる範囲を指定して溢れると表示されないようにはしました。

が、代わりに日付を表示しようかなと思い始めました。

公式のこちらを参考にsys.createdAtで簡単に取得できたが表示が時間まで含んでいて正規表現で正すのは手間だったのでDateフィールドで日付だけ表示するような使用にモデルを変更しました。

悪くなし！！ってことでSubtitleは使わない方向に。

今後すること

デプロイ