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

.env.local

@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.7.1
+NEXT_PUBLIC_VERSION=4.7.2
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.7.1",
+  "version": "4.7.2",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

themes/heo/components/BlogPostCard.js

@@ -1,5 +1,5 @@
 import LazyImage from '@/components/LazyImage'
-import NotionIcon from '@/components/NotionIcon'
+import NotionIcon from './NotionIcon'
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import CONFIG from '../config'
@@ -29,7 +29,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
   return (
     <article
-      className={` ${COVER_HOVER_ENLARGE} ? ' hover:scale-110 transition-all duration-150' : ''}`}>
+      className={` ${COVER_HOVER_ENLARGE} ? ' hover:transition-all duration-150' : ''}`}>
       <div
         data-wow-delay='.2s'
         className={
@@ -48,7 +48,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 priority={index === 0}
                 src={post?.pageCoverThumbnail}
                 alt={post?.title}
-                className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'
+                className='h-full w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-500 ease-in-out' //宽高都调整为自适应,保证封面居中
               />
             </div>
           </Link>
@@ -74,15 +74,18 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
               </div>
             )}
 
-            {/* 标题 */}
+            {/* 标题和图标 */}
             <Link
               href={post?.href}
               passHref
               className={
                 ' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100  line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'
               }>
               {siteConfig('POST_TITLE_ICON') && (
-                <NotionIcon icon={post.pageIcon} />
+                <NotionIcon
+                icon={post.pageIcon}
+                className="heo-icon w-6 h-6 mr-1 align-middle transform translate-y-[-8%]" // 专门为 Heo 主题的图标设置样式
+              />
               )}
               <span className='menu-link '>{post.title}</span>
             </Link>

themes/heo/components/NotionIcon.js

@@ -0,0 +1,22 @@
+import LazyImage from '@/components/LazyImage'
+
+/**
+ * notion的图标icon
+ * 可能是emoji 可能是 svg 也可能是 图片
+ * @returns
+ */
+const NotionIcon = ({ icon, className = 'w-8 h-8 my-auto inline mr-1' }) => {
+  if (!icon) {
+    return <></>
+  }
+
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
+    // 这里优先使用传入的 className
+    return <LazyImage src={icon} className={className} />
+  }
+
+  // 对于 emoji 或 svg，设置默认 className，也可以传递不同的样式
+  return <span className={`inline-block ${className}`}>{icon}</span>
+}
+
+export default NotionIcon

themes/magzine/components/Catalog.js

@@ -53,6 +53,7 @@ const Catalog = ({ toc, className }) => {
       setActiveSection(currentSectionId)
       const index = tocIds.indexOf(currentSectionId) || 0
       tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+      console.log(tRef?.current)
     }, throttleMs)
   )
 
@@ -67,7 +68,7 @@ const Catalog = ({ toc, className }) => {
         <Progress />
       </div>
       <div
-        className='overflow-y-auto max-h-44 overscroll-none scroll-hidden'
+        className='overflow-y-auto scroll-hidden lg:max-h-dvh max-h-44'
         ref={tRef}>
         <nav className='h-full  text-black'>
           {toc.map(tocItem => {

themes/magzine/components/TocDrawer.js → themes/magzine/components/CatalogFloat.js

@@ -1,5 +1,6 @@
 import { useMagzineGlobal } from '..'
 import Catalog from './Catalog'
+import CatalogFloatButton from './CatalogFloatButton'
 
 /**
  * 悬浮抽屉目录
@@ -8,14 +9,21 @@ import Catalog from './Catalog'
  * @returns {JSX.Element}
  * @constructor
  */
-const TocDrawer = ({ post, cRef }) => {
+const CatalogFloat = ({ post, cRef }) => {
   const { tocVisible, changeTocVisible } = useMagzineGlobal()
   const switchVisible = () => {
     changeTocVisible(!tocVisible)
   }
   return (
-    <>
-      <div id='medium-toc-float' className='fixed top-0 right-0 z-40'>
+    <div className='lg:hidden'>
+      <div
+        onClick={() => {
+          changeTocVisible(true)
+        }}
+        className='fixed right-0 bottom-24 z-20 shadow bg-white dark:bg-hexo-black-gray'>
+        {!tocVisible && <CatalogFloatButton />}
+      </div>
+      <div id='magzine-toc-float' className='fixed top-0 right-0 z-40'>
         {/* 侧边菜单 */}
         <div
           className={
@@ -26,7 +34,7 @@ const TocDrawer = ({ post, cRef }) => {
           }>
           {post && (
             <>
-              <div className='dark:text-gray-400 text-gray-600 h-56'>
+              <div className='dark:text-gray-400 text-gray-600 h-56 px-2'>
                 <Catalog toc={post.toc} />
               </div>
             </>
@@ -42,7 +50,7 @@ const TocDrawer = ({ post, cRef }) => {
         }
         onClick={switchVisible}
       />
-    </>
+    </div>
   )
 }
-export default TocDrawer
+export default CatalogFloat

themes/magzine/components/CatalogFloatButton.js

@@ -0,0 +1,28 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+/**
+ * 移动端点击召唤目录抽屉
+ * 当屏幕下滑500像素后会出现该控件
+ * @param props 父组件传入props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogFloatButton = props => {
+  const { locale } = useGlobal()
+  // 用此配置可以关闭
+  if (!siteConfig('Magzine_WIDGET_TOC', true, CONFIG)) {
+    return <></>
+  }
+  return (
+    <div
+      onClick={props.onClick}
+      className='py-5 px-5 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center'
+      title={locale.POST.TOP}>
+      <i className='fas fa-list-ol' />
+    </div>
+  )
+}
+
+export default CatalogFloatButton

themes/magzine/index.js

@@ -17,6 +17,7 @@ import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BannerFullWidth from './components/BannerFullWidth'
 import Catalog from './components/Catalog'
+import CatalogFloat from './components/CatalogFloat'
 import CategoryGroup from './components/CategoryGroup'
 import Footer from './components/Footer'
 import Header from './components/Header'
@@ -31,7 +32,6 @@ import PostSimpleListHorizontal from './components/PostListSimpleHorizontal'
 import PostNavAround from './components/PostNavAround'
 import TagGroups from './components/TagGroups'
 import TagItemMini from './components/TagItemMini'
-import TocDrawer from './components/TocDrawer'
 import TouchMeCard from './components/TouchMeCard'
 import CONFIG from './config'
 import { Style } from './style'
@@ -245,6 +245,9 @@ const LayoutSlug = props => {
                   <AdSlot />
                 </div>
 
+                {/* 留白 */}
+                <div></div>
+
                 {/* 文章分类区块 */}
                 <div>
                   <CategoryGroup {...props} />
@@ -264,7 +267,7 @@ const LayoutSlug = props => {
             </div>
 
             {/* 移动端目录 */}
-            <TocDrawer {...props} />
+            <CatalogFloat {...props} />
           </div>
         )}
       </div>