Skip to content

Commit 583c243

Browse files
committed
2 parents 825f9f0 + c040148 commit 583c243

22 files changed

+332
-216
lines changed

components/CustomContextMenu.js

+4-9
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,10 @@ export default function CustomContextMenu(props) {
5757
}
5858

5959
/**
60-
* 鼠标点击事件
60+
* 鼠标点击即关闭菜单
6161
*/
6262
const handleClick = event => {
63-
if (menuRef.current && !menuRef.current.contains(event.target)) {
64-
setShow(false)
65-
}
63+
setShow(false)
6664
}
6765

6866
window.addEventListener('contextmenu', handleContextMenu)
@@ -88,20 +86,19 @@ export default function CustomContextMenu(props) {
8886

8987
function handleScrollTop() {
9088
window.scrollTo({ top: 0, behavior: 'smooth' })
91-
setShow(false)
9289
}
9390

9491
function handleCopyLink() {
9592
const url = window.location.href
9693
navigator.clipboard
9794
.writeText(url)
9895
.then(() => {
99-
console.log('页面地址已复制')
96+
// console.log('页面地址已复制')
97+
alert(`${locale.COMMON.PAGE_URL_COPIED} : ${url}`)
10098
})
10199
.catch(error => {
102100
console.error('复制页面地址失败:', error)
103101
})
104-
setShow(false)
105102
}
106103

107104
/**
@@ -130,8 +127,6 @@ export default function CustomContextMenu(props) {
130127
} else {
131128
// alert("Please select some text first.");
132129
}
133-
134-
setShow(false)
135130
}
136131

137132
function handleChangeDarkMode() {

components/LazyImage.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export default function LazyImage({
2020
style
2121
}) {
2222
const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
23+
const defaultPlaceholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
24+
2325
const imageRef = useRef(null)
2426
const [adjustedSrc, setAdjustedSrc] = useState(
2527
placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
@@ -37,6 +39,14 @@ export default function LazyImage({
3739
onLoad() // 触发传递的onLoad回调函数
3840
}
3941
}
42+
/**
43+
* 图片加载失败回调
44+
*/
45+
const handleImageError = () => {
46+
if (imageRef.current) {
47+
imageRef.current.src = defaultPlaceholderSrc
48+
}
49+
}
4050

4151
useEffect(() => {
4252
const adjustedImageSrc = adjustImgSize(src, maxWidth)
@@ -71,7 +81,8 @@ export default function LazyImage({
7181
ref: imageRef,
7282
src: priority ? adjustedSrc : placeholderSrc,
7383
alt: alt,
74-
onLoad: handleImageLoad
84+
onLoad: handleImageLoad,
85+
onError: handleImageError // 添加onError处理函数
7586
}
7687

7788
if (id) {

lib/lang/en-US.js

+4
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,14 @@ export default {
3333
COPYRIGHT: 'Copyright',
3434
AUTHOR: 'Author',
3535
URL: 'URL',
36+
NOW: 'NOW',
37+
RECOMMEND_BADGES: 'Recommend',
38+
BLOG: 'Blog',
3639
POSTS: 'Posts',
3740
ARTICLE: 'Article',
3841
VISITORS: 'Visitors',
3942
VIEWS: 'Views',
43+
PAGE_URL_COPIED: 'Page URL copied',
4044
COPYRIGHT_NOTICE:
4145
'All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!',
4246
RESULT_OF_SEARCH: 'Results Found',

lib/lang/zh-CN.js

+4
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,14 @@ export default {
3535
AUTHOR: '作者',
3636
URL: '链接',
3737
ANALYTICS: '统计',
38+
RECOMMEND_BADGES: '荐',
39+
BLOG: '博客',
40+
NOW: '此刻',
3841
POSTS: '篇文章',
3942
ARTICLE: '文章',
4043
VISITORS: '位访客',
4144
VIEWS: '次查看',
45+
PAGE_URL_COPIED: '页面地址已复制',
4246
COPYRIGHT_NOTICE: '本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。',
4347
RESULT_OF_SEARCH: '篇搜索到的结果',
4448
NO_RESULTS_FOUND: '没有找到文章',

styles/notion.css

+1
Original file line numberDiff line numberDiff line change
@@ -1451,6 +1451,7 @@ code[class*='language-'] {
14511451

14521452
.notion-collection-card-property .notion-page-title-text {
14531453
border-bottom: 0 none;
1454+
@apply dark:text-gray-200;
14541455
}
14551456

14561457
.notion-collection-card-property

themes/heo/components/BlogPostCard.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,11 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
5050
{/* 分类 */}
5151
{post?.category && (
5252
<div
53-
className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
53+
className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-300 text-gray-600 hover:text-indigo-700 dark:hover:text-yellow-500`}>
5454
<Link
5555
passHref
5656
href={`/category/${post.category}`}
57-
className='cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:hover:text-yellow-700 dark:text-gray-600 transform'>
57+
className='cursor-pointer text-xs font-normal menu-link '>
5858
{post.category}
5959
</Link>
6060
</div>

themes/heo/components/CategoryBar.js

+35-15
Original file line numberDiff line numberDiff line change
@@ -29,23 +29,40 @@ export default function CategoryBar(props) {
2929
}
3030
}
3131

32-
return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]
32+
return (
33+
<div
34+
id='category-bar'
35+
className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]
3336
${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''} py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
37+
<div
38+
id='category-bar-items'
39+
ref={categoryBarItemsRef}
40+
className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
41+
<MenuItem href='/' name={locale.NAV.INDEX} />
42+
{categoryOptions?.map((c, index) => (
43+
<MenuItem key={index} href={`/category/${c.name}`} name={c.name} />
44+
))}
45+
</div>
3446

35-
<div id='category-bar-items' ref={categoryBarItemsRef} className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
36-
<MenuItem href='/' name={locale.NAV.INDEX} />
37-
{categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
38-
</div>
39-
40-
<div id='category-bar-next' className='flex items-center justify-center'>
41-
<div id='right' className='cursor-pointer mx-2' onClick={handleToggleScroll}>
42-
{scrollRight ? <ChevronDoubleLeft className={'w-5 h-5'} /> : <ChevronDoubleRight className={'w-5 h-5'} /> }
43-
</div>
44-
<Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
45-
{locale.MENU.CATEGORY}
46-
</Link>
47+
<div id='category-bar-next' className='flex items-center justify-center'>
48+
<div
49+
id='right'
50+
className='cursor-pointer mx-2 dark:text-gray-300 dark:hover:text-yellow-600 hover:text-indigo-600'
51+
onClick={handleToggleScroll}>
52+
{scrollRight ? (
53+
<ChevronDoubleLeft className={'w-5 h-5'} />
54+
) : (
55+
<ChevronDoubleRight className={'w-5 h-5'} />
56+
)}
4757
</div>
58+
<Link
59+
href='/category'
60+
className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600 dark:hover:text-yellow-600'>
61+
{locale.MENU.CATEGORY}
62+
</Link>
63+
</div>
4864
</div>
65+
)
4966
}
5067

5168
/**
@@ -57,7 +74,10 @@ const MenuItem = ({ href, name }) => {
5774
const router = useRouter()
5875
const { category } = router.query
5976
const selected = category === name
60-
return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
61-
<Link href={href}>{name}</Link>
77+
return (
78+
<div
79+
className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
80+
<Link href={href}>{name}</Link>
6281
</div>
82+
)
6383
}

themes/heo/components/Footer.js

+48-31
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,66 @@
1-
import SocialButton from './SocialButton'
21
import { siteConfig } from '@/lib/config'
2+
import SocialButton from './SocialButton'
33

44
const Footer = ({ title }) => {
55
const d = new Date()
66
const currentYear = d.getFullYear()
77
const since = siteConfig('SINCE')
8-
const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
8+
const copyrightDate =
9+
parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
910

1011
return (
11-
<footer
12-
className='relative flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm'
13-
>
14-
15-
{/* 颜色过度区 */}
16-
<div id='color-transition' className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'>
17-
18-
</div>
12+
<footer className='relative flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6 text-gray-600 dark:text-gray-100 text-sm'>
13+
{/* 颜色过度区 */}
14+
<div
15+
id='color-transition'
16+
className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'
17+
/>
1918

20-
{/* 社交按钮 */}
21-
<div className='w-full h-24'>
22-
<SocialButton />
23-
</div>
19+
{/* 社交按钮 */}
20+
<div className='w-full h-24'>
21+
<SocialButton />
22+
</div>
2423

25-
<br />
24+
<br />
2625

27-
{/* 底部页面信息 */}
28-
<div id='footer-bottom' className='w-full h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#30343f]'>
29-
30-
<div id='footer-bottom-left'>
31-
NotionNext {siteConfig('VERSION')} <i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={siteConfig('LINK')} className='underline font-bold dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.
32-
</div>
33-
34-
<div id='footer-bottom-right'>
35-
{siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a></>}
26+
{/* 底部页面信息 */}
27+
<div
28+
id='footer-bottom'
29+
className='w-full h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#21232A] border-t dark:border-t-[#3D3D3F]'>
30+
<div id='footer-bottom-left'>
31+
NotionNext {siteConfig('VERSION')} <i className='fas fa-copyright' />{' '}
32+
{`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' />{' '}
33+
<a
34+
href={siteConfig('LINK')}
35+
className='underline font-bold dark:text-gray-300 '>
36+
{siteConfig('AUTHOR')}
37+
</a>
38+
.
39+
</div>
3640

37-
<span className='hidden busuanzi_container_site_pv'>
38-
<i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span> </span>
39-
<span className='pl-2 hidden busuanzi_container_site_uv'>
40-
<i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
41+
<div id='footer-bottom-right'>
42+
{siteConfig('BEI_AN') && (
43+
<>
44+
<i className='fas fa-shield-alt' />{' '}
45+
<a href='https://beian.miit.gov.cn/' className='mr-2'>
46+
{siteConfig('BEI_AN')}
47+
</a>
48+
</>
49+
)}
4150

42-
{/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
51+
<span className='hidden busuanzi_container_site_pv'>
52+
<i className='fas fa-eye' />
53+
<span className='px-1 busuanzi_value_site_pv'> </span>{' '}
54+
</span>
55+
<span className='pl-2 hidden busuanzi_container_site_uv'>
56+
<i className='fas fa-users' />{' '}
57+
<span className='px-1 busuanzi_value_site_uv'> </span>{' '}
58+
</span>
4359

44-
</div>
60+
{/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
4561
</div>
46-
</footer >
62+
</div>
63+
</footer>
4764
)
4865
}
4966

themes/heo/components/Header.js

+16-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { siteConfig } from '@/lib/config'
22
import { isBrowser } from '@/lib/utils'
33
import throttle from 'lodash.throttle'
4+
import { useRouter } from 'next/router'
45
import { useCallback, useEffect, useRef, useState } from 'react'
56
import DarkModeButton from './DarkModeButton'
67
import Logo from './Logo'
@@ -21,6 +22,7 @@ const Header = props => {
2122
const [navBgWhite, setBgWhite] = useState(false)
2223
const [activeIndex, setActiveIndex] = useState(0)
2324

25+
const router = useRouter()
2426
const slideOverRef = useRef()
2527

2628
const toggleMenuOpen = () => {
@@ -34,35 +36,37 @@ const Header = props => {
3436
throttle(() => {
3537
const scrollS = window.scrollY
3638
// 导航栏设置 白色背景
37-
if (scrollS <= 0) {
39+
if (scrollS <= 1) {
3840
setFixedNav(false)
3941
setBgWhite(false)
42+
setTextWhite(false)
4043

4144
// 文章详情页特殊处理
42-
if (document.querySelector('#post-bg')) {
45+
if (document?.querySelector('#post-bg')) {
4346
setFixedNav(true)
4447
setTextWhite(true)
45-
setBgWhite(false)
4648
}
4749
} else {
4850
// 向下滚动后的导航样式
4951
setFixedNav(true)
5052
setTextWhite(false)
5153
setBgWhite(true)
5254
}
53-
}, 200)
55+
}, 100)
5456
)
57+
useEffect(() => {
58+
scrollTrigger()
59+
}, [router])
5560

5661
// 监听滚动
5762
useEffect(() => {
58-
scrollTrigger()
5963
window.addEventListener('scroll', scrollTrigger)
6064
return () => {
6165
window.removeEventListener('scroll', scrollTrigger)
6266
}
6367
}, [])
6468

65-
// 监听导航栏显示文字
69+
// 导航栏根据滚动轮播菜单内容
6670
useEffect(() => {
6771
let prevScrollY = 0
6872
let ticking = false
@@ -71,17 +75,14 @@ const Header = props => {
7175
if (!ticking) {
7276
window.requestAnimationFrame(() => {
7377
const currentScrollY = window.scrollY
74-
7578
if (currentScrollY > prevScrollY) {
7679
setActiveIndex(1) // 向下滚动时设置activeIndex为1
7780
} else {
7881
setActiveIndex(0) // 向上滚动时设置activeIndex为0
7982
}
80-
8183
prevScrollY = currentScrollY
8284
ticking = false
8385
})
84-
8586
ticking = true
8687
}
8788
}
@@ -131,6 +132,11 @@ const Header = props => {
131132
}
132133
`}</style>
133134

135+
{/* fixed时留白高度 */}
136+
{fixedNav && !document?.querySelector('#post-bg') && (
137+
<div className='h-16'></div>
138+
)}
139+
134140
{/* 顶部导航菜单栏 */}
135141
<nav
136142
id='nav'
@@ -158,7 +164,7 @@ const Header = props => {
158164
</div>
159165

160166
{/* 右侧固定 */}
161-
<div className='flex flex-shrink-0 justify-center items-center'>
167+
<div className='flex flex-shrink-0 justify-end items-center w-48'>
162168
<RandomPostButton {...props} />
163169
<SearchButton {...props} />
164170
{!JSON.parse(siteConfig('THEME_SWITCH')) && (

0 commit comments

Comments
 (0)