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

修复starter主题，部分不支持inline_config

Browse Source
This commit is contained in:
tangly1024.com
2024-09-23 12:34:44 +08:00
parent 6b4ed379f5
commit 97d700905e
21 changed files with 1025 additions and 1099 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
themes/starter/components/BackToTopButton.js
View File

@@ -1,41 +1,45 @@
import throttle from 'lodash.throttle';
import throttle from 'lodash.throttle'
import { useCallback, useEffect } from 'react'
/**
* 回顶按钮
* @returns
*/
export const BackToTopButton = () => {
useEffect(() => {
// ====== scroll top js
function scrollTo(element, to = 0, duration = 500) {
const start = element.scrollTop;
const change = to - start;
const increment = 20;
let currentTime = 0;
const start = element.scrollTop
const change = to - start
const increment = 20
let currentTime = 0
const animateScroll = () => {
currentTime += increment;
currentTime += increment
const val = Math.easeInOutQuad(currentTime, start, change, duration);
const val = Math.easeInOutQuad(currentTime, start, change, duration)
element.scrollTop = val;
element.scrollTop = val
if (currentTime < duration) {
setTimeout(animateScroll, increment);
setTimeout(animateScroll, increment)
}
};
}
animateScroll();
animateScroll()
}
Math.easeInOutQuad = function (t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
};
t /= d / 2
if (t < 1) return (c / 2) * t * t + b
t--
return (-c / 2) * (t * (t - 2) - 1) + b
}
const backToTop = document.querySelector('.back-to-top')
if (backToTop) {
backToTop.onclick = () => {
scrollTo(document.documentElement);
};
scrollTo(document.documentElement)
}
}
window.addEventListener('scroll', navBarScollListener)
@@ -48,20 +52,22 @@ export const BackToTopButton = () => {
const throttleMs = 200
const navBarScollListener = useCallback(
throttle(() => {
const scrollY = window.scrollY;
const scrollY = window.scrollY
// 显示或隐藏返回顶部按钮
const backToTop = document.querySelector('.back-to-top');
const backToTop = document.querySelector('.back-to-top')
if (backToTop) {
backToTop.style.display = scrollY > 50 ? 'flex' : 'none';
backToTop.style.display = scrollY > 50 ? 'flex' : 'none'
}
}, throttleMs)
)
return <>
{/* <!-- ====== Back To Top Start --> */}
<a className="back-to-top fixed bottom-16 left-auto right-8 z-[999] hidden h-10 w-10 items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-dark">
<span className="mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white" ></span>
</a>
{/* <!-- ====== Back To Top End --> */}
return (
<>
{/* <!-- ====== Back To Top Start --> */}
<a className='back-to-top fixed bottom-16 left-auto right-8 z-[999] hidden h-10 w-10 items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-dark'>
<span className='mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white'></span>
</a>
{/* <!-- ====== Back To Top End --> */}
</>
)
}