Skip to content

Commit

Permalink
fukasawa 一点微调
Browse files Browse the repository at this point in the history
  • Loading branch information
@tangly1024
tangly1024 committed Jun 3, 2024
1 parent 3a62c47 commit dc7e533
Show file tree
Hide file tree
Showing 4 changed files with 320 additions and 232 deletions.
205 changes: 123 additions & 82 deletions themes/fukasawa/components/AsideLeft.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,64 @@
import Logo from './Logo'
import GroupCategory from './GroupCategory'
import { MenuList } from './MenuList'
import GroupTag from './GroupTag'
import SearchInput from './SearchInput'
import SiteInfo from './SiteInfo'
import Catalog from './Catalog'
import Announcement from './Announcement'
import { useRouter } from 'next/router'
import DarkModeButton from '@/components/DarkModeButton'
import SocialButton from './SocialButton'
import CONFIG from '@/themes/fukasawa/config'
import { AdSlot } from '@/components/GoogleAdsense'
import { siteConfig } from '@/lib/config'
import MailChimpForm from './MailChimpForm'
import { useGlobal } from '@/lib/global'
import { useEffect, useMemo, useState } from 'react'
import { isBrowser } from '@/lib/utils'
import CONFIG from '@/themes/fukasawa/config'
import { debounce } from 'lodash'
import { useRouter } from 'next/router'
import { useEffect, useMemo, useState } from 'react'
import Announcement from './Announcement'
import Catalog from './Catalog'
import GroupCategory from './GroupCategory'
import GroupTag from './GroupTag'
import Logo from './Logo'
import MailChimpForm from './MailChimpForm'
import { MenuList } from './MenuList'
import SearchInput from './SearchInput'
import SiteInfo from './SiteInfo'
import SocialButton from './SocialButton'

/**
* 侧边栏
* @param {*} props
* @returns
*/
function AsideLeft(props) {
const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, notice } = props
const {
tagOptions,
currentTag,
categoryOptions,
currentCategory,
post,
slot,
notice
} = props
const router = useRouter()
const { fullWidth } = useGlobal()

const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT = fullWidth || siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT =
fullWidth ||
siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)

const FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL = siteConfig(
'FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL',
false,
CONFIG
)

const FUKASAWA_SIDEBAR_COLLAPSE_BUTTON = siteConfig(
'FUKASAWA_SIDEBAR_COLLAPSE_BUTTON',
null,
CONFIG
)

// 侧边栏折叠从 本地存储中获取 open 状态的初始值
const [isCollapsed, setIsCollapse] = useState(() => {
if (typeof window !== 'undefined') {
return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
return (
localStorage.getItem('fukasawa-sidebar-collapse') === 'true' ||
FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
)
}
return FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
})
Expand Down Expand Up @@ -69,7 +94,7 @@ function AsideLeft(props) {

// 自动折叠侧边栏 onResize 窗口宽度小于1366 || 滚动条滚动至页面的300px时 ; 将open设置为false
useEffect(() => {
if (!siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL', false, CONFIG)) {
if (!FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL) {
return
}
const handleResize = debounce(() => {
Expand All @@ -92,73 +117,89 @@ function AsideLeft(props) {
}
}
}, [])


return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
{/* 折叠按钮 */}
{siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_BUTTON', null, CONFIG) && <div className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2 dark:text-white`} 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' : 'p-8'}`}>

<Logo {...props} />

<section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
{siteConfig('DESCRIPTION')}
</section>

<section className='flex flex-col text-gray-600'>
<div className='w-12 my-4' />
<MenuList {...props} />
</section>

<section className='flex flex-col text-gray-600'>
<div className='w-12 my-4' />
<SearchInput {...props} />
</section>

<section className='flex flex-col dark:text-gray-300'>
<div className='w-12 my-4' />
<Announcement post={notice} />
</section>

<section>
<MailChimpForm />
</section>

<section>
<AdSlot type='in-article' />
</section>

{router.asPath !== '/tag' && <section className='flex flex-col'>
<div className='w-12 my-4' />
<GroupTag tags={tagOptions} currentTag={currentTag} />
</section>}

{router.asPath !== '/category' && <section className='flex flex-col'>
<div className='w-12 my-4' />
<GroupCategory categories={categoryOptions} currentCategory={currentCategory} />
</section>}

<section className='flex flex-col'>
<div className='w-12 my-4' />
<SocialButton />
<SiteInfo />
</section>

<section className='flex justify-center dark:text-gray-200 pt-4'>
<DarkModeButton />
</section>

<section className='sticky top-0 pt-12 flex flex-col max-h-screen '>
<Catalog toc={post?.toc} />
<div className='flex justify-center'>
<div>{slot}</div>
</div>
</section>

return (
<div
className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
{/* 悬浮的折叠按钮 */}
{FUKASAWA_SIDEBAR_COLLAPSE_BUTTON && (
<div
className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2 dark:text-white`}
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' : 'p-8'}`}>
<Logo {...props} />

<section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
{siteConfig('DESCRIPTION')}
</section>

<section className='flex flex-col text-gray-600'>
<div className='w-12 my-4' />
<MenuList {...props} />
</section>

<section className='flex flex-col text-gray-600'>
<div className='w-12 my-4' />
<SearchInput {...props} />
</section>

<section className='flex flex-col dark:text-gray-300'>
<div className='w-12 my-4' />
<Announcement post={notice} />
</section>

<section>
<MailChimpForm />
</section>

<section>
<AdSlot type='in-article' />
</section>

{router.asPath !== '/tag' && (
<section className='flex flex-col'>
<div className='w-12 my-4' />
<GroupTag tags={tagOptions} currentTag={currentTag} />
</section>
)}

{router.asPath !== '/category' && (
<section className='flex flex-col'>
<div className='w-12 my-4' />
<GroupCategory
categories={categoryOptions}
currentCategory={currentCategory}
/>
</section>
)}

<section className='flex flex-col'>
<div className='w-12 my-4' />
<SocialButton />
<SiteInfo />
</section>

<section className='flex justify-center dark:text-gray-200 pt-4'>
<DarkModeButton />
</section>

<section className='sticky top-0 pt-12 flex flex-col max-h-screen '>
<Catalog toc={post?.toc} />
<div className='flex justify-center'>
<div>{slot}</div>
</div>
</section>
</div>
</div>
)
}

export default AsideLeft
64 changes: 64 additions & 0 deletions themes/fukasawa/components/Header.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import Collapse from '@/components/Collapse'
import { useRef, useState } from 'react'
import Logo from './Logo'
import { MenuList } from './MenuList'
import SearchInput from './SearchInput'

/**
* 顶部导航
* @param {*} param0
* @returns
*/
const Header = props => {
const [isOpen, changeShow] = useState(false)
const collapseRef = useRef(null)

const toggleMenuOpen = () => {
changeShow(!isOpen)
}

return (
<div id='top-nav' className='z-40 block lg:hidden'>
{/* 导航栏 */}
<div
id='sticky-nav'
className={
'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'
}>
<Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
<div className='py-1 px-5'>
<MenuList
{...props}
onHeightChange={param =>
collapseRef.current?.updateCollapseHeight(param)
}
/>
<SearchInput {...props} />
</div>
</Collapse>
<div className='w-full flex justify-between items-center p-4 '>
{/* 左侧LOGO 标题 */}
<div className='flex flex-none flex-grow-0'>
<Logo {...props} />
</div>
<div className='flex'></div>

{/* 右侧功能 */}
<div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
<div
onClick={toggleMenuOpen}
className='cursor-pointer text-lg p-2'>
{isOpen ? (
<i className='fas fa-times' />
) : (
<i className='fas fa-bars' />
)}
</div>
</div>
</div>
</div>
</div>
)
}

export default Header
50 changes: 0 additions & 50 deletions themes/fukasawa/components/TopNav.js
View file

This file was deleted.

Loading

0 comments on commit dc7e533

Please sign in to comment.