QuartzでサイドバーにRecent Notesを表示する

経緯

• zettelkastenでquartzを使っていくにあたり、サイドバーにはExplorerではなく、Recent Notesを表示したい
  • Explorerだとノートの木構造を表示できるが、ファイルを全く構造化しないzettelkastenだと相性が悪い
• 単純に quartz.layout.tsでExplorer()をRecentNotes()へ置き換えただけではうまくいかなかった
  • デスクトップだといい感じに表示される
  • スマホだとRecentNotesがハンバーガーメニューに格納されないため、レイアウトが崩れてしまう

やりたいこと

• どんな環境でも美しく表示されるようにRecent Notesを表示したい
  • デスクトップではサイドバーに表示したい
  • スマホでは別に位置にこだわりはないが、どこかに表示したい

解決策

• デスクトップではサイドバーに、スマホではフッター部分に表示するようにする
  • Component.MobileOnlyでwrapすることで、スマホだけに表示できる
  • Component.DesktopOnlyでwrapすることで、デスクトップだけに表示できる

コード

export const defaultContentPageLayout: PageLayout = {
  beforeBody: [/*...*/],
  afterBody: [
    Component.MobileOnly(Component.RecentNotes({
      limit: 3,
      showTags: true,
    })),
  ],
  left: [
    // ...
    // Component.Explorer(),
    Component.DesktopOnly(Component.RecentNotes({
      limit: 10,
      showTags: false,
    })),
  ],
  right: [/*...*/],
}

---

Ref

2026/02/20

• Higher-Order Layout Components
• Geminiとの会話より