STUDY WITH ME / Reskilling

セキュリティでは、ゼロトラスト/マイクロセグメンテーション について情報を収集しています。 企業の活動では脱炭素経営について情報を収集しています。 インフラ設計・構築、ハードウェア選定から、アプリ、Javaチューニング、使えるDX、などITコンサルティング業務を会社員として従事しています。   また、脳内から零れ落ちているナレッジ(確認の意味で検索、ど忘れして検索、脳内のバージョンアップ、最新情報へのアップデート)をまとめています。(主に、運用系ツール、開発Java, C++, C#, Python, Swift など)

2カラムに astro-notion-blog を改造しました

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ページ目以降、先頭部分に 2/4 などベージ表記があるので、divがきれいにいかず先頭部分がいまいちになりますが、あとで修正します。💦💦💦

0