optimize theme

themes/hexo/LayoutBase.js

@@ -5,7 +5,6 @@ import Footer from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
 import SideRight from './components/SideRight'
 import TopNav from './components/TopNav'
-import smoothscroll from 'smoothscroll-polyfill'
 import FloatDarkModeButton from './components/FloatDarkModeButton'
 import Live2D from '@/components/Live2D'
 import LoadingCover from './components/LoadingCover'
@@ -53,7 +52,6 @@ const LayoutBase = props => {
     // changePercent(per)
   }
   useEffect(() => {
-    smoothscroll.polyfill()
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])

themes/matery/LayoutBase.js

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'
 import Footer from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
 import TopNav from './components/TopNav'
-import smoothscroll from 'smoothscroll-polyfill'
 import Live2D from '@/components/Live2D'
 import LoadingCover from './components/LoadingCover'
 import { useGlobal } from '@/lib/global'
@@ -37,7 +36,6 @@ const LayoutBase = props => {
     // changePercent(per)
   }
   useEffect(() => {
-    smoothscroll.polyfill()
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])

themes/next/LayoutBase.js

@@ -10,7 +10,6 @@ import TopNav from './components/TopNav'
 import { useGlobal } from '@/lib/global'
 import PropTypes from 'prop-types'
 import React from 'react'
-import smoothscroll from 'smoothscroll-polyfill'
 import CONFIG_NEXT from './config_next'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
@@ -45,8 +44,6 @@ const LayoutBase = (props) => {
   }
 
   React.useEffect(() => {
-    smoothscroll.polyfill()
-
     // facebook messenger 插件需要调整右下角悬浮按钮的高度
     const fb = document.getElementsByClassName('fb-customerchat')
     if (fb.length === 0) {

themes/next/components/JumpToBottomButton.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import smoothscroll from 'smoothscroll-polyfill'
 import CONFIG_NEXT from '../config_next'
 
 /**
@@ -11,12 +10,18 @@ import CONFIG_NEXT from '../config_next'
  * @constructor
  */
 const JumpToBottomButton = ({ showPercent = false }) => {
+  const [show, switchShow] = useState(false)
+  const [percent, changePercent] = useState(0)
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [show])
+
   if (!CONFIG_NEXT.WIDGET_TO_BOTTOM) {
     return <></>
   }
 
-  const [show, switchShow] = useState(false)
-  const [percent, changePercent] = useState(0)
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
     const clientHeight = targetRef?.clientHeight
@@ -36,13 +41,6 @@ const JumpToBottomButton = ({ showPercent = false }) => {
     window.scrollTo({ top: targetRef.clientHeight, behavior: 'smooth' })
   }
 
-  useEffect(() => {
-    smoothscroll.polyfill()
-
-    document.addEventListener('scroll', scrollListener)
-    return () => document.removeEventListener('scroll', scrollListener)
-  }, [show])
-
   return (<div className='flex space-x-1 transform hover:scale-105 duration-200 py-2 px-3' onClick={scrollToBottom} >
     <div className='dark:text-gray-200' >
       <i className='fas fa-arrow-down' />

themes/simple/LayoutBase.js

@@ -25,7 +25,7 @@ const LayoutBase = props => {
         <div id='theme-simple' className='dark:text-gray-300  bg-white dark:bg-black'>
             <CommonHead meta={meta} />
 
-            {CONFIG_SIMPLE.TOP_BAR && <TopBar {...props}/>}
+            {CONFIG_SIMPLE.TOP_BAR && <TopBar {...props} />}
 
             {/* 顶部LOGO */}
             <Header {...props} />
@@ -38,7 +38,7 @@ const LayoutBase = props => {
 
                 {/* <Title {...props} /> */}
 
-                <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'w-full relative container mx-auto justify-start md:flex items-start py-8 px-2'}>
+                <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'w-full relative container mx-auto justify-start md:flex items-start pt-12 px-2'}>
 
                     <div className='w-full max-w-6xl'>{children}</div>
 

themes/simple/components/About.js

@@ -1,21 +0,0 @@
-import BLOG from '@/blog.config'
-import Router from 'next/router'
-import React from 'react'
-import SocialButton from './SocialButton'
-
-const About = (props) => {
-  const { siteInfo } = props
-  return <>
-    <div className='flex flex-col items-center justify-center '>
-        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
-        </div>
-        <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
-        <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</div>
-        <SocialButton/>
-    </div>
-  </>
-}
-
-export default About

themes/simple/components/Announcement.js

@@ -6,8 +6,8 @@ const Announcement = ({ post, className }) => {
   if (!post) {
     return <></>
   }
-  return <>{post && (<div id="announcement-content">
-        <NotionPage post={post} className='text-center ' />
+  return <>{post && (<div id="announcement-content" className='px-3'>
+        <NotionPage post={post} />
     </div>)} </>
 }
 export default Announcement

themes/simple/components/BlogItem.js

@@ -0,0 +1,36 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+export const BlogItem = props => {
+  const { post } = props
+  console.log(post)
+
+  return <div key={post.id} className="mb-10 pb-12 border-b" >
+        <h2 className="mb-5 ">
+            <Link
+                id='blog-item-title'
+                href={`/${post.slug}`}
+                className="font-bold text-black text-xl md:text-2xl no-underline hover:underline">
+                {post.title}
+            </Link>
+        </h2>
+
+        <div className="mb-4 text-sm text-gray-700">
+            <span> <i className="fa-regular fa-user"></i> <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a></span>
+            <span> - <i className="fa-regular fa-clock"></i> {post.date?.start_date || post.createdTime}</span>
+            {post.category && <span> - <i className="fa-regular fa-folder"></i> <a href="#" className="text-gray-700 hover:text-red-400 transition-all duration-200">{post.category}</a></span>}
+            {post.tags && post.tags?.length > 0 && post.tags.map(t => <span key={t}> / <Link href={`tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)}
+        </div>
+
+        <div className="text-gray-700 leading-normal mb-6">
+            {post.summary}
+            {post.summary && <span>...</span>}
+        </div>
+
+        <div className='block'>
+            <Link href={post.slug} className='inline-block rounded-sm text-blue-400 text-xs border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
+                Continue Reading <i className="fa-solid fa-angle-right align-middle"></i>
+            </Link>
+        </div>
+    </div>
+}

themes/simple/components/BlogListPage.js

@@ -3,6 +3,7 @@ import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
+import { BlogItem } from './BlogItem'
 
 export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
@@ -16,39 +17,11 @@ export const BlogListPage = props => {
   const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
 
   return (
-      <div className="w-full md:pr-12 mb-12">
+      <div className="w-full md:pr-8 mb-12">
 
             <div id="container">
                 {posts?.map(p => (
-                    <article key={p.id} className="mb-12" >
-                        <h2 className="mb-4">
-                            <Link
-                                href={`/${p.slug}`}
-                                className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
-                                  {p.title}
-                            </Link>
-                        </h2>
-
-                        <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
-                            <i className='fas fa-user'/> <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
-                            <span className="font-bold mx-1"> | </span>
-                            <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
-                            {/* <span className="font-bold mx-1"> | </span> */}
-                            {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                        </div>
-
-                        <p className="text-gray-700 dark:text-gray-400 leading-normal">
-                            {p.summary}
-                        </p>
-                            {/* 搜索结果 */}
-                        {p.results && (
-                            <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                            {p.results.map(r => (
-                                <span key={r}>{r}</span>
-                            ))}
-                            </p>
-                        )}
-                    </article>
+                    <BlogItem key={p.id} post={p}/>
                 ))}
             </div>
 

themes/simple/components/BlogListScroll.js

@@ -1,8 +1,8 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
 import React from 'react'
 import throttle from 'lodash.throttle'
+import { BlogItem } from './BlogItem'
 
 export const BlogListScroll = props => {
   const { posts } = props
@@ -44,39 +44,17 @@ export const BlogListScroll = props => {
   })
 
   return (
-      <div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}>
+      <div id="container" className="w-full md:pr-8 mb-12" ref={targetRef}>
               {postsToShow.map(p => (
-                  <article key={p.id} className="mb-12" >
-                      <h2 className="mb-4">
-                          <Link
-                              href={`/${p.slug}`}
-                              className="text-black text-xl md:text-2xl no-underline hover:underline">
-                                {p.title}
-                          </Link>
-                      </h2>
-
-                      <div className="mb-4 text-sm text-gray-700">
-                          by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
-                          <span className="font-bold mx-1"> | </span>
-                          <a href="#" className="text-gray-700">{p.category}</a>
-                          <span className="font-bold mx-1"> | </span>
-                          {/* <a href="#" className="text-gray-700">2 Comments</a> */}
-                      </div>
-
-                      <p className="text-gray-700 leading-normal">
-                          {p.summary}
-                      </p>
-                  </article>
+                  <BlogItem key={p.id} post={p}/>
               ))}
 
-              <div
-                  onClick={handleGetMore}
-                  className="w-full my-4 py-4 text-center cursor-pointer "
-              >
+              <div onClick={handleGetMore}
+                   className="w-full my-4 py-4 text-center cursor-pointer ">
                   {' '}
                   {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
               </div>
 
           </div>
-  );
+  )
 }

themes/simple/components/DropMenu.js

@@ -5,18 +5,18 @@ export const DropMenu = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
-  return <div className='my-4 mr-4'
+  return <div
             onMouseOver={() => changeShow(true)}
             onMouseOut={() => changeShow(false)}
             >
         <Link
             href={link?.to}
-
-            className="menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest">
+            className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
             {link?.name}
             {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
         </Link>
 
+        {/* 子菜单 */}
         {hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} transition-all duration-300 z-20 top-12 absolute block border border-gray-100 bg-white drop-shadow-lg `}>
             {link.subMenus.map(sLink => {
               return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 tracking-widest transition-all duration-200 border-b py-3 pr-6 pl-2'>

themes/simple/components/Header.js

@@ -1,5 +1,6 @@
+import BLOG from '@/blog.config'
 import Link from 'next/link'
-import CONFIG_SIMPLE from '../config_simple'
+// import CONFIG_SIMPLE from '../config_simple'
 
 /**
  * 网站顶部
@@ -9,13 +10,23 @@ export const Header = (props) => {
   const { siteInfo } = props
 
   return (
-      <header className="text-center justify-between items-center px-6 bg-white h-80 dark:bg-black relative z-10">
+        <header className="text-center justify-between items-center px-6 bg-white h-80 dark:bg-black relative z-10">
             <div className="float-none inline-block py-12">
-              <Link href='/'>
-                 {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img className='max-h-48 hover:opacity-60 duration-200 transition-all cursor-pointer' src={CONFIG_SIMPLE.LOGO_IMG}/>
-              </Link>
-              <div className='text-xs text-gray-600 dark:text-gray-300'>{siteInfo?.description}</div>
+                <Link href='/'>
+                    {/* 可使用一张单图作为logo */}
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    {/* <img className='max-h-48 hover:opacity-60 duration-200 transition-all cursor-pointer' src={CONFIG_SIMPLE.LOGO_IMG}/> */}
+                    <div>
+                        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
+                        </div>
+                        <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
+                        <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</div>
+                    </div>
+
+                </Link>
+                <div className='text-xs text-gray-500 dark:text-gray-300'>{siteInfo?.description}</div>
             </div>
         </header>
   )

themes/simple/components/JumpToTopButton.js

@@ -11,8 +11,24 @@ import React from 'react'
  */
 const JumpToTopButton = () => {
   const { locale } = useGlobal()
-  return <div title={locale.POST.TOP} className='cursor-pointer p-2 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-    ><i className='fas fa-angle-up text-2xl' />
+  const [show, switchShow] = React.useState(false)
+  const scrollListener = () => {
+    const scrollY = window.pageYOffset
+    const shouldShow = scrollY > 200
+    if (shouldShow !== show) {
+      switchShow(shouldShow)
+    }
+  }
+
+  React.useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [show])
+
+  return <div title={locale.POST.TOP}
+        className={(show ? ' opacity-100 ' : 'invisible  opacity-0') + ' transition-all duration-300 flex items-center justify-center cursor-pointer bg-black h-10 w-10 bg-opacity-40 rounded-sm'}
+        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+    ><i className='fas fa-angle-up text-white ' />
     </div>
 }
 

themes/simple/components/Nav.js

@@ -31,7 +31,7 @@ export const Nav = ({ customNav, customMenu }) => {
   return (
         <nav className="w-full bg-white md:pt-0 px-6 relative z-20 shadow-md border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
             <div className="container mx-auto max-w-8xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
-                <div className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
+                <div className="w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start py-4 space-x-4">
 
                     {links?.map(link => {
                       if (link?.show) {

themes/simple/components/SideBar.js

@@ -1,20 +1,15 @@
 import Live2D from '@/components/Live2D'
-import About from './About'
 import Announcement from './Announcement'
 
 export const SideBar = (props) => {
   const { notice } = props
   return (
-      <div className="w-full md:w-96 sticky top-8 border-l pl-12 border-gray-100">
+      <div className="w-full max-w-lg sticky top-8 border-l pl-12 border-gray-100">
 
             <aside>
                 <Announcement post={notice}/>
             </aside>
 
-            <aside>
-                <About {...props}/>
-            </aside>
-
             <aside className="  overflow-hidden mb-6">
                 <Live2D />
             </aside>

themes/simple/components/TopBar.js

@@ -1,13 +1,14 @@
 import CONFIG_SIMPLE from '../config_simple'
 
 /**
- * 网站顶部
+ * 网站顶部 提示栏
  * @returns
  */
 export const TopBar = (props) => {
-  return (
-        <header className="w-full flex justify-between items-center px-20 h-10 bg-black dark:bg-hexo-black-gray z-10">
-            <div className='text-xs text-white' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/>
-        </header>
-  )
+  if (CONFIG_SIMPLE.TOP_BAR_CONTENT) {
+    return <header className="w-full flex justify-between items-center px-20 h-10 bg-black dark:bg-hexo-black-gray z-10">
+        <div className='text-xs text-white' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/>
+    </header>
+  }
+  return <></>
 }

themes/simple/config_simple.js

@@ -2,7 +2,7 @@ const CONFIG_SIMPLE = {
 
   LOGO_IMG: '/Logo.webp',
   TOP_BAR: true, // 显示顶栏
-  TOP_BAR_CONTENT: '<div>欢迎访问我的网站，NotionNext最新版本已更新至3.12.0，欢迎体验！<div>',
+  TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
 
   // 菜单配置
   MENU_CATEGORY: true, // 显示分类