feat: add language switcher component and update layout

- Introduced a new LanguageSwitcher component to facilitate language switching in the application.
- Added an SVG icon for the language switcher button.
- Updated the Header component to adjust margin for better spacing.
- Modified the Navigation component's margin and top properties for improved layout.
- Adjusted the ThemeToggle button size for consistency with the new design.
This commit is contained in:
radishzzz 2025-01-24 10:11:56 +00:00
parent 23b819319d
commit b46534419b
6 changed files with 66 additions and 3 deletions

View file

@ -0,0 +1,60 @@
---
import themeConfig from '@/config'
const langs = ['', ...themeConfig.global.moreLocale]
---
<script is:inline define:vars={{ langs }}>
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] || ''
const currentLang = langs.includes(firstSegment) ? firstSegment : ''
// 获取下一个语言
const currentIndex = langs.indexOf(currentLang)
const nextLang = langs[(currentIndex + 1) % langs.length]
// 构建新的 URL
let newPath
if (currentLang) {
// 如果当前有语言前缀,替换它
segments[0] = nextLang || segments[0]
newPath = nextLang ? `/${segments.join('/')}` : `/${segments.slice(1).join('/')}`
}
else {
// 如果当前没有语言前缀
newPath = nextLang ? `/${nextLang}${pathname}` : pathname
}
// 确保路径至少是 "/"
newPath = newPath || '/'
// 切换语言
window.location.href = `${newPath}${search}${hash}`
})
</script>
<button
id="language-switcher"
class="absolute right-25.6 top-19.4 z-999 aspect-square w-7 c-secondary active:scale-92"
aria-label="Language Switch Button"
title="Language Switch Button"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-full w-full">
<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>
<style>
#language-switcher {
transition: transform 0.3s ease;
}
#language-switcher:hover {
transform: scale(1.1);
}
</style>