fuksawa post card

2026-05-13 23:16:47 +00:00 · 2023-06-27 15:14:40 +08:00
parent 562cb6137d
commit 2a48a3dabf
8 changed files with 116 additions and 83 deletions
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -31,7 +31,7 @@ const Pdf = dynamic(
 // https://github.com/txs
 // import PrismMac from '@/components/PrismMac'
 const PrismMac = dynamic(() => import('@/components/PrismMac'), {
-  ssr: true
+  ssr: false
 })

 const Collection = dynamic(() =>
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -1,5 +1,3 @@
-'use client'
-
 import { useEffect } from 'react'
 import Prism from 'prismjs'
 // 所有语言的prismjs 使用autoloader引入
@@ -13,7 +11,7 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

 // mermaid图
 import BLOG from '@/blog.config'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/navigation'

 /**
@@ -23,20 +21,19 @@ import { useRouter } from 'next/navigation'
 const PrismMac = () => {
  const router = useRouter()
  useEffect(() => {
-    if (isBrowser()) {
-      if (BLOG.CODE_MAC_BAR) {
-        loadExternalResource('/css/prism-mac-style.css', 'css')
-      }
-      loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
-      loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
-        if (window?.Prism?.plugins?.autoloader) {
-          window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
-        }
-        renderPrismMac()
-        renderMermaid()
-      })
+    console.log('渲染Code')
+    if (BLOG.CODE_MAC_BAR) {
+      loadExternalResource('/css/prism-mac-style.css', 'css')
    }
-  }, [router.events])
+    loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
+    loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
+      if (window?.Prism?.plugins?.autoloader) {
+        window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+      }
+      renderPrismMac()
+      renderMermaid()
+    })
+  }, [router])
  return <></>
 }

--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -179,7 +179,7 @@ export function getNavPages({ allPages }) {
  const allNavPages = allPages.filter(post => {
    return post && post?.slug && (!post?.slug?.startsWith('http')) && post?.type === 'Post' && post?.status === 'Published'
  })
-  const result = allNavPages.map(item => ({ id: item.id, title: item.title, category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug }))
+  const result = allNavPages.map(item => ({ id: item.id, title: item.title || null, category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug }))

  const groupedArray = result.reduce((groups, item) => {
    const categoryName = item.category ? item.category.join('/') : '' // 将category转换为字符串
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -2015,10 +2015,3 @@ code.language-mermaid {
 .notion-equation-inline .katex-display {
  margin: 0 0 !important;
 }
-
-.two-line-clamp {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -6,73 +6,74 @@ import CONFIG_FUKA from '../config_fuka'

 const BlogCard = ({ index, post, showSummary, siteInfo }) => {
  const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap
-  // matery 主题默认强制显示图片
-  if (post && !post.pageCover) {
+  // fukasawa 强制显示图片
+  if (CONFIG_FUKA.POST_LIST_COVER_FORCE && post && !post.pageCover) {
    post.pageCoverThumbnail = siteInfo?.pageCover
  }
  const showPageCover = CONFIG_FUKA.POST_LIST_COVER && post?.pageCoverThumbnail

  return (
-    <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`}>
+        <div
+            data-aos="fade-up"
+            data-aos-duration="500"
+            data-aos-once="true"
+            style={{ maxHeight: '60rem' }}
+            className="w-full lg:max-w-sm p-3 shadow mb-4 mx-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200"
+        >
+            <div className="flex flex-col justify-between h-full">
+                {/* 封面图 */}
+                {showPageCover && (
+                    <div className="flex-grow mb-3 w-full duration-200 cursor-pointer transform overflow-hidden">
+                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img
+                                src={post?.pageCoverThumbnail}
+                                alt={post.title}
+                                className="object-cover w-full h-full hover:scale-125 transform duration-500"
+                            ></img>
+                        </Link>
+                    </div>
+                )}

-                {post.title}
-
-            </Link>
-
-            {(!showPreview || showSummary) && (
-                <p className="mt-1 mb-1 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden">
-                {post.summary}
-                </p>
-            )}
-
-                {/* 分类标签 */}
-                <div className="mt-1 text-gray-400 justify-between flex">
+                {/* 文字部分 */}
+                <div className="flex flex-col w-full">
                    <Link
-                        href={`/category/${post.category}`}
+                        href={`${BLOG.SUB_PATH}/${post.slug}`}
                        passHref
-                        className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
-
-                        <i className="mr-1 far fa-folder" />
-                        {post.category}
-
+                        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}
                    </Link>
-                    <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
-                        <div>
-                            {' '}
-                            {post.tagItems.map(tag => (
-                                <TagItemMini key={tag.name} tag={tag} />
-                            ))}
+
+                    {(!showPreview || showSummary) && (
+                        <p className="my-1 line-clamp-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-5">
+                            {post.summary}
+                        </p>
+                    )}
+
+                    {/* 分类标签 */}
+                    <div className="mt-auto text-gray-400 justify-between flex">
+                        {post.category && <Link
+                            href={`/category/${post.category}`}
+                            passHref
+                            className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform"
+                        >
+                            <i className="mr-1 far fa-folder" />
+                            {post.category}
+                        </Link>}
+                        <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                            <div>
+
+                                {post.tagItems.map((tag) => (
+                                    <TagItemMini key={tag.name} tag={tag} />
+                                ))}
+                            </div>
                        </div>
                    </div>
                </div>
            </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?.pageCoverThumbnail}
-                    alt={post.title}
-                    className="w-full hover:scale-125 transform duration-500"
-                ></img>
-                {/* <Image className='hover:scale-105 transform duration-500' src={post?.pageCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
-                </div>
-            </Link>
-            )}
        </div>
-      </section>
-    </div>
-
  )
 }

--- a/themes/fukasawa/components/BlogListPage.js
+++ b/themes/fukasawa/components/BlogListPage.js
@@ -1,8 +1,10 @@
 import BLOG from '@/blog.config'
+import { deepClone } from '@/lib/utils'
 import BlogCard from './BlogCard'
 import BlogPostListEmpty from './BlogListEmpty'
 import PaginationSimple from './PaginationSimple'
-
+import { useEffect, useState } from 'react'
+import { debounce } from 'lodash'
 /**
 * 文章列表分页表格
 * @param page 当前页
@@ -15,14 +17,43 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
  const showNext = page < totalPage

-  if (!posts || posts.length === 0) {
+  const [columns, setColumns] = useState(calculateColumns())
+  const [filterPosts, setFilterPosts] = useState([])
+
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      setColumns(calculateColumns())
+    }, 200)
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  /**
+   * 文章重新布局，使纵向排列看起来是横向排列
+   */
+  useEffect(() => {
+    const count = posts?.length || 0
+    const rows = Math.ceil(count / columns)
+    const newFilterPosts = []
+    for (let i = 0; i < columns; i++) {
+      for (let j = 0; j < rows; j++) {
+        const index = j * columns + i
+        if (index < count) {
+          newFilterPosts.push(deepClone(posts[index]))
+        }
+      }
+    }
+    setFilterPosts(newFilterPosts)
+  }, [columns, posts])
+
+  if (!filterPosts || filterPosts.length === 0) {
    return <BlogPostListEmpty />
  } else {
    return (
      <div>
        {/* 文章列表 */}
        <div id="container" className='grid-container'>
-          {posts?.map(post => (
+          {filterPosts?.map(post => (
            <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>
@@ -34,4 +65,14 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
  }
 }

+const calculateColumns = () => {
+  if (window.innerWidth >= 1024) {
+    return 3
+  } else if (window.innerWidth >= 640) {
+    return 2
+  } else {
+    return 1
+  }
+}
+
 export default BlogListPage
--- a/themes/fukasawa/config_fuka.js
+++ b/themes/fukasawa/config_fuka.js
@@ -1,6 +1,7 @@
 const FUKA_CONFIG = {

  POST_LIST_COVER: true, // 文章列表显示图片封面
+  POST_LIST_COVER_FORCE: false, // 即使没有封面也将站点背景图设置为封面
  POST_LIST_PREVIEW: false, // 显示文章预览

  // 菜单
--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/themes/hexo/components/BlogPostCardInfo.js
@@ -43,14 +43,14 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary

          {/* 摘要 */}
          {(!showPreview || showSummary) && !post.results && (
-            <p className="two-line-clamp replace my-3 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
+            <p className="line-clamp-2 replace my-3 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
                {post.summary}
            </p>
          )}

        {/* 搜索结果 */}
        {post.results && (
-            <p className="two-line-clamp mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+            <p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
                {post.results.map(r => (
                    <span key={r}>{r}</span>
                ))}