Skip to content

Commit 73b713f

Browse files
CatCodeMeCatCodeMe
committed
首页优化
1 parent 2032b45 commit 73b713f

5 files changed

Lines changed: 61 additions & 87 deletions

File tree

‎public/styles/global.css‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
/* External font loading - Will be loaded via JavaScript */
2-
/* @import url("https://fontsapi.zeoseven.com/89/main/result.css"); */
3-
/* @import url("https://fontsapi.zeoseven.com/709/main/result.css"); */
4-
@import url("https://fontsapi.zeoseven.com/285/main/result.css");
1+
/* External font loading - Loaded asynchronously via JavaScript to avoid blocking render */
2+
/* Font CSS will be loaded dynamically in BaseHead.astro */
53

64
body {
7-
/* JyunsaiKaai */
5+
/* JyunsaiKaai - Fallback fonts ensure text is visible even if external font hasn't loaded */
86
font-family: "Noto Serif CJK", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
97
font-weight: normal;
108
text-autospace: normal;

‎src/assets/home.png‎

-50.4 KB
Loading

‎src/components/BaseHead.astro‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,46 @@ const socialImageURL = new URL(ogImage ? ogImage : '/images/social-card.png', As
2525

2626
<!-- ~ Microsoft Windows Tile ~ -->
2727
<!-- 在Windows开始菜单中固定网站时显示的图标和颜色 -->
28-
<meta name="msapplication-TileImage" content="/favicon/mstile-150x150.png">
29-
<meta name="msapplication-TileColor" content="#ffffff">
28+
<meta name='msapplication-TileImage' content='/favicon/mstile-150x150.png' />
29+
<meta name='msapplication-TileColor' content='#ffffff' />
3030

3131
{/* Font Preload */}
32-
<link rel="preload" href="/fonts/LinBiolinum.woff2" as="font" type="font/woff2" crossorigin />
32+
<link rel='preload' href='/fonts/LinBiolinum.woff2' as='font' type='font/woff2' crossorigin />
3333

3434
{/* External Font - Deferred Loading */}
35-
<link rel="preconnect" href="https://fontsapi.zeoseven.com" crossorigin />
36-
<link rel="dns-prefetch" href="https://fontsapi.zeoseven.com" />
35+
<link rel='preconnect' href='https://fontsapi.zeoseven.com' crossorigin />
36+
<link rel='dns-prefetch' href='https://fontsapi.zeoseven.com' />
37+
38+
{/* Async font loading - non-blocking, executes immediately */}
39+
<script is:inline>
40+
// Load font CSS asynchronously to avoid blocking render
41+
// Using media="print" trick: CSS loads but doesn't apply until media is changed to "all"
42+
;(function () {
43+
const link = document.createElement('link')
44+
link.rel = 'stylesheet'
45+
link.href = 'https://fontsapi.zeoseven.com/285/main/result.css'
46+
link.media = 'print'
47+
link.onload = function () {
48+
this.media = 'all'
49+
}
50+
// Fallback: if onload doesn't fire (some browsers), set media to all after a short delay
51+
setTimeout(function () {
52+
if (link.media === 'print') {
53+
link.media = 'all'
54+
}
55+
}, 100)
56+
// Insert before other stylesheets to maintain order
57+
const firstStylesheet = document.querySelector('link[rel="stylesheet"]')
58+
if (firstStylesheet) {
59+
document.head.insertBefore(link, firstStylesheet)
60+
} else {
61+
document.head.appendChild(link)
62+
}
63+
})()
64+
</script>
3765

3866
{/* DNS prefetch for performance */}
39-
<link rel="dns-prefetch" href="https://vercel.live" />
67+
<link rel='dns-prefetch' href='https://vercel.live' />
4068

4169
{/* Canonical URL */}
4270
<link rel='canonical' href={canonicalURL} />

‎src/layouts/GalleryLayout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import { Footer, Header, ThemeProvider } from '@/custom/components/basic'
2+
import { Footer, Header } from '@/custom/components/basic'
33
44
import BaseHead from '@/components/BaseHead.astro'
55
import config from '@/site-config'

‎src/pages/index.astro‎

Lines changed: 23 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
import { Image } from 'astro:assets'
33
import { Icon } from '@/custom/components/user'
44
5-
import PageLayout from '@/layouts/BaseLayout.astro'
65
import { getBlogCollection } from 'astro-pure/server'
7-
import { getCurrentReading, getLatestPosts, getTotalWords } from '@/components/shelf/utils'
6+
import PageLayout from '@/layouts/BaseLayout.astro'
87
import { calculateSiteAge, getHighlightColor } from '@/components/home/utils'
8+
import { getCurrentReading, getLatestPosts, getTotalWords } from '@/components/shelf/utils'
99
import avatarImage from '@/assets/home.png'
1010
import config from '@/site-config'
1111
@@ -32,10 +32,8 @@ const highlightColor = getHighlightColor()
3232
<div class='grid grid-cols-1 md:grid-cols-[auto_1fr] gap-6 md:gap-8 items-center'>
3333
{/* 左侧：头像 - 大尺寸 */}
3434
<div class='flex justify-center md:justify-start'>
35-
<div
36-
class='w-32 h-32 md:w-48 md:h-48 lg:w-56 lg:h-56 overflow-hidden rounded-lg'
37-
>
38-
<Image src={avatarImage} alt='Avatar' class='object-contain block' />
35+
<div class='w-32 h-32 md:w-48 md:h-48 lg:w-56 lg:h-56 overflow-hidden rounded-lg'>
36+
<Image src={avatarImage} alt='Avatar' class='w-full h-full object-contain block' />
3937
</div>
4038
</div>
4139

@@ -308,80 +306,30 @@ const highlightColor = getHighlightColor()
308306

309307
<span id='vercount_value_site_pv' class='hidden'></span>
310308

309+
{/* 数字动画效果已移除，直接显示数字以优化性能 */}
311310
<script is:inline>
312-
function animateCounter(element, targetValue, duration = 2000) {
313-
const startValue = 0
314-
const startTime = performance.now()
315-
const targetNumber = parseInt(targetValue.replace(/,/g, ''))
316-
317-
function updateCounter(currentTime) {
318-
const elapsed = currentTime - startTime
319-
const progress = Math.min(elapsed / duration, 1)
320-
const easeOutCubic = 1 - Math.pow(1 - progress, 3)
321-
const currentValue = Math.floor(startValue + (targetNumber - startValue) * easeOutCubic)
322-
element.textContent = currentValue.toLocaleString()
323-
324-
if (progress < 1) {
325-
requestAnimationFrame(updateCounter)
326-
} else {
327-
element.textContent = targetValue
328-
}
329-
}
330-
331-
requestAnimationFrame(updateCounter)
332-
}
333-
334-
function updateViewsDisplay(viewsElement, newValue, hasAnimated = false) {
335-
if (viewsElement && newValue && newValue !== '-') {
336-
const views = parseInt(newValue.replace(/,/g, ''))
337-
338-
if (!hasAnimated) {
339-
viewsElement.textContent = '0'
340-
setTimeout(() => {
341-
animateCounter(viewsElement, views.toLocaleString(), 2000)
342-
}, 500)
343-
} else {
344-
viewsElement.textContent = views.toLocaleString()
311+
// 简化的 PV 统计更新 - 不使用动画，直接显示数字
312+
document.addEventListener('DOMContentLoaded', function () {
313+
const viewsEl = document.getElementById('total-views-display')
314+
const vercountEl = document.getElementById('vercount_value_site_pv')
315+
316+
if (viewsEl && vercountEl) {
317+
function updateViews() {
318+
const val = vercountEl.textContent
319+
if (val && val !== '-') {
320+
viewsEl.textContent = parseInt(val.replace(/,/g, '')).toLocaleString()
321+
}
345322
}
346-
}
347-
}
348323

349-
document.addEventListener('DOMContentLoaded', () => {
350-
const wordsDisplayElement = document.getElementById('total-words-display')
351-
if (wordsDisplayElement) {
352-
const targetValue = wordsDisplayElement.textContent
353-
wordsDisplayElement.textContent = '0'
354-
setTimeout(() => {
355-
animateCounter(wordsDisplayElement, targetValue, 2000)
356-
}, 500)
357-
}
324+
// 检查初始值
325+
updateViews()
358326

359-
const viewsDisplayElement = document.getElementById('total-views-display')
360-
const vercountElement = document.getElementById('vercount_value_site_pv')
361-
let hasAnimatedViews = false
362-
363-
if (viewsDisplayElement && vercountElement) {
364-
const observer = new MutationObserver((mutations) => {
365-
mutations.forEach((mutation) => {
366-
if (mutation.type === 'childList' || mutation.type === 'characterData') {
367-
const newValue = vercountElement.textContent
368-
updateViewsDisplay(viewsDisplayElement, newValue, hasAnimatedViews)
369-
hasAnimatedViews = true
370-
}
371-
})
372-
})
373-
374-
observer.observe(vercountElement, {
375-
childList: true,
376-
characterData: true,
377-
subtree: true
327+
// 监听一次更新后断开
328+
const obs = new MutationObserver(function () {
329+
updateViews()
330+
obs.disconnect()
378331
})
379-
380-
const currentValue = vercountElement.textContent
381-
if (currentValue && currentValue !== '-') {
382-
updateViewsDisplay(viewsDisplayElement, currentValue, hasAnimatedViews)
383-
hasAnimatedViews = true
384-
}
332+
obs.observe(vercountEl, { childList: true, characterData: true, subtree: true })
385333
}
386334
})
387335
</script>

0 commit comments

Comments
 (0)