hexo-img

next.config.js

@@ -11,7 +11,8 @@ module.exports = withBundleAnalyzer({
       'gravatar.com',
       'www.notion.so',
       'avatars.githubusercontent.com',
-      'images.unsplash.com'
+      'images.unsplash.com',
+      'p1.qhimg.com'
     ]
   },
   // 默认将feed重定向至 /public/rss/feed.xml

pages/_app.js

@@ -62,8 +62,8 @@ const MyApp = ({ Component, pageProps }) => {
 
   return (
         <GlobalContextProvider>
-            {externalPlugins}
             <Component {...pageProps} />
+            {externalPlugins}
         </GlobalContextProvider>
   )
 }

themes/hexo/LayoutBase.js

@@ -14,7 +14,13 @@ import dynamic from 'next/dynamic'
 
 const FacebookPage = dynamic(
   () => {
-    return import('@/components/FacebookPage')
+    let facebook = <></>
+    try {
+      facebook = import('@/components/FacebookPage')
+    } catch (err) {
+      console.error(err)
+    }
+    return facebook
   },
   { ssr: false }
 )

themes/hexo/LayoutIndex.js

@@ -9,7 +9,6 @@ import React from 'react'
 export const LayoutIndex = (props) => {
   const headerSlot = CONFIG_HEXO.HOME_BANNER_ENABLE && <Header {...props} />
   return <LayoutBase {...props} headerSlot={headerSlot}>
-
     {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
   </LayoutBase>
 }

themes/hexo/components/Announcement.js

@@ -6,12 +6,7 @@ const NotionPage = dynamic(() => import('@/components/NotionPage'))
 const Announcement = ({ post, className }) => {
   const { locale } = useGlobal()
   if (post?.blockMap) {
-    return <div
-        data-aos="fade-up"
-        data-aos-duration="300"
-        data-aos-once="false"
-        data-aos-anchor-placement="top-bottom"
-        className={className}>
+    return <div className={className}>
         <section id='announcement-wrapper' className="hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray">
             <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
             {post && (<div id="announcement-content">

themes/hexo/components/BlogPostCard.js

@@ -4,6 +4,7 @@ import React from 'react'
 import TagItemMini from './TagItemMini'
 import CONFIG_HEXO from '../config_hexo'
 import NotionPage from '@/components/NotionPage'
+import Image from 'next/image'
 
 const BlogPostCard = ({ post, showSummary, siteInfo }) => {
   const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
@@ -15,6 +16,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
     <div
         key={post.id}
         data-aos="fade-up"
+        data-aso-delay="200"
         data-aos-duration="200"
         data-aos-once="true"
         data-aos-anchor-placement="top-bottom"
@@ -92,15 +94,25 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
         </div>
 
         {showPageCover && !showPreview && post?.page_cover && (
-           <div className="flex relative duration-200 cursor-pointer transform overflow-hidden md:w-5/12 ">
+           <div className="flex overflow-hidden md:w-5/12 ">
                 <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img
+                    {/* <img
                         src={post?.page_cover}
                         alt={post.title}
-                        className="h-full w-full hover:scale-125 transform object-cover duration-500"
-                    />
-                    {/* <Image className='hover:scale-125 transform duration-500' src={post?.page_cover} style={{ objectFit: 'cover' }} alt={post.title} fill loading='lazy' /> */}
+                        className="w-full cursor-pointer object-cover duration-200 hover:scale-125 "
+                    /> */}
+                    <div className='relative w-full'>
+                    <Image
+                     className='hover:scale-125 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>
                 </Link>
             </div>
         )}

themes/hexo/components/Header.js

@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_HEXO from '../config_hexo'
@@ -45,7 +46,7 @@ const Header = props => {
     }
   })
 
-  function updateHeaderHeight () {
+  function updateHeaderHeight() {
     requestAnimationFrame(() => {
       const wrapperElement = document.getElementById('wrapper')
       wrapperTop = wrapperElement?.offsetTop
@@ -53,32 +54,34 @@ const Header = props => {
   }
 
   return (
-    <header
-      id="header"
-      className="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>
+        <header
+            id="header"
+            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' }}
+                    placeholder='blur'
+                    blurDataURL='/bg_image.jpg' />
+            </div>
 
-        {/* 首页导航插件 */}
-        { CONFIG_HEXO.HOME_NAV_BUTTONS && <NavButtonGroup {...props}/>}
+            <div className="absolute bottom-0 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>
+                {/* 首页导航插件 */}
+                {CONFIG_HEXO.HOME_NAV_BUTTONS && <NavButtonGroup {...props} />}
 
-      <div
-        onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
-        className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
-      >
-        <i className='animate-bounce fas fa-angle-down'/>
-      </div>
-    </header>
+            </div>
+
+            <div
+                onClick={() => { window.scrollTo({ top: wrapperTop, behavior: 'smooth' }) }}
+                className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
+            >
+                <i className='animate-bounce fas fa-angle-down' />
+            </div>
+        </header>
   )
 }
 
@@ -104,12 +107,12 @@ const scrollTrigger = () => {
     ) {
       autoScroll = true
       window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
-      requestAnimationFrame(autoScrollEnd)
+      autoScrollEnd()
     }
     if ((scrollS < windowTop) && (scrollS < window.innerHeight) && !autoScroll) {
       autoScroll = true
       window.scrollTo({ top: 0, behavior: 'smooth' })
-      requestAnimationFrame(autoScrollEnd)
+      autoScrollEnd()
     }
     windowTop = scrollS
   })

themes/hexo/components/LatestPostsGroup.js

@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
+import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
@@ -19,46 +20,51 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
   }
 
   return <>
-    <div className=" mb-2 px-1 flex flex-nowrap justify-between">
-      <div>
-        <i className="mr-2 fas fas fa-history" />
-        {locale.COMMON.LATEST_POSTS}
-      </div>
-    </div>
-    {latestPosts.map(post => {
-      const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
-      const headerImage = post?.page_cover
-        ? `url("${post.page_cover}")`
-        : `url("${siteInfo?.pageCover}")`
-
-      return (
-        (<Link
-          key={post.id}
-          title={post.title}
-          href={`${BLOG.SUB_PATH}/${post.slug}`}
-          passHref
-          className={'my-2 flex'}>
-
-          <div
-            className="w-20 h-16 bg-cover bg-center bg-no-repeat"
-            style={{ backgroundImage: headerImage }}
-          />
-          <div
-            className={
-              (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
-              ' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
-              ' hover:text-indigo-400 cursor-pointer items-center flex'
-            }
-          >
+        <div className=" mb-2 px-1 flex flex-nowrap justify-between">
             <div>
-              <div className='text-line-2'>{post.title}</div>
-              <div className="text-gray-500">{post.lastEditedTime}</div>
+                <i className="mr-2 fas fas fa-history" />
+                {locale.COMMON.LATEST_POSTS}
             </div>
-          </div>
+        </div>
+        {latestPosts.map(post => {
+          const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
 
-        </Link>)
-      )
-    })}
-  </>
+          const headerImage = post?.page_cover ? post.page_cover : siteInfo?.pageCover
+
+          return (
+            (<Link
+                    key={post.id}
+                    title={post.title}
+                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    passHref
+                    className={'my-2 flex'}>
+
+                    <div className="w-20 h-16 overflow-hidden relative">
+                          <Image
+                            src={headerImage}
+                            fill
+                            style={{ objectFit: 'cover' }}
+                            placeholder='blur'
+                            blurDataURL='/bg_image.jpg'
+                            quality={10}
+                            alt={post.title} />
+                    </div>
+                    <div
+                        className={
+                            (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
+                            ' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
+                            ' hover:text-indigo-400 cursor-pointer items-center flex'
+                        }
+                    >
+                        <div>
+                            <div className='text-line-2'>{post.title}</div>
+                            <div className="text-gray-500">{post.lastEditedTime}</div>
+                        </div>
+                    </div>
+
+                </Link>)
+          )
+        })}
+    </>
 }
 export default LatestPostsGroup

themes/hexo/components/TopNav.js

@@ -61,7 +61,7 @@ const TopNav = props => {
         nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
       }
 
-      const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
+      const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight * 2)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
       if (!showNav) {
         nav && nav.classList.replace('top-0', '-top-20')
         windowTop = scrollS