Merge branch 'main' of https://github.com/tangly1024/NotionNext

wensley · Sep 24, 2024 · 231658d · 231658d
2 parents 7edc74a + 99918c2
commit 231658d
Show file tree

Hide file tree

Showing 23 changed files with 1,008 additions and 1,069 deletions.
diff --git a/themes/magzine/components/CTA.js b/themes/magzine/components/CTA.js
@@ -0,0 +1,18 @@
+/**
+ * CTA，用于创建一个呼吁用户行动的部分（Call To Action，简称 CTA）。
+ * 该组件通过以下方式激励用户进行特定操作
+ * 用户的公告栏内容将在此显示
+ **/
+export default function CTA({ notice }) {
+  return (
+    <>
+      {/* 底部 */}
+      <Announcement
+        post={notice}
+        className={
+          'text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'
+        }
+      />
+    </>
+  )
+}
diff --git a/themes/magzine/index.js b/themes/magzine/index.js
@@ -12,10 +12,10 @@ import { isBrowser } from '@/lib/utils'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
-import Announcement from './components/Announcement'
 import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BannerFullWidth from './components/BannerFullWidth'
+import CTA from './components/CTA'
 import Catalog from './components/Catalog'
 import CatalogFloat from './components/CatalogFloat'
 import CategoryGroup from './components/CategoryGroup'
@@ -47,7 +47,7 @@ export const useMagzineGlobal = () => useContext(ThemeGlobalMagzine)
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, notice } = props
+  const { children } = props
   const [tocVisible, changeTocVisible] = useState(false)
   const searchModal = useRef(null)
 
@@ -69,13 +69,8 @@ const LayoutBase = props => {
             <div id='main' role='main'>
               {children}
             </div>
-            {/* 底部 */}
-            <Announcement
-              post={notice}
-              className={
-                'text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'
-              }
-            />
+            {/* 行动呼吁 */}
+            <CTA {...props} />
             <Footer title={siteConfig('TITLE')} />
           </div>
         </main>

diff --git a/themes/starter/components/About.js b/themes/starter/components/About.js
diff --git a/themes/starter/components/BackToTopButton.js b/themes/starter/components/BackToTopButton.js
@@ -1,41 +1,45 @@
-import throttle from 'lodash.throttle';
+import throttle from 'lodash.throttle'
 import { useCallback, useEffect } from 'react'
 
+/**
+ * 回顶按钮
+ * @returns
+ */
 export const BackToTopButton = () => {
   useEffect(() => {
     // ====== scroll top js
     function scrollTo(element, to = 0, duration = 500) {
-      const start = element.scrollTop;
-      const change = to - start;
-      const increment = 20;
-      let currentTime = 0;
+      const start = element.scrollTop
+      const change = to - start
+      const increment = 20
+      let currentTime = 0
 
       const animateScroll = () => {
-        currentTime += increment;
+        currentTime += increment
 
-        const val = Math.easeInOutQuad(currentTime, start, change, duration);
+        const val = Math.easeInOutQuad(currentTime, start, change, duration)
 
-        element.scrollTop = val;
+        element.scrollTop = val
 
         if (currentTime < duration) {
-          setTimeout(animateScroll, increment);
+          setTimeout(animateScroll, increment)
         }
-      };
+      }
 
-      animateScroll();
+      animateScroll()
     }
 
     Math.easeInOutQuad = function (t, b, c, d) {
-      t /= d / 2;
-      if (t < 1) return (c / 2) * t * t + b;
-      t--;
-      return (-c / 2) * (t * (t - 2) - 1) + b;
-    };
+      t /= d / 2
+      if (t < 1) return (c / 2) * t * t + b
+      t--
+      return (-c / 2) * (t * (t - 2) - 1) + b
+    }
     const backToTop = document.querySelector('.back-to-top')
     if (backToTop) {
       backToTop.onclick = () => {
-        scrollTo(document.documentElement);
-      };
+        scrollTo(document.documentElement)
+      }
     }
 
     window.addEventListener('scroll', navBarScollListener)
@@ -48,20 +52,22 @@ export const BackToTopButton = () => {
   const throttleMs = 200
   const navBarScollListener = useCallback(
     throttle(() => {
-      const scrollY = window.scrollY;
+      const scrollY = window.scrollY
       // 显示或隐藏返回顶部按钮
-      const backToTop = document.querySelector('.back-to-top');
+      const backToTop = document.querySelector('.back-to-top')
       if (backToTop) {
-        backToTop.style.display = scrollY > 50 ? 'flex' : 'none';
+        backToTop.style.display = scrollY > 50 ? 'flex' : 'none'
       }
     }, throttleMs)
   )
 
-  return <>
-        {/* <!-- ====== Back To Top Start --> */}
-        <a className="back-to-top fixed bottom-16 left-auto right-8 z-[999] hidden h-10 w-10 items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-dark">
-            <span className="mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white" ></span>
-         </a>
-    {/* <!-- ====== Back To Top End --> */}
+  return (
+    <>
+      {/* <!-- ====== Back To Top Start --> */}
+      <a className='back-to-top fixed bottom-16 left-auto right-8 z-[999] hidden h-10 w-10 items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-dark'>
+        <span className='mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white'></span>
+      </a>
+      {/* <!-- ====== Back To Top End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/Banner.js b/themes/starter/components/Banner.js
@@ -1,30 +1,25 @@
 /**
- * 详情页面顶部条
+ * 页面顶部宣传栏
  * @returns
  */
 export const Banner = ({ title, description }) => {
-  return <>
-    {/* <!-- ====== Banner Section Start --> */}
-    <div
-      className="relative z-10 overflow-hidden pb-[60px] pt-[120px] dark:bg-dark md:pt-[130px] lg:pt-[160px]"
-    >
-      <div
-        className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-stroke/0 via-stroke to-stroke/0 dark:via-dark-3"
-      ></div>
-      <div className="container">
-        <div className="flex flex-wrap items-center -mx-4">
-          <div className="w-full px-4">
-            <div className="text-center">
-              <h1
-                className="mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
-              >
-                {title}
-              </h1>
-              <p className="mb-5 text-base text-body-color dark:text-dark-6">
-                {description}
-              </p>
+  return (
+    <>
+      {/* <!-- ====== Banner Section Start --> */}
+      <div className='relative z-10 overflow-hidden pb-[60px] pt-[120px] dark:bg-dark md:pt-[130px] lg:pt-[160px]'>
+        <div className='absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-stroke/0 via-stroke to-stroke/0 dark:via-dark-3'></div>
+        <div className='container'>
+          <div className='flex flex-wrap items-center -mx-4'>
+            <div className='w-full px-4'>
+              <div className='text-center'>
+                <h1 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
+                  {title}
+                </h1>
+                <p className='mb-5 text-base text-body-color dark:text-dark-6'>
+                  {description}
+                </p>
 
-              {/* <ul className="flex items-center justify-center gap-[10px]">
+                {/* <ul className="flex items-center justify-center gap-[10px]">
                 <li>
                   <a
                     href="index.html"
@@ -43,11 +38,12 @@ export const Banner = ({ title, description }) => {
                   </a>
                 </li>
               </ul> */}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    {/* <!-- ====== Banner Section End --> */}
+      {/* <!-- ====== Banner Section End --> */}
     </>
+  )
 }
diff --git a/themes/starter/components/Blog.js b/themes/starter/components/Blog.js
@@ -1,7 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-import CONFIG from '../config'
 
 /**
  * 博文列表
@@ -19,14 +18,14 @@ export const Blog = ({ posts }) => {
             <div className='w-full px-4'>
               <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
                 <span className='mb-2 block text-lg font-semibold text-primary'>
-                  {siteConfig('STARTER_BLOG_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_BLOG_TITLE')}
                 </span>
                 <h2 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
-                  {siteConfig('STARTER_BLOG_TEXT_1', null, CONFIG)}
+                  {siteConfig('STARTER_BLOG_TEXT_1')}
                 </h2>
                 <p
                   dangerouslySetInnerHTML={{
-                    __html: siteConfig('STARTER_BLOG_TEXT_2', null, CONFIG)
+                    __html: siteConfig('STARTER_BLOG_TEXT_2')
                   }}
                   className='text-base text-body-color dark:text-dark-6'></p>
               </div>

diff --git a/themes/starter/components/Brand.js b/themes/starter/components/Brand.js
@@ -1,37 +1,39 @@
 /* eslint-disable @next/next/no-img-element */
 
-import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 合作伙伴
  * @returns
  */
 export const Brand = () => {
-  return <>
-
-    {/* <!-- ====== Brands Section Start --> */}
-    <section className="pb-20 dark:bg-dark">
-      <div className="container px-4">
-        <div
-          className="-mx-4 flex flex-wrap items-center justify-center gap-8 xl:gap-11"
-        >
-          {CONFIG.STARTER_BRANDS?.map((item, index) => {
-            return <a key={index} href={item.URL}>
-            <img
-              src={item.IMAGE}
-              alt={item.TITLE}
-              className="dark:hidden"
-            />
-            <img
-              src={item.IMAGE_WHITE}
-              alt={item.TITLE}
-              className="hidden dark:block"
-            />
-          </a>
-          })}
+  const brands = siteConfig('STARTER_BRANDS')
+  return (
+    <>
+      {/* <!-- ====== Brands Section Start --> */}
+      <section className='pb-20 dark:bg-dark'>
+        <div className='container px-4'>
+          <div className='-mx-4 flex flex-wrap items-center justify-center gap-8 xl:gap-11'>
+            {brands?.map((item, index) => {
+              return (
+                <a key={index} href={item.URL}>
+                  <img
+                    src={item.IMAGE}
+                    alt={item.TITLE}
+                    className='dark:hidden'
+                  />
+                  <img
+                    src={item.IMAGE_WHITE}
+                    alt={item.TITLE}
+                    className='hidden dark:block'
+                  />
+                </a>
+              )
+            })}
+          </div>
         </div>
-      </div>
-    </section>
-    {/* <!-- ====== Brands Section End --> */}
+      </section>
+      {/* <!-- ====== Brands Section End --> */}
     </>
+  )
 }