astro-notion-blog の投稿にタイトル→日付→タグの並びと最終更新日表示を追加した

export interface Post {
  PageId: string
  Title: string
  Icon: FileObject | Emoji | null
  Cover: FileObject | null
  Slug: string
  /** 公開日（Notion の Date プロパティ）。形式は ISO 8601 文字列。 */
  Date: string
  /**
   * 最終更新日（Lastmod）。
   * Notion ページの last_edited_time を格納する。形式は ISO 8601 文字列。
   */
  Lastmod: string
  Tags: SelectProperty[]
  Excerpt: string
  FeaturedImage: FileObject | null
  Rank: number
}

PageObject 側にはもともと last_edited_time が定義されています。

export interface PageObject {
  object: string
  id: string
  created_time: string
  created_by: UserObject
  last_edited_time: string
  last_edited_by: UserObject
  // ...
}

2. Notion レスポンスからマッピングする

src/lib/notion/client.ts の _buildPost() で、公開日はプロパティから、最終更新はページ本体から取ります。

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 : '',
  Lastmod: pageObject.last_edited_time ? pageObject.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,
}

Date は prop.Date.date.start、Lastmod は pageObject.last_edited_time です。

どちらも無ければ空文字にしていて、表示側で空なら出さない判定にしています。

flowchart LR
  A["Notion PageObject"] --> B["_buildPost()"]
  B --> C["Post.Date / Post.Lastmod"]
  C --> D["PostDate.astro"]
  D --> E["画面の日付欄"]

3. 日付をそろえて比較する

公開日は 2026-08-26、最終更新は 2026-08-26T15:30:00.000Z のように形が違うので、getDateStr()（src/lib/blog-helpers.ts）でカレンダー日にそろえてから比較します。

export const getDateStr = (date: string) => {
  const dt = new Date(date)

  if (date.indexOf('T') !== -1) {
    // Consider timezone
    const elements = date.split('T')[1].split(/([+-])/)
    if (elements.length > 1) {
      const diff = parseInt(`${elements[1]}${elements[2]}`, 10)
      dt.setHours(dt.getHours() + diff)
    }
  }

  const y = dt.getFullYear()
  const m = ('00' + (dt.getMonth() + 1)).slice(-2)
  const d = ('00' + dt.getDate()).slice(-2)
  return y + '-' + m + '-' + d
}

4. 表示コンポーネントを直す

src/components/PostDate.astro で、整形後の文字列が公開日と違うときだけ「最終更新」を出します。

---
import type { Post } from '../lib/interfaces.ts'
import { getDateStr } from '../lib/blog-helpers.ts'

export interface Props {
  post: Post
}

const { post } = Astro.props

const publishedDateStr: string = post.Date ? getDateStr(post.Date) : ''
const lastmodDateStr: string = post.Lastmod ? getDateStr(post.Lastmod) : ''
const shouldShowLastmod: boolean =
  lastmodDateStr !== '' && lastmodDateStr !== publishedDateStr
---

<div class="post-date">
  {publishedDateStr}
  {
    shouldShowLastmod && (
      <>
        <span class="post-date-separator"> / </span>
        <span class="post-lastmod">最終更新: {lastmodDateStr}</span>
      </>
    )
  }
</div>

条件は文字列比較だけです。

同じ日の再編集なら 2026-08-26 / 最終更新: 2026-08-26 みたいに間抜けな表示にはなりません。

5. 各ページの並びを変更

タイトル→日付→タグの順に、以下のファイルで統一しました。

<div class={styles.post} key={post.Slug}>
  <PostTitle post={post} />
  <PostDate post={post} />
  <PostTags post={post} />
  <PostFeaturedImage post={post} />
  <PostExcerpt post={post} />
  <ReadMoreLink post={post} />
</div>

src/pages/index.astro
src/pages/posts/[slug].astro
src/pages/posts/page/[page].astro
src/pages/posts/tag/[tag].astro
src/pages/posts/tag/[tag]/page/[page].astro

Hugo 由来の src/pages/archives/ は今回は触っていません。

修正後の効果

項目	変更前	変更後
並び順	日付 → タグ → タイトル	タイトル → 日付 → タグ
同日編集	（表示なし）	`2026-08-26`（公開日のみ）
別日編集	（表示なし）	`2026-08-23 / 最終更新: 2026-08-24`

DB に列を増やさずに済んだのは、地味によかった点だと思っています。

同様の並びや最終更新表示を検討している astro-notion-blog 利用者の参考になれば幸いです。

🚀 Way2Go NotionBlog