astro-notion-blogをローカルコピーしてカスタマイズしたい

ローカル環境にソースコードをコピー

ブログのデザインをカスタムするためには、github上のソースコードをローカル環境で編集する必要があるらしい。ローカル環境を構築し、修正が必要なソースコードの確認は、ま〜ちさんのブログが参考になった。

https://rakuraku-engineer.com/posts/anb-custom/

Githubのアクセストークンの作成

Githubの使い方からわからず、アクセストークンの作成に悩んだのでメモ。

Notionデータベースにカラム追加と表示への反映を確認

ブログの構成を変更するにあたって、notionからどのように情報を取り出してブログに反映しているのか？を知るために、データベースに情報を追加してブログの表示を修正してみる。

Notionのプロパティ型と値の構造について

Notionの情報を取り出すにあたって、Notionのプロパティを知っておく必要があった。プロパティの構造は以下のようになっている。

`type`	説明	値の構造（例）
`title`	ページのタイトル	`title: [{ text: { content: "タイトル名" } }]`
`rich_text`	リッチテキスト	`rich_text: [{ text: { content: "テキスト内容" } }]`
`number`	数値	`number: 42`
`select`	単一選択	`select: { name: "選択肢名", color: "blue" }`
`multi_select`	複数選択	`multi_select: [{ name: "選択肢1" }, { name: "選択肢2" }]`
`date`	日付	`date: { start: "2025-08-26", end: null }`
`checkbox`	チェックボックス	`checkbox: true`
`url`	URLリンク	`url: "https://example.com"`
`email`	メールアドレス	`email: "user@example.com"`
`phone_number`	電話番号	`phone_number: "+81-90-1234-5678"`
`people`	ユーザー	`people: [{ object: "user", id: "xxxx", name: "名前" }]`
`files`	ファイル	`files: [{ name: "ファイル名", type: "file", file: { url: "..." } }]`
`relation`	他DBとの関連	`relation: [{ id: "関連ページID" }]`
`rollup`	集計	`rollup: { type: "number", number: 3 }`（型により構造が異なる）
`formula`	計算式	`formula: { type: "string", string: "結果" }`（型により構造が異なる）
`created_time`	作成日時	`created_time: "2025-08-01T12:00:00.000Z"`
`created_by`	作成者	`created_by: { object: "user", id: "xxxx" }`
`last_edited_time`	最終編集日時	`last_edited_time: "2025-08-25T14:30:00.000Z"`
`last_edited_by`	編集者	`last_edited_by: { object: "user", id: "xxxx" }`
`status`	ステータス（テンプレート用）	`status: { name: "進行中", color: "blue" }`

ブログ表示を編集してみる

その1 : データベースにカラム追加

今回は、ブログのページの最終更新日を公開日の横に表示してみたい・・・ということで、Updateのカラムを追加した。また、Updateのtypeは”last_edited_time”で、ページ更新のたびに自動で値が更新されるようにした。次にこのカラムの値を取得して、ブログの表示に反映させていく。

その2 : client.tsを編集してpropertyを取得

src/lib/notion にあるclient.tsを以下のように編集した。Update変数を追加し、last_edited_timeの値を取得してUpdate変数に格納するようにした。

  const post: Post = {
    PageId: pageObject.id,
    Title: prop.Page.title
      ? prop.Page.title.map((richText) => richText.plain_text).join('')
      : '',
    Icon: icon,
    Cover: cover,
    Slug: prop.Slug.rich_text
      ? prop.Slug.rich_text.map((richText) => richText.plain_text).join('')
      : '',
    Date: prop.Date.date ? prop.Date.date.start : '',
    Update: prop.Update.last_edited_time ? prop.Update.last_edited_time : '',
    Tags: prop.Tags.multi_select ? prop.Tags.multi_select : [],
    Excerpt:
      prop.Excerpt.rich_text && prop.Excerpt.rich_text.length > 0
        ? prop.Excerpt.rich_text.map((richText) => richText.plain_text).join('')
        : '',
    FeaturedImage: featuredImage,
    Rank: prop.Rank.number ? prop.Rank.number : 0,
  }

  return post
}

その3 : interface.tsにUpdate追加

その2でUpdate変数に値を格納したが、Update変数はPostのinterfeceに追加しておく必要があった。UpdateはDateと同じく文字列として宣言した。

export interface Post {
  PageId: string
  Title: string
  Icon: FileObject | Emoji | null
  Cover: FileObject | null
  Slug: string
  Date: string
  Update: string
  Tags: SelectProperty[]
  Excerpt: string
  FeaturedImage: FileObject | null
  Rank: number
}

その4 : 日付表示を編集

ブログに表示される日付は、src/components/PostData.astroでhtmlのタグが生成されている。今回、日付と最終更新日は必ずセットで表示させるようにしたいので、このファイルを以下のように編集。

<div class="post-date">
  {post.Date ? getDateStr(post.Date) : ''} (最終更新 {post.Update ? getDateStr(post.Update) : ''})
</div>

その5 : 表示確認

修正をコミットして表示を確認したところ、ちゃんと表示されていることが確認できた。

まとめ

Notionプロパティへのアクセス方法に悩んだが、型と構造を確認したことで問題なく値の取得ができるようになった。

最終更新日が表示できるようになったのは良かったが、記事の内容の更新だけでなく公開フラグのチェックなどで日付が更新されてしまう。任意のカラムが更新された場合だけ自動で更新日時が変更されるような仕組みがないか、今後調査していきたい。