From 6e30c9dd7ee3e5a3a0c8ea6011333375699a71d2 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 12 Mar 2023 20:02:06 +0800
Subject: [PATCH] hexo\matery

---
 themes/hexo/LayoutBase.js                 |  4 +-
 themes/hexo/components/Header.js          |  4 +-
 themes/matery/components/BlogPostCard.js  | 18 ++++++--
 themes/matery/components/Header.js        | 50 ++++++++++++-----------
 themes/matery/components/HeaderArticle.js | 11 ++++-
 themes/matery/components/TopNav.js        |  2 +-
 6 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js
index 80d06934..701daa71 100644
--- a/themes/hexo/LayoutBase.js
+++ b/themes/hexo/LayoutBase.js
@@ -65,14 +65,14 @@ const LayoutBase = props => {
   }, [])
 
   return (
-    <div id='theme-hexo' className="bg-hexo-background-gray dark:bg-black">
+    <div id='theme-hexo'>
       <CommonHead meta={meta} siteInfo={siteInfo}/>
 
       <TopNav {...props} />
 
       {headerSlot}
 
-      <main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen relative">
+      <main id="wrapper" className="bg-hexo-background-gray dark:bg-black w-full py-8 md:px-8 lg:px-24 min-h-screen relative">
         <div
           id="container-inner"
           className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'}
diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js
index 3644b6c1..8f2557fa 100644
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
@@ -59,7 +59,9 @@ const Header = props => {
             className="md:bg-fixed w-full h-screen bg-black text-white relative"
         >
             <div className='w-full h-full fixed'>
-                <Image src={siteInfo.pageCover} fill style={{ objectFit: 'cover' }}
+                <Image src={siteInfo.pageCover} fill
+                    style={{ objectFit: 'cover' }}
+                    className='opacity-70'
                     placeholder='blur'
                     blurDataURL='/bg_image.jpg' />
             </div>
diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js
index b809c723..e7da2f17 100644
--- a/themes/matery/components/BlogPostCard.js
+++ b/themes/matery/components/BlogPostCard.js
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import React from 'react'
 import TagItemMini from './TagItemMini'
 import CONFIG_MATERY from '../config_matery'
+import Image from 'next/image'
 
 const BlogPostCard = ({ post, showSummary, siteInfo }) => {
   const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap
@@ -14,7 +15,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
   return (
       <div
           data-aos="zoom-in"
-          data-aos-duration="300"
+          data-aos-duration="200"
           data-aos-once="false"
           data-aos-anchor-placement="top-bottom"
           className="w-full mb-4 h-full overflow-auto shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
@@ -27,11 +28,22 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
                   <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                       <div className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md  cursor-pointer transform overflow-hidden">
                           {/* eslint-disable-next-line @next/next/no-img-element */}
-                          <img
+                          {/* <img
                               src={post?.page_cover}
                               alt={post.title}
                               className="opacity-50 h-full w-full hover:scale-125 rounded-t-md  transform object-cover duration-500"
-                          />
+                          /> */}
+                          <div className='relative w-full'>
+                            <Image
+                            className='hover:scale-125 opacity-50 transition cursor-pointer duration-500'
+                            src={post?.page_cover}
+                            alt={post.title}
+                            quality={30}
+                            placeholder='blur'
+                            blurDataURL='/bg_image.jpg'
+                            style={{ objectFit: 'cover' }}
+                            fill/>
+                          </div>
                           <span className='absolute bottom-0 left-0 text-white p-6 text-2xl replace' > {post.title}</span>
                       </div>
                   </Link>
diff --git a/themes/matery/components/Header.js b/themes/matery/components/Header.js
index 5ad30675..c7b7302c 100644
--- a/themes/matery/components/Header.js
+++ b/themes/matery/components/Header.js
@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_MATERY from '../config_matery'
@@ -49,9 +50,9 @@ const Header = props => {
   }
 
   /**
-   * 吸附滚动，移动端关闭
-   * @returns
-   */
+     * 吸附滚动，移动端关闭
+     * @returns
+     */
   const scrollTrigger = () => {
     requestAnimationFrame(() => {
       if (screen.width <= 768) {
@@ -76,7 +77,7 @@ const Header = props => {
     })
   }
 
-  function updateHeaderHeight () {
+  function updateHeaderHeight() {
     requestAnimationFrame(() => {
       const wrapperElement = document.getElementById('wrapper')
       wrapperTop = wrapperElement?.offsetTop
@@ -84,26 +85,29 @@ const Header = props => {
   }
 
   return (
-    <header
-      id="header"
-      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white relative z-10"
-      style={{
-        backgroundImage:
-          `linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")`
-      }}
-    >
-      <div className="absolute flex flex-col h-full items-center justify-center w-full ">
-        <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
-        <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
-          <span id='typed'/>
-        </div>
-        <div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
-             className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl">
-            <i className='animate-bounce fas fa-angle-double-down'/> <span>开始阅读</span>
-        </div>
-      </div>
+        <header
+            id="header"
+            className="md:bg-fixed w-full h-screen bg-black text-white relative"
+        >
+            <div className='w-full h-full absolute'>
+                <Image src={siteInfo.pageCover} fill
+                    style={{ objectFit: 'cover' }}
+                    className='opacity-70'
+                    placeholder='blur'
+                    blurDataURL='/bg_image.jpg' />
+            </div>
+            <div className="absolute flex flex-col h-full items-center justify-center w-full ">
+                <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
+                <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
+                    <span id='typed' />
+                </div>
+                <div onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
+                    className="mt-12 border cursor-pointer w-40 text-center pt-4 pb-3 text-md text-white hover:bg-orange-600 duration-300 rounded-3xl">
+                    <i className='animate-bounce fas fa-angle-double-down' /> <span>开始阅读</span>
+                </div>
+            </div>
 
-    </header>
+        </header>
   )
 }
 
diff --git a/themes/matery/components/HeaderArticle.js b/themes/matery/components/HeaderArticle.js
index 6d8229c3..62317d06 100644
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -1,3 +1,5 @@
+import Image from 'next/image'
+
 export default function HeaderArticle({ post, siteInfo }) {
   const headerImage = post?.page_cover ? post?.page_cover : siteInfo?.pageCover
   const title = post?.title
@@ -9,11 +11,16 @@ export default function HeaderArticle({ post, siteInfo }) {
             data-aos-anchor-placement="top-center"
             id='header' className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black">
             {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
+            {/* <img
                 src={headerImage}
                 alt={title}
                 className="opacity-50 dark:opacity-40 h-full w-full object-cover"
-            />
+            /> */}
+             <Image alt={title} src={headerImage} fill
+                    style={{ objectFit: 'cover' }}
+                    className='opacity-50'
+                    placeholder='blur'
+                    blurDataURL='/bg_image.jpg' />
             <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 47b485a8..73086b76 100644
--- a/themes/matery/components/TopNav.js
+++ b/themes/matery/components/TopNav.js
@@ -27,7 +27,7 @@ const TopNav = props => {
       const scrollS = window.scrollY
       const nav = document.querySelector('#sticky-nav')
       const header = document.querySelector('#header')
-      const showNav = scrollS <= windowTop || scrollS < 5 // 非首页无大图时影藏顶部 滚动条置顶时隐藏
+      const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight * 2)// 非首页无大图时影藏顶部 滚动条置顶时隐藏// 非首页无大图时影藏顶部 滚动条置顶时隐藏
       // 是否将导航栏透明
       const navTransparent = header && scrollS < 300 // 透明导航条的条件