diff options
| -rw-r--r-- | src/components/PostPagination.astro | 47 | ||||
| -rw-r--r-- | src/pages/blog/[...slug].astro | 17 |
2 files changed, 61 insertions, 3 deletions
diff --git a/src/components/PostPagination.astro b/src/components/PostPagination.astro new file mode 100644 index 0000000..6ae6bef --- /dev/null +++ b/src/components/PostPagination.astro @@ -0,0 +1,47 @@ +--- +const { prevPost, nextPost } = Astro.props; +--- + +<style lang="scss"> + .pagination { + overflow: hidden; + padding: 5rem 0; + width: 100%; + } + + @media (width <=684px) { + .pagination { + padding: 2rem 0; + } + } + + .prev, + .next { + max-width: 40%; + } + + .prev { + float: left; + } + + .next { + float: right; + } +</style> + +<div class="pagination"> + { + prevPost && ( + <span class="prev"> + <a href={`/blog/${prevPost.slug}`}>< {prevPost.data.title}</a> + </span> + ) + } + { + nextPost && ( + <span class="next"> + <a href={`/blog/${nextPost.slug}`}>{nextPost.data.title} ></a> + </span> + ) + } +</div> diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 4ecb1e1..9262a66 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -2,17 +2,24 @@ import { type CollectionEntry, getCollection } from "astro:content"; import Comments from "../../components/Comments.astro"; import Layout from "../../layouts/PageLayout.astro"; +import Pagination from "../../components/PostPagination.astro"; export async function getStaticPaths() { const posts = await getCollection("blog"); - return posts.map((post) => ({ + const total = posts.length; + + return posts.map((post, index) => ({ params: { slug: post.slug }, - props: post, + props: { + post, + prevPost: index + 1 === total ? null : posts[index + 1], + nextPost: index === 0 ? null : posts[index - 1], + }, })); } type Props = CollectionEntry<"blog">; -const post = Astro.props; +const { post, prevPost, nextPost } = Astro.props; const { Content, remarkPluginFrontmatter } = await post.render(); --- @@ -41,6 +48,10 @@ const { Content, remarkPluginFrontmatter } = await post.render(); </section> <section> + <Pagination prevPost={prevPost} nextPost={nextPost} /> + </section> + + <section> <Comments /> </section> </article> |