test: language switcher and i18n refactor

package.json

@@ -2,7 +2,7 @@
   "name": "astro-theme-retypeset",
   "type": "module",
   "version": "0.0.1",
-  "packageManager": "pnpm@10.6.2",
+  "packageManager": "pnpm@10.6.3",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",

src/components/MainHeader.astro

@@ -1,6 +1,6 @@
 ---
 import themeConfig from '@/config'
-import { getPagePath } from '@/utils/path'
+import { getPagePath } from '@/utils/i18n/path'
 
 const { title, subtitle } = themeConfig.site
 const { titleSpace } = themeConfig.global

src/components/MobileHeader.astro

@@ -1,6 +1,6 @@
 ---
 import themeConfig from '@/config'
-import { getPagePath } from '@/utils/path'
+import { getPagePath } from '@/utils/i18n/path'
 
 const { title, subtitle } = themeConfig.site
 const { titleSpace } = themeConfig.global

src/components/Navbar.astro

@@ -1,6 +1,6 @@
 ---
+import { getPagePath } from '@/utils/i18n/path'
 import { ui } from '@/utils/i18n/ui'
-import { getPagePath } from '@/utils/path'
 
 const currentPath = Astro.url.pathname
 const { currentLang, isHome, isPost, isTag, isAbout, getLocalizedPath }

src/components/PostList.astro

@@ -48,7 +48,7 @@ function getPostPath(post: Post) {
       {/* mobile post time */}
       <div
         class="uno-mobile-time"
-        transition:name={`time-${post.data.abbrlink || post.slug}`}
+        transition:name={`mobile-time-${post.data.abbrlink || post.slug}`}
         data-disable-transition-on-theme
       >
         <PostTime
@@ -58,7 +58,11 @@ function getPostPath(post: Post) {
       </div>
 
       {/* desktop post time */}
-      <div class="uno-desktop-time">
+      <div
+        class="uno-desktop-time"
+        transition:name={`desktop-time-${post.data.abbrlink || post.slug}`}
+        data-disable-transition-on-theme
+      >
         <PostTime
           date={post.data.published}
           minutes={post.remarkPluginFrontmatter?.minutes}

src/components/PostTime.astro

@@ -1,6 +1,6 @@
 ---
 import { themeConfig } from '@/config'
-import { isPostPage } from '@/utils/path'
+import { isPostPage } from '@/utils/i18n/path'
 
 interface Props {
   date: Date

src/components/Widgets/LanguageSwitcher.astro

@@ -1,73 +1,17 @@
 ---
-// import themeConfig from '@/config'
-// import { getPagePath } from '@/utils/path'
-// import { getCollection } from 'astro:content'
+import { getNextLangUrl } from '@/utils/i18n/lang'
 
-// // 获取当前页面路径信息
-// const { isPost } = getPagePath(Astro.url.pathname)
+// 获取当前路径
+const currentPath = Astro.url.pathname
 
-// // 获取默认语言
-// const defaultLocale = themeConfig.global.locale
-
-// // 定义固定的语言顺序（按照要求的顺序）
-// const fixedLangOrder = [defaultLocale, ...themeConfig.global.moreLocale]
-
-// // 获取当前文章的可用语言
-// let availableLangs: string[] = []
-// let currentPostSlug = ''
-
-// // 如果是文章页，获取当前文章对象
-// if (isPost) {
-//   // 从URL中提取文章slug
-//   const pathParts = Astro.url.pathname.split('/')
-//   const slugIndex = pathParts.findIndex(part => part === 'posts') + 1
-//   if (slugIndex > 0 && pathParts.length > slugIndex) {
-//     currentPostSlug = pathParts[slugIndex]
-
-//     // 获取所有文章
-//     const posts = await getCollection('posts')
-
-//     // 找到所有具有相同abbrlink或slug的文章
-//     const relatedPosts = posts.filter(post =>
-//       post.data.abbrlink === currentPostSlug || post.slug === currentPostSlug,
-//     )
-
-//     if (relatedPosts.length > 0) {
-//       // 收集所有相关文章支持的语言
-//       const supportedLangs = new Set()
-
-//       relatedPosts.forEach((post) => {
-//         // 处理lang属性
-//         if (typeof post.data.lang === 'string' && post.data.lang.trim() !== '') {
-//           supportedLangs.add(post.data.lang)
-//         }
-//         // 如果没有指定语言，则假定支持默认语言
-//         else {
-//           supportedLangs.add(defaultLocale)
-//         }
-//       })
-
-//       // 按照固定顺序筛选出可用的语言
-//       availableLangs = fixedLangOrder.filter(lang => supportedLangs.has(lang))
-//     }
-//   }
-// }
-// else {
-//   // 非文章页面使用所有语言
-//   availableLangs = fixedLangOrder
-// }
-
-// // 当前语言
-// function getLanguageDisplayName(code: string) {
-//   return new Intl.DisplayNames(['en'], { type: 'language' }).of(code) || code
-// }
+// 直接获取下一个语言的URL
+const nextUrl = getNextLangUrl(currentPath)
 ---
 
-<button
-  type="button"
-  id="language-switcher"
+<a
+  href={nextUrl}
   class="uno-button"
-  aria-label="Click to switch to next language"
+  aria-label="Switch website language"
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -77,64 +21,4 @@
   >
     <path d="M19 21 12.3 2h-1L4.7 21l-2.5.2v.8h6.3v-.8L5.7 21l2-5.9h7.5l2 5.9-3.3.2v.8h7.9v-.8zM8 14.3l3.4-10.1 3.5 10.1z" fill="currentColor" />
   </svg>
-</button>
-
-<!-- <script is:inline define:vars={{ availableLangs, currentPostSlug, isPost, defaultLocale }}>
-document.addEventListener('astro:page-load', () => {
-  const langSwitch = document.getElementById('language-switcher')
-
-  langSwitch?.addEventListener('click', () => {
-    const { pathname, search, hash } = window.location
-    const segments = pathname.split('/').filter(Boolean)
-    const firstSegment = segments[0] || ''
-
-    // 获取当前语言
-    let currentLang = defaultLocale
-    if (availableLangs.includes(firstSegment) && firstSegment !== defaultLocale) {
-      currentLang = firstSegment
-    }
-
-    // 获取下一个语言
-    const currentIndex = availableLangs.indexOf(currentLang)
-    const nextLang = availableLangs[(currentIndex + 1) % availableLangs.length]
-
-    const newPath = buildNewPath(currentLang, nextLang, segments) || '/'
-    window.location.href = `${newPath}${search}${hash}`
-  })
-})
-
-function buildNewPath(currentLang, nextLang, segments) {
-  // 创建一个新的segments数组副本，避免修改原始数组
-  const newSegments = [...segments]
-  const firstSegment = newSegments[0] || ''
-
-  // 检查第一段是否是语言代码（不包括默认语言）
-  const isFirstSegmentLang = availableLangs.includes(firstSegment) && firstSegment !== defaultLocale
-
-  // 处理不同的情况
-  if (nextLang === defaultLocale) {
-    // 如果下一个语言是默认语言，则移除语言段
-    if (isFirstSegmentLang) {
-      newSegments.shift()
-    }
-  }
-  else {
-    // 如果下一个语言不是默认语言
-    if (isFirstSegmentLang) {
-      // 如果第一段是语言代码，则替换它
-      newSegments[0] = nextLang
-    }
-    else {
-      // 如果第一段不是语言代码，则添加新的语言代码
-      newSegments.unshift(nextLang)
-    }
-  }
-
-  // 返回新路径
-  // 处理空路径的特殊情况，避免生成 // 这样的路径
-  if (newSegments.length === 0) {
-    return '/'
-  }
-  return `/${newSegments.join('/')}/`
-}
-</script> -->
+</a>

src/layouts/Layout.astro

@@ -10,7 +10,7 @@ import LanguageSwitcher from '@/components/Widgets/LanguageSwitcher.astro'
 import ThemeToggle from '@/components/Widgets/ThemeToggle.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
-import { getPagePath } from '@/utils/path'
+import { getPagePath } from '@/utils/i18n/path'
 
 import '@/styles/font.css'
 import '@/styles/global.css'

src/utils/i18n/lang.ts

@@ -0,0 +1,106 @@
+import { themeConfig } from '@/config'
+
+/**
+ * 获取下一个语言代码
+ * @param currentLang 当前语言代码
+ * @returns 下一个语言代码
+ */
+export function getNextLang(currentLang: string): string {
+  // 获取默认语言和所有支持的语言
+  const defaultLocale = themeConfig.global.locale
+  const allLocales = [defaultLocale, ...themeConfig.global.moreLocale]
+
+  // 找到当前语言在列表中的索引
+  const currentIndex = allLocales.indexOf(currentLang)
+
+  // 如果当前语言不在列表中，返回默认语言
+  if (currentIndex === -1) {
+    return defaultLocale
+  }
+
+  // 计算下一个语言的索引（循环）
+  const nextIndex = (currentIndex + 1) % allLocales.length
+
+  // 返回下一个语言代码
+  return allLocales[nextIndex]
+}
+
+/**
+ * 构建下一个语言的URL
+ * @param currentPath 当前页面路径
+ * @param currentLang 当前语言代码
+ * @param nextLang 下一个语言代码
+ * @returns 下一个语言的URL
+ */
+export function buildNextLangUrl(currentPath: string, currentLang: string, nextLang: string): string {
+  const defaultLocale = themeConfig.global.locale
+  let nextUrl = ''
+
+  if (nextLang === defaultLocale) {
+    // 如果下一个是默认语言，移除语言代码
+    nextUrl = currentPath.replace(`/${currentLang}`, '') || '/'
+  }
+  else {
+    // 如果当前是默认语言（没有语言代码在路径中）
+    if (currentLang === defaultLocale) {
+      // 在路径前添加新的语言代码
+      nextUrl = `/${nextLang}${currentPath}`
+    }
+    else {
+      // 替换当前语言代码为新的语言代码
+      nextUrl = currentPath.replace(`/${currentLang}`, `/${nextLang}`)
+    }
+  }
+
+  // 确保URL格式正确
+  if (nextUrl === '')
+    nextUrl = '/'
+
+  // 确保非根路径的URL末尾有斜杠
+  if (nextUrl !== '/' && !nextUrl.endsWith('/')) {
+    nextUrl = `${nextUrl}/`
+  }
+
+  return nextUrl
+}
+
+/**
+ * 从当前路径中提取语言代码
+ * @param currentPath 当前页面路径
+ * @returns 当前语言代码
+ */
+export function getLangFromPath(currentPath: string): string {
+  const defaultLocale = themeConfig.global.locale
+  let currentLang = ''
+
+  // 检查路径是否以/xx/开始，其中xx是支持的语言代码
+  for (const lang of themeConfig.global.moreLocale) {
+    if (currentPath.startsWith(`/${lang}/`) || currentPath === `/${lang}`) {
+      currentLang = lang
+      break
+    }
+  }
+
+  // 如果没有找到语言代码，则认为是默认语言
+  if (!currentLang) {
+    currentLang = defaultLocale
+  }
+
+  return currentLang
+}
+
+/**
+ * 直接从当前路径获取下一个语言的URL
+ * @param currentPath 当前页面路径
+ * @returns 下一个语言的URL
+ */
+export function getNextLangUrl(currentPath: string): string {
+  // 从路径提取当前语言
+  const currentLang = getLangFromPath(currentPath)
+
+  // 获取下一个语言
+  const nextLang = getNextLang(currentLang)
+
+  // 构建下一个语言的URL
+  return buildNextLangUrl(currentPath, currentLang, nextLang)
+}