selectプロパティでCategory列を追加し、
multi_selectプロパティのTags列と合わせて
記事の系統分けをした改造ネタをお話しました。
https://herohoro.com/blog/category_support
後半雑な締めくくりになってしまったことを反省し…..
https://herohoro.com/blog/category_support#Tags機能のように専用ページを用意したい!?
専用ページを用意するために
必要なNext.jsの知識を公式ドキュメントを参照しながら、
easy-notion-blogの仕組みを…
今度はちゃんと解説していこうと思います(´;ω;`)
\ テーマは「path」です⭐ /
localhost:3000
で進めます。普段あまり気にしませんが…..
easy-notion-blogには何種類か存在しています。
実際にページを開きながらpathを観察してみたいと思います(*´ω`*)(*´ω`*)
まずよく開くのが【記事一覧ページ】
pathに注目すると….. localhost:3000/blog
とあります。
Homeへ戻って確認すると….localhost:3000
記事一覧ページに移動することでpathが/blog
と追加されたことが分かります。
続きのページはというと…..
記事一覧の次のページへ進むとpathが変わっています。
記事一覧ページでは localhost:3000/blogだったのに
次のページへ行くとbefore/2022-06-22
が追加されました。
3ページ目へ進むと….
before/ までは同じで最後の日付だけ変わっています(´・ω・`)
4ページ目も…..
5ページ目も…..
日付だけが変化しています。
記事一覧ページの2ページ目以降は….
before/日付
という法則がありそうですね….(´・ω・`)
今度はTags列で構成されたCategoryを見てみましょう….
Blog learnというCategoryを開くと….
普通の記事一覧ページではlocalhost:3000/blogでしたが、
Tags列で作られたCategoryの方はtag/Blog%20learn
が追加されています。
他のCategoryを見てみると…..
「NotionAPI」というCategory名の記事一覧ページもtag/NotionAPI
が追加されています。
Blog%20learn
の【%20】は空白を意味したpathなようです。Tags列で作られたCategoryの記事一覧ページのpathは….
普通の記事一覧ページと比べると、
tag/Category名
が追加されるという法則がありそうですね….(´・ω・`)
次のページへ移動してみると…..
tag/Category名だったpathが
tag/Category名/before/日付
に変化しています。
before/日付
が追加されました。
3ページ目も…..
4ページ目も…..
同じです。
Tags列で作られたCategoryの記事一覧2ページ目以降のpathは…..
1ページ目と比べるとbefore/日付
が追加される法則がありそうですね…..(´・ω・`)
pathを観察して分かったのは….
blog
blog/before/日付
blog/tag/Category名
blog/tag/Category名/before/日付
これはどういう意味で作られているのか….
https://nextjs.org/docs/getting-started#manual-setup
pagesディレクトリ:ファイル名を基準に関連させる
pages/about.js
を/about
っていうパスにしてるのか…..VSCodeを開いてディレクトリの構成を確認するとpathとのつながりが出てきそうです….(´・ω・`) 👍
VSCodeを開いてみると….
pagesディレクトリの中にありますあります⭐
apiディレクトリ・blogディレクトリ内の【 _ 】から始まるのは今回直接は関係しないので省略すると….
こんな構成になってます(´・ω・`)
もやっとするのが2点:
Next.jsの公式ドキュメントを見てみると…..
https://nextjs.org/docs/routing/introduction#index-routes
indexというファイル名にすると自動的に【 / 】と解釈してpathにしてくれる\(^o^)/
/
/
https://nextjs.org/docs/basic-features/pages
Next.jsはReactコンポネントで.tsx
も対象だよって書かれてた\(^o^)/
Next.jsの公式ドキュメントを見てみると…..
https://nextjs.org/docs/routing/dynamic-routes
/post/1
・/post/abc
とかっていうパスは
pages/post/[pid].js
のファイルに一致させている….
[ ]のついたファイルは
何か名前を自由に変更させてパスにすることができる(´・ω・`)
/
/
pagesは省略したディレクトリをパスっぽく表してみると….
blog/before/日付
blog/tag/Category名/before/日付
blog/tag/Category名
blog/
ってなる(´・ω・`)
さっきブログを表示させながら整理したpathは…..
blog
blog/before/日付
blog/tag/Category名
blog/tag/Category名/before/日付
同じだ〜〜〜〜〜\(^o^)/\(^o^)/
ちなみに /
はHome画面だね🎶
VSCodeでよく見るpagesディレクトリ内のファイルはブログのpathと深い関係がある✍
multi_selectプロパティのTags列のCategory機能に加え、
selectプロパティのCategory列のCategory機能を実装した時に
辛かった理由は…..
https://herohoro.com/blog/category_support
既存の4つのファイルにも追加しないといけなかったから。
blog
blog/before/日付
blog/tag/Category名
blog/tag/Category名/before/日付
NotionDBの列にあるデータをブログに表示させたい場合….
毎回この追加をする必要があります。
例えば、OGImageに登録した画像をブログの記事一覧などに表示させたい時も同様。
いいねボタンの値を記事一覧に表示させたい時も同じく…..( ゚д゚)ハッ!
そんな時でも整然たるコードを保ってくれるのがcomponent。
componentのおかげで行数の少なさがヤバいレベルに。
スッキリぽんです 🧹 💨
記事一覧で10件ずつ表示できるようにしている[date].tsxの内容は….
アルパカ先生の記事があります\(^o^)/
ちょいと10件表示と関連して次へのボタンと戻るボタンの実装について
解説した私の記事もあったりするので
興味のある方は参考になさってください⭐
Twitterでは更新のお知らせを随時行っています
興味ある方はLet'sフォロー★▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね
RSSリーダーにatomのリンクを登録すると通知が行くよ🐌
https://herohoro.com/atom
やってみてね(*´ω`*)(*´ω`*)
フォロー大歓迎\(^o^)/
フォロー大歓迎\(^o^)/