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

Merge pull request #846 from tangly1024/fix/animate

Browse Source 
Fix/animate
This commit is contained in:
tangly1024
2023-03-12 20:03:55 +08:00
committed by GitHub
parent b645c66a2d 6e30c9dd7e
commit 313e930d86
18 changed files with 168 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/ExternalScript.js
View File

@@ -1,12 +1,13 @@
import BLOG from '@/blog.config'
import { isBrowser, loadExternalResource } from '@/lib/utils'
import { loadExternalResource } from '@/lib/utils'
import { useEffect } from 'react'
/**
* 自定义引入外部JS 和 CSS
* @returns
*/
const ExternalScript = () => {
if (isBrowser()) {
useEffect(() => {
// 静态导入本地自定义样式
loadExternalResource(BLOG.FONT_AWESOME, 'css')
loadExternalResource('/css/custom.css', 'css')
@@ -25,7 +26,7 @@ const ExternalScript = () => {
BLOG.FONT_URL?.forEach(e => {
loadExternalResource(e, 'css')
})
}
}, [])
return null
}

3
next.config.js
View File

@@ -11,7 +11,8 @@ module.exports = withBundleAnalyzer({
'gravatar.com',
'www.notion.so',
'avatars.githubusercontent.com',
'images.unsplash.com'
'images.unsplash.com',
'p1.qhimg.com'
]
},
// 默认将feed重定向至 /public/rss/feed.xml

4
pages/_app.js
View File

@@ -58,12 +58,12 @@ const MyApp = ({ Component, pageProps }) => {
useEffect(() => {
AOS.init()
smoothscroll.polyfill()
})
}, [])
return (
<GlobalContextProvider>
{externalPlugins}
<Component {...pageProps} />
{externalPlugins}
</GlobalContextProvider>
)
}

BIN
public/bg_image.jpg Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 16 KiB

12
themes/hexo/LayoutBase.js
View File

@@ -14,7 +14,13 @@ import dynamic from 'next/dynamic'
const FacebookPage = dynamic(
() => {
return import('@/components/FacebookPage')
let facebook = <></>
try {
facebook = import('@/components/FacebookPage')
} catch (err) {
console.error(err)
}
return facebook
},
{ ssr: false }
)
@@ -59,14 +65,14 @@ const LayoutBase = props => {
}, [])
return (
<div id='theme-hexo' className="bg-hexo-background-gray dark:bg-black">
<div id='theme-hexo'>
<CommonHead meta={meta} siteInfo={siteInfo}/>
<TopNav {...props} />
{headerSlot}
<main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen relative">
<main id="wrapper" className="bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative">
<div
id="container-inner"
className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'}

1
themes/hexo/LayoutIndex.js
View File

@@ -9,7 +9,6 @@ import React from 'react'
export const LayoutIndex = (props) => {
const headerSlot = CONFIG_HEXO.HOME_BANNER_ENABLE && <Header {...props} />
return <LayoutBase {...props} headerSlot={headerSlot}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
</LayoutBase>
}

7
themes/hexo/components/Announcement.js
View File

@@ -6,12 +6,7 @@ const NotionPage = dynamic(() => import('@/components/NotionPage'))
const Announcement = ({ post, className }) => {
const { locale } = useGlobal()
if (post?.blockMap) {
return <div
data-aos="fade-up"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className={className}>
return <div className={className}>
<section id='announcement-wrapper' className="hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray">
<div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
{post && (<div id="announcement-content">

22
themes/hexo/components/BlogPostCard.js
View File

@@ -4,6 +4,7 @@ import React from 'react'
import TagItemMini from './TagItemMini'
import CONFIG_HEXO from '../config_hexo'
import NotionPage from '@/components/NotionPage'
import Image from 'next/image'
const BlogPostCard = ({ post, showSummary, siteInfo }) => {
const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
@@ -15,6 +16,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
<div
key={post.id}
data-aos="fade-up"
data-aso-delay="200"
data-aos-duration="200"
data-aos-once="true"
data-aos-anchor-placement="top-bottom"
@@ -92,15 +94,25 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
</div>
{showPageCover && !showPreview && post?.page_cover && (
<div className="flex relative duration-200 cursor-pointer transform overflow-hidden md:w-5/12 ">
<div className="flex overflow-hidden md:w-5/12 ">
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
{/* <img
src={post?.page_cover}
alt={post.title}
className="h-full w-full hover:scale-125 transform object-cover duration-500"
/>
{/* <Image className='hover:scale-125 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
className="w-full cursor-pointer object-cover duration-200 hover:scale-125 "
/> */}
<div className='relative w-full'>
<Image
className='hover:scale-125 transition cursor-pointer duration-500'
src={post?.page_cover}
alt={post.title}
quality={30}
placeholder='blur'
blurDataURL='/bg_image.jpg'
style={{ objectFit: 'cover' }}
fill/>
</div>
</Link>
</div>
)}

57
themes/hexo/components/Header.js
View File

@@ -1,3 +1,4 @@
import Image from 'next/image'
import { useEffect, useState } from 'react'
import Typed from 'typed.js'
import CONFIG_HEXO from '../config_hexo'
@@ -45,7 +46,7 @@ const Header = props => {
}
})
function updateHeaderHeight () {
function updateHeaderHeight() {
requestAnimationFrame(() => {
const wrapperElement = document.getElementById('wrapper')
wrapperTop = wrapperElement?.offsetTop
@@ -53,32 +54,36 @@ const Header = props => {
}
return (
<header
id="header"
className="md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white relative z-10"
style={{
backgroundImage:
`linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")`
}}
>
<div className="absolute flex flex-col h-full items-center justify-center w-full ">
<div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
<div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
<span id='typed'/>
</div>
<header
id="header"
className="md:bg-fixed w-full h-screen bg-black text-white relative"
>
<div className='w-full h-full fixed'>
<Image src={siteInfo.pageCover} fill
style={{ objectFit: 'cover' }}
className='opacity-70'
placeholder='blur'
blurDataURL='/bg_image.jpg' />
</div>
{/* 首页导航插件 */}
{ CONFIG_HEXO.HOME_NAV_BUTTONS && <NavButtonGroup {...props}/>}
<div className="absolute bottom-0 flex flex-col h-full items-center justify-center w-full ">
<div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
<div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
<span id='typed' />
</div>
</div>
{/* 首页导航插件 */}
{CONFIG_HEXO.HOME_NAV_BUTTONS && <NavButtonGroup {...props} />}
<div
onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
>
<i className='animate-bounce fas fa-angle-down'/>
</div>
</header>
</div>
<div
onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
>
<i className='animate-bounce fas fa-angle-down' />
</div>
</header>
)
}
@@ -104,12 +109,12 @@ const scrollTrigger = () => {
) {
autoScroll = true
window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
requestAnimationFrame(autoScrollEnd)
autoScrollEnd()
}
if ((scrollS < windowTop) && (scrollS < window.innerHeight) && !autoScroll) {
autoScroll = true
window.scrollTo({ top: 0, behavior: 'smooth' })
requestAnimationFrame(autoScrollEnd)
autoScrollEnd()
}
windowTop = scrollS
})

82
themes/hexo/components/LatestPostsGroup.js
View File

@@ -1,5 +1,6 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
@@ -19,46 +20,51 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
}
return <>
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div>
<i className="mr-2 fas fas fa-history" />
{locale.COMMON.LATEST_POSTS}
</div>
</div>
{latestPosts.map(post => {
const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
const headerImage = post?.page_cover
? `url("${post.page_cover}")`
: `url("${siteInfo?.pageCover}")`
return (
(<Link
key={post.id}
title={post.title}
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={'my-2 flex'}>
<div
className="w-20 h-16 bg-cover bg-center bg-no-repeat"
style={{ backgroundImage: headerImage }}
/>
<div
className={
(selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
' hover:text-indigo-400 cursor-pointer items-center flex'
}
>
<div className=" mb-2 px-1 flex flex-nowrap justify-between">
<div>
<div className='text-line-2'>{post.title}</div>
<div className="text-gray-500">{post.lastEditedTime}</div>
<i className="mr-2 fas fas fa-history" />
{locale.COMMON.LATEST_POSTS}
</div>
</div>
</div>
{latestPosts.map(post => {
const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
</Link>)
)
})}
</>
const headerImage = post?.page_cover ? post.page_cover : siteInfo?.pageCover
return (
(<Link
key={post.id}
title={post.title}
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={'my-2 flex'}>
<div className="w-20 h-16 overflow-hidden relative">
<Image
src={headerImage}
fill
style={{ objectFit: 'cover' }}
placeholder='blur'
blurDataURL='/bg_image.jpg'
quality={10}
alt={post.title} />
</div>
<div
className={
(selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
' hover:text-indigo-400 cursor-pointer items-center flex'
}
>
<div>
<div className='text-line-2'>{post.title}</div>
<div className="text-gray-500">{post.lastEditedTime}</div>
</div>
</div>
</Link>)
)
})}
</>
}
export default LatestPostsGroup

2
themes/hexo/components/TopNav.js
View File

@@ -61,7 +61,7 @@ const TopNav = props => {
nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
}
const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight * 2)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
if (!showNav) {
nav && nav.classList.replace('top-0', '-top-20')
windowTop = scrollS

7
themes/matery/LayoutBase.js
View File

@@ -23,18 +23,11 @@ const LayoutBase = props => {
const scrollListener = () => {
requestAnimationFrame(() => {
// const targetRef = document.getElementById('wrapper')
// const clientHeight = targetRef?.clientHeight
const scrollY = window.pageYOffset
// const fullHeight = clientHeight - window.outerHeight
// let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
// if (per > 100) per = 100
const shouldShow = scrollY > 300
console.log(scrollY)
if (shouldShow !== show) {
switchShow(shouldShow)
}
// changePercent(per)
})
}
useEffect(() => {

18
themes/matery/components/BlogPostCard.js
View File

@@ -3,6 +3,7 @@ import Link from 'next/link'
import React from 'react'
import TagItemMini from './TagItemMini'
import CONFIG_MATERY from '../config_matery'
import Image from 'next/image'
const BlogPostCard = ({ post, showSummary, siteInfo }) => {
const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap
@@ -14,7 +15,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
return (
<div
data-aos="zoom-in"
data-aos-duration="300"
data-aos-duration="200"
data-aos-once="false"
data-aos-anchor-placement="top-bottom"
className="w-full mb-4 h-full overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
@@ -27,11 +28,22 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
<Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
<div className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md cursor-pointer transform overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
{/* <img
src={post?.page_cover}
alt={post.title}
className="opacity-50 h-full w-full hover:scale-125 rounded-t-md transform object-cover duration-500"
/>
/> */}
<div className='relative w-full'>
<Image
className='hover:scale-125 opacity-50 transition cursor-pointer duration-500'
src={post?.page_cover}
alt={post.title}
quality={30}
placeholder='blur'
blurDataURL='/bg_image.jpg'
style={{ objectFit: 'cover' }}
fill/>
</div>
<span className='absolute bottom-0 left-0 text-white p-6 text-2xl replace' > {post.title}</span>
</div>
</Link>

50
themes/matery/components/Header.js
View File

@@ -1,3 +1,4 @@
import Image from 'next/image'
import { useEffect, useState } from 'react'
import Typed from 'typed.js'
import CONFIG_MATERY from '../config_matery'
@@ -49,9 +50,9 @@ const Header = props => {
}
/**
* 吸附滚动，移动端关闭
* @returns
*/
* 吸附滚动，移动端关闭
* @returns
*/
const scrollTrigger = () => {
requestAnimationFrame(() => {
if (screen.width <= 768) {
@@ -76,7 +77,7 @@ const Header = props => {
})
}
function updateHeaderHeight () {
function updateHeaderHeight() {
requestAnimationFrame(() => {
const wrapperElement = document.getElementById('wrapper')
wrapperTop = wrapperElement?.offsetTop
@@ -84,26 +85,29 @@ const Header = props => {
}
return (
<header
id="header"
className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white relative z-10"
style={{
backgroundImage:
`linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")`
}}
>
<div className="absolute flex flex-col h-full items-center justify-center w-full ">
<div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
<div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
<span id='typed'/>
</div>
<div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl">
<i className='animate-bounce fas fa-angle-double-down'/> <span>开始阅读</span>
</div>
</div>
<header
id="header"
className="md:bg-fixed w-full h-screen bg-black text-white relative"
>
<div className='w-full h-full absolute'>
<Image src={siteInfo.pageCover} fill
style={{ objectFit: 'cover' }}
className='opacity-70'
placeholder='blur'
blurDataURL='/bg_image.jpg' />
</div>
<div className="absolute flex flex-col h-full items-center justify-center w-full ">
<div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
<div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
<span id='typed' />
</div>
<div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl">
<i className='animate-bounce fas fa-angle-double-down' /> <span>开始阅读</span>
</div>
</div>
</header>
</header>
)
}

11
themes/matery/components/HeaderArticle.js
View File

@@ -1,3 +1,5 @@
import Image from 'next/image'
export default function HeaderArticle({ post, siteInfo }) {
const headerImage = post?.page_cover ? post?.page_cover : siteInfo?.pageCover
const title = post?.title
@@ -9,11 +11,16 @@ export default function HeaderArticle({ post, siteInfo }) {
data-aos-anchor-placement="top-center"
id='header' className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
{/* <img
src={headerImage}
alt={title}
className="opacity-50 dark:opacity-40 h-full w-full object-cover"
/>
/> */}
<Image alt={title} src={headerImage} fill
style={{ objectFit: 'cover' }}
className='opacity-50'
placeholder='blur'
blurDataURL='/bg_image.jpg' />
<span className='absolute text-white p-6 text-3xl'>{title}</span>
</div>
)

2
themes/matery/components/TopNav.js
View File

@@ -27,7 +27,7 @@ const TopNav = props => {
const scrollS = window.scrollY
const nav = document.querySelector('#sticky-nav')
const header = document.querySelector('#header')
const showNav = scrollS <= windowTop || scrollS < 5 // 非首页无大图时影藏顶部 滚动条置顶时隐藏
const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight * 2)// 非首页无大图时影藏顶部 滚动条置顶时隐藏// 非首页无大图时影藏顶部 滚动条置顶时隐藏
// 是否将导航栏透明
const navTransparent = header && scrollS < 300 // 透明导航条的条件

8
themes/next/components/ShareBar.js
View File

@@ -8,17 +8,17 @@ import { useGlobal } from '@/lib/global'
import CONFIG_NEXT from '../config_next'
const ShareBar = ({ post }) => {
const router = useRouter()
const [qrCodeShow, setQrCodeShow] = React.useState(false)
const { locale } = useGlobal()
if (!CONFIG_NEXT.ARTICLE_SHARE) {
return <></>
}
const router = useRouter()
const shareUrl = BLOG.LINK + router.asPath
// 二维码悬浮
const [qrCodeShow, setQrCodeShow] = React.useState(false)
const btnRef = React.createRef()
const popoverRef = React.createRef()
const { locale } = useGlobal()
const openPopover = () => {
createPopper(btnRef.current, popoverRef.current, {
@@ -57,7 +57,7 @@ const ShareBar = ({ post }) => {
<div className='cursor-pointer text-2xl'>
<a className='text-green-600' ref={btnRef} onMouseEnter={openPopover} onMouseLeave={closePopover}>
<i className='fab fa-weixin'/>
<div ref={popoverRef} className={(qrCodeShow ? 'animate__animated animate__fadeIn ' : 'hidden') + ' text-center py-2'}>
<div ref={popoverRef} className={(qrCodeShow ? 'opacity-100 ' : 'invisible opacity-0') + ' transition-all duration-200 text-center py-2'}>
<div className='p-2 bg-white border-0 duration-200 transform block z-40 font-normal shadow-xl mr-10'>
<QRCode value={shareUrl} fgColor='#000000' />
</div>

2
themes/next/config_next.js
View File

@@ -30,7 +30,7 @@ const CONFIG_NEXT = {
WIDGET_DARK_MODE: false, // 显示日间/夜间模式切换
WIDGET_TOC: true, // 移动端显示悬浮目录
ARTICLE_SHARE: false, // 文章分享功能
ARTICLE_SHARE: process.env.NEXT_PUBLIC_ARTICLE_SHARE || false, // 文章分享功能
ARTICLE_RELATE_POSTS: true, // 相关文章推荐
ARTICLE_COPYRIGHT: true // 文章版权声明