slug 调整兼容已有主题

themes/plog/components/BottomNav.js

@@ -1,10 +1,10 @@
+import FullScreenButton from '@/components/FullScreenButton'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { MenuItemDrop } from './MenuItemDrop'
-import FullScreenButton from '@/components/FullScreenButton'
 import InformationButton from './InformationButton'
 import LogoBar from './LogoBar'
-import { siteConfig } from '@/lib/config'
+import { MenuItemDrop } from './MenuItemDrop'
 
 /**
  * 桌面端底部导航
@@ -12,14 +12,20 @@ import { siteConfig } from '@/lib/config'
  * @returns
  */
 const BottomNav = props => {
-  return <>
-        <div id="bottom-nav" className={'dark:bg-black dark:bg-opacity-50z-20 px-4 hidden glassmorphism md:fixed bottom-0 w-screen py-4 md:flex flex-row justify-between items-center'}>
-            {/* 左侧logo文字栏 */}
-            <LogoBar {...props}/>
-            {/* 右下角菜单栏 */}
-            <MenuList {...props} />
-        </div>
+  return (
+    <>
+      <div
+        id='bottom-nav'
+        className={
+          'dark:bg-black dark:bg-opacity-50z-20 px-4 hidden glassmorphism md:fixed bottom-0 w-screen py-4 md:flex flex-row justify-between items-center'
+        }>
+        {/* 左侧logo文字栏 */}
+        <LogoBar {...props} />
+        {/* 右下角菜单栏 */}
+        <MenuList {...props} />
+      </div>
     </>
+  )
 }
 
 /**
@@ -32,11 +38,39 @@ const MenuList = props => {
 
   const { locale } = useGlobal()
   let links = [
-    { id: 2, name: locale.NAV.RSS, to: '/feed', show: siteConfig('ENABLE_RSS') && siteConfig('NOBELIUM_MENU_RSS', null, CONFIG), target: '_blank' },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG) }
+    {
+      id: 2,
+      name: locale.NAV.RSS,
+      href: '/feed',
+      show:
+        siteConfig('ENABLE_RSS') &&
+        siteConfig('NOBELIUM_MENU_RSS', null, CONFIG),
+      target: '_blank'
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG)
+    }
   ]
   if (customNav) {
     links = links.concat(customNav)
@@ -52,17 +86,19 @@ const MenuList = props => {
   }
 
   return (
-        <div className="flex-shrink-0">
-            <ul className="hidden md:flex flex-row">
-                {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
-                <li className='my-auto px-2'>
-                    <FullScreenButton />
-                </li>
-                <li className='my-auto px-2'>
-                    <InformationButton/>
-                </li>
-            </ul>
-        </div>
+    <div className='flex-shrink-0'>
+      <ul className='hidden md:flex flex-row'>
+        {links?.map((link, index) => (
+          <MenuItemDrop key={index} link={link} />
+        ))}
+        <li className='my-auto px-2'>
+          <FullScreenButton />
+        </li>
+        <li className='my-auto px-2'>
+          <InformationButton />
+        </li>
+      </ul>
+    </div>
   )
 }
 

themes/plog/components/MenuItemCollapse.js

@@ -33,7 +33,7 @@ export const MenuItemCollapse = props => {
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
-            href={link?.to}
+            href={link?.href}
             target={link?.target}
             className='font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
             <span className=' hover:text-red-400 transition-all items-center duration-200'>
@@ -71,7 +71,7 @@ export const MenuItemCollapse = props => {
               <div
                 key={index}
                 className='font-extralight dark:bg-black text-left px-10 justify-start  bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-xs'>{sLink.title}</span>
                 </Link>
               </div>

themes/plog/components/MenuItemDrop.js

@@ -16,7 +16,7 @@ export const MenuItemDrop = ({ link }) => {
       onMouseLeave={() => changeShow(false)}>
       {!hasSubMenu && (
         <div className='block text-black dark:text-gray-50 nav'>
-          <Link href={link?.to} target={link?.target}>
+          <Link href={link?.href} target={link?.target}>
             {link?.icon && <i className={link?.icon} />} {link?.name}
           </Link>
         </div>
@@ -39,7 +39,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='text-gray-700 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'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}

themes/plog/components/Modal.js

@@ -1,12 +1,10 @@
-import { Fragment, useRef, useState } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { usePlogGlobal } from '..'
 import { ArrowPath, ChevronLeft, ChevronRight } from '@/components/HeroIcons'
-import Link from 'next/link'
-import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
 import { compressImage } from '@/lib/notion/mapImage'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import { Dialog, Transition } from '@headlessui/react'
+import Link from 'next/link'
+import { Fragment, useRef, useState } from 'react'
+import { usePlogGlobal } from '..'
 
 /**
  * 弹出框
@@ -24,10 +22,6 @@ export default function Modal(props) {
   )
   const imgRef = useRef(null)
 
-  const url = checkContainHttp(modalContent?.slug)
-    ? sliceUrlFromHttp(modalContent?.slug)
-    : `${siteConfig('SUB_PATH', '')}/${modalContent?.slug}`
-
   // 添加loading状态
   const [loading, setLoading] = useState(true)
 
@@ -66,48 +60,44 @@ export default function Modal(props) {
   return (
     <Transition.Root show={showModal} as={Fragment}>
       <Dialog
-        as="div"
-        className="relative z-20"
+        as='div'
+        className='relative z-20'
         initialFocus={cancelButtonRef}
-        onClose={handleClose}
-      >
+        onClose={handleClose}>
         {/* 遮罩 */}
         <Transition.Child
           as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
+          enter='ease-out duration-300'
+          enterFrom='opacity-0'
+          enterTo='opacity-100'
+          leave='ease-in duration-200'
+          leaveFrom='opacity-100'
+          leaveTo='opacity-0'>
           <div
             style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
-            className="fixed inset-0 glassmorphism transition-opacity"
+            className='fixed inset-0 glassmorphism transition-opacity'
           />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-30 overflow-y-auto">
-          <div className="flex min-h-full justify-center p-4 text-center items-center">
+        <div className='fixed inset-0 z-30 overflow-y-auto'>
+          <div className='flex min-h-full justify-center p-4 text-center items-center'>
             <Transition.Child
               as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 scale-50 w-0"
+              enter='ease-out duration-300'
+              enterFrom='opacity-0 translate-y-4 scale-50 w-0'
               enterTo={'opacity-100 translate-y-0 max-w-screen'}
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 scale-100  max-w-screen"
-              leaveTo="opacity-0 translate-y-4 scale-50 w-0"
-            >
-              <Dialog.Panel className="group relative transform overflow-hidden rounded-xl text-left shadow-xl transition-all ">
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100 translate-y-0 scale-100  max-w-screen'
+              leaveTo='opacity-0 translate-y-4 scale-50 w-0'>
+              <Dialog.Panel className='group relative transform overflow-hidden rounded-xl text-left shadow-xl transition-all '>
                 {/* 添加onLoad事件处理函数 */}
                 {/* 添加loading状态 */}
                 <div
-                  className={`bg-hexo-black-gray w-32 h-32 flex justify-center items-center ${loading ? '' : 'hidden'}`}
-                >
-                  <ArrowPath className="w-10 h-10 animate-spin text-gray-200" />
+                  className={`bg-hexo-black-gray w-32 h-32 flex justify-center items-center ${loading ? '' : 'hidden'}`}>
+                  <ArrowPath className='w-10 h-10 animate-spin text-gray-200' />
                 </div>
 
-                <Link href={url}>
+                <Link href={modalContent?.href}>
                   <LazyImage
                     onLoad={handleImageLoad}
                     src={img}
@@ -119,12 +109,11 @@ export default function Modal(props) {
 
                 {!loading && (
                   <>
-                    <div className="absolute bottom-0 left-0 m-4 z-20">
-                      <div className="flex">
+                    <div className='absolute bottom-0 left-0 m-4 z-20'>
+                      <div className='flex'>
                         <h2
                           style={{ textShadow: '0.1em 0.1em 0.2em black' }}
-                          className="text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg"
-                        >
+                          className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>
                           {modalContent?.title}
                         </h2>
                       </div>
@@ -132,17 +121,15 @@ export default function Modal(props) {
                         style={{ textShadow: '0.1em 0.1em 0.2em black' }}
                         className={
                           'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2'
-                        }
-                      >
+                        }>
                         {modalContent?.summary}
                       </div>
 
                       {modalContent?.category && (
-                        <div className="flex">
+                        <div className='flex'>
                           <Link
                             href={`/category/${modalContent?.category}`}
-                            className="text-xs rounded-lg mt-3 px-2 py-1 bg-black bg-opacity-20 text-white hover:bg-blue-700 hover:text-white duration-200"
-                          >
+                            className='text-xs rounded-lg mt-3 px-2 py-1 bg-black bg-opacity-20 text-white hover:bg-blue-700 hover:text-white duration-200'>
                             {modalContent?.category}
                           </Link>
                         </div>
@@ -151,15 +138,13 @@ export default function Modal(props) {
                     {/* <div className="z-10 absolute hover:opacity-50 opacity-0 duration-200 transition-opacity w-full top-0 left-0 px-4 h-full items-center flex justify-between"> */}
                     <div
                       onClick={prev}
-                      className="z-10 absolute left-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity"
-                    >
-                      <ChevronLeft className="cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150" />
+                      className='z-10 absolute left-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity'>
+                      <ChevronLeft className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' />
                     </div>
                     <div
                       onClick={next}
-                      className="z-10 absolute right-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity"
-                    >
-                      <ChevronRight className="cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150" />
+                      className='z-10 absolute right-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity'>
+                      <ChevronRight className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' />
                     </div>
                     {/* </div> */}
                   </>

themes/plog/components/Nav.js

@@ -1,41 +1,55 @@
-import { useRef, useState } from 'react'
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
-import { SvgIcon } from './SvgIcon'
-import { MenuItemDrop } from './MenuItemDrop'
 import Collapse from '@/components/Collapse'
-import { MenuItemCollapse } from './MenuItemCollapse'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRef, useState } from 'react'
+import CONFIG from '../config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import { MenuItemDrop } from './MenuItemDrop'
+import { SvgIcon } from './SvgIcon'
 
 const Header = props => {
   const { fullWidth, siteInfo } = props
 
   const title = siteConfig('TITLE')
 
-  return <div className='md:hidden fixed top-0 w-full z-20'>
-        <div id="sticky-nav"
-            className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8  glassmorphism ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
-                }`} >
-                <Link href="/" aria-label={siteConfig('title')} className="flex items-center">
-                    <>
-                        <div className="h-6 w-6">
-                            {/* <SvgIcon/> */}
-                            {siteConfig('NOBELIUM_NAV_NOTION_ICON', null, CONFIG)
-                              ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={siteConfig('AUTHOR')} />
-                              : <SvgIcon />}
+  return (
+    <div className='md:hidden fixed top-0 w-full z-20'>
+      <div
+        id='sticky-nav'
+        className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8  glassmorphism ${
+          !fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
+        }`}>
+        <Link
+          href='/'
+          aria-label={siteConfig('title')}
+          className='flex items-center'>
+          <>
+            <div className='h-6 w-6'>
+              {/* <SvgIcon/> */}
+              {siteConfig('NOBELIUM_NAV_NOTION_ICON', null, CONFIG) ? (
+                <LazyImage
+                  src={siteInfo?.icon}
+                  width={24}
+                  height={24}
+                  alt={siteConfig('AUTHOR')}
+                />
+              ) : (
+                <SvgIcon />
+              )}
+            </div>
+            <p className='ml-2 font-medium text-gray-800 dark:text-gray-300 header-name'>
+              {title}{' '}
+              {/* ,{' '}<span className="font-normal">{siteConfig('HOME_BANNER_IMAGE')}</span> */}
+            </p>
+          </>
+        </Link>
 
-                        </div>
-                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-                            {title}  {/* ,{' '}<span className="font-normal">{siteConfig('HOME_BANNER_IMAGE')}</span> */}
-                        </p>
-                    </>
-                </Link>
-
-            <NavBar {...props} />
-        </div>
+        <NavBar {...props} />
+      </div>
     </div>
+  )
 }
 
 const NavBar = props => {
@@ -48,11 +62,39 @@ const NavBar = props => {
 
   const { locale } = useGlobal()
   let links = [
-    { id: 2, name: locale.NAV.RSS, to: '/feed', show: siteConfig('ENABLE_RSS') && siteConfig('NOBELIUM_MENU_RSS', null, CONFIG), target: '_blank' },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG) }
+    {
+      id: 2,
+      name: locale.NAV.RSS,
+      href: '/feed',
+      show:
+        siteConfig('ENABLE_RSS') &&
+        siteConfig('NOBELIUM_MENU_RSS', null, CONFIG),
+      target: '_blank'
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('NOBELIUM_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('NOBELIUM_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('NOBELIUM_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('NOBELIUM_MENU_TAG', null, CONFIG)
+    }
   ]
   if (customNav) {
     links = links.concat(customNav)
@@ -68,18 +110,35 @@ const NavBar = props => {
   }
 
   return (
-        <div className="flex-shrink-0">
-            <ul className=" hidden md:flex flex-row">
-                {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
-            </ul>
-            <div className='md:hidden'><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
-                <Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
-                    <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
-                        {links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />)}
-                    </div>
-                </Collapse>
-            </div>
-        </div>
+    <div className='flex-shrink-0'>
+      <ul className=' hidden md:flex flex-row'>
+        {links?.map((link, index) => (
+          <MenuItemDrop key={index} link={link} />
+        ))}
+      </ul>
+      <div className='md:hidden'>
+        <i
+          onClick={toggleOpen}
+          className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
+        <Collapse
+          collapseRef={collapseRef}
+          isOpen={isOpen}
+          type='vertical'
+          className='fixed top-16 right-6'>
+          <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
+            {links?.map((link, index) => (
+              <MenuItemCollapse
+                key={index}
+                link={link}
+                onHeightChange={param =>
+                  collapseRef.current?.updateCollapseHeight(param)
+                }
+              />
+            ))}
+          </div>
+        </Collapse>
+      </div>
+    </div>
   )
 }