fukasawa主题微调

2026-05-14 15:09:22 +00:00 · 2023-07-05 23:00:34 +08:00
parent 378a22a6c8
commit 2a2c6eb10d
8 changed files with 59 additions and 27 deletions
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -84,7 +84,7 @@ export default function ArticleDetail(props) {
        </header>

        {/* Notion文章主体 */}
-        <section id='article-wrapper' className='px-1'>
+        <section id='article-wrapper'>
          {post && <NotionPage post={post} />}
        </section>

@@ -98,7 +98,7 @@ export default function ArticleDetail(props) {
      {post.type === 'Post' && <ArticleAround prev={prev} next={next} /> }

      {/* 评论互动 */}
-      <div className="duration-200 shadow px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
+      <div className="duration-200 shadow py-6 px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
        <Comment frontMatter={post} />
      </div>
    </div>
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -10,22 +10,56 @@ import { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
 import SocialButton from './SocialButton'
 import { useFukasawaGlobal } from '..'
+import FUKA_CONFIG from '@/themes/fukasawa/config_fuka'

+// import { debounce } from 'lodash'
+// import { useEffect } from 'react'
+
+/**
+ * 侧边栏
+ * @param {*} props
+ * @returns
+ */
 function AsideLeft(props) {
  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo, notice } = props
  const router = useRouter()
-  const { open, setOpen } = useFukasawaGlobal()
+  const { isCollapsed, setIsCollapse } = useFukasawaGlobal()
  // 折叠侧边栏
  const toggleOpen = () => {
-    setOpen(!open)
+    setIsCollapse(!isCollapsed)
  }
-  return <div className={`sideLeft relative ${open ? 'w-80' : 'w-0'} duration-150 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
-        {/* 折叠按钮 */}
-        <div className={`${open ? 'ml-80' : ''} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-150 px-3 py-2`} onClick={toggleOpen}>
-            {open ? <i className='fas fa-bars text-xl'></i> : <i className="fa-solid fa-indent text-xl"></i>}
-        </div>

-        <div className={` ${open ? 'px-10' : 'hidden'}`}>
+  // 自动折叠侧边栏 onResize 窗口宽度小于1366 || 滚动条滚动至页面的300px时 ; 将open设置为false
+  //   useEffect(() => {
+  //     const handleResize = debounce(() => {
+  //       if (window.innerWidth < 1366 || window.scrollY >= 100) {
+  //         setIsCollapse(true)
+  //       } else {
+  //         setIsCollapse(false)
+  //       }
+  //     }, 100)
+
+  //     console.log('router', router)
+  //     if (router.pathname === '/[...slug]') {
+  //       window.addEventListener('resize', handleResize)
+  //       window.addEventListener('scroll', handleResize, { passive: true })
+  //     }
+
+  //     return () => {
+  //       if (router.pathname === '/[...slug]') {
+  //         window.removeEventListener('resize', handleResize)
+  //         window.removeEventListener('scroll', handleResize, { passive: true })
+  //       }
+  //     }
+  //   }, [])
+
+  return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} ease-in-out duration-150 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
+        {/* 折叠按钮 */}
+        {FUKA_CONFIG.SIDEBAR_COLLAPSE_BUTTON && <div className={`${isCollapsed ? '' : 'ml-80'} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-150 px-3 py-2`} onClick={toggleOpen}>
+            {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
+        </div>}
+
+        <div className={`h-full ${isCollapsed ? 'hidden' : 'px-10'}`}>

            <Logo {...props} />

--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -37,17 +37,14 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {

                {/* 文字部分 */}
                <div className="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`}
+                    <Link passHref href={`${BLOG.SUB_PATH}/${post.slug}`}
+                         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>

                    {(!showPreview || showSummary) && (
-                        <p className="my-1 line-clamp-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-5">
+                        <p className="my-2 tracking-wide line-clamp-3 text-gray-700 dark:text-gray-300 text-sm font-light leading-5">
                            {post.summary}
                        </p>
                    )}
--- a/themes/fukasawa/config_fuka.js
+++ b/themes/fukasawa/config_fuka.js
@@ -10,7 +10,8 @@ const FUKA_CONFIG = {
  MENU_ARCHIVE: true, // 显示归档
  MENU_SEARCH: false, // 显示搜索

-  SIDEBAR_OPEN_SATUS_DEFAULT: true // 侧边栏默认开启
+  SIDEBAR_COLLAPSE_BUTTON: true, // 侧边栏折叠按钮
+  SIDEBAR_COLLAPSE_SATUS_DEFAULT: false // 侧边栏默认折叠收起

 }
 export default FUKA_CONFIG
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -44,19 +44,19 @@ const LayoutBase = (props) => {
  const { onLoading } = useGlobal()

  // 侧边栏折叠从 本地存储中获取 open 状态的初始值
-  const [open, setOpen] = useState(() => {
+  const [isCollapsed, setIsCollapse] = useState(() => {
    if (typeof window !== 'undefined') {
-      return localStorage.getItem('fukasawa-sidebarOpen') === 'true' || FUKA_CONFIG.SIDEBAR_OPEN_SATUS_DEFAULT
+      return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || FUKA_CONFIG.SIDEBAR_COLLAPSE_SATUS_DEFAULT
    }
-    return FUKA_CONFIG.SIDEBAR_OPEN_SATUS_DEFAULT
+    return FUKA_CONFIG.SIDEBAR_COLLAPSE_SATUS_DEFAULT
  })

  // 在组件卸载时保存 open 状态到本地存储中
  useEffect(() => {
    if (isBrowser()) {
-      localStorage.setItem('fukasawa-sidebarOpen', open)
+      localStorage.setItem('fukasawa-sidebar-collapse', isCollapsed)
    }
-  }, [open])
+  }, [isCollapsed])

  // 增加一个状态以触发 Transition 组件的动画
  const [showTransition, setShowTransition] = useState(true)
@@ -71,7 +71,7 @@ const LayoutBase = (props) => {
  }

  return (
-        <ThemeGlobalFukasawa.Provider value={{ open, setOpen }}>
+        <ThemeGlobalFukasawa.Provider value={{ isCollapsed, setIsCollapse }}>

            <div id='theme-fukasawa'>
                <CommonHead meta={meta} />
--- a/themes/gitbook/components/TocDrawer.js
+++ b/themes/gitbook/components/TocDrawer.js
@@ -14,7 +14,7 @@ const TocDrawer = ({ post, cRef }) => {
    changeTocVisible(!tocVisible)
  }
  return <>
-    <div id='gitbook-toc-float' className='fixed top-0 right-0 z-40'>
+    <div id='gitbook-toc-float' className='fixed top-0 right-0 z-40 md:hidden'>
      {/* 侧边菜单 */}
      <div
        className={(tocVisible ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
--- a/themes/gitbook/components/TopNavBar.js
+++ b/themes/gitbook/components/TopNavBar.js
@@ -49,7 +49,7 @@ export default function TopNavBar(props) {
            </Collapse>

            {/* 导航栏菜单 */}
-            <div className='flex w-full h-14 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
+            <div className='flex w-full h-14 shadow glassmorphism bg-white dark:bg-hexo-black-gray px-7 items-between'>

                {/* 左侧图标Logo */}
                <LogoBar {...props} />
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -237,7 +237,7 @@ const LayoutSlug = props => {
                            <ShareBar post={post} />

                            {/* 版权说明 */}
-                            {post.type === 'Post' && <ArticleCopyright {...props} />}
+                            {post?.type === 'Post' && <ArticleCopyright {...props} />}

                        </article>

@@ -253,7 +253,7 @@ const LayoutSlug = props => {
            </div>

            {/* 底部文章推荐 */}
-            {post.type === 'Post' && <ArticleAdjacent {...props} />}
+            {post?.type === 'Post' && <ArticleAdjacent {...props} />}

            {/* 底部公告 */}
            <Announcement {...props} />