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

header-nav配色

Browse Source
This commit is contained in:
tangly1024
2022-12-25 19:26:59 +08:00
parent c5a94f25ad
commit 2a4e7db47a
2 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,17 +1,15 @@
export default function HeaderArticle({ post, siteInfo }) { export default function HeaderArticle({ post, siteInfo }) {
const headerImage = post?.page_cover ? `url("${post?.page_cover}")` : `url("${siteInfo?.pageCover}")` const headerImage = post?.page_cover ? post?.page_cover : siteInfo?.pageCover
const title = post?.title const title = post?.title
return ( return (
<div <div className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black rounded-t-md">
id="header" {/* eslint-disable-next-line @next/next/no-img-element */}
className="w-full h-80 md:flex-shrink-0 bg-cover bg-center bg-no-repeat" <img
style={{ backgroundImage: headerImage }} src={headerImage}
> alt={title}
<div className="flex flex-col h-80 justify-center "> className="opacity-50 h-full w-full rounded-t-md object-cover"
<div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white "> />
{title} <span className='absolute text-white p-6 text-3xl'>{title}</span>
</div> </div>
</div>
</div>
) )
} }

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

@@ -28,12 +28,13 @@ const TopNav = props => {
const scrollTrigger = throttle(() => { const scrollTrigger = throttle(() => {
const scrollS = window.scrollY const scrollS = window.scrollY
const nav = document.querySelector('#sticky-nav') const nav = document.querySelector('#sticky-nav')
const header = document.querySelector('#header') // const header = document.querySelector('#header')
const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏 const showNav = scrollS <= windowTop || scrollS < 5 // 非首页无大图时影藏顶部 滚动条置顶时隐藏
// 是否将导航栏透明 // 是否将导航栏透明
const navTransparent = (scrollS < document.documentElement.clientHeight - 12 && router.route === '/') || scrollS < 300 // 透明导航条的条件 const navTransparent = (scrollS < document.documentElement.clientHeight - 12 && router.route === '/') || scrollS < 300 // 透明导航条的条件
console.log('导航栏透明', navTransparent)
if (header && navTransparent) { if (navTransparent) {
nav && nav.classList.replace('bg-indigo-700', 'bg-none') nav && nav.classList.replace('bg-indigo-700', 'bg-none')
nav && nav.classList.replace('text-black', 'text-white') nav && nav.classList.replace('text-black', 'text-white')
nav && nav.classList.replace('border', 'border-transparent') nav && nav.classList.replace('border', 'border-transparent')