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

はじめに

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

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

したいこと

Vuetifyを使いこなす

全体

プロフィールはカードではなくもっとそれっぽく!笑⇒サイドバーの実装済み

カルーセルで画像表示をスライドしておしゃれに!⇒いらない??笑

タグ表示⇒実装済み

CSSの改善・レスポンシブ対応⇒対応中

カードはHorizontal cardsで!!⇒Media With Textで実装

ボトムナビゲーション⇒コンテンツ増えたりしたら検討しよう

プロジェクト作り直し&改修。(引き続きv-on実装できない原因検証しながら)

・レスポンシブ対応

・デプロイ

挑戦

改修

・検索機能

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は使わない方向に。

所感・気づき・メモ

所感

あとはデプロイだけかな??一応少しちゃんとした記事を作ってからデプロイしてみようと思います。

気づき&学び

・ブログの書き方にルールを設ける

タイトルは1行で表示されるように40文字まで(最初20文字にしたけど少なすぎた。) 2行に収まるように配慮。

サブタイトルは目次的内容40字まで 2行に収まるように配慮。

タグは3つまで。1列かつカードからはみ出ないように配慮。

メモ

今後すること

デプロイ

コメントを残す