Skip to content

Commit 6348830

Browse files
Theo-MessiTheo-Messi
committed
faet!(style): page beautification
1 parent cb7270a commit 6348830

18 files changed

+609
-466
lines changed

‎.vitepress/config.mts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export default defineConfig({
117117
darkModeSwitchLabel: '主题模式',
118118

119119
// markdown 外部链接图标
120-
externalLinkIcon: true,
120+
// externalLinkIcon: true,
121121
// 语言切换
122122
langMenuLabel: '切换语言',
123123

‎.vitepress/configs/socialLinks.ts

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,20 @@ import type { DefaultTheme } from 'vitepress'
22
// 社交链接设置
33

44
export const socialLinks: DefaultTheme.Config['socialLinks'] = [
5-
{ icon: 'github', link: 'https://github.com/Theo-messi' },
65
{
7-
icon: {
8-
svg: '<svg t="1714023334003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8813" width="200" height="200"><path d="M512 0.6656C229.6064 0.6656 0.6656 229.6064 0.6656 512S229.6064 1023.3344 512 1023.3344 1023.3344 794.3936 1023.3344 512 794.3936 0.6656 512 0.6656z m263.9872 665.344c0 28.2112-23.7568 51.328-52.7872 51.328h-422.4c-29.0304 0-52.7872-23.1168-52.7872-51.328l0.256-253.5936 257.408 136.5248a13.568 13.568 0 0 0 12.6464 0l257.664-136.6528v253.696zM512.128 500.736L248.2688 357.5296c0.256-28.0064 23.6544-50.8672 52.5312-50.8672h422.4c28.8256 0 52.4544 22.784 52.7872 50.7392L512.128 500.736z" p-id="8814"></path></svg>'
9-
},
6+
icon: { svg: '<i class="fab fa-github "></i>' },
7+
link: 'https://github.com/Theo-messi'
8+
},
9+
{
10+
icon: { svg: '<i class="fas fa-envelope"></i>' },
1011
link: 'mailto:[email protected]'
1112
},
1213
{
13-
icon: {
14-
svg: '<svg t="1714023226648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4867" id="mx_n_1714023226648" width="200" height="200"><path d="M512 0C229.184 0 0 229.184 0 512s229.184 512 512 512 512-229.216 512-512S794.784 0 512 0z m251.616 351.008l-84 395.808c-5.792 28.192-22.784 34.784-46.4 21.792l-128-94.592-61.408 59.808c-7.2 7.008-12.8 12.8-25.6 12.8-16.608 0-13.792-6.208-19.392-22.016L355.2 581.408l-126.592-39.392c-27.392-8.384-27.584-27.2 6.208-40.608l493.184-190.4c22.4-10.208 44.192 5.408 35.616 40z" p-id="4868"></path></svg>'
15-
},
14+
icon: { svg: '<i class="fab fa-telegram"></i>' },
1615
link: 'https://t.me/Theo_Messi'
1716
},
1817
{
19-
icon: {
20-
svg: '<svg t="1715679313624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4330" width="200" height="200"><path d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z" p-id="4331" fill="#db2777"></path></svg>'
21-
},
18+
icon: { svg: '<i class="fas fa-heart" style="color: #ff8787;"></i>' },
2219
link: 'https://github.com/sponsors/Theo-messi'
2320
}
2421
]

‎.vitepress/theme/components/AsideLogo.vue

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<template>
2+
<!-- <a class="banner mp" href="https://fbinv01.fbaff.cc/auth/register?code=RZP3" target="_blank">
3+
<img
4+
width="22"
5+
height="22"
6+
src="https://flyingbirdlimo.com/wp-content/uploads/2022/03/Flying-Bird-Logo-cropped.png"
7+
/>
8+
<span>
9+
<p class="Activity">FlyingBird 618活动来了</p>
10+
<p class="extra">月付 85折 优惠码：2461885</p>
11+
<p class="extra">年付 64折 优惠码：2461880</p>
12+
</span>
13+
</a> -->
14+
15+
<a class="banner mp" href="https://doc.theovan.cn/" target="_blank">
16+
<img width="22" height="22" src="https://i.theovan.cn/avatar.png" />
17+
<span>
18+
<p class="extra-info">流媒体观影</p>
19+
<p class="heading">Theo-Docs</p>
20+
<p class="extra-info">一站式服务</p>
21+
</span>
22+
</a>
23+
<a class="banner mp" href="https://share.theovan.cn/" target="_blank">
24+
<img width="22" height="22" src="https://i.theovan.cn/docs/202405101119004.png" />
25+
<span>
26+
<p class="extra-info">快速获取热门影视资源</p>
27+
<p class="heading">阿里云盘资源分享</p>
28+
<p class="extra-info">转存观看!</p>
29+
</span>
30+
</a>
31+
<a class="banner mp" href="https://doc.theovan.cn/serve/sharing/Account-sharing-guide" target="_blank">
32+
<img width="22" height="22" src="https://cdn.iconscout.com/icon/free/png-256/free-netflix-2296042-1912001.png" />
33+
<span>
34+
<p class="extra-info">流媒体账号合租</p>
35+
<p class="heading">流媒体帐号合租</p>
36+
<p class="extra-info">共享车位</p>
37+
</span>
38+
</a>
39+
<a class="banner mp" href="https://github.com/sponsors/Theo-messi" target="_blank">
40+
<img width="22" height="22" src="https://doc.theovan.cn/爱心.png" />
41+
<span>
42+
<!-- <p class="extra-info">Sponsor for me</p> -->
43+
<p class="heading">为我赞助</p>
44+
<!-- <p class="extra-info">Sponsor now!</p> -->
45+
</span>
46+
</a>
47+
</template>
48+
49+
<style lang="scss" scoped>
50+
.VPDocAsideSponsors {
51+
margin-top: 8px !important;
52+
}
53+
54+
:deep(.vp-sponsor-grid.mini .vp-sponsor-grid-image) {
55+
max-width: 158px;
56+
max-height: 48px;
57+
}
58+
59+
:deep(.vp-sponsor-grid.xmini .vp-sponsor-grid-image) {
60+
max-width: 80px;
61+
max-height: 32px;
62+
}
63+
64+
:deep(.vp-sponsor-grid.xmini img) {
65+
transition: transform 0.5s;
66+
transform: scale(1);
67+
}
68+
69+
:deep(.vp-sponsor-grid.xmini:hover img) {
70+
transform: scale(1.15);
71+
}
72+
73+
.banner {
74+
margin: 0.25rem 0;
75+
padding: 0.4rem 0;
76+
border-radius: 14px;
77+
position: relative;
78+
font-size: 0.9rem;
79+
font-weight: 700;
80+
line-height: 1.1rem;
81+
display: flex;
82+
align-items: center;
83+
justify-content: center;
84+
width: 100%;
85+
gap: 1rem;
86+
background-color: var(--vp-c-bg-alt);
87+
border: 2px solid var(--vp-c-bg-alt);
88+
transition: border-color 0.5s;
89+
90+
&:last-of-type {
91+
margin-bottom: 1rem;
92+
}
93+
94+
&:hover {
95+
border: 2px solid var(--vp-c-brand-1);
96+
}
97+
98+
img {
99+
transition: transform 0.5s;
100+
transform: scale(1.25);
101+
}
102+
103+
&:hover img {
104+
transform: scale(1.75);
105+
}
106+
107+
.extra-info {
108+
color: var(--vp-c-text-1);
109+
opacity: 0;
110+
font-size: 0.7rem;
111+
padding-left: 0.1rem;
112+
transition: opacity 0.5s;
113+
}
114+
115+
.extra {
116+
color: var(--vp-c-text-2);
117+
font-size: 0.7rem;
118+
padding-left: 0.1rem;
119+
}
120+
121+
.heading {
122+
background-image: linear-gradient(120deg, var(--vp-c-brand-3) 32%, var(--vp-c-brand-2), var(--vp-c-brand-1));
123+
background-clip: text;
124+
-webkit-background-clip: text;
125+
-webkit-text-fill-color: transparent;
126+
}
127+
128+
.Activity {
129+
background-image: linear-gradient(120deg, #b047ff 16%, #646cff, #747bff);
130+
background-clip: text;
131+
-webkit-background-clip: text;
132+
-webkit-text-fill-color: transparent;
133+
}
134+
135+
&:hover {
136+
.extra-info {
137+
opacity: 0.9;
138+
}
139+
140+
.extra {
141+
opacity: 0.9;
142+
}
143+
}
144+
}
145+
</style>

‎.vitepress/theme/components/Box.vue

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<template>
2+
<div class="box-container">
3+
<a v-for="(item, index) in items" :key="index" :href="item.l" class="box" target="_blank">
4+
<div class="box-content">
5+
<span v-if="item.ct" class="ct">{{ item.ct }}</span>
6+
<span v-if="isImage(item.i)" class="icon-container">
7+
<img :src="item.i" alt="icon" class="i" />
8+
</span>
9+
<span v-else class="icon-container">
10+
<i :class="item.i + ' fa-2xl'" :style="item.style"></i>
11+
</span>
12+
<img v-if="item.light" :src="item.light" alt="icon" class="i light-only" />
13+
<img v-if="item.dark" :src="item.dark" alt="icon" class="i dark-only" />
14+
<p class="t">{{ item.t }}</p>
15+
</div>
16+
</a>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'Box',
23+
props: {
24+
items: {
25+
type: Array,
26+
required: true,
27+
validator: (items) => {
28+
// 验证每个项是否有必须的属性
29+
return items.every(
30+
(item) =>
31+
item.hasOwnProperty('l') &&
32+
item.hasOwnProperty('i') &&
33+
item.hasOwnProperty('t') &&
34+
item.hasOwnProperty('ct') &&
35+
(item.hasOwnProperty('light') || item.hasOwnProperty('dark'))
36+
)
37+
}
38+
}
39+
},
40+
methods: {
41+
isImage(url) {
42+
return typeof url === 'string' && /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/.test(url)
43+
}
44+
}
45+
}
46+
</script>
47+
48+
<style lang="scss" scoped>
49+
:root:not(.dark) .dark-only {
50+
display: none;
51+
}
52+
53+
:root:is(.dark) .light-only {
54+
display: none;
55+
}
56+
57+
.box-container {
58+
display: flex;
59+
flex-wrap: wrap;
60+
gap: 20px;
61+
margin-top: 1rem;
62+
}
63+
64+
.box {
65+
position: relative;
66+
border: 1px solid var(--vp-c-bg-soft);
67+
background-color: var(--vp-c-bg-alt);
68+
padding: 12px 24px;
69+
border-radius: 8px;
70+
height: 60px;
71+
width: 210px;
72+
display: flex;
73+
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
74+
75+
&:hover {
76+
border-color: var(--vp-c-brand-1);
77+
// background-color: var(--vp-c-brand-soft);
78+
}
79+
80+
@media (max-width: 1024px) {
81+
flex: 1 1 calc(50% - 20px);
82+
max-width: calc(50% - 20px);
83+
}
84+
85+
@media (max-width: 768px) {
86+
flex: 1 1 100%;
87+
max-width: 100%;
88+
}
89+
}
90+
91+
.box-content {
92+
font-size: 14px;
93+
line-height: 1;
94+
letter-spacing: -0.02em;
95+
display: flex;
96+
align-items: center;
97+
text-decoration: none;
98+
overflow: hidden;
99+
white-space: nowrap;
100+
}
101+
102+
.ct {
103+
position: absolute;
104+
top: 0;
105+
right: 0;
106+
background-color: var(--vp-c-brand-3);
107+
color: var(--vp-c-brand-text);
108+
font-size: 10px;
109+
padding: 4px 8px;
110+
border-top-right-radius: 8px;
111+
border-bottom-left-radius: 4px;
112+
z-index: 1;
113+
}
114+
115+
.i {
116+
margin-right: 8px;
117+
height: 2em;
118+
width: auto;
119+
display: flex;
120+
justify-content: center;
121+
align-items: center;
122+
border-radius: 6px;
123+
}
124+
125+
.icon-container {
126+
// display: flex;
127+
// justify-content: center;
128+
// align-items: center;
129+
margin-right: 8px;
130+
}
131+
132+
.t {
133+
font-size: 14px;
134+
line-height: 1;
135+
letter-spacing: -0.02em;
136+
display: flex;
137+
align-items: center;
138+
text-decoration: none;
139+
overflow: hidden;
140+
text-overflow: ellipsis;
141+
white-space: nowrap;
142+
}
143+
</style>

0 commit comments

Comments
 (0)