Merge pull request #3326 from tangly1024/fix/iconfont

Fix/iconfont

Author: tangly1024

components/ExternalPlugins.js

@@ -10,8 +10,10 @@ 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'
 
+
 /**
  * 各种插件脚本
  * @param {*} props
@@ -20,6 +22,7 @@ import IconFont from './IconFont'
 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)
@@ -168,8 +171,8 @@ const ExternalPlugin = props => {
     }
 
     setTimeout(() => {
-      // 将notion-id格式的url转成自定义slug
-      convertInnerUrl(props?.allNavPages)
+      // 映射url
+      convertInnerUrl({ allPages:props?.allNavPages, lang:lang })
     }, 500)
   }, [router])
 

components/IconFont.js

@@ -10,30 +10,34 @@ export default function IconFont() {
     const router = useRouter()
 
     useEffect(() => {
-        loadExternalResource('/webfonts/iconfont.js').then(u => {
-            console.log('iconfont loaded')
+        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');
+                // 查找所有 <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);
+                        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>`);
-                }
+                        // 替换原来的 <i> 元素
+                        element.replaceWith(svgElement);
+                        console.log(`Replaced <i> with class "${className}" to <svg>`);
+                    }
+                });
+            })
+            .catch(error => {
+                console.warn('Failed to load iconfont.js:', error);
             });
-        })
-    }, [router])
+    }, [router]);
 
     return <style jsx global>
         {`
@@ -43,12 +47,10 @@ export default function IconFont() {
             vertical-align: -0.15em;
             fill: currentColor;
             overflow: hidden;
-            
         }
 
         svg.icon {
             display: inline;
         }
-        
         `}</style>
 }

lib/global.js

@@ -8,12 +8,7 @@ import {
 import { useUser } from '@clerk/nextjs'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useState } from 'react'
-import {
-  generateLocaleDict,
-  initLocale,
-  redirectUserLang,
-  saveLangToLocalStorage
-} from './lang'
+import { generateLocaleDict, initLocale, redirectUserLang } from './lang'
 
 /**
  * 全局上下文
@@ -81,7 +76,6 @@ export function GlobalContextProvider(props) {
 
   function changeLang(lang) {
     if (lang) {
-      saveLangToLocalStorage(lang)
       updateLang(lang)
       updateLocale(generateLocaleDict(lang))
     }

lib/lang.js

@@ -8,6 +8,7 @@ import zhCN from './lang/zh-CN'
 import zhHK from './lang/zh-HK'
 import zhTW from './lang/zh-TW'
 import { extractLangPrefix } from './utils/pageId'
+import { useRouter } from 'next/router'
 
 /**
  * 在这里配置所有支持的语言
@@ -70,15 +71,9 @@ export function generateLocaleDict(langString) {
  */
 export function initLocale(locale, changeLang, updateLocale) {
   if (isBrowser) {
-    // 根据router中的locale对象判断当前语言：表现为前缀中包含 zh、en 等。
-    let pathLocaleLang = null
-    if (locale === 'en' || locale === 'zh') {
-      pathLocaleLang = locale === 'en' ? 'en-US' : 'zh-CN'
-    }
     // 如果有query参数切换语言则优先
     const queryLang =
-      getQueryVariable('locale') || getQueryVariable('lang') || pathLocaleLang
-
+      getQueryVariable('locale') || getQueryVariable('lang') || locale
     if (queryLang) {
       const match = queryLang.match(/[a-zA-Z]{2}(?:-[a-zA-Z]{2})?/)
       if (match) {
@@ -91,22 +86,6 @@ export function initLocale(locale, changeLang, updateLocale) {
   }
 }
 
-/**
- * 读取语言
- * @returns {*}
- */
-export const loadLangFromLocalStorage = () => {
-  return localStorage.getItem('lang')
-}
-
-/**
- * 保存语言
- * @param newTheme
- */
-export const saveLangToLocalStorage = lang => {
-  localStorage.setItem('lang', lang)
-}
-
 /**
  *  检测用户的预研偏好，跳转至对应的多语言网站
  * @param {*} lang
@@ -142,4 +121,4 @@ export const redirectUserLang = (lang, pageId) => {
       }
     }
   }
-}
+}

lib/notion/convertInnerUrl.js

@@ -1,4 +1,3 @@
-import { loadLangFromLocalStorage } from '@/lib/lang'
 import { idToUuid } from 'notion-utils'
 import { checkStrIsNotionId, getLastPartOfUrl, isBrowser } from '../utils'
 
@@ -7,7 +6,7 @@ import { checkStrIsNotionId, getLastPartOfUrl, isBrowser } from '../utils'
  * 1.若是本站域名，则在当前窗口打开、不开新窗口
  * 2.url是notion-id，转成站内文章链接
  */
-export const convertInnerUrl = allPages => {
+export const convertInnerUrl = ({ allPages, lang }) => {
   if (!isBrowser) {
     return
   }
@@ -18,11 +17,9 @@ export const convertInnerUrl = allPages => {
   if (!allAnchorTags) {
     return
   }
-
   const { origin, pathname } = window.location
   const currentURL = origin + pathname
   const currentPathLang = pathname.split('/').filter(Boolean)[0]
-  const lang = loadLangFromLocalStorage().split(/[-_]/)[0]
   const langPrefix = lang === currentPathLang ? '/' + lang : ''
   for (const anchorTag of allAnchorTags) {
     // url替换成slug
@@ -56,6 +53,7 @@ export const convertInnerUrl = allPages => {
       anchorTag.target = '_blank'
     }
   }
+
   for (const anchorTag of allAnchorTags) {
     const slug = getLastPartOfUrl(anchorTag.href)
     const slugPage = allPages?.find(page => {

next.config.js

@@ -15,7 +15,7 @@ const themes = scanSubdirectories(path.resolve(__dirname, 'themes'))
 const locales = (function () {
   // 根据BLOG_NOTION_PAGE_ID 检查支持多少种语言数据.
   // 支持如下格式配置多个语言的页面id xxx,zh:xxx,en:xxx
-  const langs = [BLOG.LANG.slice(0, 2)]
+  const langs = [BLOG.LANG]
   if (BLOG.NOTION_PAGE_ID.indexOf(',') > 0) {
     const siteIds = BLOG.NOTION_PAGE_ID.split(',')
     for (let index = 0; index < siteIds.length; index++) {
@@ -84,15 +84,19 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true
   },
-  output: process.env.EXPORT ? 'export' : process.env.NEXT_BUILD_STANDALONE === 'true' ? 'standalone' : undefined,
+  output: process.env.EXPORT
+    ? 'export'
+    : process.env.NEXT_BUILD_STANDALONE === 'true'
+      ? 'standalone'
+      : undefined,
   staticPageGenerationTimeout: 120,
   // 多语言， 在export时禁用
   i18n: process.env.EXPORT
     ? undefined
     : {
-        defaultLocale: BLOG.LANG.slice(0, 2),
+        defaultLocale: BLOG.LANG,
         // 支持的所有多语言,按需填写即可
-        locales
+        locales: locales
       },
   images: {
     // 图片压缩