d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 15:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

heo微调优化，全局smooth

Browse Source
This commit is contained in:
tangly1024.com
2023-07-20 18:48:45 +08:00
parent ad980e26ce
commit afcdb2542d
6 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/HeroIcons.js
View File

@@ -45,6 +45,12 @@ export const ChevronRight = ({ className }) => {
</svg>
}
export const ChevronDoubleLeft = ({ className }) => {
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
<path strokeLinecap="round" strokeLinejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
</svg>
}
export const ChevronDoubleRight = ({ className }) => {
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />

2
components/PrismMac.js
View File

@@ -186,7 +186,7 @@ const fixCodeLineStyle = () => {
setTimeout(() => {
const preCodes = document.querySelectorAll('pre.notion-code')
for (const preCode of preCodes) {
console.log('code', preCode)
// console.log('code', preCode)
Prism.plugins.lineNumbers.resize(preCode)
}
}, 10)

2
pages/_document.js
View File

@@ -17,7 +17,7 @@ class MyDocument extends Document {
<CommonScript />
</Head>
<body className={`${BLOG.FONT_STYLE} font-light`}>
<body className={`${BLOG.FONT_STYLE} font-light scroll-smooth`}>
<Main />
<NextScript />
</body>

24
themes/heo/components/CategoryBar.js
View File

@@ -1,6 +1,8 @@
import { ChevronDoubleLeft, ChevronDoubleRight } from '@/components/HeroIcons'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useRef, useState } from 'react'
/**
* 博客列表上方嵌入条
@@ -10,16 +12,34 @@ import { useRouter } from 'next/router'
export default function CategoryBar(props) {
const { categoryOptions, border = true } = props
const { locale } = useGlobal()
const [scrollRight, setScrollRight] = useState(false)
// 创建一个ref引用
const categoryBarItemsRef = useRef(null)
// 点击#right时，滚动#category-bar-items到最右边
const handleToggleScroll = () => {
if (categoryBarItemsRef.current) {
const { scrollWidth, clientWidth } = categoryBarItemsRef.current
if (scrollRight) {
categoryBarItemsRef.current.scrollLeft = 0
} else {
categoryBarItemsRef.current.scrollLeft = scrollWidth - clientWidth
}
setScrollRight(!scrollRight)
}
}
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]
${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`}>
<div id='category-bar-items' className='rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
<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'>
<MenuItem href='/' name={locale.NAV.INDEX} />
{categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
</div>
<div id='category-bar-next' className='flex'>
<div id='category-bar-next' className='flex items-center justify-center'>
<div id='right' className='cursor-pointer mx-2' onClick={handleToggleScroll}>
{scrollRight ? <ChevronDoubleLeft className={'w-5 h-5'} /> : <ChevronDoubleRight className={'w-5 h-5'} /> }
</div>
<Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
{locale.COMMON.MORE}
</Link>

4
themes/heo/components/Hero.js
View File

@@ -19,7 +19,7 @@ const Hero = props => {
return (
<div id="hero-wrapper" className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
<hero id="hero" style={{ zIndex: 1 }} className={'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3'} >
<div id="hero" style={{ zIndex: 1 }} className={'animate__animated animate__fadeIn animate__fast recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3'} >
{/* 左侧banner组 */}
<BannerGroup {...props} />
@@ -27,7 +27,7 @@ const Hero = props => {
{/* 右侧置顶文章组 */}
<TopGroup {...props} />
</hero>
</div>
</div>
)
}

4
themes/heo/components/NoticeBar.js
View File

@@ -14,7 +14,7 @@ export function NoticeBar() {
}
return (
<notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
<div className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
<div className="animate__animated animate__fadeIn animate__fast group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700 duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5">
<span className='whitespace-nowrap'>此刻</span>
<div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">
@@ -22,6 +22,6 @@ export function NoticeBar() {
</div>
<div><ArrowRightCircle className={'w-5 h-5'} /></div>
</div>
</notice>
</div>
)
}