mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-18 04:06:05 +02:00
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:
parent
23b819319d
commit
b46534419b
6 changed files with 66 additions and 3 deletions
60
src/components/LanguageSwitcher.astro
Normal file
60
src/components/LanguageSwitcher.astro
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue