update 4-18

README.md

@@ -12,7 +12,7 @@ here is the website->[ImagineBlog](https://forimagine.eu.org 'ImagineBlog')
 
 访问帮助：[NotionNext帮助手册](https://docs.tangly1024.com/)
 
-> 本项目教程为免费、公开资源，仅限个人学习使用。严禁任何个人或组织将本教程用于商业用途，包括但不限于直接售卖、间接收费、或其他变相盈利行为。转载、复制或介绍本教程内容时，须保留作者信息并明确注明来源。
+> 本项目教程为免费、公开资源，仅限个人学习使用，禁止利用本教程建立的博客发布非法内容、进行违法犯罪活动。严禁任何个人或组织将本教程用于商业用途，包括但不限于直接售卖、间接收费、或其他变相盈利行为。转载、复制或介绍本教程内容时，须保留作者信息并明确注明来源。 
 > 本项目仅提供由作者团队授权的付费咨询服务，请注意辨别，谨防诈骗行为。任何未经授权的收费服务均可能存在法律风险。
 
 Notion是一个能让效率暴涨的生产力引擎，可以帮你书写文档、管理笔记，搭建知识库，甚至可以为你规划项目、时间管理、组织团队、提高生产力、还有当前最强大的AI技术加持。
@@ -63,20 +63,11 @@ A static blog system built with NextJS and Notion API, deployed on Vercel. Desig
 
 ## Contributors
 
-<table>
-  <tr align="left">
-  <td align="center">
-  <a href="https://github.com/tangly1024" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/15920488" width="64px;"alt="tangly1024"/><br/><sub><b>tangly1024</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=tangly1024" title="Owner" >🎫 🔧 🐛</a>
-  </td> 
-
-  <td align="center">
-    <a href="https://github.com/uWayLu"  style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/21689326" width="64px;" alt="uWayLu"/><br/><sub><b>uWayLu</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=uWayLu" title="uWayLu" >🔧 🐛</a>
-  </td>
-
-  <td align="center">
-    <a href="https://github.com/txs" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/554329" width="64px;" alt="txs"/><br/><sub><b>txs</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=txs" title="txs" >🔧 🐛</a>
-  </td>
+感谢所有为 NotionNext 做出贡献的人！
 
+<<<<<<< HEAD
+[![Contributors](https://contrib.rocks/image?repo=tangly1024/NotionNext)](https://github.com/tangly1024/NotionNext/graphs/contributors)
+=======
   <td align="center">
     <a href="https://github.com/yuzhanglong" style="display:inline-block;width:80px"><img src="https://avatars.githubusercontent.com/u/56540811" width="64px;" alt="yuzhanglong"/><br/><sub><b>yuzhanglong</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=yuzhanglong" title="yuzhanglong" >🔧 🐛</a>
   </td> 
@@ -179,6 +170,7 @@ A static blog system built with NextJS and Notion API, deployed on Vercel. Desig
 
 </tr>
 </table>
+>>>>>>> d371156ad7ec1c8348365a5c983b2e04780a8180
 
 
 ## 引用技术

README_CN.md

@@ -52,6 +52,9 @@ You can set up your personal website in just a few minutes. Here is the link to
 
 ## 贡献者
 
+<<<<<<< HEAD:README_EN.md
+This project exists thanks to all the people who contribute.
+=======
 <table>
   <tr align="left">
   <td align="center">
@@ -188,7 +191,9 @@ You can set up your personal website in just a few minutes. Here is the link to
 
 </tr>
 </table>
+>>>>>>> d371156ad7ec1c8348365a5c983b2e04780a8180:README_CN.md
 
+[![Contributors](https://contrib.rocks/image?repo=tangly1024/NotionNext)](https://github.com/tangly1024/NotionNext/graphs/contributors)
 
 ## 引用技术
 

components/CursorDot.js

@@ -0,0 +1,107 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+/**
+ * 白点鼠标跟随
+ * @returns 
+ */
+const CursorDot = () => {
+    const router = useRouter();
+    useEffect(() => {
+        // 创建小白点元素
+        const dot = document.createElement('div');
+        dot.classList.add('cursor-dot');
+        document.body.appendChild(dot);
+
+        // 鼠标坐标和缓动目标坐标
+        let mouse = { x: -100, y: -100 }; // 初始位置在屏幕外
+        let dotPos = { x: mouse.x, y: mouse.y };
+
+        // 监听鼠标移动
+        const handleMouseMove = (e) => {
+            mouse.x = e.clientX;
+            mouse.y = e.clientY;
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+
+        // 监听鼠标悬停在可点击对象上的事件
+        const handleMouseEnter = () => {
+            dot.classList.add('cursor-dot-hover'); // 添加放大样式
+        };
+        const handleMouseLeave = () => {
+            dot.classList.remove('cursor-dot-hover'); // 移除放大样式
+        };
+
+
+        // 为所有可点击元素和包含 hover 或 group-hover 类名的元素添加事件监听
+        setTimeout(() => {
+            const clickableElements = document.querySelectorAll(
+                'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]'
+            );
+            clickableElements.forEach((el) => {
+                el.addEventListener('mouseenter', handleMouseEnter);
+                el.addEventListener('mouseleave', handleMouseLeave);
+            });
+        }, 200); // 延时 200ms 执行
+
+        // 动画循环：延迟更新小白点位置
+        const updateDotPosition = () => {
+            const damping = 0.2; // 阻尼系数，值越小延迟越明显
+            dotPos.x += (mouse.x - dotPos.x) * damping;
+            dotPos.y += (mouse.y - dotPos.y) * damping;
+
+            // 更新DOM
+            dot.style.left = `${dotPos.x}px`;
+            dot.style.top = `${dotPos.y}px`;
+
+            requestAnimationFrame(updateDotPosition);
+        };
+
+        // 启动动画
+        updateDotPosition();
+
+        // 清理函数
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            const clickableElements = document.querySelectorAll(
+                'a, button, [role="button"], [onclick], [cursor="pointer"], [class*="hover"], [class*="group-hover"], [class*="cursor-pointer"]'
+            );
+            clickableElements.forEach((el) => {
+                el.removeEventListener('mouseenter', handleMouseEnter);
+                el.removeEventListener('mouseleave', handleMouseLeave);
+            });
+            document.body.removeChild(dot);
+        };
+    }, [router]);
+
+    return (
+        <style jsx global>{`
+            .cursor-dot {
+                position: fixed;
+                width: 12px;
+                height: 12px;
+                background: white;
+                border-radius: 50%;
+                pointer-events: none;
+                transform: translate(-50%, -50%);
+                z-index: 9999;
+                transition: transform 100ms ease-out, width 200ms ease, height 200ms ease; /* 添加尺寸平滑过渡 */
+                mix-blend-mode: difference; /* 可选：增强对比度 */
+            }
+
+            .cursor-dot-hover {
+                border: 1px solid rgba(167, 167, 167, 0.14); /* 鼠标悬停时的深灰色边框，厚度为1px */
+                width: 60px; /* 放大 */
+                height: 60px; /* 放大 */
+                background: hsla(0, 0%, 100%, 0.04); /* 半透明背景 */
+                -webkit-backdrop-filter: blur(5px); /* 毛玻璃效果 */
+                backdrop-filter: blur(5px);
+            }
+
+            .dark .cursor-dot-hover {
+                border: 1px solid rgba(66, 66, 66, 0.66); /* 鼠标悬停时的深灰色边框，厚度为1px */
+            }
+        `}</style>
+    );
+};
+
+export default CursorDot;

components/ExternalPlugins.js

@@ -10,6 +10,9 @@ import { initGoogleAdsense } from './GoogleAdsense'
 import Head from 'next/head'
 import ExternalScript from './ExternalScript'
 import WebWhiz from './Webwhiz'
+import { useGlobal } from '@/lib/global'
+import IconFont from './IconFont'
+
 
 /**
  * 各种插件脚本
@@ -19,6 +22,7 @@ import WebWhiz from './Webwhiz'
 const ExternalPlugin = props => {
   // 读取自Notion的配置
   const { NOTION_CONFIG } = props
+  const {lang} = useGlobal()
   const DISABLE_PLUGIN = siteConfig('DISABLE_PLUGIN', null, NOTION_CONFIG)
   const THEME_SWITCH = siteConfig('THEME_SWITCH', null, NOTION_CONFIG)
   const DEBUG = siteConfig('DEBUG', null, NOTION_CONFIG)
@@ -124,6 +128,8 @@ const ExternalPlugin = props => {
     NOTION_CONFIG
   )
 
+  const ENABLE_ICON_FONT = siteConfig('ENABLE_ICON_FONT', false)
+
   // 自定义样式css和js引入
   if (isBrowser) {
     // 初始化AOS动画
@@ -165,8 +171,8 @@ const ExternalPlugin = props => {
     }
 
     setTimeout(() => {
-      // 将notion-id格式的url转成自定义slug
-      convertInnerUrl(props?.allNavPages)
+      // 映射url
+      convertInnerUrl({ allPages:props?.allNavPages, lang:lang })
     }, 500)
   }, [router])
 
@@ -184,6 +190,7 @@ const ExternalPlugin = props => {
     <>
       {/* 全局样式嵌入 */}
       <GlobalStyle />
+      {ENABLE_ICON_FONT && <IconFont />}
       {MOUSE_FOLLOW && <MouseFollow />}
       {THEME_SWITCH && <ThemeSwitch />}
       {DEBUG && <DebugPanel />}

components/IconFont.js

@@ -0,0 +1,56 @@
+import { siteConfig } from '@/lib/config'
+import { loadExternalResource } from '@/lib/utils'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * iconfont
+ */
+export default function IconFont() {
+    const router = useRouter()
+
+    useEffect(() => {
+        loadExternalResource('/webfonts/iconfont.js')
+            .then(u => {
+                console.log('iconfont loaded:', u);
+
+                // 查找所有 <i> 标签且 class 包含 'icon-'
+                const iElements = document.querySelectorAll('i[class*="icon-"]');
+                iElements.forEach(element => {
+                    const className = Array.from(element.classList).find(cls => cls.startsWith('icon-'));
+                    if (className) {
+                        // 创建新的 <svg> 元素
+                        const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                        svgElement.setAttribute('class', 'icon');
+                        svgElement.setAttribute('aria-hidden', 'true');
+
+                        const useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+                        useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#${className}`);
+                        svgElement.appendChild(useElement);
+
+                        // 替换原来的 <i> 元素
+                        element.replaceWith(svgElement);
+                        // console.log(`Replaced <i> with class "${className}" to <svg>`);
+                    }
+                });
+            })
+            .catch(error => {
+                console.warn('Failed to load iconfont.js:', error);
+            });
+    }, [router]);
+
+    return <style jsx global>
+        {`
+        .icon {
+            width: 1.1em;
+            height: 1.1em;
+            vertical-align: -0.15em;
+            fill: currentColor;
+            overflow: hidden;
+        }
+
+        svg.icon {
+            display: inline;
+        }
+        `}</style>
+}

components/LazyImage.js

@@ -129,20 +129,6 @@ export default function LazyImage({
           <link rel='preload' as='image' href={adjustImgSize(src, maxWidth)} />
         </Head>
       )}
-      <style>
-        {` 
-        .lazy-image-placeholder{
-            background: 
-                linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%)
-                #f2f2f2;
-            background-size:300% 100%;
-            animation: l1 1s infinite linear;
-            }
-            @keyframes l1 {
-            0% {background-position: right}
-        }
-        `}
-      </style>
     </>
   )
 }

components/Lenis.js

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from 'react'
+import { loadExternalResource } from '@/lib/utils'
+
+/**
+ * 滚动阻尼特效
+ * 目前只用在proxio主题
+ * @returns
+ */
+const Lenis = () => {
+  const lenisRef = useRef(null) // 用于存储 Lenis 实例
+
+  useEffect(() => {
+    // 异步加载
+    async function loadLenis() {
+      loadExternalResource('/js/lenis.js', 'js').then(() => {
+        // console.log('Lenis', window.Lenis)
+        if (!window.Lenis) {
+          console.error('Lenis not loaded')
+          return
+        }
+        const Lenis = window.Lenis
+
+        // 创建 Lenis 实例
+        const lenis = new Lenis({
+          duration: 1.2,
+          easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou
+          direction: 'vertical', // vertical, horizontal
+          gestureDirection: 'vertical', // vertical, horizontal, both
+          smooth: true,
+          mouseMultiplier: 1,
+          smoothTouch: false,
+          touchMultiplier: 2,
+          infinite: false,
+        })
+
+        // 存储实例到 ref
+        lenisRef.current = lenis
+
+        // 监听滚动事件
+        // lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
+        //   // console.log({ scroll, limit, velocity, direction, progress })
+        // })
+
+        // 动画帧循环
+        function raf(time) {
+          lenis.raf(time)
+          requestAnimationFrame(raf)
+        }
+
+        requestAnimationFrame(raf)
+      })
+    }
+
+    loadLenis()
+
+    return () => {
+      // 在组件卸载时清理资源
+      if (lenisRef.current) {
+        lenisRef.current.destroy() // 销毁 Lenis 实例
+        lenisRef.current = null
+        // console.log('Lenis instance destroyed')
+      }
+    }
+  }, [])
+
+  return <></>
+}
+
+export default Lenis

components/ShareButtons.js

@@ -37,6 +37,8 @@ import {
   TumblrShareButton,
   TwitterIcon,
   TwitterShareButton,
+  ThreadsIcon,
+  ThreadsShareButton,
   ViberIcon,
   ViberShareButton,
   VKIcon,
@@ -312,6 +314,16 @@ const ShareButtons = ({ post }) => {
                 <HatenaIcon size={32} round />
               </HatenaShareButton>
             )
+          case 'threads':
+            return (
+              <ThreadsShareButton
+                key={singleService}
+                url={shareUrl}
+                title={titleWithSiteInfo}
+                className='mx-1'>
+                <ThreadsIcon size={32} round />
+              </ThreadsShareButton>
+            )
           case 'qq':
             return (
               <button

lib/cache/cache_manager.js

@@ -40,7 +40,7 @@ export async function getOrSetDataWithCustomCache(
 ) {
   const dataFromCache = await getDataFromCache(key)
   if (dataFromCache) {
-    console.log('[缓存-->>API]:', key)
+    // console.log('[缓存-->>API]:', key) // 避免过多的缓存日志输出
     return dataFromCache
   }
   const data = await getDataFunction(...getDataArgs)