Merge branch 'main' into feat/theme-proxio

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');
+
+                // 查找所有 <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/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