Skip to content

Commit dcfff67

Browse files
actions-useractions-user
committed
2 parents 583c243 + 0541bb0 commit dcfff67

14 files changed

+284
-211
lines changed

‎.env.local

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
2-
NEXT_PUBLIC_VERSION=4.5.3
2+
NEXT_PUBLIC_VERSION=4.5.4
33

44

55
# 可在此添加环境变量，去掉最左边的（# ）注释即可

‎components/Comment.js

+5
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,11 @@ const Comment = ({ frontMatter, className }) => {
121121
return null
122122
}
123123

124+
// 特定文章关闭评论区
125+
if (frontMatter?.comment === 'Hide') {
126+
return null
127+
}
128+
124129
return (
125130
<div
126131
key={frontMatter?.id}

‎components/LazyImage.js

+36-18
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { siteConfig } from '@/lib/config'
22
import Head from 'next/head'
33
import { useEffect, useRef, useState } from 'react'
4+
45
/**
56
* 图片懒加载
67
* @param {*} param0
@@ -21,20 +22,21 @@ export default function LazyImage({
2122
}) {
2223
const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
2324
const defaultPlaceholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
24-
2525
const imageRef = useRef(null)
26-
const [adjustedSrc, setAdjustedSrc] = useState(
27-
placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
26+
const [currentSrc, setCurrentSrc] = useState(
27+
placeholderSrc || defaultPlaceholderSrc
2828
)
2929

30-
if (!placeholderSrc) {
31-
placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
32-
}
33-
3430
/**
35-
* 图片加载成功回调
31+
* 占位图加载成功
3632
*/
37-
const handleImageLoad = () => {
33+
const handleThumbnailLoaded = () => {
34+
if (typeof onLoad === 'function') {
35+
// onLoad() // 触发传递的onLoad回调函数
36+
}
37+
}
38+
// 原图加载完成
39+
const handleImageLoaded = img => {
3840
if (typeof onLoad === 'function') {
3941
onLoad() // 触发传递的onLoad回调函数
4042
}
@@ -44,13 +46,27 @@ export default function LazyImage({
4446
*/
4547
const handleImageError = () => {
4648
if (imageRef.current) {
47-
imageRef.current.src = defaultPlaceholderSrc
49+
// 尝试加载 placeholderSrc，如果失败则加载 defaultPlaceholderSrc
50+
if (imageRef.current.src !== placeholderSrc && placeholderSrc) {
51+
imageRef.current.src = placeholderSrc
52+
} else {
53+
imageRef.current.src = defaultPlaceholderSrc
54+
}
4855
}
4956
}
5057

5158
useEffect(() => {
52-
const adjustedImageSrc = adjustImgSize(src, maxWidth)
53-
setAdjustedSrc(adjustedImageSrc)
59+
const adjustedImageSrc =
60+
adjustImgSize(src, maxWidth) || defaultPlaceholderSrc
61+
62+
// 加载原图
63+
const img = new Image()
64+
img.src = adjustedImageSrc
65+
img.onload = () => {
66+
setCurrentSrc(adjustedImageSrc)
67+
handleImageLoaded(adjustedImageSrc)
68+
}
69+
img.onerror = handleImageError
5470

5571
const observer = new IntersectionObserver(
5672
entries => {
@@ -79,9 +95,9 @@ export default function LazyImage({
7995
// 动态添加width、height和className属性，仅在它们为有效值时添加
8096
const imgProps = {
8197
ref: imageRef,
82-
src: priority ? adjustedSrc : placeholderSrc,
98+
src: currentSrc,
8399
alt: alt,
84-
onLoad: handleImageLoad,
100+
onLoad: handleThumbnailLoaded, // 缩略图加载完成
85101
onError: handleImageError // 添加onError处理函数
86102
}
87103

@@ -106,31 +122,33 @@ export default function LazyImage({
106122
if (style) {
107123
imgProps.style = style
108124
}
125+
109126
return (
110127
<>
111128
{/* eslint-disable-next-line @next/next/no-img-element */}
112129
<img {...imgProps} />
113130
{/* 预加载 */}
114131
{priority && (
115132
<Head>
116-
<link rel='preload' as='image' href={adjustedSrc} />
133+
<link rel='preload' as='image' href={adjustImgSize(src, maxWidth)} />
117134
</Head>
118135
)}
119136
</>
120137
)
121138
}
139+
122140
/**
123141
* 根据窗口尺寸决定压缩图片宽度
124142
* @param {*} src
125143
* @param {*} maxWidth
126144
* @returns
127145
*/
128-
129146
const adjustImgSize = (src, maxWidth) => {
130147
if (!src) {
131-
return siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
148+
return null
132149
}
133-
const screenWidth = window.screen.width
150+
const screenWidth =
151+
(typeof window !== 'undefined' && window?.screen?.width) || maxWidth
134152

135153
// 屏幕尺寸大于默认图片尺寸，没必要再压缩
136154
if (screenWidth > maxWidth) {

‎components/Notification.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { useState } from 'react'
22

3+
/**
4+
* 弹框通知
5+
* @returns
6+
*/
37
const useNotification = () => {
48
const [message, setMessage] = useState('')
59
const [isVisible, setIsVisible] = useState(false)
@@ -8,12 +12,13 @@ const useNotification = () => {
812
setMessage(msg)
913
setIsVisible(true)
1014
setTimeout(() => {
11-
setIsVisible(false)
15+
closeNotification()
1216
}, 3000)
1317
}
1418

1519
const closeNotification = () => {
1620
setIsVisible(false)
21+
setMessage('')
1722
}
1823

1924
// 测试通知效果
@@ -33,11 +38,10 @@ const useNotification = () => {
3338
*/
3439
const Notification = () => {
3540
return (
36-
<div
37-
className={`notification fixed left-0 w-full px-2 z-50 transform transition-all duration-300 ${
38-
isVisible ? 'bottom-20 animate__animated animate__fadeIn' : ''
39-
} `}>
40-
<div className='max-w-3xl mx-auto bg-green-500 flex items-center justify-between px-4 py-2 text-white rounded-lg shadow-lg'>
41+
<div className={`notification fixed left-0 w-full px-2 z-20 bottom-14`}>
42+
<div
43+
className={` ${isVisible && message ? 'opacity-100 ' : 'invisible opacity-0 bottom-0'} transition-opacity duration-200
44+
max-w-3xl mx-auto bg-green-500 flex items-center justify-between px-4 py-2 text-white rounded-lg shadow-lg`}>
4145
{message}
4246
<button
4347
onClick={closeNotification}

‎lib/notion/getPageProperties.js

+1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ export default async function getPageProperties(
9494
properties.type = properties.type?.[0] || ''
9595
properties.status = properties.status?.[0] || ''
9696
properties.category = properties.category?.[0] || ''
97+
properties.comment = properties.comment?.[0] || ''
9798

9899
// 映射值：用户个性化type和status字段的下拉框选项，在此映射回代码的英文标识
99100
mapProperties(properties)

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "notion-next",
3-
"version": "4.5.3",
3+
"version": "4.5.4",
44
"homepage": "https://github.com/tangly1024/NotionNext.git",
55
"license": "MIT",
66
"repository": {

‎themes/heo/components/Catalog.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,14 @@ const Catalog = ({ toc }) => {
6363
<div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
6464
<div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
6565
<nav className='h-full'>
66-
{toc.map((tocItem) => {
66+
{toc?.map((tocItem) => {
6767
const id = uuidToId(tocItem.id)
6868
tocIds.push(id)
6969
return (
7070
<a
7171
key={id}
7272
href={`#${id}`}
73-
className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
73+
className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
7474
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
7575
>
7676
<span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}

‎themes/heo/components/Hero.js

+18-14
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,7 @@ function TopGroup(props) {
247247
)
248248
})}
249249
</div>
250+
{/* 一个大的跳转文章卡片 */}
250251
<TodayCard cRef={todayCardRef} siteInfo={siteInfo} />
251252
</div>
252253
)
@@ -322,10 +323,10 @@ function TodayCard({ cRef, siteInfo }) {
322323
})
323324

324325
/**
325-
* 点击更多
326+
* 查看更多
326327
* @param {*} e
327328
*/
328-
function handleClickMore(e) {
329+
function handleClickShowMore(e) {
329330
e.stopPropagation()
330331
setIsCoverUp(false)
331332
}
@@ -351,10 +352,11 @@ function TodayCard({ cRef, siteInfo }) {
351352
isCoverUp
352353
? 'opacity-100 cursor-pointer'
353354
: 'opacity-0 transform scale-110 pointer-events-none'
354-
} shadow transition-all duration-200 today-card h-full bg-[#0E57D5] dark:bg-yellow-500 rounded-xl relative overflow-hidden flex items-end`}>
355+
} shadow transition-all duration-200 today-card h-full bg-black rounded-xl relative overflow-hidden flex items-end`}>
356+
{/* 卡片文字信息 */}
355357
<div
356358
id='today-card-info'
357-
className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
359+
className='flex justify-between w-full relative text-white p-10 items-end'>
358360
<div className='flex flex-col'>
359361
<div className='text-xs font-light'>
360362
{siteConfig('HEO_HERO_TITLE_4', null, CONFIG)}
@@ -363,29 +365,31 @@ function TodayCard({ cRef, siteInfo }) {
363365
{siteConfig('HEO_HERO_TITLE_5', null, CONFIG)}
364366
</div>
365367
</div>
368+
{/* 查看更多的按钮 */}
366369
<div
367-
onClick={handleClickMore}
368-
className={`'${
369-
isCoverUp ? '' : 'hidden pointer-events-none '
370-
} flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] dark:bg-yellow-500 dark:hover:bg-yellow-600 transition-colors duration-100 rounded-3xl`}>
370+
onClick={handleClickShowMore}
371+
className={`'${isCoverUp ? '' : 'hidden pointer-events-none'} z-10 group flex items-center px-3 h-10 justify-center rounded-3xl
372+
glassmorphism transition-colors duration-100 `}>
371373
<PlusSmall
372374
className={
373-
'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400 dark:stroke-yellow-400'
375+
'group-hover:rotate-180 duration-500 transition-all w-6 h-6 mr-2 bg-white rounded-full stroke-black'
374376
}
375377
/>
376378
<div id='more' className='select-none'>
377379
{locale.COMMON.MORE}
378380
</div>
379381
</div>
380382
</div>
381-
<div
383+
384+
{/* 封面图 */}
385+
{/* eslint-disable-next-line @next/next/no-img-element */}
386+
<img
387+
src={siteInfo?.pageCover}
382388
id='today-card-cover'
383389
className={`${
384390
isCoverUp ? '' : ' pointer-events-none'
385-
} cursor-pointer today-card-cover absolute w-full h-full top-0`}
386-
style={{
387-
background: `url('${siteInfo?.pageCover}') no-repeat center /cover`
388-
}}></div>
391+
} hover:scale-110 duration-1000 object-cover cursor-pointer today-card-cover absolute w-full h-full top-0`}
392+
/>
389393
</div>
390394
</div>
391395
)

0 commit comments

Comments
 (0)