トップ/記事一覧

Notion Blog に「次の記事 / 前の記事」機能を実装した

📆2020/05/12（最終更新日：2020/05/24）🔖 Notion BlogNotion

🐈 「（少しマニアックな）Notion の使い方まとめ」という note マガジンでも、毎週1本 Notion の使い方に関する記事を発信をしています。 もしよければそちらも覗いてみてください。

⚠ この記事は最終更新日から1年以上が経過しています。内容が古い箇所がある可能性があるためご注意ください。

表題の通りですが、「次の記事 / 前の記事」のリンクを記事下に実装しました。この記事の下にも、「次の記事」と「前の記事」のリンクが付いていると思います。

YouTube で配信しながらやってみたのですが、これがけっこう良かったので、機能追加するときはまたそのうちやってみたいと思います。

🐈

雑に解説しておくと、

  • slug.tsx で、前の記事と次の記事のリンクとタイトルを取得
  • それを元に navLink オブジェクトを生成して、自前で作った NavLink コンポーネントの props として渡す
  • いい感じにレンダリング

    • ってことをしました。前の記事と次の記事のリンクとタイトルを取得するのは以下のようなコードでやっています。（詳しくは動画を見れば分かると思います。）

    JavaScript
    // unstable_getStaticProps 関数内

const postsTableArray = Object.values(postsTable).filter(post => postIsReady(post))
  let index
  postsTableArray.forEach((post: any, _index) => {
    if (post.Slug === slug) index = _index
  })

  const nextPost: any | undefined = postsTableArray[index - 1]
  const prevPost: any | undefined = postsTableArray[index + 1]

  const navLink: NavLink = {
    next: {
      title: nextPost && nextPost.Page,
      slug: nextPost && nextPost.Slug,
    },
    prev: {
      title: prevPost && prevPost.Page,
      slug: prevPost && prevPost.Slug,
    },
  }

    みなさまもぜひお試しください。不明点あれば @___35d までお気軽にどうぞ。