Skip to content

Commit 28305c3

Browse files
ChouChiuChouChiu
committed
feat: 优化图片尺寸以减少布局偏移，增强页面性能
1 parent c502e4e commit 28305c3

5 files changed

Lines changed: 110 additions & 23 deletions

File tree

‎.vitepress/config.mts‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,29 +31,72 @@ export default defineConfig({
3131
head: [
3232
["link", { rel: "icon", href: "/app_icon.png" }],
3333
["meta", { name: "theme-color", content: "#334355" }],
34+
// 预加载关键资源 - 优化 LCP
35+
[
36+
"link",
37+
{
38+
rel: "preload",
39+
href: "/app_icon.png",
40+
as: "image",
41+
fetchpriority: "high",
42+
},
43+
],
44+
// 预连接优化 - 减少外部资源连接延迟
45+
["link", { rel: "preconnect", href: "https://api.github.com" }],
46+
["link", { rel: "preconnect", href: "https://api.iconify.design" }],
47+
["link", { rel: "preconnect", href: "https://umami.micyou.top" }],
48+
[
49+
"link",
50+
{ rel: "dns-prefetch", href: "https://avatars.githubusercontent.com" },
51+
],
3452
// 无障碍优化
3553
["meta", { name: "format-detection", content: "telephone=no" }],
3654
["meta", { name: "mobile-web-app-capable", content: "yes" }],
3755
["meta", { name: "apple-mobile-web-app-capable", content: "yes" }],
38-
["meta", { name: "apple-mobile-web-app-status-bar-style", content: "default" }],
56+
[
57+
"meta",
58+
{ name: "apple-mobile-web-app-status-bar-style", content: "default" },
59+
],
3960
],
4061

4162
// 动态生成 OG 标签
4263
transformPageData(pageData) {
43-
const pagePath = pageData.relativePath.replace(/\.md$/, "").replace(/\/index$/, "/");
64+
const pagePath = pageData.relativePath
65+
.replace(/\.md$/, "")
66+
.replace(/\/index$/, "/");
4467
const canonicalUrl = `https://micyou.top/${pagePath}`;
4568
const ogImage = pageData.frontmatter.ogImage || "/app_icon.png";
4669

4770
const head: HeadConfig[] = [
4871
["meta", { property: "og:type", content: "website" }],
4972
["meta", { property: "og:title", content: pageData.title || "MicYou" }],
50-
["meta", { property: "og:description", content: pageData.description || "将 Android 设备转变为 PC 的高质量麦克风" }],
73+
[
74+
"meta",
75+
{
76+
property: "og:description",
77+
content:
78+
pageData.description || "将 Android 设备转变为 PC 的高质量麦克风",
79+
},
80+
],
5181
["meta", { property: "og:url", content: canonicalUrl }],
52-
["meta", { property: "og:image", content: `https://micyou.top${ogImage}` }],
82+
[
83+
"meta",
84+
{ property: "og:image", content: `https://micyou.top${ogImage}` },
85+
],
5386
["meta", { name: "twitter:card", content: "summary_large_image" }],
5487
["meta", { name: "twitter:title", content: pageData.title || "MicYou" }],
55-
["meta", { name: "twitter:description", content: pageData.description || "将 Android 设备转变为 PC 的高质量麦克风" }],
56-
["meta", { name: "twitter:image", content: `https://micyou.top${ogImage}` }],
88+
[
89+
"meta",
90+
{
91+
name: "twitter:description",
92+
content:
93+
pageData.description || "将 Android 设备转变为 PC 的高质量麦克风",
94+
},
95+
],
96+
[
97+
"meta",
98+
{ name: "twitter:image", content: `https://micyou.top${ogImage}` },
99+
],
57100
["link", { rel: "canonical", href: canonicalUrl }],
58101
];
59102

‎.vitepress/theme/components/ContributorsCards/Contributors.vue‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ const authors = computed(() => [
2424
title: t.value.author,
2525
links: [
2626
{ icon: "github", link: "https://github.com/LanRhyme" },
27-
{ icon: { svg: svgIcon.bilibili }, link: "https://space.bilibili.com/496901387" },
27+
{
28+
icon: { svg: svgIcon.bilibili },
29+
link: "https://space.bilibili.com/496901387",
30+
},
2831
],
2932
},
3033
{
@@ -33,7 +36,10 @@ const authors = computed(() => [
3336
title: t.value.author,
3437
links: [
3538
{ icon: "github", link: "https://github.com/ChinsaaWei" },
36-
{ icon: { svg: svgIcon.bilibili }, link: "https://space.bilibili.com/38902304" },
39+
{
40+
icon: { svg: svgIcon.bilibili },
41+
link: "https://space.bilibili.com/38902304",
42+
},
3743
],
3844
},
3945
]);
@@ -140,15 +146,21 @@ onMounted(async () => {
140146
141147
// 过滤掉作者和 bot 账号，并按贡献数降序排列
142148
const contributorsData = data
143-
.filter((c): c is GitHubContributor & { author: NonNullable<GitHubContributor["author"]> } => {
144-
const login = c.author?.login;
145-
return (
146-
login !== undefined &&
147-
!authorUsernames.has(login) &&
148-
!botUsernames.has(login) &&
149-
!login.includes("[bot]")
150-
);
151-
})
149+
.filter(
150+
(
151+
c,
152+
): c is GitHubContributor & {
153+
author: NonNullable<GitHubContributor["author"]>;
154+
} => {
155+
const login = c.author?.login;
156+
return (
157+
login !== undefined &&
158+
!authorUsernames.has(login) &&
159+
!botUsernames.has(login) &&
160+
!login.includes("[bot]")
161+
);
162+
},
163+
)
152164
.sort((a, b) => b.total - a.total)
153165
.map((c) => ({
154166
avatar: `${c.author.avatar_url}&size=80`,

‎.vitepress/theme/icon.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/** Bilibili 图标 (来自 Iconify simple-icons:bilibili) */
22
export const svgIcon = {
3-
bilibili: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.373-.933.373s-.684-.124-.933-.373c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.373-.933.373s-.684-.124-.933-.373c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/></svg>',
4-
};
3+
bilibili:
4+
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.373-.933.373s-.684-.124-.933-.373c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.373-.933.373s-.684-.124-.933-.373c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/></svg>',
5+
};

‎.vitepress/theme/index.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ import { useData } from "vitepress";
44
import DefaultTheme from "vitepress/theme";
55
import { h } from "vue";
66
import "@theojs/lumen/style";
7-
import { BoxCube, Card, Footer, Links, Pill, umamiAnalytics } from "@theojs/lumen";
7+
import {
8+
BoxCube,
9+
Card,
10+
Footer,
11+
Links,
12+
Pill,
13+
umamiAnalytics,
14+
} from "@theojs/lumen";
815
import { getFooterData, type Lang } from "../data/i18n";
916
import Contributors from "./components/ContributorsCards/Contributors.vue";
1017
import DownloadSection from "./components/DownloadSection/DownloadSection.vue";
@@ -49,8 +56,8 @@ export default {
4956
app.component("DownloadSection", DownloadSection);
5057
// 注册 Umami Analytics 插件
5158
umamiAnalytics({
52-
id: '7f5e889c-6a31-4074-95b7-78d52bb559ce',
53-
src: 'https://umami.micyou.top/script.js',
54-
})
59+
id: "7f5e889c-6a31-4074-95b7-78d52bb559ce",
60+
src: "https://umami.micyou.top/script.js",
61+
});
5562
},
5663
} satisfies Theme;

‎.vitepress/theme/style.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,30 @@ a:focus-visible {
140140
line-height: 1.2;
141141
}
142142

143+
/**
144+
* Image Optimization - 图片尺寸优化
145+
* 为图片设置固定尺寸以减少布局偏移 (CLS)
146+
* -------------------------------------------------------------------------- */
147+
148+
/* Hero 图片 - 固定尺寸减少 CLS */
149+
.VPHero .VPImage.image-src {
150+
width: 192px;
151+
height: 192px;
152+
aspect-ratio: 1 / 1;
153+
}
154+
155+
/* 导航栏 Logo - 固定尺寸 */
156+
.VPNavBar .VPImage.logo {
157+
width: 24px;
158+
height: 24px;
159+
aspect-ratio: 1 / 1;
160+
}
161+
162+
/* 确保图片按比例缩放 */
163+
.VPImage {
164+
object-fit: contain;
165+
}
166+
143167
.VPTeamMembers .item:hover {
144168
transform: translateY(-5px); /* 向上移动 */
145169
}

0 commit comments

Comments
 (0)