heo-theme-slug

themes/heo/components/Header.js

@@ -11,6 +11,7 @@ import throttle from 'lodash.throttle'
 const Header = props => {
   const [isOpen, changeShow] = useState(false)
   const [headerBgShow, setHeaderBgShow] = useState(false)
+  const [whiteTitle, setWhiteTitle] = useState(false)
 
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
@@ -33,18 +34,23 @@ const Header = props => {
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
     const header = document.querySelector('#header')
+    const postHeader = document.querySelector('#post-bg')
 
     // 导航栏设置 白色背景
     if (header && scrollS > 60) {
       setHeaderBgShow(true)
+      setWhiteTitle(false)
     } else {
+      if (postHeader) {
+        setWhiteTitle(true)
+      }
       setHeaderBgShow(false)
     }
   }, throttleMs))
 
   return (<>
         {/* 头条 */}
-        <nav id='header' className={`${headerBgShow ? 'bg-white border-b' : 'bg-none'} h-16 flex justify-center items-center fixed top-0 duration-150 transition-all text-black w-full z-20 transform`}>
+        <nav id='header' className={`${headerBgShow ? 'bg-white' : 'bg-none'} ${whiteTitle ? 'text-white' : 'text-black'} h-16 flex justify-center items-center fixed top-0 duration-150 transition-all  w-full z-20 transform`}>
             <div className='w-full max-w-[86rem] mx-auto flex justify-between items-center px-8'>
                 <div className='flex'>
                     <Logo {...props} />

themes/heo/components/Hero.js

@@ -16,7 +16,7 @@ import CONFIG from '../config'
  */
 const Hero = props => {
   return (
-        <div id="hero-wrapper" className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
+        <div id="hero-wrapper" className='recent-top-post-group w-full mt-20 overflow-hidden select-none px-5 mb-4'>
             <hero id="hero" style={{ zIndex: 1 }} className="recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3" >
                 {/* 左侧banner组 */}
                 <BannerGroup {...props} />

themes/heo/components/MenuItemDrop.js

@@ -14,13 +14,13 @@ export const MenuItemDrop = ({ link }) => {
         {!hasSubMenu &&
             <Link
                 href={link?.to}
-                className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
+                className="font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1">
                 {link?.icon && <i className={link?.icon}/>} {link?.name}
                 {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
             </Link>}
 
         {hasSubMenu && <>
-            <div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <div className='cursor-pointer font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
                 {link?.icon && <i className={link?.icon}/>} {link?.name}
                 <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
             </div>

themes/heo/components/PostHeader.js

@@ -3,6 +3,7 @@ import TagItemMini from './TagItemMini'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import NotionIcon from '@/components/NotionIcon'
+import WavesArea from './WavesArea'
 
 export default function PostHeader({ post, siteInfo }) {
   const { locale } = useGlobal()
@@ -10,70 +11,75 @@ export default function PostHeader({ post, siteInfo }) {
   if (!post) {
     return <></>
   }
-  const headerImage = post?.pageCover ? `url("${post.pageCover}")` : `url("${siteInfo?.pageCover}")`
+  // 文章头图
+  const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
 
   return (
-    <div
-      id="header"
-      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10"
-      style={{ backgroundImage: headerImage }}
-    >
-      <header id='article-header-cover'
-            className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
+        <div id="post-bg" className="w-full h-[30rem] relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10">
 
-        <div className='mt-10'>
-            <div className='mb-3 flex justify-center'>
-              {post.category && <>
-                <Link href={`/category/${post.category}`} passHref legacyBehavior>
-                  <div className="cursor-pointer px-2 py-1 mb-2 border rounded-sm dark:border-white text-sm font-medium hover:underline duration-200 shadow-text-md text-white">
-                    {post.category}
-                  </div>
-                </Link>
-              </>}
-            </div>
+            <header id='article-header-cover' style={{ backdropFilter: 'blur(15px)' }} className="bg-[#0060e0] absolute top-0 w-full h-full py-10 flex justify-center items-center ">
 
-          {/* 文章Title */}
-          <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
-            <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
-          </div>
+                <div id='post-cover-wrapper' style={{ filter: 'blur(15px)' }} className='opacity-50 rotate-12 translate-x-12 -mr-60'>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img id='post-cover' style={{ boxShadow: 'box-shadow:110px -130px 300px 60px #4d240c inset' }} className='w-full h-full object-cover opacity-80 min-w-[50vw] min-h-[20rem]' src={headerImage}/>
+                </div>
 
-          <section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
-
-            <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
-              {post?.type !== 'Page' && (
-                <>
-                  <Link
-                    href={`/archive#${post?.publishTime?.substr(0, 7)}`}
-                    passHref
-                    className="pl-1 mr-2 cursor-pointer hover:underline">
-
-                    {locale.COMMON.POST_TIME}:{post?.publishTime}
-
-                  </Link>
-                </>
-              )}
-              <div className="pl-1 mr-2">
-                {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
-              </div>
-            </div>
-
-            {BLOG.ANALYTICS_BUSUANZI_ENABLE && <div className="busuanzi_container_page_pv font-light mr-2">
-              <span className="mr-2 busuanzi_value_page_pv" />
-              {locale.COMMON.VIEWS}
-            </div>}
-          </section>
-
-            <div className='mt-4 mb-1'>
-                {post.tagItems && (
-                    <div className="flex justify-center flex-nowrap overflow-x-auto">
-                        {post.tagItems.map(tag => (
-                            <TagItemMini key={tag.name} tag={tag} />
-                        ))}
+                <div id='post-info' className='absolute z-10 flex flex-col'>
+                    <div className='mb-3 flex justify-center'>
+                        {post.category && <>
+                            <Link href={`/category/${post.category}`} passHref legacyBehavior>
+                                <div className="cursor-pointer px-2 py-1 mb-2 border rounded-sm dark:border-white text-sm font-medium hover:underline duration-200 shadow-text-md text-white">
+                                    {post.category}
+                                </div>
+                            </Link>
+                        </>}
                     </div>
-                )}
-            </div>
+
+                    {/* 文章Title */}
+                    <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
+                        <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
+                    </div>
+
+                    <section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
+
+                        <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
+                            {post?.type !== 'Page' && (
+                                <>
+                                    <Link
+                                        href={`/archive#${post?.publishTime?.substr(0, 7)}`}
+                                        passHref
+                                        className="pl-1 mr-2 cursor-pointer hover:underline">
+
+                                        {locale.COMMON.POST_TIME}:{post?.publishTime}
+
+                                    </Link>
+                                </>
+                            )}
+                            <div className="pl-1 mr-2">
+                                {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
+                            </div>
+                        </div>
+
+                        {BLOG.ANALYTICS_BUSUANZI_ENABLE && <div className="busuanzi_container_page_pv font-light mr-2">
+                            <span className="mr-2 busuanzi_value_page_pv" />
+                            {locale.COMMON.VIEWS}
+                        </div>}
+                    </section>
+
+                    <div className='mt-4 mb-1'>
+                        {post.tagItems && (
+                            <div className="flex justify-center flex-nowrap overflow-x-auto">
+                                {post.tagItems.map(tag => (
+                                    <TagItemMini key={tag.name} tag={tag} />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <WavesArea />
+
+            </header>
         </div>
-      </header>
-    </div>
   )
 }

themes/heo/components/WavesArea.js

@@ -0,0 +1,60 @@
+/**
+ * 文章波浪动画
+ */
+export default function WavesArea() {
+  return (
+        <section className="main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0">
+            <svg className="waves-svg w-full h-[60px]" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+                <defs>
+                    <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
+                </defs>
+                <g className="parallax">
+                    <use href="#gentle-wave" x="48" y="0"></use>
+                    <use href="#gentle-wave" x="48" y="3"></use>
+                    <use href="#gentle-wave" x="48" y="5"></use>
+                    <use href="#gentle-wave" x="48" y="7"></use>
+                </g>
+            </svg>
+            <style jsx global>{`
+                /* Animation */
+
+                .parallax > use {
+                  animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+                }
+                .parallax > use:nth-child(1) {
+                  animation-delay: -2s;
+                  animation-duration: 7s;
+                  fill: #f7f9fe;
+                  opacity: 0.5;
+                }
+                .parallax > use:nth-child(2) {
+                  animation-delay: -3s;
+                  animation-duration: 10s;
+                  fill: #f7f9fe;
+                  opacity: 0.6;
+                }
+                .parallax > use:nth-child(3) {
+                  animation-delay: -4s;
+                  animation-duration: 13s;
+                  fill: #f7f9fe;
+                  opacity: 0.7;
+                }
+                .parallax > use:nth-child(4) {
+                  animation-delay: -5s;
+                  animation-duration: 20s;
+                  fill: #f7f9fe;
+                }
+                
+                @keyframes move-forever {
+                  0% {
+                    transform: translate3d(-90px, 0, 0);
+                  }
+                  100% {
+                    transform: translate3d(85px, 0, 0);
+                  }
+                }
+            `}
+            </style>
+        </section>
+  )
+}

themes/heo/index.js

@@ -18,9 +18,7 @@ import SearchNav from './components/SearchNav'
 import BlogPostArchive from './components/BlogPostArchive'
 import { ArticleLock } from './components/ArticleLock'
 import PostHeader from './components/PostHeader'
-import JumpToCommentButton from './components/JumpToCommentButton'
 import TocDrawer from './components/TocDrawer'
-import TocDrawerButton from './components/TocDrawerButton'
 import Comment from '@/components/Comment'
 import NotionPage from '@/components/NotionPage'
 import ArticleAdjacent from './components/ArticleAdjacent'
@@ -69,7 +67,6 @@ const LayoutBase = props => {
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-16"
                 unmount={false}
-                className='mt-20'
             >
                 {headerSlot}
             </Transition>
@@ -226,20 +223,10 @@ const LayoutSlug = props => {
   const drawerRight = useRef(null)
 
   const targetRef = isBrowser() ? document.getElementById('article-wrapper') : null
-
-  const floatSlot = <>
-        {post?.toc?.length > 1 && <div className="block lg:hidden">
-            <TocDrawerButton
-                onClick={() => {
-                  drawerRight?.current?.handleSwitchVisible()
-                }}
-            />
-        </div>}
-        <JumpToCommentButton />
-    </>
-
+  // 右侧栏
+  const slotRight = <SideRight {...props} />
   return (
-        <LayoutBase {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatSlot={floatSlot} >
+        <LayoutBase {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} slotRight={slotRight}>
             <div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
                 {lock && <ArticleLock validPassword={validPassword} />}