feature:

首屏打开优化；
banner图加入配置；

blog.config.js

@@ -4,8 +4,8 @@ const BLOG = {
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
   description: '分享编程技术与记录生活',
-  headerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '唐风集里，收卷波澜'], // Index words
-  bannerImage: 'http://bing.creepersan.com/api/v1/img-current', // Index Banner Image
+  headerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页文字
+  bannerImage: './bg_image.jpg', // 首图
   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

components/Header.js

@@ -1,6 +1,6 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useCallback, useEffect, useState } from 'react'
 import Typed from 'typed.js'
@@ -93,7 +93,7 @@ export default function Header () {
       style={{
         height: 'calc(100vh + 1px)',
         backgroundImage:
-          `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url('${BLOG.bannerImage}')`
+          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${BLOG.bannerImage}")`
       }}
     >
       <div className="absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white">
@@ -103,9 +103,9 @@ export default function Header () {
         onClick={() => {
           scrollTo(wrapperTop, autoScrollEnd)
         }}
-        className="cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white"
+        className="cursor-pointer w-full text-center py-4 text-5xl  animate-bounce absolute bottom-10 text-white"
       >
-        <FontAwesomeIcon icon={faArrowDown} />
+        <FontAwesomeIcon icon={faAngleDown} />
       </div>
     </header>
   )

components/SideBar.js

@@ -7,7 +7,6 @@ import CategoryGroup from '@/components/CategoryGroup'
 import SearchInput from '@/components/SearchInput'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
-import Toc from '@/components/Toc'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
 
@@ -27,10 +26,7 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
   const { locale } = useGlobal()
   return <aside id='sidebar' className='pt-5 bg-white dark:bg-gray-900 w-80 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
 
-    <section className='hidden lg:block'>
-      <InfoCard />
-      <hr className='dark:border-gray-700 mt-6 py-1' />
-    </section>
+    <InfoCard />
 
     <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>
 
@@ -85,15 +81,6 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
       )}
     </div>
 
-    {post && (
-      <section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-900 hidden md:block'>
-        <div className='border-b text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
-          {locale.COMMON.TABLE_OF_CONTENTS}
-        </div>
-        <Toc toc={post.toc} />
-      </section>
-    )}
-
     <section className='bg-white dark:bg-gray-900'>
       {/* 信息流广告 */}
       <ins className="adsbygoogle"

components/SideBarDrawer.js

@@ -1,5 +1,5 @@
-import React, { useImperativeHandle, useState } from 'react'
 import SideBar from '@/components/SideBar'
+import React, { useEffect, useImperativeHandle, useState } from 'react'
 
 /**
  * 侧边栏抽屉面板，可以从侧面拉出
@@ -13,8 +13,14 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
       handleSwitchSideDrawerVisible: () => switchSideDrawerVisible()
     }
   })
-  const [isShow, changeHiddenStatus] = useState(false)
+
+  useEffect(() => {
+    const sideBarWrapperElement = document.getElementById('sidebar-wrapper')
+    sideBarWrapperElement?.classList?.remove('hidden')
+  })
+
   // 点击按钮更改侧边抽屉状态
+  const [isShow, changeHiddenStatus] = useState(false)
   const switchSideDrawerVisible = () => {
     const showStatus = !isShow
     changeHiddenStatus(showStatus)
@@ -31,15 +37,14 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
       }
     }
   }
-  return <>
+
+  return <div id='sidebar-wrapper' className='hidden'>
     <div id='sidebar-drawer' className='-ml-80 bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'>
       <SideBar tags={tags} post={post} posts={posts} categories={categories} currentCategory={currentCategory} />
     </div>
     {/* 背景蒙版 */}
-    <div id='sidebar-drawer-background'
-          className='hidden fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'
-         onClick={switchSideDrawerVisible} />
+    <div id='sidebar-drawer-background' onClick={switchSideDrawerVisible} className='hidden fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'/>
 
-  </>
+  </div>
 }
 export default SideBarDrawer