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

2026-05-21 23:16:48 +00:00 · 2024-11-27 14:14:07 +08:00
parent eb6ccb3290 5eee80cec2
commit ffe78a57cd
42 changed files with 197 additions and 183 deletions
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -27,7 +27,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
        key={post.id}
        data-aos='fade-up'
        data-aos-easing='ease-in-out'
-        data-aos-duration='800'
+        data-aos-duration='500'
        data-aos-once='false'
        data-aos-anchor-placement='top-bottom'
        id='blog-post-card'
--- a/themes/hexo/components/Footer.js
+++ b/themes/hexo/components/Footer.js
@@ -35,7 +35,7 @@ const Footer = ({ title }) => {
        <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>
          {title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}
        </h1>
-        <PoweredBy />
+        <PoweredBy className='justify-center' />
      </span>
      <br />
    </footer>
--- a/themes/magzine/components/Header.js
+++ b/themes/magzine/components/Header.js
@@ -147,10 +147,10 @@ export default function Header(props) {
        {!showSearchInput && (
          <>
            {/* 左侧图标Logo */}
-            <div className='flex gap-x-8 h-full'>
-              <LogoBar {...props} />
+            <div className='flex gap-x-2 lg:gap-x-4 h-full'>
+              <LogoBar className={'text-sm md:text-md lg:text-lg'} />
              {/* 桌面端顶部菜单 */}
-              <ul className='hidden md:flex items-center gap-x-4 py-1'>
+              <ul className='hidden md:flex items-center gap-x-4 py-1 text-sm md:text-md'>
                {links &&
                  links?.map((link, index) => (
                    <MenuItemDrop key={index} link={link} />
--- a/themes/magzine/components/LogoBar.js
+++ b/themes/magzine/components/LogoBar.js
@@ -1,12 +1,14 @@
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'

-export default function LogoBar(props) {
+export default function LogoBar({ className }) {
  return (
-    <div id='top-wrapper' className='w-full flex items-center '>
+    <div
+      id='top-wrapper'
+      className={`w-full flex items-center ${className || ''}`}>
      <Link
        href='/'
-        className='logo flex text-md font-semibold md:text-xl hover:bg-black hover:text-white p-2 rounded-xl duration-200 dark:text-gray-200'>
+        className='logo flex font-semibold hover:bg-black hover:text-white p-2 rounded-xl duration-200 dark:text-gray-200'>
        {/* <LazyImage
          src={siteInfo?.icon}
          width={24}
--- a/themes/magzine/components/MenuItemCollapse.js
+++ b/themes/magzine/components/MenuItemCollapse.js
@@ -17,10 +17,6 @@ export const MenuItemCollapse = props => {

  const router = useRouter()

-  if (!link || !link.show) {
-    return null
-  }
-
  const selected = router.pathname === link.href || router.asPath === link.href

  const toggleShow = () => {
@@ -36,6 +32,10 @@ export const MenuItemCollapse = props => {
    setOpen(false)
  }, [router])

+  if (!link || !link.show) {
+    return null
+  }
+
  return (
    <>
      <div
--- a/themes/magzine/components/MenuItemDrop.js
+++ b/themes/magzine/components/MenuItemDrop.js
@@ -22,13 +22,13 @@ export const MenuItemDrop = ({ link }) => {
      {hasSubMenu && (
        <div
          className={
-            'px-2 h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            'px-2 h-full whitespace-nowrap duration-300 justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
            (selected
              ? 'bg-gray-600 text-white hover:text-white'
              : 'hover:text-gray-600')
          }>
-          <div className='items-center flex gap-x-1'>
-            {link?.icon && <i className={link?.icon} />} {link?.name}
+          <div className='items-center flex'>
+            {link?.icon && <i className={`${link?.icon} pr-2`} />} {link?.name}
            <i
              className={`px-1 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
          </div>
@@ -52,15 +52,15 @@ export const MenuItemDrop = ({ link }) => {
      {/* 子菜单 */}
      {hasSubMenu && (
        <ul
-          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg p-4 `}>
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} p-1 absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg`}>
          {link?.subMenus?.map(sLink => {
            return (
              <li
                key={sLink.id}
-                className='dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
+                className='py-3 pr-6 hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-gray-200 tracking-widest transition-color duration-200 dark:border-gray-800 '>
                <Link href={sLink.href} target={link?.target}>
-                  <span className='text-sm'>
-                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                  <span className='text-sm ml-2'>
+                    {link?.icon && <i className={`${sLink?.icon} pr-2`}> </i>}
                    {sLink.title}
                  </span>
                </Link>
--- a/themes/magzine/components/PostListRecommend.js
+++ b/themes/magzine/components/PostListRecommend.js
@@ -14,10 +14,11 @@ import Swiper from './Swiper'
 const PostListRecommend = ({ latestPosts, allNavPages }) => {
  // 获取推荐文章
  const recommendPosts = getTopPosts({ latestPosts, allNavPages })
+  const title = siteConfig('MAGZINE_RECOMMEND_POST_TITLE', '', CONFIG)
+
  if (!recommendPosts || recommendPosts.length === 0) {
    return <PostListEmpty />
  }
-  const title = siteConfig('MAGZINE_RECOMMEND_POST_TITLE', '', CONFIG)

  return (
    <div className={`w-full py-10 px-2 bg-[#F6F6F1] dark:bg-black`}>
--- a/themes/starter/components/MenuItem.js
+++ b/themes/starter/components/MenuItem.js
@@ -42,7 +42,7 @@ export const MenuItem = ({ link }) => {
        <li className='submenu-item group relative whitespace-nowrap'>
          <button
            onClick={toggleSubMenu}
-            className={`cursor-pointer relative w-full px-8 flex items-center justify-between py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-8 lg:mr-0 lg:inline-flex lg:py-6 lg:pl-0 lg:pr-4 ${
+            className={`cursor-pointer relative px-8 flex items-center justify-between py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-8 lg:mr-0 lg:inline-flex lg:py-6 lg:pl-0 lg:pr-4 ${
              router.route === '/'
                ? 'lg:text-white lg:group-hover:text-white'
                : ''
--- a/themes/starter/style.js
+++ b/themes/starter/style.js
@@ -54,6 +54,11 @@ const Style = () => {
    color: rgb(55 88 249 / var(--tw-text-opacity));
    opacity: 1;
  }
+
+  #theme-starter .sticky #navbarCollapse li > button{
+    --tw-text-opacity: 1;
+    color: rgb(17 25 40 / var(--tw-text-opacity));
+  }
  
  :is(.dark #theme-starter .sticky #navbarCollapse li > a){
    --tw-text-opacity: 1;
@@ -64,7 +69,12 @@ const Style = () => {
    --tw-text-opacity: 1;
    color: rgb(55 88 249 / var(--tw-text-opacity));
  }
-  
+
+  :is(.dark #theme-starter .sticky #navbarCollapse li > button){
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+
  #navbarCollapse li .ud-menu-scroll.active{
    opacity: 0.7;
  }
--- a/themes/theme.js
+++ b/themes/theme.js
@@ -2,6 +2,7 @@ import BLOG, { LAYOUT_MAPPINGS } from '@/blog.config'
 import * as ThemeComponents from '@theme-components'
 import getConfig from 'next/config'
 import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
 import { getQueryParam, getQueryVariable, isBrowser } from '../lib/utils'

 // 在next.config.js中扫描所有主题
@@ -56,19 +57,20 @@ export const getThemeConfig = async themeQuery => {

 /**
 * 加载全局布局
- * @param {*} themeQuery
+ * @param {*} theme
 * @returns
 */
-export const getGlobalLayoutByTheme = themeQuery => {
-  if (themeQuery !== BLOG.THEME) {
+export const getBaseLayoutByTheme = theme => {
+  const LayoutBase = ThemeComponents['LayoutBase']
+  const isDefaultTheme = !theme || theme === BLOG.THEME
+  if (!isDefaultTheme) {
    return dynamic(
-      () =>
-        import(`@/themes/${themeQuery}`).then(m => m[getLayoutNameByPath(-1)]),
+      () => import(`@/themes/${theme}`).then(m => m['LayoutBase']),
      { ssr: true }
    )
-  } else {
-    return ThemeComponents[getLayoutNameByPath('-1')]
  }
+
+  return LayoutBase
 }

 /**
@@ -76,8 +78,8 @@ export const getGlobalLayoutByTheme = themeQuery => {
 * @param {*} props
 */
 export const DynamicLayout = props => {
-  const { router, theme } = props
-  const SelectedLayout = getLayoutByTheme({ router, theme })
+  const { theme, layoutName } = props
+  const SelectedLayout = getLayoutByTheme({ layoutName, theme })
  return <SelectedLayout {...props} />
 }

@@ -87,26 +89,31 @@ export const DynamicLayout = props => {
 * @param {*} theme
 * @returns
 */
-export const getLayoutByTheme = ({ router, theme }) => {
-  const themeQuery = getQueryParam(router.asPath, 'theme') || theme
-  const layoutName = getLayoutNameByPath(router.pathname, router.asPath)
+export const getLayoutByTheme = ({ layoutName, theme }) => {
+  // const layoutName = getLayoutNameByPath(router.pathname, router.asPath)
+  const LayoutComponents =
+    ThemeComponents[layoutName] || ThemeComponents.LayoutSlug
+
+  const router = useRouter()
+  const themeQuery = getQueryParam(router?.asPath, 'theme') || theme
  const isDefaultTheme = !themeQuery || themeQuery === BLOG.THEME

-  const loadThemeComponents = componentsSource => {
-    const components =
-      componentsSource[layoutName] || componentsSource.LayoutSlug
-    setTimeout(fixThemeDOM, isDefaultTheme ? 100 : 500) // 根据主题选择延迟时间
-    return components
-  }
-
-  if (isDefaultTheme) {
-    return loadThemeComponents(ThemeComponents)
-  } else {
+  // 加载非当前默认主题
+  if (!isDefaultTheme) {
+    const loadThemeComponents = componentsSource => {
+      const components =
+        componentsSource[layoutName] || componentsSource.LayoutSlug
+      setTimeout(fixThemeDOM, 500)
+      return components
+    }
    return dynamic(
      () => import(`@/themes/${themeQuery}`).then(m => loadThemeComponents(m)),
      { ssr: true }
    )
  }
+
+  setTimeout(fixThemeDOM, 100)
+  return LayoutComponents
 }

 /**
@@ -128,8 +135,6 @@ const fixThemeDOM = () => {
  if (isBrowser) {
    const elements = document.querySelectorAll('[id^="theme-"]')
    if (elements?.length > 1) {
-      elements[elements.length - 1].scrollIntoView()
-      // 删除前面的元素，只保留最后一个元素
      for (let i = 0; i < elements.length - 1; i++) {
        if (
          elements[i] &&
@@ -139,6 +144,7 @@ const fixThemeDOM = () => {
          elements[i].parentNode.removeChild(elements[i])
        }
      }
+      elements[0]?.scrollIntoView()
    }
  }
 }