Skip to content

Commit 269ae1b

Browse files
actions-useractions-user
committed
2 parents dcfff67 + dc7e533 commit 269ae1b

22 files changed

+604
-395
lines changed

‎README_EN.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ Live Demo：[https://preview.tangly1024.com/](https://preview.tangly1024.com/)
3535

3636
It only takes a few minutes to set up your personal site:
3737

38-
- [Quick Deployment Tutorial - Multiple Options Available](https://tangly1024.com/article/notion-next)
38+
- [Quick Deployment Tutorial - Multiple Options Available](https://docs.tangly1024.com/article/vercel-deploy-notion-next)
3939

40-
- [Customization Guide - How to Configure Feature Plugins](https://tangly1024.com/article/notion-next-guide)
40+
- [Customization Guide - How to Configure Feature Plugins](https://docs.tangly1024.com/article/how-to-config-notion-next)
4141

42-
- [Development Guide - How to Conduct Local Development](https://tangly1024.com/article/how-to-develop-with-notion-next)
42+
- [Development Guide - How to Conduct Local Development](https://docs.tangly1024.com/article/how-to-develop-with-notion-next)
4343

44-
- [Update Guide - How to Get the Latest Upgrade Patch](https://tangly1024.com/article/how-to-update-notionnext)
44+
- [Update Guide - How to Get the Latest Upgrade Patch](https://docs.tangly1024.com/article/how-to-update-notionnext)
4545

46-
- [Version History - Check Feature Highlights for Each Version](https://tangly1024.com/article/notion-next-changelogs)
46+
- [Version History - Check Feature Highlights for Each Version](https://docs.tangly1024.com/article/latest)
4747

4848
## Acknowledgements
4949

‎components/Fireworks.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,11 @@ const Fireworks = () => {
3535
loadFireworks()
3636

3737
return () => {
38-
// 在组件卸载时清理资源（如果需要）
38+
// 在组件卸载时清理资源
39+
const fireworksElements = document.getElementsByClassName('fireworks')
40+
while (fireworksElements.length > 0) {
41+
fireworksElements[0].parentNode.removeChild(fireworksElements[0])
42+
}
3943
}
4044
}, [])
4145

‎components/MouseFollow.js

+19-1
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,26 @@ const MOUSE_FOLLOW = () => {
1515
loadExternalResource('/js/mouse-follow.js', 'js').then(url => {
1616
window.createMouseCanvas && window.createMouseCanvas()({ type, color })
1717
})
18+
19+
return () => {
20+
// 在组件卸载时清理资源
21+
const mouseFollowElement = document.getElementById('vixcityCanvas')
22+
mouseFollowElement?.parentNode?.removeChild(mouseFollowElement)
23+
}
1824
}, [])
1925

20-
return <></>
26+
return (
27+
<>
28+
<style global jsx>
29+
{`
30+
@media (max-width: 600px) {
31+
#vixcityCanvas {
32+
display: none;
33+
}
34+
}
35+
`}
36+
</style>
37+
</>
38+
)
2139
}
2240
export default MOUSE_FOLLOW

‎themes/fukasawa/components/AsideLeft.js

+123-82
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,64 @@
1-
import Logo from './Logo'
2-
import GroupCategory from './GroupCategory'
3-
import { MenuList } from './MenuList'
4-
import GroupTag from './GroupTag'
5-
import SearchInput from './SearchInput'
6-
import SiteInfo from './SiteInfo'
7-
import Catalog from './Catalog'
8-
import Announcement from './Announcement'
9-
import { useRouter } from 'next/router'
101
import DarkModeButton from '@/components/DarkModeButton'
11-
import SocialButton from './SocialButton'
12-
import CONFIG from '@/themes/fukasawa/config'
132
import { AdSlot } from '@/components/GoogleAdsense'
143
import { siteConfig } from '@/lib/config'
15-
import MailChimpForm from './MailChimpForm'
164
import { useGlobal } from '@/lib/global'
17-
import { useEffect, useMemo, useState } from 'react'
185
import { isBrowser } from '@/lib/utils'
6+
import CONFIG from '@/themes/fukasawa/config'
197
import { debounce } from 'lodash'
8+
import { useRouter } from 'next/router'
9+
import { useEffect, useMemo, useState } from 'react'
10+
import Announcement from './Announcement'
11+
import Catalog from './Catalog'
12+
import GroupCategory from './GroupCategory'
13+
import GroupTag from './GroupTag'
14+
import Logo from './Logo'
15+
import MailChimpForm from './MailChimpForm'
16+
import { MenuList } from './MenuList'
17+
import SearchInput from './SearchInput'
18+
import SiteInfo from './SiteInfo'
19+
import SocialButton from './SocialButton'
2020

2121
/**
2222
* 侧边栏
2323
* @param {*} props
2424
* @returns
2525
*/
2626
function AsideLeft(props) {
27-
const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, notice } = props
27+
const {
28+
tagOptions,
29+
currentTag,
30+
categoryOptions,
31+
currentCategory,
32+
post,
33+
slot,
34+
notice
35+
} = props
2836
const router = useRouter()
2937
const { fullWidth } = useGlobal()
3038

31-
const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT = fullWidth || siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
39+
const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT =
40+
fullWidth ||
41+
siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
42+
43+
const FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL = siteConfig(
44+
'FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL',
45+
false,
46+
CONFIG
47+
)
48+
49+
const FUKASAWA_SIDEBAR_COLLAPSE_BUTTON = siteConfig(
50+
'FUKASAWA_SIDEBAR_COLLAPSE_BUTTON',
51+
null,
52+
CONFIG
53+
)
3254

3355
// 侧边栏折叠从 本地存储中获取 open 状态的初始值
3456
const [isCollapsed, setIsCollapse] = useState(() => {
3557
if (typeof window !== 'undefined') {
36-
return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
58+
return (
59+
localStorage.getItem('fukasawa-sidebar-collapse') === 'true' ||
60+
FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
61+
)
3762
}
3863
return FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
3964
})
@@ -69,7 +94,7 @@ function AsideLeft(props) {
6994

7095
// 自动折叠侧边栏 onResize 窗口宽度小于1366 || 滚动条滚动至页面的300px时 ; 将open设置为false
7196
useEffect(() => {
72-
if (!siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL', false, CONFIG)) {
97+
if (!FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL) {
7398
return
7499
}
75100
const handleResize = debounce(() => {
@@ -92,73 +117,89 @@ function AsideLeft(props) {
92117
}
93118
}
94119
}, [])
95-
96-
97-
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`}>
98-
{/* 折叠按钮 */}
99-
{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}>
100-
{isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
101-
</div>}
102-
103-
<div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
104-
105-
<Logo {...props} />
106-
107-
<section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
108-
{siteConfig('DESCRIPTION')}
109-
</section>
110-
111-
<section className='flex flex-col text-gray-600'>
112-
<div className='w-12 my-4' />
113-
<MenuList {...props} />
114-
</section>
115-
116-
<section className='flex flex-col text-gray-600'>
117-
<div className='w-12 my-4' />
118-
<SearchInput {...props} />
119-
</section>
120-
121-
<section className='flex flex-col dark:text-gray-300'>
122-
<div className='w-12 my-4' />
123-
<Announcement post={notice} />
124-
</section>
125-
126-
<section>
127-
<MailChimpForm />
128-
</section>
129-
130-
<section>
131-
<AdSlot type='in-article' />
132-
</section>
133-
134-
{router.asPath !== '/tag' && <section className='flex flex-col'>
135-
<div className='w-12 my-4' />
136-
<GroupTag tags={tagOptions} currentTag={currentTag} />
137-
</section>}
138-
139-
{router.asPath !== '/category' && <section className='flex flex-col'>
140-
<div className='w-12 my-4' />
141-
<GroupCategory categories={categoryOptions} currentCategory={currentCategory} />
142-
</section>}
143-
144-
<section className='flex flex-col'>
145-
<div className='w-12 my-4' />
146-
<SocialButton />
147-
<SiteInfo />
148-
</section>
149-
150-
<section className='flex justify-center dark:text-gray-200 pt-4'>
151-
<DarkModeButton />
152-
</section>
153-
154-
<section className='sticky top-0 pt-12 flex flex-col max-h-screen '>
155-
<Catalog toc={post?.toc} />
156-
<div className='flex justify-center'>
157-
<div>{slot}</div>
158-
</div>
159-
</section>
120+
121+
return (
122+
<div
123+
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`}>
124+
{/* 悬浮的折叠按钮 */}
125+
{FUKASAWA_SIDEBAR_COLLAPSE_BUTTON && (
126+
<div
127+
className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2 dark:text-white`}
128+
onClick={toggleOpen}>
129+
{isCollapsed ? (
130+
<i className='fa-solid fa-indent text-xl'></i>
131+
) : (
132+
<i className='fas fa-bars text-xl'></i>
133+
)}
160134
</div>
135+
)}
136+
137+
<div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
138+
<Logo {...props} />
139+
140+
<section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
141+
{siteConfig('DESCRIPTION')}
142+
</section>
143+
144+
<section className='flex flex-col text-gray-600'>
145+
<div className='w-12 my-4' />
146+
<MenuList {...props} />
147+
</section>
148+
149+
<section className='flex flex-col text-gray-600'>
150+
<div className='w-12 my-4' />
151+
<SearchInput {...props} />
152+
</section>
153+
154+
<section className='flex flex-col dark:text-gray-300'>
155+
<div className='w-12 my-4' />
156+
<Announcement post={notice} />
157+
</section>
158+
159+
<section>
160+
<MailChimpForm />
161+
</section>
162+
163+
<section>
164+
<AdSlot type='in-article' />
165+
</section>
166+
167+
{router.asPath !== '/tag' && (
168+
<section className='flex flex-col'>
169+
<div className='w-12 my-4' />
170+
<GroupTag tags={tagOptions} currentTag={currentTag} />
171+
</section>
172+
)}
173+
174+
{router.asPath !== '/category' && (
175+
<section className='flex flex-col'>
176+
<div className='w-12 my-4' />
177+
<GroupCategory
178+
categories={categoryOptions}
179+
currentCategory={currentCategory}
180+
/>
181+
</section>
182+
)}
183+
184+
<section className='flex flex-col'>
185+
<div className='w-12 my-4' />
186+
<SocialButton />
187+
<SiteInfo />
188+
</section>
189+
190+
<section className='flex justify-center dark:text-gray-200 pt-4'>
191+
<DarkModeButton />
192+
</section>
193+
194+
<section className='sticky top-0 pt-12 flex flex-col max-h-screen '>
195+
<Catalog toc={post?.toc} />
196+
<div className='flex justify-center'>
197+
<div>{slot}</div>
198+
</div>
199+
</section>
200+
</div>
161201
</div>
202+
)
162203
}
163204

164205
export default AsideLeft

‎themes/fukasawa/components/Header.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import Collapse from '@/components/Collapse'
2+
import { useRef, useState } from 'react'
3+
import Logo from './Logo'
4+
import { MenuList } from './MenuList'
5+
import SearchInput from './SearchInput'
6+
7+
/**
8+
* 顶部导航
9+
* @param {*} param0
10+
* @returns
11+
*/
12+
const Header = props => {
13+
const [isOpen, changeShow] = useState(false)
14+
const collapseRef = useRef(null)
15+
16+
const toggleMenuOpen = () => {
17+
changeShow(!isOpen)
18+
}
19+
20+
return (
21+
<div id='top-nav' className='z-40 block lg:hidden'>
22+
{/* 导航栏 */}
23+
<div
24+
id='sticky-nav'
25+
className={
26+
'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'
27+
}>
28+
<Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
29+
<div className='py-1 px-5'>
30+
<MenuList
31+
{...props}
32+
onHeightChange={param =>
33+
collapseRef.current?.updateCollapseHeight(param)
34+
}
35+
/>
36+
<SearchInput {...props} />
37+
</div>
38+
</Collapse>
39+
<div className='w-full flex justify-between items-center p-4 '>
40+
{/* 左侧LOGO 标题 */}
41+
<div className='flex flex-none flex-grow-0'>
42+
<Logo {...props} />
43+
</div>
44+
<div className='flex'></div>
45+
46+
{/* 右侧功能 */}
47+
<div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
48+
<div
49+
onClick={toggleMenuOpen}
50+
className='cursor-pointer text-lg p-2'>
51+
{isOpen ? (
52+
<i className='fas fa-times' />
53+
) : (
54+
<i className='fas fa-bars' />
55+
)}
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
)
62+
}
63+
64+
export default Header

0 commit comments

Comments
 (0)