Magzine主题调整

themes/magzine/components/ArticleInfo.js

@@ -10,7 +10,7 @@ import TagItemMini from './TagItemMini'
  * @returns
  */
 export default function ArticleInfo(props) {
-  const { post, siteInfo } = props
+  const { post } = props
 
   return (
     <>

themes/magzine/components/Footer.js

@@ -8,6 +8,7 @@ import PoweredBy from '@/components/PoweredBy'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
+import CONFIG from '../config'
 import SocialButton from './SocialButton'
 
 /**
@@ -15,7 +16,7 @@ import SocialButton from './SocialButton'
  */
 const Footer = ({ title }) => {
   const { siteInfo } = useGlobal()
-  const MAGZINE_FOOTER_LINKS = siteConfig('MAGZINE_FOOTER_LINKS', [])
+  const MAGZINE_FOOTER_LINKS = siteConfig('MAGZINE_FOOTER_LINKS', [], CONFIG)
 
   return (
     <footer

themes/magzine/components/Header.js

@@ -20,7 +20,7 @@ import { MenuItemDrop } from './MenuItemDrop'
  */
 export default function Header(props) {
   const { customNav, customMenu } = props
-  const [isOpen, changeShow] = useState(false)
+  const [isOpen, setOpen] = useState(false)
   const collapseRef = useRef(null)
   const lastScrollY = useRef(0) // 用于存储上一次的滚动位置
   const { locale } = useGlobal()
@@ -57,13 +57,13 @@ export default function Header(props) {
   let links = defaultLinks.concat(customNav)
 
   const toggleMenuOpen = () => {
-    changeShow(!isOpen)
+    setOpen(!isOpen)
   }
 
   // 向下滚动时，调整导航条高度
   useEffect(() => {
     scrollTrigger()
-    changeShow(false)
+    setOpen(false)
     window.addEventListener('scroll', scrollTrigger)
     return () => {
       window.removeEventListener('scroll', scrollTrigger)
@@ -216,7 +216,7 @@ export default function Header(props) {
         collapseRef={collapseRef}
         isOpen={isOpen}
         className='md:hidden'>
-        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
+        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2'>
           <MenuBarMobile
             {...props}
             onHeightChange={param =>

themes/magzine/components/MenuItemCollapse.js

@@ -10,10 +10,10 @@ import { useEffect, useState } from 'react'
  */
 export const MenuItemCollapse = props => {
   const { link } = props
-  const [show, changeShow] = useState(false)
+  const [show, setShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
-  const [isOpen, changeIsOpen] = useState(false)
+  const [isOpen, setOpen] = useState(false)
 
   const router = useRouter()
 
@@ -24,16 +24,16 @@ export const MenuItemCollapse = props => {
   const selected = router.pathname === link.href || router.asPath === link.href
 
   const toggleShow = () => {
-    changeShow(!show)
+    setShow(!show)
   }
 
   const toggleOpenSubMenu = () => {
-    changeIsOpen(!isOpen)
+    setOpen(!isOpen)
   }
 
   // 路由切换时菜单收起
   useEffect(() => {
-    changeIsOpen(false)
+    setOpen(false)
   }, [router])
 
   return (

themes/magzine/components/PostItemCardTop.js

@@ -4,6 +4,7 @@ import NotionPage from '@/components/NotionPage'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
+import CONFIG from '../config'
 import CategoryItem from './CategoryItem'
 import TagItemMini from './TagItemMini'
 
@@ -13,7 +14,8 @@ import TagItemMini from './TagItemMini'
  * @returns
  */
 const PostItemCardTop = ({ post, showSummary }) => {
-  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post?.blockMap
+  const showPreview =
+    siteConfig('MAGZINE_POST_LIST_PREVIEW', true, CONFIG) && post?.blockMap
   const { locale } = useGlobal()
   return (
     <div
@@ -24,24 +26,24 @@ const PostItemCardTop = ({ post, showSummary }) => {
       // data-aos-anchor-placement='top-bottom'
       className='mb-6 max-w-screen-3xl '>
       <div className='flex flex-col w-full'>
-        {siteConfig('MAGZINE_POST_LIST_COVER') && post?.pageCoverThumbnail && (
-          <Link
-            href={post?.href || ''}
-            passHref
-            className={
-              'cursor-pointer hover:underline text-4xl leading-tight  dark:text-gray-300  dark:hover:text-gray-400'
-            }>
-            <div className='w-full max-h-80 object-cover overflow-hidden mb-2'>
-              <LazyImage
-                priority
-                alt={post?.title}
-                src={post?.pageCoverThumbnail}
-                style={post?.pageCoverThumbnail ? {} : { height: '0px' }}
-                className='w-full max-h-80 object-cover hover:scale-125 duration-150'
-              />
-            </div>
-          </Link>
-        )}
+        {siteConfig('MAGZINE_POST_LIST_COVER', true, CONFIG) &&
+          post?.pageCoverThumbnail && (
+            <Link
+              href={post?.href || ''}
+              passHref
+              className={
+                'cursor-pointer hover:underline text-4xl leading-tight  dark:text-gray-300  dark:hover:text-gray-400'
+              }>
+              <div className='w-full h-80 object-cover overflow-hidden mb-2'>
+                <LazyImage
+                  priority
+                  alt={post?.title}
+                  src={post?.pageCoverThumbnail}
+                  className='w-full h-80 object-cover hover:scale-125 duration-150'
+                />
+              </div>
+            </Link>
+          )}
 
         <div className='flex py-2 mr-2 items-center'>
           {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (

themes/magzine/components/PostListRecommend.js

@@ -1,4 +1,5 @@
 import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
 import PostItemCard from './PostItemCard'
 import PostListEmpty from './PostListEmpty'
 import Swiper from './Swiper'
@@ -16,7 +17,7 @@ const PostListRecommend = ({ latestPosts, allNavPages }) => {
   if (!recommendPosts || recommendPosts.length === 0) {
     return <PostListEmpty />
   }
-  const title = siteConfig('MAGZINE_RECOMMEND_POST_TITLE')
+  const title = siteConfig('MAGZINE_RECOMMEND_POST_TITLE', '', CONFIG)
 
   return (
     <div className={`w-full py-10 px-2 bg-[#F6F6F1] dark:bg-black`}>

themes/magzine/components/TopNavBar.js

@@ -1,109 +0,0 @@
-import Collapse from '@/components/Collapse'
-import { siteConfig } from '@/lib/config'
-import { useGlobal } from '@/lib/global'
-import { useRef, useState } from 'react'
-import LogoBar from './LogoBar'
-import { MenuBarMobile } from './MenuBarMobile'
-import { MenuItemDrop } from './MenuItemDrop'
-
-/**
- * 顶部导航栏 + 菜单
- * @param {} param0
- * @returns
- */
-export default function TopNavBar(props) {
-  const { className, customNav, customMenu } = props
-  const [isOpen, changeShow] = useState(false)
-  const collapseRef = useRef(null)
-
-  const { locale } = useGlobal()
-
-  const defaultLinks = [
-    {
-      icon: 'fas fa-th',
-      name: locale.COMMON.CATEGORY,
-      href: '/category',
-      show: siteConfig('MAGZINE_MENU_CATEGORY')
-    },
-    {
-      icon: 'fas fa-tag',
-      name: locale.COMMON.TAGS,
-      href: '/tag',
-      show: siteConfig('MAGZINE_MENU_TAG')
-    },
-    {
-      icon: 'fas fa-archive',
-      name: locale.NAV.ARCHIVE,
-      href: '/archive',
-      show: siteConfig('MAGZINE_MENU_ARCHIVE')
-    },
-    {
-      icon: 'fas fa-search',
-      name: locale.NAV.SEARCH,
-      href: '/search',
-      show: siteConfig('MAGZINE_MENU_SEARCH')
-    }
-  ]
-
-  let links = defaultLinks.concat(customNav)
-
-  const toggleMenuOpen = () => {
-    changeShow(!isOpen)
-  }
-
-  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (siteConfig('CUSTOM_MENU')) {
-    links = customMenu
-  }
-
-  if (!links || links.length === 0) {
-    return null
-  }
-
-  return (
-    <div
-      id='top-nav'
-      className={'sticky top-0 lg:relative w-full z-40 ' + className}>
-      {/* 移动端折叠菜单 */}
-      <Collapse
-        type='vertical'
-        collapseRef={collapseRef}
-        isOpen={isOpen}
-        className='md:hidden'>
-        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
-          <MenuBarMobile
-            {...props}
-            onHeightChange={param =>
-              collapseRef.current?.updateCollapseHeight(param)
-            }
-          />
-        </div>
-      </Collapse>
-
-      {/* 导航栏菜单 */}
-      <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
-        {/* 左侧图标Logo */}
-        <LogoBar {...props} />
-
-        {/* 折叠按钮、仅移动端显示 */}
-        <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-          <div onClick={toggleMenuOpen} className='cursor-pointer'>
-            {isOpen ? (
-              <i className='fas fa-times' />
-            ) : (
-              <i className='fas fa-bars' />
-            )}
-          </div>
-        </div>
-
-        {/* 桌面端顶部菜单 */}
-        <div className='hidden md:flex'>
-          {links &&
-            links?.map((link, index) => (
-              <MenuItemDrop key={index} link={link} />
-            ))}
-        </div>
-      </div>
-    </div>
-  )
-}

themes/magzine/index.js

@@ -134,14 +134,14 @@ const LayoutIndex = props => {
  */
 const LayoutPostList = props => {
   // 当前筛选的分类或标签
-  const { category, tag } = props
+  const { category, tag, NOTION_CONFIG } = props
 
   return (
     <div className=' max-w-screen-3xl mx-auto w-full px-2 lg:px-0'>
       {/* 一个顶部条 */}
       <h2 className='py-8 text-2xl font-bold'>{category || tag}</h2>
 
-      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+      {siteConfig('POST_LIST_STYLE', 'page', NOTION_CONFIG) === 'page' ? (
         <PostListPage {...props} />
       ) : (
         <PostListScroll {...props} />
@@ -162,7 +162,7 @@ const LayoutSlug = props => {
   const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
   useEffect(() => {
     // 404
-    if (!post) {
+    if (!post && router?.route?.indexOf('/[prefix]') === 0) {
       setTimeout(() => {
         if (isBrowser) {
           const article = document.querySelector(
@@ -176,7 +176,7 @@ const LayoutSlug = props => {
         }
       }, waiting404)
     }
-  }, [post])
+  }, [router])
 
   return (
     <>
@@ -187,97 +187,107 @@ const LayoutSlug = props => {
         {/* 文章锁 */}
         {lock && <ArticleLock validPassword={validPassword} />}
 
-        {!lock && post && (
+        {!lock && (
           <div className='w-full max-w-screen-3xl mx-auto'>
-            {/* 文章信息 */}
-            <ArticleInfo {...props} />
+            {post && (
+              <>
+                {/* 文章信息 */}
+                <ArticleInfo {...props} />
 
-            {/* 文章区块分为三列 */}
-            <div className='grid grid-cols-1 lg:grid-cols-5 gap-8 py-12'>
-              <div className='h-full lg:col-span-1 hidden lg:block'>
-                <Catalog
-                  post={post}
-                  toc={post?.toc || []}
-                  className='sticky top-20'
-                />
-              </div>
-
-              {/* Notion文章主体 */}
-              <article className='max-w-3xl lg:col-span-3 w-full mx-auto px-2 lg:px-0'>
-                <div id='article-wrapper'>
-                  <NotionPage post={post} />
-                </div>
-
-                {/* 文章底部区域  */}
-                <section>
-                  <div className='py-2 flex justify-end'>
-                    {siteConfig('MAGZINE_POST_DETAIL_TAG') &&
-                      post?.tagItems?.map(tag => (
-                        <TagItemMini key={tag.name} tag={tag} />
-                      ))}
+                {/* 文章区块分为三列 */}
+                <div className='grid grid-cols-1 lg:grid-cols-5 gap-8 py-12'>
+                  <div className='h-full lg:col-span-1 hidden lg:block'>
+                    <Catalog
+                      post={post}
+                      toc={post?.toc || []}
+                      className='sticky top-20'
+                    />
                   </div>
-                  {/* 分享 */}
-                  <ShareBar post={post} />
-                  {/* 上一篇下一篇 */}
-                  <PostNavAround prev={prev} next={next} />
 
-                  {/* 评论区 */}
-                  <Comment frontMatter={post} />
-                </section>
-              </article>
+                  {/* Notion文章主体 */}
+                  <article className='max-w-3xl lg:col-span-3 w-full mx-auto px-2 lg:px-0'>
+                    <div id='article-wrapper'>
+                      <NotionPage post={post} />
+                    </div>
 
-              <div className='lg:col-span-1 flex flex-col justify-between px-2 lg:px-0 space-y-2 lg:space-y-0'>
-                {/* meta信息 */}
-                <section className='text-lg gap-y-6 text-center lg:text-left'>
-                  <div className='text-gray-500 py-1 dark:text-gray-600 '>
-                    {/* <div className='whitespace-nowrap'>
-                      <i className='far fa-calendar mr-2' />
-                      {post?.publishDay}
-                    </div> */}
-                    <div className='whitespace-nowrap mr-2'>
-                      <i className='far fa-calendar-check mr-2' />
-                      {post?.lastEditedDay}
+                    {/* 文章底部区域  */}
+                    <section>
+                      <div className='py-2 flex justify-end'>
+                        {siteConfig('MAGZINE_POST_DETAIL_TAG') &&
+                          post?.tagItems?.map(tag => (
+                            <TagItemMini key={tag.name} tag={tag} />
+                          ))}
+                      </div>
+                      {/* 分享 */}
+                      <ShareBar post={post} />
+                      {/* 上一篇下一篇 */}
+                      <PostNavAround prev={prev} next={next} />
+
+                      {/* 评论区 */}
+                      <Comment frontMatter={post} />
+                    </section>
+                  </article>
+
+                  <div className='lg:col-span-1 flex flex-col justify-between px-2 lg:px-0 space-y-2 lg:space-y-0'>
+                    {/* meta信息 */}
+                    <section className='text-lg gap-y-6 text-center lg:text-left'>
+                      <div className='text-gray-500 py-1 dark:text-gray-600 '>
+                        {/* <div className='whitespace-nowrap'>
+          <i className='far fa-calendar mr-2' />
+          {post?.publishDay}
+        </div> */}
+                        <div className='whitespace-nowrap mr-2'>
+                          <i className='far fa-calendar-check mr-2' />
+                          {post?.lastEditedDay}
+                        </div>
+                        <div className='hidden busuanzi_container_page_pv  mr-2 whitespace-nowrap'>
+                          <i className='mr-1 fas fa-fire' />
+                          <span className='busuanzi_value_page_pv' />
+                        </div>
+                      </div>
+                    </section>
+
+                    {/* 最新文章区块 */}
+                    <div>
+                      <PostGroupLatest {...props} vertical={true} />
                     </div>
-                    <div className='hidden busuanzi_container_page_pv  mr-2 whitespace-nowrap'>
-                      <i className='mr-1 fas fa-fire' />
-                      <span className='busuanzi_value_page_pv' />
+
+                    {/* Adsense */}
+                    <div>
+                      <AdSlot />
                     </div>
+
+                    {/* 留白 */}
+                    <div></div>
+
+                    {/* 文章分类区块 */}
+                    <div>
+                      <CategoryGroup {...props} />
+                    </div>
+
+                    <div>
+                      <TouchMeCard />
+                    </div>
+
+                    <div>
+                      <WWAds />
+                    </div>
+
+                    {/* 底部留白 */}
+                    <div></div>
                   </div>
-                </section>
-
-                {/* 最新文章区块 */}
-                <div>
-                  <PostGroupLatest {...props} vertical={true} />
                 </div>
 
-                {/* Adsense */}
-                <div>
-                  <AdSlot />
-                </div>
+                {/* 移动端目录 */}
+                <CatalogFloat {...props} />
+              </>
+            )}
 
-                {/* 留白 */}
-                <div></div>
-
-                {/* 文章分类区块 */}
-                <div>
-                  <CategoryGroup {...props} />
-                </div>
-
-                <div>
-                  <TouchMeCard />
-                </div>
-
-                <div>
-                  <WWAds />
-                </div>
-
-                {/* 底部留白 */}
-                <div></div>
+            {!post && (
+              <div className='flex justify-center items-center w-full py-40'>
+                Loading...
               </div>
-            </div>
-
-            {/* 移动端目录 */}
-            <CatalogFloat {...props} />
+            )}
           </div>
         )}
       </div>