样式微调

themes/hexo/LayoutBase.js

@@ -12,6 +12,9 @@ import LoadingCover from './components/LoadingCover'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import FacebookPage from '@/components/FacebookPage'
+import AOS from 'aos'
+import 'aos/dist/aos.css' // You can also use <link> for styles
+import { isBrowser } from '@/lib/utils'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -51,6 +54,10 @@ const LayoutBase = props => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
+  if (isBrowser()) {
+    AOS.init()
+  }
+
   return (
     <div className="bg-hexo-background-gray dark:bg-black">
       <CommonHead meta={meta} siteInfo={siteInfo}/>

themes/hexo/components/BlogPostCard.js

@@ -8,7 +8,13 @@ import NotionPage from '@/components/NotionPage'
 const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
   return (
-    <div className="w-full drop-shadow-md hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300">
+    <div
+        data-aos="fade-up"
+        data-aos-duration="600"
+        data-aos-easing="ease-in-out"
+        data-aos-once="false"
+        data-aos-anchor-placement="top-bottom"
+        className="w-full drop-shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300">
       <div
         key={post.id}
         className="animate__animated animate__fadeIn flex flex-col-reverse lg:flex-row justify-between duration-300"

themes/matery/LayoutBase.js

@@ -12,6 +12,7 @@ import BLOG from '@/blog.config'
 import AOS from 'aos'
 import 'aos/dist/aos.css' // You can also use <link> for styles
 import FloatDarkModeButton from './components/FloatDarkModeButton'
+import { isBrowser } from '@/lib/utils'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -44,7 +45,9 @@ const LayoutBase = props => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  AOS.init()
+  if (isBrowser()) {
+    AOS.init()
+  }
 
   return (
         <div id="outer-wrapper" className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full overflow-hidden">

themes/matery/components/BlogPostCard.js

@@ -13,10 +13,10 @@ const BlogPostCard = ({ post, showSummary }) => {
             data-aos-easing="ease-in-out"
             data-aos-once="false"
             data-aos-anchor-placement="top-bottom"
-            className="w-full mb-4 drop-shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
+            className="w-full mb-4 h-full overflow-auto drop-shadow-md border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray">
 
-            {/* 固定高度72 ，没有描述用图片填充 */}
-            <div key={post.id} className="flex flex-col justify-between h-96">
+            {/* 固定高度 ，空白用图片拉升填充 */}
+            <div key={post.id} className="flex flex-col h-96 justify-between">
 
                 {/* 头部图片 填充卡片 */}
                 {CONFIG_MATERY.POST_LIST_COVER && !showPreview && post?.page_cover && (
@@ -33,7 +33,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                     </Link>
                 )}
 
-                <div>
+                <div >
                     {/* 描述 */}
                     <div className="px-4 flex flex-col w-full  text-gray-700  dark:text-gray-300">
 

themes/next/LayoutBase.js

@@ -13,6 +13,9 @@ import React from 'react'
 import smoothscroll from 'smoothscroll-polyfill'
 import CONFIG_NEXT from './config_next'
 import Live2D from '@/components/Live2D'
+import AOS from 'aos'
+import 'aos/dist/aos.css' // You can also use <link> for styles
+import { isBrowser } from '@/lib/utils'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -58,6 +61,10 @@ const LayoutBase = (props) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
+  if (isBrowser()) {
+    AOS.init()
+  }
+
   return (<>
 
       <CommonHead meta={meta} />

themes/next/components/ArticleDetail.js

@@ -25,7 +25,14 @@ export default function ArticleDetail(props) {
   const { locale } = useGlobal()
   const date = formatDate(post?.date?.start_date || post?.createdTime, locale.LOCALE)
 
-  return (<div id="container" className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
+  return (<div id="container"
+        data-aos="fade-down"
+        data-aos-duration="600"
+        data-aos-easing="ease-in-out"
+        data-aos-once="false"
+        data-aos-anchor-placement="top-bottom"
+
+        className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
         <div itemScope itemType="https://schema.org/Movie"
             className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
         >
@@ -50,7 +57,7 @@ export default function ArticleDetail(props) {
                         {post?.type !== 'Page' && (<>
                             <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
                                 <div className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
-                                  <i className='far fa-calendar mr-1' /> {date}
+                                    <i className='far fa-calendar mr-1' /> {date}
                                 </div>
                             </Link>
                             <span className='mr-2'> | <i className='far fa-calendar-check mr-2' />{post.lastEditedTime} </span>

themes/next/components/BlogPostCard.js

@@ -13,7 +13,7 @@ const BlogPostCard = ({ post, showSummary }) => {
   const { locale } = useGlobal()
   const showPreview = CONFIG_NEXT.POST_LIST_PREVIEW && post.blockMap
   return (
-    <Card className="w-full animate__animated animate__fadeIn">
+    <Card className="w-full">
       <div
         key={post.id}
         className="flex flex-col-reverse justify-between duration-300"

themes/next/components/Card.js

@@ -1,5 +1,11 @@
 const Card = ({ children, headerSlot, className }) => {
-  return <div className={className}>
+  return <div
+    data-aos="fade-down"
+    data-aos-duration="600"
+    data-aos-easing="ease-in-out"
+    data-aos-once="false"
+    data-aos-anchor-placement="top-bottom"
+    className={className}>
     <>{headerSlot}</>
     <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
         {children}

themes/next/components/PaginationNumber.js

@@ -16,7 +16,13 @@ const PaginationNumber = ({ page, totalPage }) => {
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   return (
-        <div className="my-5 flex justify-center items-end font-medium text-black hover:shadow-xl duration-500 bg-white dark:bg-hexo-black-gray dark:text-gray-300 py-3 shadow space-x-2">
+        <div
+            data-aos="fade-down"
+            data-aos-duration="600"
+            data-aos-easing="ease-in-out"
+            data-aos-once="false"
+            data-aos-anchor-placement="top-bottom"
+            className="my-5 flex justify-center items-end font-medium text-black hover:shadow-xl duration-500 bg-white dark:bg-hexo-black-gray dark:text-gray-300 py-3 shadow space-x-2">
             {/* 上一页 */}
             <Link
                 href={{

themes/next/components/PaginationSimple.js

@@ -15,7 +15,13 @@ const PaginationSimple = ({ page, showNext }) => {
   const router = useRouter()
   const currentPage = +page
   return (
-    <div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
+    <div
+        data-aos="fade-down"
+        data-aos-duration="600"
+        data-aos-easing="ease-in-out"
+        data-aos-once="false"
+        data-aos-anchor-placement="top-bottom"
+        className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
       <Link
         href={{
           pathname:

themes/next/components/SideAreaLeft.js

@@ -24,49 +24,55 @@ const SideAreaLeft = props => {
   const showToc = post && post.toc && post.toc.length > 1
   return <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
 
-    <section className='w-60'>
-      {/* 菜单 */}
-      <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
-        <Logo {...props} className='h-32' />
-        <div className='pt-2 px-2 font-sans'>
-          <MenuButtonGroup allowCollapse={true} {...props} />
-        </div>
-        {CONFIG_NEXT.MENU_SEARCH && <div className='px-2 pt-2 font-sans'>
-          <SearchInput {...props} />
-        </div>}
-      </section>
-    </section>
+        <section
+            data-aos="fade-down"
+            data-aos-duration="600"
+            data-aos-easing="ease-in-out"
+            data-aos-once="false"
+            data-aos-anchor-placement="top-bottom"
+            className='w-60'>
+            {/* 菜单 */}
+            <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
+                <Logo {...props} className='h-32' />
+                <div className='pt-2 px-2 font-sans'>
+                    <MenuButtonGroup allowCollapse={true} {...props} />
+                </div>
+                {CONFIG_NEXT.MENU_SEARCH && <div className='px-2 pt-2 font-sans'>
+                    <SearchInput {...props} />
+                </div>}
+            </section>
+        </section>
 
-    <div className='sticky top-4 hidden lg:block'>
-      <Card>
-        <Tabs>
-          {showToc && (
-            <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-hexo-black-gray duration-200'>
-              <Toc toc={post.toc} />
-            </div>
-          )}
+        <div className='sticky top-4 hidden lg:block'>
+            <Card>
+                <Tabs>
+                    {showToc && (
+                        <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-hexo-black-gray duration-200'>
+                            <Toc toc={post.toc} />
+                        </div>
+                    )}
 
-          <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-hexo-black-gray duration-200 py-6'>
-            <InfoCard {...props} />
-            <>
-              <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
-                <span className='px-1 '>
-                  <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
-                <span className='px-1 busuanzi_container_site_uv hidden'>
-                  | <strong className='pl-1 busuanzi_value_site_uv font-medium' />{locale.COMMON.VISITORS}</span>
-                {/* <span className='px-1 busuanzi_container_site_pv hidden'>
+                    <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-hexo-black-gray duration-200 py-6'>
+                        <InfoCard {...props} />
+                        <>
+                            <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
+                                <span className='px-1 '>
+                                    <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
+                                <span className='px-1 busuanzi_container_site_uv hidden'>
+                                    | <strong className='pl-1 busuanzi_value_site_uv font-medium' />{locale.COMMON.VISITORS}</span>
+                                {/* <span className='px-1 busuanzi_container_site_pv hidden'>
                 | <strong className='pl-1 busuanzi_value_site_pv font-medium'/>{locale.COMMON.VIEWS}</span> */}
-              </div>
-            </>
-          </div>
-        </Tabs>
-      </Card>
+                            </div>
+                        </>
+                    </div>
+                </Tabs>
+            </Card>
 
-      {slot && <div className='flex justify-center'>
-        {slot}
-      </div>}
-    </div>
+            {slot && <div className='flex justify-center'>
+                {slot}
+            </div>}
+        </div>
 
-  </aside>
+    </aside>
 }
 export default SideAreaLeft

themes/nobelium/LayoutBase.js

@@ -3,6 +3,7 @@ import React from 'react'
 import Nav from './components/Nav'
 import { Footer } from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
+import Live2D from '@/components/Live2D'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 
@@ -34,6 +35,11 @@ const LayoutBase = props => {
             <div className='fixed right-4 bottom-4'>
                 <JumpToTopButton />
             </div>
+
+            {/* 左下角悬浮 */}
+            <div className="bottom-4 -left-14 fixed justify-end z-40">
+                <Live2D />
+            </div>
         </div>
   )
 }