From f78745dcbdf77df809fcb21d9e70a72ae8450ef6 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Wed, 15 Mar 2023 17:44:32 +0800
Subject: [PATCH] =?UTF-8?q?fukasawa=E4=B8=BB=E9=A2=98=E5=BE=AE=E8=B0=83?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/theme-fukasawa.css                 | 29 ++++++++
 themes/fukasawa/LayoutBase.js                 |  6 ++
 themes/fukasawa/components/BlogCard.js        | 72 +++++++++----------
 themes/fukasawa/components/BlogListPage.js    | 26 +------
 themes/fukasawa/components/BlogListScroll.js  | 25 ++-----
 themes/fukasawa/components/Card.js            |  7 +-
 .../matery/components/BlogPostListScroll.js   |  6 +-
 7 files changed, 83 insertions(+), 88 deletions(-)
 create mode 100644 public/css/theme-fukasawa.css

diff --git a/public/css/theme-fukasawa.css b/public/css/theme-fukasawa.css
new file mode 100644
index 00000000..5a62c5d9
--- /dev/null
+++ b/public/css/theme-fukasawa.css
@@ -0,0 +1,29 @@
+#theme-fukasawa .grid-item {
+    height: auto;
+    break-inside: avoid-column;
+    margin-bottom: .5rem;
+  }
+  
+  /* 大屏幕（宽度≥1024px）下显示3列 */
+  @media (min-width: 1024px) {
+    #theme-fukasawa .grid-container {
+      column-count: 3;
+      column-gap: .5rem;
+    }
+  }
+  
+  /* 小屏幕（宽度≥640px）下显示2列 */
+  @media (min-width: 640px) and (max-width: 1023px) {
+    #theme-fukasawa .grid-container {
+      column-count: 2;
+      column-gap: .5rem;
+    }
+  }
+  
+  /* 移动端（宽度<640px）下显示1列 */
+  @media (max-width: 639px) {
+    #theme-fukasawa .grid-container {
+      column-count: 1;
+      column-gap: .5rem;
+    }
+  }
\ No newline at end of file
diff --git a/themes/fukasawa/LayoutBase.js b/themes/fukasawa/LayoutBase.js
index b54fcae6..6cb6de67 100644
--- a/themes/fukasawa/LayoutBase.js
+++ b/themes/fukasawa/LayoutBase.js
@@ -3,6 +3,7 @@ import TopNav from './components/TopNav'
 import AsideLeft from './components/AsideLeft'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -25,6 +26,11 @@ const LayoutBase = (props) => {
     meta
   } = props
   const leftAreaSlot = <Live2D/>
+
+  if (isBrowser()) {
+    loadExternalResource('/css/theme-fukasawa.css', 'css')
+  }
+
   return (<div id='theme-fukasawa' >
     <CommonHead meta={meta} />
     <TopNav {...props}/>
diff --git a/themes/fukasawa/components/BlogCard.js b/themes/fukasawa/components/BlogCard.js
index 9882ee94..1d382cf7 100644
--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -2,9 +2,8 @@ import BLOG from '@/blog.config'
 import Link from 'next/link'
 import React from 'react'
 import CONFIG_FUKA from '../config_fuka'
-import Card from './Card'
 
-const BlogCard = ({ post, showSummary, siteInfo }) => {
+const BlogCard = ({ index, post, showSummary, siteInfo }) => {
   const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap
   // matery 主题默认强制显示图片
   if (post && !post.page_cover) {
@@ -13,44 +12,45 @@ const BlogCard = ({ post, showSummary, siteInfo }) => {
   const showPageCover = CONFIG_FUKA.POST_LIST_COVER && post?.page_cover
 
   return (
-    <Card className="w-full lg:max-w-sm p-2 h-full overflow-auto">
-      <div
-        key={post.id}
-        className="flex flex-col-reverse justify-between duration-300"
-      >
-        <div className="p-2 flex flex-col w-full">
-          <Link
-            href={`${BLOG.SUB_PATH}/${post.slug}`}
-            passHref
-            className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'
-              } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+    <div data-aos="fade-up" data-aos-duration="500" data-aos-once="true"
+         className='w-full lg:max-w-sm p-2 h-full overflow-auto'>
+        <section className="shadow mb-4 p-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200">
+            <div className="flex flex-col-reverse justify-between duration-300">
+            <div className="p-2 flex flex-col w-full">
+            <Link
+                href={`${BLOG.SUB_PATH}/${post.slug}`}
+                passHref
+                className={`break-words cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'}
+                leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
 
-            {post.title}
+                {post.title}
 
-          </Link>
+            </Link>
 
-          {(!showPreview || showSummary) && (
-            <p className="mt-4 mb-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden">
-              {post.summary}
-            </p>
-          )}
-        </div>
-
-        {showPageCover && (
-          <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-            <div className="h-40 w-full relative duration-200 cursor-pointer transform overflow-hidden">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                src={post?.page_cover}
-                alt={post.title}
-                className="w-full hover:scale-125 transform duration-500"
-              ></img>
-              {/* <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
+            {(!showPreview || showSummary) && (
+                <p className="mt-4 mb-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden">
+                {post.summary}
+                </p>
+            )}
             </div>
-          </Link>
-        )}
-      </div>
-    </Card>
+
+            {showPageCover && (
+            <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                <div className="h-40 w-full relative duration-200 cursor-pointer transform overflow-hidden">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                    src={post?.page_cover}
+                    alt={post.title}
+                    className="w-full hover:scale-125 transform duration-500"
+                ></img>
+                {/* <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
+                </div>
+            </Link>
+            )}
+        </div>
+      </section>
+    </div>
+
   )
 }
 
diff --git a/themes/fukasawa/components/BlogListPage.js b/themes/fukasawa/components/BlogListPage.js
index 2f0af0df..c919ef94 100644
--- a/themes/fukasawa/components/BlogListPage.js
+++ b/themes/fukasawa/components/BlogListPage.js
@@ -1,5 +1,4 @@
 import BLOG from '@/blog.config'
-import { useEffect, useState } from 'react'
 import BlogCard from './BlogCard'
 import BlogPostListEmpty from './BlogListEmpty'
 import PaginationSimple from './PaginationSimple'
@@ -15,25 +14,6 @@ import PaginationSimple from './PaginationSimple'
 const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
   const showNext = page < totalPage
-  const [colCount, changeCol] = useState(1)
-
-  function updateCol() {
-    if (window.outerWidth > 1200) {
-      changeCol(3)
-    } else if (window.outerWidth > 900) {
-      changeCol(2)
-    } else {
-      changeCol(1)
-    }
-  }
-
-  useEffect(() => {
-    updateCol()
-    window.addEventListener('resize', updateCol)
-    return () => {
-      window.removeEventListener('resize', updateCol)
-    }
-  })
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
@@ -41,10 +21,10 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
     return (
       <div>
         {/* 文章列表 */}
-        <div id="container" style={{ columnCount: colCount }}>
+        <div id="container" className='grid-container'>
           {posts?.map(post => (
-            <div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}>
-              <BlogCard key={post.id} post={post} siteInfo={siteInfo} />
+            <div key={post.id} className='grid-item justify-center flex' style={{ breakInside: 'avoid' }}>
+              <BlogCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo} />
             </div>
           ))}
         </div>
diff --git a/themes/fukasawa/components/BlogListScroll.js b/themes/fukasawa/components/BlogListScroll.js
index b6ec891c..fad59cec 100644
--- a/themes/fukasawa/components/BlogListScroll.js
+++ b/themes/fukasawa/components/BlogListScroll.js
@@ -14,18 +14,7 @@ import { useGlobal } from '@/lib/global'
  */
 const BlogListScroll = props => {
   const { posts = [], siteInfo } = props
-  const [colCount, changeCol] = React.useState(1)
   const { locale } = useGlobal()
-
-  function updateCol() {
-    if (window.outerWidth > 1200) {
-      changeCol(3)
-    } else if (window.outerWidth > 900) {
-      changeCol(2)
-    } else {
-      changeCol(1)
-    }
-  }
   const targetRef = React.useRef(null)
 
   const [page, updatePage] = React.useState(1)
@@ -56,29 +45,23 @@ const BlogListScroll = props => {
   }
 
   React.useEffect(() => {
-    updateCol()
     window.addEventListener('scroll', scrollTrigger)
-
-    window.addEventListener('resize', updateCol)
     return () => {
-      window.removeEventListener('resize', updateCol)
       window.removeEventListener('scroll', scrollTrigger)
     }
-  })
+  }, [])
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
   } else {
     return (
-            <div id="container" ref={targetRef} >
+            <div id="container" ref={targetRef} className='grid-container' >
                 {/* 文章列表 */}
-                <div style={{ columnCount: colCount }}>
                     {postsToShow?.map(post => (
-                        <div key={post.id} className='justify-center flex' style={{ breakInside: 'avoid' }}>
-                            <BlogCard key={post.id} post={post} siteInfo={siteInfo} />
+            <div key={post.id} className='grid-item justify-center flex' style={{ breakInside: 'avoid' }}>
+            <BlogCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo} />
                         </div>
                     ))}
-                </div>
 
                 <div className="w-full my-4 py-4 text-center cursor-pointer "
                     onClick={handleGetMore}>
diff --git a/themes/fukasawa/components/Card.js b/themes/fukasawa/components/Card.js
index a330210d..e88dee68 100644
--- a/themes/fukasawa/components/Card.js
+++ b/themes/fukasawa/components/Card.js
@@ -1,10 +1,5 @@
 const Card = ({ children, headerSlot, className }) => {
-  return <div className={className}
-        data-aos="fade-up"
-        data-aos-duration="300"
-        data-aos-once="false"
-        data-aos-anchor-placement="top-bottom"
-    >
+  return <div data-aos="fade-in" data-aos-duration="1000" className={className}>
         <>{headerSlot}</>
         <section className="shadow mb-4 p-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200">
             {children}
diff --git a/themes/matery/components/BlogPostListScroll.js b/themes/matery/components/BlogPostListScroll.js
index 33c5b577..fb4da657 100644
--- a/themes/matery/components/BlogPostListScroll.js
+++ b/themes/matery/components/BlogPostListScroll.js
@@ -57,9 +57,11 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_MA
     return <div id='container' ref={targetRef} className='w-full'>
 
       {/* 文章列表 */}
-      <div className='flex flex-wrap space-y-1 lg:space-y-4 px-2'>
+      <div className="px-4 pt-4 flex flex-wrap pb-24" >
         {postsToShow.map(post => (
-          <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
+            <div key={post.id} className='xl:w-1/3 md:w-1/2 w-full p-4'>
+            <BlogPostCard index={posts.indexOf(post)} post={post} siteInfo={siteInfo} />
+            </div>
         ))}
       </div>