Next 主题优化

2026-05-14 07:26:52 +00:00 · 2023-05-23 14:49:48 +08:00
parent 133bcd6aa7
commit e4c964e7b9
10 changed files with 88 additions and 55 deletions
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -201,8 +201,8 @@ nav {
 }

 .next #announcement-content *{
- font-size:12px !important;
- line-height:1.5 !important;
+ font-size:13px !important;
+ line-height:1.7 !important;
 }

 /* twikoo 评论区超链接样式 */
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -36,7 +36,7 @@
  --notion-yellow_background: rgb(251, 243, 219);
  --notion-orange_background: rgb(250, 235, 221);
  --notion-brown_background: rgb(233, 229, 227);
-  --notion-gray_background: rgb(235, 236, 237);
+  --notion-gray_background: rgb(241 241 239);
  --notion-green_background: rgb(219, 237, 219);
  --notion-default_background: rgba(227, 226, 224);

@@ -48,7 +48,7 @@
  --notion-yellow_background_co: rgba(251, 243, 219, 0.3);
  --notion-orange_background_co: rgba(250, 235, 221, 0.3);
  --notion-brown_background_co: rgba(233, 229, 227, 0.3);
-  --notion-gray_background_co: rgba(235, 236, 237, 0.3);
+  --notion-gray_background_co: rgba(241, 241, 239, 0.3);
  --notion-green_background_co: rgba(219, 237, 219, 0.3);
  --notion-default_background_co: rgba(227, 226, 224, 0.3);

--- a/themes/next/components/Announcement.js
+++ b/themes/next/components/Announcement.js
@@ -14,7 +14,11 @@ const Announcement = ({ post, className }) => {
                <i className="mr-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
            </div>
        </div>
-        {post && (<div id="announcement-content">
+        {post && (<div id="announcement-content" data-aos="fade-down"
+                    data-aos-duration="500"
+                    data-aos-delay="200"
+                    data-aos-once="true"
+                    data-aos-anchor-placement="top-bottom">
            <NotionPage post={post} className='text-center ' />
        </div>)}
    </>
--- a/themes/next/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -23,6 +23,10 @@ const BlogPostCard = ({ post, showSummary }) => {
          <Link
            href={`${BLOG.SUB_PATH}/${post.slug}`}
            passHref
+            data-aos="fade-down"
+            data-aos-duration="500"
+            data-aos-once="true"
+            data-aos-anchor-placement="top-bottom"
            className={`cursor-pointer hover:underline text-3xl ${showPreview ? 'text-center' : ''
              } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>

@@ -30,10 +34,13 @@ const BlogPostCard = ({ post, showSummary }) => {

          </Link>

-          <div
-            className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
-              } flex-wrap dark:text-gray-500 text-gray-400 `}
-          >
+          <div data-aos="fade-down"
+                data-aos-duration="500"
+                data-aos-delay="100"
+                data-aos-once="true"
+                data-aos-anchor-placement="top-bottom"
+                className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 `}>
+
            <div>
              {post.category && (
                <>
@@ -57,6 +64,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                </Link>
            </div>
            <TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>
+
            <div className="hover:text-blue-500 dark:hover:text-blue-400  md:flex-nowrap flex-wrap md:justify-start inline-block">
                {post.tagItems?.map(tag => (
                  <TagItemMini key={tag.name} tag={tag} />
@@ -65,7 +73,12 @@ const BlogPostCard = ({ post, showSummary }) => {
          </div>

          {(!showPreview || showSummary) && !post.results && (
-            <p className="mt-4 mb-24 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+            <p data-aos="fade-down"
+                data-aos-duration="500"
+                data-aos-delay="100"
+                data-aos-once="true"
+                data-aos-anchor-placement="top-bottom"
+                className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
              {post.summary}
            </p>
          )}
@@ -80,7 +93,11 @@ const BlogPostCard = ({ post, showSummary }) => {
          )}

          {showPreview && post?.blockMap && (
-            <div className="overflow-ellipsis truncate">
+            <div data-aos="fade-down"
+            data-aos-duration="500"
+            data-aos-delay="100"
+            data-aos-once="true"
+            data-aos-anchor-placement="top-bottom"className="overflow-ellipsis truncate">
              <NotionPage post={post} />
            </div>
          )}
--- a/themes/next/components/Card.js
+++ b/themes/next/components/Card.js
@@ -1,10 +1,6 @@
-const Card = ({ children, headerSlot, className }) => {
-  return <div
-    data-aos="fade-down"
-    data-aos-duration="300"
-    data-aos-once="true"
-    data-aos-anchor-placement="top-bottom"
-    className={className}>
+const Card = (props) => {
+  const { children, headerSlot } = props
+  return <div {...props}>
    <>{headerSlot}</>
    <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
        {children}
--- a/themes/next/components/Logo.js
+++ b/themes/next/components/Logo.js
@@ -4,12 +4,21 @@ import React from 'react'
 const Logo = props => {
  const { siteInfo, className } = props
  return (
-    <Link href='/' passHref legacyBehavior>
-      <div className={'flex flex-col justify-center items-center cursor-pointer bg-black dark:bg-gray-800 space-y-3 font-bold ' + className}>
-        <div className='font-serif text-xl text-white'> {siteInfo?.title}</div>
-        <div className='text-sm text-gray-300 font-light text-center'> {siteInfo?.description}</div>
-      </div>
-    </Link>
-  );
+        <Link href='/' passHref legacyBehavior>
+            <div className={'flex flex-col justify-center items-center cursor-pointer bg-black dark:bg-gray-800 space-y-3 font-bold ' + className}>
+                <div data-aos="fade-down"
+                    data-aos-duration="500"
+                    data-aos-once="true"
+                    data-aos-anchor-placement="top-bottom"
+                    className='font-serif text-xl text-white'> {siteInfo?.title}</div>
+                <div data-aos="fade-down"
+                    data-aos-duration="500"
+                    data-aos-delay="300"
+                    data-aos-once="true"
+                    data-aos-anchor-placement="top-bottom"
+                    className='text-sm text-gray-300 font-light text-center'> {siteInfo?.description}</div>
+            </div>
+        </Link>
+  )
 }
 export default Logo
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -34,7 +34,12 @@ export const MenuList = (props) => {
  return (
        <>
            {/* 大屏模式菜单 */}
-            <nav id='nav' className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
+            <nav id='nav' data-aos="fade-down"
+                data-aos-duration="500"
+                data-aos-delay="400"
+                data-aos-once="true"
+                data-aos-anchor-placement="top-bottom"
+                className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
                {links.map(link => link && link.show && <MenuItemDrop key={link?.to} link={link} />)}
            </nav>

--- a/themes/next/components/SearchInput.js
+++ b/themes/next/components/SearchInput.js
@@ -41,11 +41,11 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
    searchInputRef.current.value = ''
    setShowClean(false)
  }
-  function lockSearchInput () {
+  function lockSearchInput() {
    lock = true
  }

-  function unLockSearchInput () {
+  function unLockSearchInput() {
    lock = false
  }
  const [showClean, setShowClean] = useState(false)
@@ -61,31 +61,36 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
    }
  }

-  return <div className='flex w-full bg-gray-100'>
-  <input
-    ref={searchInputRef}
-    type='text'
-    placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-    className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
-    onKeyUp={handleKeyUp}
-    onCompositionStart={lockSearchInput}
-    onCompositionUpdate={lockSearchInput}
-    onCompositionEnd={unLockSearchInput}
-    onChange={e => updateSearchKey(e.target.value)}
-    defaultValue={currentSearch || ''}
-  />
+  return <div data-aos="fade-down"
+        data-aos-duration="500"
+        data-aos-delay="200"
+        data-aos-once="true"
+        data-aos-anchor-placement="top-bottom"
+        className='flex w-full bg-gray-100'>
+        <input
+            ref={searchInputRef}
+            type='text'
+            placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
+            className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
+            onKeyUp={handleKeyUp}
+            onCompositionStart={lockSearchInput}
+            onCompositionUpdate={lockSearchInput}
+            onCompositionEnd={unLockSearchInput}
+            onChange={e => updateSearchKey(e.target.value)}
+            defaultValue={currentSearch || ''}
+        />

-  <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
-    onClick={handleSearch}>
-      <i className={`hover:text-black transform duration-200  text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
-  </div>
+        <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
+            onClick={handleSearch}>
+            <i className={`hover:text-black transform duration-200  text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
+        </div>

-  {(showClean &&
-    <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
-      <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
+        {(showClean &&
+            <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
+                <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
+            </div>
+        )}
    </div>
-    )}
-</div>
 }

 export default SearchInput
--- a/themes/next/components/SideAreaLeft.js
+++ b/themes/next/components/SideAreaLeft.js
@@ -26,14 +26,10 @@ const SideAreaLeft = props => {
  return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-20 relative'}>

        <section
-            data-aos="fade-down"
-            data-aos-duration="300"
-            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' />
+                <Logo className='h-32' {...props} />
                <div className='pt-2 px-2 font-sans'>
                    <MenuList allowCollapse={true} {...props} />
                </div>
--- a/themes/next/components/SideAreaRight.js
+++ b/themes/next/components/SideAreaRight.js
@@ -43,6 +43,7 @@ const SideAreaRight = (props) => {
        </Card>}

        <div className="sticky top-0 space-y-4 w-full">
+
            {announcementVisible && <Card>
                <Announcement post={notice} />
            </Card>}