d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-08 23:16:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化css

Browse Source
This commit is contained in:
Blackberry009
2025-06-09 17:46:08 +08:00
parent f7ceb2f9ec
commit a8192e0179
7 changed files with 100 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
themes/typography/components/BlogItem.js
View File

@@ -14,7 +14,6 @@ export const BlogItem = props => {
const showPageCover = siteConfig('SIMPLE_POST_COVER_ENABLE', false, CONFIG)
const showPreview =
siteConfig('POST_LIST_PREVIEW', false, NOTION_CONFIG) && post.blockMap
console.log(post);
return (
<div
key={post.id}

2
themes/typography/components/BlogListPage.js
View File

@@ -35,7 +35,7 @@ export default function BlogListPage(props) {
.replace('.html', '')
return (
<div className='w-full md:pr-8 mb-12 md:mt-20'>
<div className='w-full md:pr-8 mb-12'>
<div id='posts-wrapper'>
{posts?.map((p, index) => (
<div key={p.id}>

83
themes/typography/components/Catalog.js
View File

@@ -18,38 +18,71 @@ const Catalog = ({ post }) => {
// 监听滚动事件
useEffect(() => {
const throttleMs = 200
// 如果没有文章或目录，不执行任何操作
if (!post || !post?.toc || post?.toc?.length < 1) {
return
}
const throttleMs = 100 // 降低节流时间提高响应速度
const actionSectionScrollSpy = throttle(() => {
const sections = document.getElementsByClassName('notion-h')
if (!sections || sections.length === 0) return
let prevBBox = null
let currentSectionId = activeSection
let currentSectionId = null
// 先检查当前视口中的所有标题
for (let i = 0; i < sections.length; ++i) {
const section = sections[i]
if (!section || !(section instanceof Element)) continue
if (!currentSectionId) {
currentSectionId = section.getAttribute('data-id')
}
const bbox = section.getBoundingClientRect()
const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
const offset = Math.max(150, prevHeight / 4)
const offset = 100 // 固定偏移量，避免计算不稳定
// 如果标题在视口上方或接近顶部，认为是当前标题
if (bbox.top - offset < 0) {
currentSectionId = section.getAttribute('data-id')
prevBBox = bbox
continue
} else {
// 找到第一个在视口下方的标题就停止
break
}
}
// 如果没找到任何标题在视口上方，使用第一个标题
if (!currentSectionId && sections.length > 0) {
currentSectionId = sections[0].getAttribute('data-id')
}
// 只有当 ID 变化时才更新状态，减少不必要的渲染
if (currentSectionId !== activeSection) {
setActiveSection(currentSectionId)
// 查找目录中对应的索引并滚动
const index = post?.toc?.findIndex(
obj => uuidToId(obj.id) === currentSectionId
)
if (index !== -1 && tRef?.current) {
tRef.current.scrollTo({ top: 28 * index, behavior: 'smooth' })
}
break
}
setActiveSection(currentSectionId)
const index = post?.toc?.findIndex(
obj => uuidToId(obj.id) === currentSectionId
)
tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
}, throttleMs)
window.addEventListener('scroll', actionSectionScrollSpy)
actionSectionScrollSpy()
const content = document.querySelector('#container-inner')
if (!content) return // 防止 content 不存在
// 添加滚动和内容变化的监听
content.addEventListener('scroll', actionSectionScrollSpy)
// 初始执行一次
setTimeout(() => {
actionSectionScrollSpy()
}, 300) // 延迟执行确保 DOM 已完全加载
return () => {
window.removeEventListener('scroll', actionSectionScrollSpy)
content?.removeEventListener('scroll', actionSectionScrollSpy)
}
}, [post])
@@ -68,21 +101,27 @@ const Catalog = ({ post }) => {
<div
className='overflow-y-auto overscroll-none max-h-36 lg:max-h-96 scroll-hidden'
ref={tRef}>
<nav className='h-full text-black'>
<nav className='h-full text-black group'>
{post?.toc?.map(tocItem => {
const id = uuidToId(tocItem.id)
return (
<a
key={id}
href={`#${id}`}
className={`${activeSection === id && 'dark:border-white border-red-700 text-red-700 font-bold'} hover:font-semibold border-l pl-4 block hover:text-red-600 border-lduration-300 transform dark:text-red-400 dark:border-red-400
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item `}>
className={`${activeSection === id
? 'dark:border-white border-red-700 text-red-700 font-bold'
: 'text-[var(--primary-color)] dark:text-gray-500 filter blur-[1px] opacity-50 group-hover:filter-none group-hover:blur-0 group-hover:opacity-100'}
hover:font-semibold hover:text-red-600 hover:filter-none hover:blur-0 hover:opacity-100
border-l pl-4 block border-lduration-300 transform
dark:hover:text-red-400 dark:border-gray-600
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} catalog-item
transition-all duration-300 ease-in-out`}>
<span
style={{
display: 'inline-block',
marginLeft: tocItem.indentLevel * 16
}}
className={`truncate ${activeSection === id ? ' font-bold text-red-600 dark:text-white underline' : ''}`}>
className={`truncate ${activeSection === id ? 'font-bold text-red-600 dark:text-white underline' : ''}`}>
{tocItem.text}
</span>
</a>

10
themes/typography/components/NavBar.js
View File

@@ -14,11 +14,15 @@ import Link from 'next/link'
export default function NavBar(props) {
return (
<div className='flex flex-col justify-between md:mt-20 md:h-[70vh]'>
<header className='md:pb-8 md:border-l-2 md:border-gray-700 text-[var(--primary-color)] md:[writing-mode:vertical-lr] px-4'>
<header className='w-fit self-center md:self-start md:pb-8 md:border-l-2 md:border-[var(--primary-color)] text-[var(--primary-color)] md:[writing-mode:vertical-lr] px-4 hover:bg-[var(--primary-color)] hover:text-white ease-in-out duration-700 md:hover:pt-4 md:hover:pb-4'>
<Link href='/'>
<div className='flex flex-col-reverse md:flex-col items-center md:items-start'>
<div className='font-bold text-4xl text-center' id='blog-name'>活版印字</div>
<div className='font-bold text-xl text-center' id='blog-name-en'>Typography</div>
<div className='font-bold text-4xl text-center' id='blog-name'>
活版印字
</div>
<div className='font-bold text-xl text-center' id='blog-name-en'>
Typography
</div>
</div>
</Link>
</header>