From 2a4e7db47a46511652dc23cad32b2fe70d25f8d3 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 25 Dec 2022 19:26:59 +0800
Subject: [PATCH] =?UTF-8?q?header-nav=E9=85=8D=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/matery/components/HeaderArticle.js | 22 ++++++++++------------
 themes/matery/components/TopNav.js        |  7 ++++---
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/themes/matery/components/HeaderArticle.js b/themes/matery/components/HeaderArticle.js
index b02376a2..71734eee 100644
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -1,17 +1,15 @@
 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
   return (
-    <div
-      id="header"
-      className="w-full h-80 md:flex-shrink-0 bg-cover bg-center bg-no-repeat"
-      style={{ backgroundImage: headerImage }}
-    >
-         <div className="flex flex-col h-80 justify-center ">
-             <div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">
-                {title}
-            </div>
-         </div>
-    </div>
+        <div className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black rounded-t-md">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+                src={headerImage}
+                alt={title}
+                className="opacity-50 h-full w-full rounded-t-md object-cover"
+            />
+            <span className='absolute text-white p-6 text-3xl'>{title}</span>
+        </div>
   )
 }
diff --git a/themes/matery/components/TopNav.js b/themes/matery/components/TopNav.js
index f12f833d..89f0e94e 100644
--- a/themes/matery/components/TopNav.js
+++ b/themes/matery/components/TopNav.js
@@ -28,12 +28,13 @@ const TopNav = props => {
   const scrollTrigger = throttle(() => {
     const scrollS = window.scrollY
     const nav = document.querySelector('#sticky-nav')
-    const header = document.querySelector('#header')
-    const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
+    // const header = document.querySelector('#header')
+    const showNav = scrollS <= windowTop || scrollS < 5 // 非首页无大图时影藏顶部 滚动条置顶时隐藏
     // 是否将导航栏透明
     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('text-black', 'text-white')
       nav && nav.classList.replace('border', 'border-transparent')