reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 11:41:17 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: optimize head component

Browse source 
- Add dynamic theme-color meta tag based on current theme mode
- Preload custom font files for improved performance
- Update ClientRouter configuration for view transitions
- Refactor theme toggle script comments for clarity
This commit is contained in:
radishzzz 2025-02-18 17:57:10 +00:00
parent 5b66fdb564
commit 6bcd51765d
4 changed files with 284 additions and 296 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/layouts/Head.astro
View file

@ -10,7 +10,8 @@ interface Props {
const { postTitle, postDescription, postImage } = Astro.props
const { title, subtitle, description, author, url, favicon } = themeConfig.site
const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
const { mode, light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
const initMetaTheme = mode === 'dark' ? darkMode : lightMode
const { locale, moreLocale } = themeConfig.global
const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '' } = themeConfig.seo ?? {}
const { google = '', bing = '', yandex = '', baidu = '' } = verification
@ -28,10 +29,11 @@ const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', custo
<meta name="description" content={postDescription || description} />
<meta name="author" content={author} />
<meta name="generator" content={Astro.generator} />
<meta name="theme-color" content="" />
<ClientRouter fallback="swap" />
<meta name="theme-color" content={initMetaTheme} />
<!-- Preload -->
<link rel="preload" href="/font/Snell-Black.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/font/EarlySummer-subset.woff2" as="font" type="font/woff2" crossorigin />
{commentURL && <link rel="dns-prefetch" href={commentURL} />}
{imageHostURL && <link rel="dns-prefetch" href={imageHostURL} />}
{customGoogleAnalyticsURL && <link rel="dns-prefetch" href={customGoogleAnalyticsURL} />}
@ -74,6 +76,9 @@ const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', custo
{yandex && <meta name="yandex-verification" content={yandex} />}
{baidu && <meta name="baidu-site-verification" content={baidu} />}
<!-- Global View Transition -->
<ClientRouter fallback="none" />
<!-- Theme Toggle -->
<script
is:inline
@ -106,15 +111,15 @@ function followSystemTheme() {
document.dispatchEvent(new Event('theme-changed'))
}
// 1.Initialize theme on first load
// Function 1: Initialize theme on first load
initTheme()
// 2.Update theme before page transition to prevent flashing
// Function 2: Update theme before page transition to prevent flashing
document.addEventListener('astro:before-swap', ({ newDocument }) => {
initTheme(newDocument)
})
// 3.Listen to system theme changes in real-time
// Function 3: listen to system theme changes in real-time
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', ({ matches: isDark }) => {