easy-notion-blogのTags列。

便利便利。

記事を探すとき…

記事の内容を読まずになんとなく把握するとき…

記事を仕分けるとき….

意外と使うTags列。

私はこのTags列に勝手な仕分け思考を盛り込んで

結果的に雑多なTags一覧と変貌させてしまっていました。。。。

いや、気づいてはいました。

でも「なんとかなるっしょ」っていういつもの安易な発想から

記事を投稿する度にカオスにしてしまったTags。

今回はこのTags一覧を整理していく改造過程を紹介します。

なんでこんなことになってしまったのか…..

そこも含めて反省したいと思います(´；ω；｀)

投稿した記事に対して….

• トピック的なTags
• テーマ的なTags
• 困ったらすぐ見つけたいTags
• なんとなくで命名したTags

こんな感じでTagsの種類を増やしていってしまいました。。。。

ツッコミどころ満載だと思いますwww

そしてTagsの名前の長さも問題。

「easy-notion-blog_最新情報」とか

「easy-notion-blog_事始め」とか…..

もはや「easy-notion-blog」でよくない！？

と一瞬思うのですが、

そうなると探しにくくなる。

っというかこのブログの全てがeasy-notion-blogネタ。( ﾟдﾟ)ﾊｯ!

だからといって「事始め」だけだと意味が伝わってこない。。。。

そんなこんなで長々としたTagsになってしまっていました。

Tagsが雑多になり苦し紛れにHomeページの上に４つのテーマを提示しました。

今思うとテーマとは言えませんよね。

だって「01_よくある質問」ってズレてますもん。

しれっと【困ったらすぐ見つけたいTags】を混入させていたようです。

だって、すぐ見つけたいから目立つところに置いておきたかったんだもん。。。。。

最後の極めつけは【なんとなくで命名したTags】。

便利だと分かったから記事にしているわけで…..

情報を扱っているのがブログなわけで…..

このTags名、意味が分かりません😂

すぐできる要素順に並べると…

• なんとなくで命名したTags 👉 Tags名を修正する
• 困ったらすぐ見つけたいTags 👉 テーマありきでTags名を修正する
• テーマ的なTags 👉 新たに機能を追加する

整理に伴ってブログのコードを改造して機能を追加する必要も出てきました。

テーマ的なTagsをCategoryとして扱い、

そのCategoryありきでTags名を修正する。

これによって長々としたTags名もスッキリする…. という作戦です。

【easy-notion-blog_事始め】や【easy-notion-blog_最新情報】だったTags名の記事は、

【rootRepository】というCategory名にし、

そのCategoryに属するTagsとしてTags名を考える。

• 事始め的な内容なら【README】
• 事始め+【01_よくある質問】なら【README】+【Q&A】
• 最新情報的な内容なら【Support】

後からサポートされてREADMEにも追加され、

それがよくある質問だったりすると３つのTagsが並ぶこともあります( ﾟдﾟ)ﾊｯ!

Category効果でTags一覧は一気に清潔感が増します。

結局このブログは….改造・改造に向けた勉強・本家の３つのテーマしかないので、

• 改造：Customize
  • 自分のブログの改造
  • 作業用ページの改造
• 改造に向けた勉強：Learning
• 本家：rootRepository

この３つをCategory列にして設定しました。

もちろんSelectプロパティです。

Selectプロパティで選んだ色もブログで使えるように改造しています。

ではさっそくCategoryの改造について見ていきましょ〜〜〜＾＼(^o^)／

今回もBlog learnを参照しながら進めていきます。

https://herohoro.com/blog/blog-learn_notion-api-read#読み込むデータの型を定義する

Category列はselectプロパティに設定しているので、

Notion公式リファレンスのselect部分を使います。

https://developers.notion.com/reference/property-object#select-configuration

export interface Post {
  PageId: string
  EditTime: string
  Title: string
  Slug: string
  Date: string
  Tags: string[]
  Excerpt: string
  OGImage: string
  Rank: number
  Like: number
+  Category: string
+  CategoryColor: string
}

Blog learn03の記事の中ではplain_textとdateを扱っていますが、

今回はどちらかというdateの方が近いです。

https://herohoro.com/blog/blog-learn_notion-api-read#Date列のデータは....

function _buildPost(data) {
  const prop = data.properties
  const post: Post = {
    PageId: data.id,
    EditTime: data.last_edited_time,
    Title: prop.Page.title[0].plain_text,
    Slug: prop.Slug.rich_text[0].plain_text,
    Date: prop.Date.date.start,
    Tags: prop.Tags.multi_select.map((opt) => opt.name),
    Excerpt:
      prop.Excerpt.rich_text.length > 0
        ? prop.Excerpt.rich_text[0].plain_text
        : '',
    OGImage:
      prop.OGImage.files.length > 0 ? prop.OGImage.files[0].file.url : null,
    Rank: prop.Rank.number,
    Like: prop.Like.number,
+   Category: prop.Category.select.name,
+   CategoryColor: prop.Category.select.color,
  }

Blog learn03同様、componentで取り出せるように準備します。

https://herohoro.com/blog/blog-learn_notion-api-read#整頓したデータを活用して表示する

流れに沿ってPostCategoryとしてみました。

+ export const PostCategory = ({ post }) => (
+   <div className={`${post.CategoryColor}`}>
+     <p>{post.Category ? post.Category : ''}</p>
+   </div>
+ )

このcomponentを使って記事一覧ページに表示させていきます。

https://herohoro.com/blog/blog-learn_notion-api-read#いざ出陣！！

同様にして、PostCategoryをimportし、RenderPostsに追加します。

 import {
	 BlogPostLink,
	 BlogTagLink,
	 NoContents,
   PostDate,
   PostExcerpt,
   PostTags,
+  PostCategory,
   PostTitle,
   PostsNotFound,
   PostThumbnail,
   TwitterTimeline,
   RssFeed,
 } from '../../../components/blog-parts'

const RenderPosts = ({
//省略
}) => {
  return (
{posts.map((post) => {
              return (
                 <div className={styles.post} key={post.Slug}>
                   <PostDate post={post} />
+                  <PostCategory post={post} />
                   <PostTitle post={post} />

記事一覧の次のページも表示させるには

src/pages/blog/before/[date].tsx にも同じように追加します。

Tagsのボタンから同じTagで統一された記事一覧ページにも表示させるには….

src/pages/blog/tag 配下のファイルにも追加。。。。

といった感じで表示させたいページに該当するファイルには追加していきます。

これは、さすがにBlog learnでも触れていない部分なので簡単にお伝えすると….

getStaticPathsを使ってCategory名を当てていくのですが…..

ざっくりしたコツとしては、

Tagsで動いている関数を複製して….

【Tags】と明記されている部分を【Category】に変換し…..

【Categorys】でないとエラーになる部分があるので怒られながら修正し…..

作っていく……

といった戦法でなんとか実装できました(●´ϖ`●)www

Tagsはmulti_selectプロパティなのでmapする場面がありますが、

Categoryはselectプロパティで１つなのでmap不要です。

それだけではなく….

Category自体を全部取得している部分と

１記事に対して複数存在するTagsとがあり頭の中が混乱….(´；ω；｀)

今までと何が違っていたかを落ち着いて考えてみたら、

client.databases後が見慣れないメソッドだということに気づき….

export async function getAllCategorys() {
  if (blogIndexCache.exists()) {
    const allPosts = await getAllPosts()
    return [...new Set(allPosts.flatMap((post) => post.Category))].sort()
  }

  const data = await client.databases.retrieve({　👉 これ
    database_id: DATABASE_ID,
  })
  return data.properties.Category.select.options
    .map((option) => option.name)
    .sort()
}

公式リファレンスを確認してみると、

「対象は記事ではなく列の情報か！！！」ということを知り…..

https://developers.notion.com/reference/retrieve-a-database

getAllCategorys関連で動くcomponentは

【category】ではなく【categorys】を引数に入れるんだなということが分かり

テンションが上りました。

そこから完成までは一気に進みましたが気づけば朝の5時。

2時までに切り上げる予定が大幅にオーバーしていて焦りました(；´Д｀)

easy-notion-blogが作られてからずっとあったTags機能。

Category機能を自力で追加する過程で、

改めてTags機能ってすごい機能だということを痛感しました。。。。

ありがとう。アルパカ先生(´；ω；｀)

後半雑だったことを後日反省し、

pathに注目した解説記事を投稿しましたm(_ _)m