slug改造-兼容simple主题

themes/simple/components/BlogItem.js

@@ -1,82 +1,122 @@
-import Link from 'next/link'
-import CONFIG from '../config'
-import TwikooCommentCount from '@/components/TwikooCommentCount'
-import { formatDateFmt } from '@/lib/utils/formatDate'
-import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
-import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
 import NotionIcon from '@/components/NotionIcon'
 import NotionPage from '@/components/NotionPage'
+import TwikooCommentCount from '@/components/TwikooCommentCount'
+import { siteConfig } from '@/lib/config'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+import CONFIG from '../config'
 
 export const BlogItem = props => {
   const { post } = props
   const showPageCover = siteConfig('SIMPLE_POST_COVER_ENABLE', false, CONFIG)
-  const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
   const showPreview = siteConfig('POST_LIST_PREVIEW') && post.blockMap
 
-  return <div key={post.id} className="h-42 my-6 pb-12 border-b dark:border-gray-800" >
-        {/* 文章标题 */}
+  return (
+    <div
+      key={post.id}
+      className='h-42 my-6 pb-12 border-b dark:border-gray-800'>
+      {/* 文章标题 */}
 
-        <div className='flex'>
-            <div className='article-cover h-full'>
-                {/* 图片封面 */}
-                {showPageCover && (
-                    <div className="overflow-hidden mr-2 w-56 h-full">
-                        <Link href={url} passHref legacyBehavior>
-                            <LazyImage src={post?.pageCoverThumbnail} className='w-56 h-full object-cover object-center group-hover:scale-110 duration-500' />
-                        </Link>
-                    </div>
-                )}
+      <div className='flex'>
+        <div className='article-cover h-full'>
+          {/* 图片封面 */}
+          {showPageCover && (
+            <div className='overflow-hidden mr-2 w-56 h-full'>
+              <Link href={post.href} passHref legacyBehavior>
+                <LazyImage
+                  src={post?.pageCoverThumbnail}
+                  className='w-56 h-full object-cover object-center group-hover:scale-110 duration-500'
+                />
+              </Link>
+            </div>
+          )}
+        </div>
+
+        <article className='article-info'>
+          <h2 className='mb-2'>
+            <Link
+              href={post.href}
+              className='blog-item-title font-bold text-black text-2xl menu-link'>
+              {siteConfig('POST_TITLE_ICON') && (
+                <NotionIcon icon={post.pageIcon} />
+              )}
+              {post.title}
+            </Link>
+          </h2>
+
+          {/* 文章信息 */}
+          <header className='mb-5 text-md text-gray-700 dark:text-gray-300 flex-wrap flex leading-6'>
+            <div className='space-x-2'>
+              <span>
+                {' '}
+                <a
+                  href={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)}
+                  className='p-1 hover:text-red-400 transition-all duration-200'>
+                  <i className='fa-regular fa-user'></i> {siteConfig('AUTHOR')}
+                </a>
+              </span>
+              <span>
+                <Link
+                  className='p-1 hover:text-red-400 transition-all duration-200'
+                  href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
+                  <i className='fa-regular fa-clock' />{' '}
+                  {post.date?.start_date || post.createdTime}
+                </Link>
+              </span>
+              <span>
+                <TwikooCommentCount post={post} />
+              </span>
             </div>
 
-            <article className='article-info'>
+            <div>
+              {post.category && (
+                <Link href={`/category/${post.category}`} className='p-1'>
+                  {' '}
+                  <span className='hover:text-red-400 transition-all duration-200'>
+                    <i className='fa-regular fa-folder mr-0.5' />
+                    {post.category}
+                  </span>
+                </Link>
+              )}
+              {post?.tags &&
+                post?.tags?.length > 0 &&
+                post?.tags.map(t => (
+                  <Link
+                    key={t}
+                    href={`/tag/${t}`}
+                    className=' hover:text-red-400 transition-all duration-200'>
+                    <span> /{t}</span>
+                  </Link>
+                ))}
+            </div>
+          </header>
 
-                <h2 className="mb-2">
-                    <Link
-                        href={url}
-                        className="blog-item-title font-bold text-black text-2xl menu-link">
-                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
-                    </Link>
-                </h2>
+          <main className='text-gray-700 dark:text-gray-300 leading-normal mb-6'>
+            {!showPreview && (
+              <>
+                {post.summary}
+                {post.summary && <span>...</span>}
+              </>
+            )}
+            {showPreview && post?.blockMap && (
+              <div className='overflow-ellipsis truncate'>
+                <NotionPage post={post} />
+                <hr className='border-dashed py-4' />
+              </div>
+            )}
+          </main>
+        </article>
+      </div>
 
-                {/* 文章信息 */}
-                <header className="mb-5 text-md text-gray-700 dark:text-gray-300 flex-wrap flex leading-6">
-                    <div className='space-x-2'>
-                        <span>  <a href={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)} className='p-1 hover:text-red-400 transition-all duration-200'><i className="fa-regular fa-user"></i> {siteConfig('AUTHOR')}</a></span>
-                        <span>
-                            <Link className='p-1 hover:text-red-400 transition-all duration-200' href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
-                                <i className="fa-regular fa-clock" /> {post.date?.start_date || post.createdTime}
-                            </Link>
-                        </span>
-                        <span><TwikooCommentCount post={post} /></span>
-                    </div>
-
-                    <div>
-                        {post.category && <Link href={`/category/${post.category}`} className='p-1'> <span className="hover:text-red-400 transition-all duration-200"><i className="fa-regular fa-folder mr-0.5" />{post.category}</span></Link>}
-                        {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <Link key={t} href={`/tag/${t}`} className=' hover:text-red-400 transition-all duration-200'><span > /{t}</span></Link>)}
-                    </div>
-                </header>
-
-                <main className="text-gray-700 dark:text-gray-300 leading-normal mb-6">
-                    {!showPreview && <>
-                        {post.summary}
-                        {post.summary && <span>...</span>}
-                    </>}
-                    {showPreview && post?.blockMap && (
-                        <div className="overflow-ellipsis truncate">
-                            <NotionPage post={post} />
-                            <hr className='border-dashed py-4' />
-                        </div>
-                    )}
-                </main>
-
-            </article>
-        </div>
-
-        <div className='block'>
-            <Link href={url} className='inline-block rounded-sm text-blue-600 dark:text-blue-300  text-xs dark:border-gray-800 border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
-                Continue Reading <i className="fa-solid fa-angle-right align-middle"></i>
-            </Link>
-        </div>
+      <div className='block'>
+        <Link
+          href={post.href}
+          className='inline-block rounded-sm text-blue-600 dark:text-blue-300  text-xs dark:border-gray-800 border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
+          Continue Reading{' '}
+          <i className='fa-solid fa-angle-right align-middle'></i>
+        </Link>
+      </div>
     </div>
+  )
 }

themes/simple/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='items-center flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
             <span className='text-blue-600 dark:text-blue-300 hover:text-red-400 transition-all items-center duration-200'>
@@ -72,7 +72,7 @@ export const MenuItemCollapse = props => {
               <div
                 key={index}
                 className='dark:bg-black text-left px-10 justify-start text-blue-600 dark:text-blue-300 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='ml-4 text-sm'>
                     {sLink?.icon && (
                       <span className='mr-2 w-4'>

themes/simple/components/MenuItemDrop.js

@@ -15,7 +15,7 @@ export const MenuItemDrop = ({ link }) => {
       onMouseOut={() => changeShow(false)}>
       {!hasSubMenu && (
         <Link
-          href={link?.to}
+          href={link?.href}
           target={link?.target}
           className=' menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
           {link?.icon && (
@@ -52,7 +52,7 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='not:last-child:border-b-0 border-b text-blue-600 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800  py-3 pr-6 pl-2'>
-                <Link href={sLink.to} target={link?.target}>
+                <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap'>
                     {sLink?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}

themes/simple/components/MenuList.js

@@ -18,7 +18,7 @@ export const MenuList = ({ customNav, customMenu }) => {
   const toggleIsOpen = () => {
     changeIsOpen(!isOpen)
   }
-  const closeMenu = (e) => {
+  const closeMenu = e => {
     changeIsOpen(false)
   }
   const router = useRouter()
@@ -29,10 +29,30 @@ export const MenuList = ({ customNav, customMenu }) => {
   })
 
   let links = [
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('SIMPLE_MENU_SEARCH', null, CONFIG) },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('SIMPLE_MENU_ARCHIVE', null, CONFIG) },
-    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('SIMPLE_MENU_CATEGORY', null, CONFIG) },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('SIMPLE_MENU_TAG', null, CONFIG) }
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('SIMPLE_MENU_SEARCH', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('SIMPLE_MENU_ARCHIVE', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-folder',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('SIMPLE_MENU_CATEGORY', null, CONFIG)
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('SIMPLE_MENU_TAG', null, CONFIG)
+    }
   ]
 
   if (customNav) {
@@ -48,25 +68,46 @@ export const MenuList = ({ customNav, customMenu }) => {
     return null
   }
 
-  return (<>
-        {/* 大屏模式菜单 */}
-        <div id='nav-menu-pc' className='hidden md:flex my-auto'>
-            {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
+  return (
+    <>
+      {/* 大屏模式菜单 */}
+      <div id='nav-menu-pc' className='hidden md:flex my-auto'>
+        {links?.map((link, index) => (
+          <MenuItemDrop key={index} link={link} />
+        ))}
+      </div>
+      {/* 移动端小屏菜单 */}
+      <div
+        id='nav-menu-mobile'
+        className='flex md:hidden my-auto justify-start'>
+        <div
+          onClick={toggleIsOpen}
+          className='cursor-pointer hover:text-red-400 transition-all duration-200'>
+          <i
+            className={`${isOpen && 'rotate-90'} transition-all duration-200 fa fa-bars mr-3`}
+          />
+          <span>{!isOpen ? 'MENU' : 'CLOSE'}</span>
         </div>
-        {/* 移动端小屏菜单 */}
-        <div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
-            <div onClick={toggleIsOpen} className='cursor-pointer hover:text-red-400 transition-all duration-200'>
-                <i className={`${isOpen && 'rotate-90'} transition-all duration-200 fa fa-bars mr-3`} />
-                <span>{!isOpen ? 'MENU' : 'CLOSE'}</span>
-            </div>
 
-            <Collapse collapseRef={collapseRef} className='absolute w-full top-12 left-0' isOpen={isOpen}>
-                <div id='menu-wrap' className='bg-white dark:border-hexo-black-gray border'>
-                {links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
-                </div>
-            </Collapse>
-        </div>
+        <Collapse
+          collapseRef={collapseRef}
+          className='absolute w-full top-12 left-0'
+          isOpen={isOpen}>
+          <div
+            id='menu-wrap'
+            className='bg-white dark:border-hexo-black-gray border'>
+            {links?.map((link, index) => (
+              <MenuItemCollapse
+                key={index}
+                link={link}
+                onHeightChange={param =>
+                  collapseRef.current?.updateCollapseHeight(param)
+                }
+              />
+            ))}
+          </div>
+        </Collapse>
+      </div>
     </>
-
   )
 }