src/pages/index.astro
<Layout>
<div style="display: flex; flex-wrap: wrap;" slot="main" class={styles.main}>
{
posts.length === 0 ? (
<NoContents contents={posts} />
) : (
posts.map((post) => (
<div style="flex: 50%; box-sizing: border-box; padding: 10px;" class={styles.post} key={post.Slug}>
<PostDate post={post} />
<PostTags post={post} />
<PostTitle post={post} />2か所の div に、flex 設定を含めた style を設定するだけ
src/pages/posts/page/[page].astro
<Layout title={`Posts ${page}/${numberOfPages}`} path={`/posts/page/${page}`}>
<div style="display: flex; flex-wrap: wrap;" slot="main" class={styles.main}>
<header>
<h2>{page}/{numberOfPages}</h2>
</header>
Expand All
@@ -52,7 +52,7 @@ const [posts, allPosts, rankedPosts, tags, numberOfPages] = await Promise.all([
<NoContents contents={posts} />
) : (
posts.map((post) => (
<div style="flex: 50%; box-sizing: border-box; padding: 10px;" class={styles.post} key={post.Slug}>
<PostDate post={post} />
<PostTags post={post} />
<PostTitle post={post} />こちらは、2ページ目以降のページ制御時のファイル
こちらも、div を２か所同様に修正。
2ページ目以降、先頭部分に 2/4 などベージ表記があるので、divがきれいにいかず先頭部分がいまいちになりますが、あとで修正します。💦💦💦
