d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-19 07:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
移动端平滑滚动；
顶部菜单微调
This commit is contained in:
tangly1024
2021-12-16 13:13:29 +08:00
parent 71cc59f0d1
commit abea65474d
9 changed files with 40 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/BlogPostArchive.js
View File

@@ -17,10 +17,10 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
<div className='pt-16 pb-4 text-3xl dark:text-white' id={archiveTitle}>{archiveTitle}</div>
<ul>
{posts.map(post => (
<li key={post.id} className='border-l-2 p-1 hover:scale-x-105 hover:border-blue-500 transform duration-500'>
<li key={post.id} className='border-l-2 p-1 text-sm hover:scale-x-105 hover:border-blue-500 transform duration-500 overflow-hidden whitespace-nowrap'>
<div name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<span className='dark:text-blue-400 hover:underline cursor-pointer text-blue-600'>{post.title}</span>
<a className='dark:text-blue-400 hover:underline cursor-pointer text-blue-600'>{post.title}</a>
</Link>
</div>
</li>

3
components/JumpToTopButton.js
View File

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
import { useGlobal } from '@/lib/global'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
import smoothscroll from 'smoothscroll-polyfill'
let windowTop = 0
/**
@@ -32,6 +34,7 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
changePercent(per)
}
useEffect(() => {
smoothscroll.polyfill()
document.addEventListener('scroll', scrollListener)
return () => document.removeEventListener('scroll', scrollListener)
}, [show])

12
components/TopNav.js
View File

@@ -17,32 +17,32 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
{/* 导航栏 */}
<div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 glassmorphism'>
<div className='w-full flex justify-between items-center p-4 shadow-xl'>
<div className='w-full flex justify-between items-center p-4 shadow-lg'>
{/* 左侧LOGO */}
<div className='flex'>
<div className='relative w-12' ><Image
<div className='relative w-10' ><Image
alt={BLOG.title}
layout='fill'
loading='lazy'
src='/avatar.svg'
className='rounded-full border-black'
className='border-black'
/></div>
<Link href='/' passHref>
<a>
<h1 className='cursor-pointer ml-1 leading-7 text-xl hover:scale-105 duration-200 transform font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{BLOG.title }</h1>
<h1 className='cursor-pointer ml-2 text-xl hover:scale-105 duration-200 transform font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{BLOG.title }</h1>
</a>
</Link>
</div>
{/* 右侧功能 */}
<div className='mr-2 flex justify-end items-center text-sm flex-nowrap space-x-4 font-serif dark:text-gray-200'>
<div className='mr-1 flex justify-end items-center text-sm flex-nowrap space-x-4 font-serif dark:text-gray-200'>
<Link href='/'>
<a>{locale.NAV.INDEX}</a>
</Link>
<Link href='/archive'>
<a>{locale.NAV.ARCHIVE}</a>
</Link>
<Link href='/article/about'>
<Link href='/about'>
<a>{locale.NAV.ABOUT}</a>
</Link>
<div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}