From e851877c478e946c0ac5a75cc04b25d4901f022d Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 23 Dec 2021 12:31:30 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3=E5=A4=A7=E5=B0=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js       |  1 +
 components/Header.js | 30 ++++++++++++++++--------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index 1d38ecbb..895adfa6 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -4,6 +4,7 @@ const BLOG = {
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
   description: '分享编程技术与记录生活',
+  headerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页文字
   lang: 'zh-CN', // ['zh-CN','en-US'] default lang => see /lib/lang.js for more.
   notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
diff --git a/components/Header.js b/components/Header.js
index bbc8ee1d..c64497e2 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,3 +1,4 @@
+import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -13,7 +14,7 @@ export default function Header () {
   useEffect(() => {
     if (!typed && window && document.getElementById('typed')) {
       changeType(new Typed('#typed', {
-        strings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'],
+        strings: BLOG.headerStrings,
         typeSpeed: 200,
         backSpeed: 100,
         backDelay: 400,
@@ -30,17 +31,13 @@ export default function Header () {
   const autoScrollEnd = () => {
     windowTop = window.scrollY
     autoScroll = false
-    console.log('滚动结束回调', windowTop)
   }
   const scrollTrigger = useCallback(() => {
-    console.log('触发 top', windowTop, 'y', window.scrollY, autoScroll)
     if (window.scrollY > windowTop & window.scrollY < window.innerHeight & !autoScroll) {
-      // console.log('滚中间', windowTop, window.scrollY, window.innerHeight)
       autoScroll = true
       scrollTo(window.innerHeight, autoScrollEnd)
     }
     if (window.scrollY < windowTop & window.scrollY < window.innerHeight & !autoScroll) {
-      // console.log('滚上', windowTop, window.scrollY, window.innerHeight)
       autoScroll = true
       scrollTo(0, autoScrollEnd)
     }
@@ -60,25 +57,22 @@ export default function Header () {
     }
   }
 
-  // 监听滚动
   useEffect(() => {
+    updateHeaderHeight()
     updateTopNav()
     window.addEventListener('scroll', scrollTrigger)
+    window.addEventListener('resize', updateHeaderHeight)
     return () => {
       window.removeEventListener('scroll', scrollTrigger)
     }
   })
 
-  return <header className='h-screen w-full'>
-
-    <div className='absolute z-10 flex h-screen items-center justify-center w-full text-4xl md:text-7xl text-white'>
-      <div id="typed" className=' text-center font-serif'></div>
+  return <header id='header' className='h-screen w-full bg-cover bg-center md:-mt-14'
+    style={{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("./bg_image.jpg")' }}>
+    <div className='static z-10 flex h-full items-center justify-center w-full text-4xl md:text-7xl text-white'>
+      <div id="typed" className='text-center font-serif'></div>
       <div onClick={() => { scrollTo(window.innerHeight, autoScrollEnd) }} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'><FontAwesomeIcon icon={faArrowDown} /></div>
     </div>
-
-    <div className='bg-black bg-cover bg-center h-screen md:-mt-14  animate__fadeInRight animate_fadeIn'
-        style={{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("./bg_image.jpg")' }}>
-    </div>
 </header>
 }
 
@@ -103,3 +97,11 @@ function scrollTo (offset, callback) {
     behavior: 'smooth'
   })
 }
+
+function updateHeaderHeight () {
+  if (window) {
+    const headerElement = document.getElementById('header')
+    console.log(headerElement, window.innerHeight)
+    headerElement.style.setProperty('height', window.innerHeight + 'px')
+  }
+}