mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-17 03:56:19 +02:00
refactor: fix button positions and adjust component structure
This commit is contained in:
radishzzz
parent
e37d8ee34e
commit
7671309edf
10 changed files with 161 additions and 137 deletions
|
|
@ -1,73 +1,73 @@
|
|||
---
|
||||
import themeConfig from '@/config'
|
||||
import { getPagePath } from '@/utils/path'
|
||||
import { getCollection } from 'astro:content'
|
||||
// import themeConfig from '@/config'
|
||||
// import { getPagePath } from '@/utils/path'
|
||||
// import { getCollection } from 'astro:content'
|
||||
|
||||
// 获取当前页面路径信息
|
||||
const { isPost } = getPagePath(Astro.url.pathname)
|
||||
// // 获取当前页面路径信息
|
||||
// const { isPost } = getPagePath(Astro.url.pathname)
|
||||
|
||||
// 获取默认语言
|
||||
const defaultLocale = themeConfig.global.locale
|
||||
// // 获取默认语言
|
||||
// const defaultLocale = themeConfig.global.locale
|
||||
|
||||
// 定义固定的语言顺序（按照要求的顺序）
|
||||
const fixedLangOrder = [defaultLocale, ...themeConfig.global.moreLocale]
|
||||
// // 定义固定的语言顺序（按照要求的顺序）
|
||||
// const fixedLangOrder = [defaultLocale, ...themeConfig.global.moreLocale]
|
||||
|
||||
// 获取当前文章的可用语言
|
||||
let availableLangs: string[] = []
|
||||
let currentPostSlug = ''
|
||||
// // 获取当前文章的可用语言
|
||||
// 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]
|
||||
// // 如果是文章页，获取当前文章对象
|
||||
// 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')
|
||||
// // 获取所有文章
|
||||
// const posts = await getCollection('posts')
|
||||
|
||||
// 找到所有具有相同abbrlink或slug的文章
|
||||
const relatedPosts = posts.filter(post =>
|
||||
post.data.abbrlink === currentPostSlug || post.slug === currentPostSlug,
|
||||
)
|
||||
// // 找到所有具有相同abbrlink或slug的文章
|
||||
// const relatedPosts = posts.filter(post =>
|
||||
// post.data.abbrlink === currentPostSlug || post.slug === currentPostSlug,
|
||||
// )
|
||||
|
||||
if (relatedPosts.length > 0) {
|
||||
// 收集所有相关文章支持的语言
|
||||
const supportedLangs = new Set()
|
||||
// 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)
|
||||
}
|
||||
})
|
||||
// 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
|
||||
}
|
||||
// // 按照固定顺序筛选出可用的语言
|
||||
// availableLangs = fixedLangOrder.filter(lang => supportedLangs.has(lang))
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
// // 非文章页面使用所有语言
|
||||
// availableLangs = fixedLangOrder
|
||||
// }
|
||||
|
||||
// 当前语言
|
||||
function getLanguageDisplayName(code: string) {
|
||||
return new Intl.DisplayNames(['en'], { type: 'language' }).of(code) || code
|
||||
}
|
||||
// // 当前语言
|
||||
// function getLanguageDisplayName(code: string) {
|
||||
// return new Intl.DisplayNames(['en'], { type: 'language' }).of(code) || code
|
||||
// }
|
||||
---
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="language-switcher"
|
||||
class="aspect-square w-4 c-secondary active:scale-90"
|
||||
aria-label={`Current Language: ${getLanguageDisplayName(defaultLocale)}. Click to switch to next language.`}
|
||||
class="uno-button"
|
||||
aria-label="Click to switch to next language"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -79,7 +79,7 @@ function getLanguageDisplayName(code: string) {
|
|||
</svg>
|
||||
</button>
|
||||
|
||||
<script is:inline define:vars={{ availableLangs, currentPostSlug, isPost, defaultLocale }}>
|
||||
<!-- <script is:inline define:vars={{ availableLangs, currentPostSlug, isPost, defaultLocale }}>
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
const langSwitch = document.getElementById('language-switcher')
|
||||
|
||||
|
|
@ -137,4 +137,4 @@ function buildNewPath(currentLang, nextLang, segments) {
|
|||
}
|
||||
return `/${newSegments.join('/')}/`
|
||||
}
|
||||
</script>
|
||||
</script> -->
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
---
|
||||
import { themeConfig } from '@/config'
|
||||
|
||||
const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
|
||||
---
|
||||
<button
|
||||
id="theme-toggle"
|
||||
aria-label="Theme Toggle Button"
|
||||
class="aspect-square w-4.2 c-secondary active:scale-90"
|
||||
class="uno-button id-theme-toggle w-4.2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -16,49 +11,3 @@ const { light: { background: lightMode }, dark: { background: darkMode } } = the
|
|||
<path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<script define:vars={{ lightMode, darkMode }}>
|
||||
// Update theme
|
||||
function updateTheme() {
|
||||
// Toggle website theme
|
||||
document.documentElement.classList.toggle('dark')
|
||||
// Get current theme
|
||||
const isDark = document.documentElement.classList.contains('dark')
|
||||
// Update meta theme color
|
||||
const metaThemeColor = document.querySelector('meta[name="theme-color"]')
|
||||
if (metaThemeColor) {
|
||||
metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
|
||||
}
|
||||
// Update theme configuration in local storage
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light')
|
||||
document.dispatchEvent(new Event('theme-changed'))
|
||||
}
|
||||
|
||||
// Bind click event to the button
|
||||
function setupThemeToggle() {
|
||||
// Locate theme toggle button
|
||||
const themeToggleButton = document.getElementById('theme-toggle')
|
||||
// Add click listener
|
||||
themeToggleButton.addEventListener('click', () => {
|
||||
// If browser doesn't support View Transitions API, update theme directly
|
||||
if (!document.startViewTransition) {
|
||||
updateTheme()
|
||||
return
|
||||
}
|
||||
// Temporarily add markers during animation to implement view transition and disable CSS transitions
|
||||
document.documentElement.style.setProperty('view-transition-name', 'theme-transition')
|
||||
document.documentElement.setAttribute('data-theme-transition', '')
|
||||
// If browser supports View Transitions API, use it to update theme
|
||||
const themeTransition = document.startViewTransition(updateTheme)
|
||||
// Remove markers after animation
|
||||
themeTransition.finished.then(() => {
|
||||
document.documentElement.style.removeProperty('view-transition-name')
|
||||
document.documentElement.removeAttribute('data-theme-transition')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Initialize click event (on first load or page transition)
|
||||
setupThemeToggle()
|
||||
document.addEventListener('astro:after-swap', setupThemeToggle)
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue