Skip to content

Commit 1997258

Browse files
coder-hxlcoder-hxl
committed
feat: x-crawl has sponsors
1 parent c6d1f72 commit 1997258

File tree

8 files changed

+232
-2
lines changed

8 files changed

+232
-2
lines changed

‎docs/.vitepress/theme/components/SponsorsAside.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script setup lang="ts">
2+
import SponsorsGroup from './SponsorsGroup.vue'
3+
import { useData } from 'vitepress'
4+
const { frontmatter } = useData()
5+
</script>
6+
7+
<template>
8+
<div v-if="frontmatter.sponsors !== false">
9+
<a class="sponsors-aside-text" href="/sponsor/">赞助位</a>
10+
<SponsorsGroup />
11+
</div>
12+
</template>
13+
14+
<style scoped>
15+
.sponsor-container {
16+
--max-width: 100%;
17+
display: grid;
18+
grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr));
19+
column-gap: 4px;
20+
}
21+
22+
.sponsor-item {
23+
margin: 2px 0;
24+
padding: 10px 6px;
25+
display: block;
26+
border-radius: 2px;
27+
color: rgba(60, 60, 60, 0.5);
28+
background-color: #f6f6f6;
29+
}
30+
31+
.sponsor-item-img {
32+
display: flex;
33+
justify-content: space-around;
34+
align-items: center;
35+
}
36+
37+
.sponsor-item img {
38+
max-width: calc(var(--max-width) - 30px);
39+
max-height: calc(var(--max-width) / 2 - 20px);
40+
}
41+
.sponsor-item-description {
42+
text-align: center;
43+
font-size: 13px;
44+
color: rgb(74, 74, 74);
45+
}
46+
47+
.sponsor-item-action {
48+
margin: 2px 0;
49+
display: flex;
50+
justify-content: space-around;
51+
align-items: center;
52+
border-radius: 2px;
53+
height: 30px;
54+
font-size: 11px;
55+
color: rgba(60, 60, 60, 0.5);
56+
background-color: #f6f6f6;
57+
}
58+
</style>

‎docs/.vitepress/theme/components/SponsorsGroup.vue

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<script setup lang="ts">
2+
import sponsorData from './sponsors.json'
3+
</script>
4+
5+
<template>
6+
<div class="sponsor-container">
7+
<a
8+
v-for="{ url, img, name, description } in sponsorData"
9+
class="sponsor-item"
10+
:href="url"
11+
target="_blank"
12+
rel="sponsored noopener"
13+
>
14+
<div class="sponsor-item-img">
15+
<img :src="img" :alt="name" />
16+
</div>
17+
<div class="sponsor-item-description">🎁{{ description }}</div>
18+
</a>
19+
20+
<a href="/sponsor/" class="sponsor-item-action">成为赞助商</a>
21+
</div>
22+
</template>
23+
24+
<style scoped>
25+
.sponsor-container {
26+
--max-width: 100%;
27+
display: grid;
28+
grid-template-columns: repeat(auto-fill, minmax(var(--max-width), 1fr));
29+
column-gap: 4px;
30+
}
31+
32+
.sponsor-item {
33+
margin: 2px 0;
34+
padding: 10px 6px;
35+
display: block;
36+
border-radius: 2px;
37+
color: rgba(60, 60, 60, 0.5);
38+
background-color: #f6f6f6;
39+
}
40+
41+
.sponsor-item-img {
42+
display: flex;
43+
justify-content: space-around;
44+
align-items: center;
45+
}
46+
47+
.sponsor-item img {
48+
max-width: calc(var(--max-width) - 30px);
49+
max-height: calc(var(--max-width) / 2 - 20px);
50+
}
51+
.sponsor-item-description {
52+
text-align: center;
53+
font-size: 13px;
54+
color: rgb(74, 74, 74);
55+
}
56+
57+
.sponsor-item-action {
58+
margin: 2px 0;
59+
display: flex;
60+
justify-content: space-around;
61+
align-items: center;
62+
border-radius: 2px;
63+
height: 30px;
64+
font-size: 11px;
65+
color: rgba(60, 60, 60, 0.5);
66+
background-color: #f6f6f6;
67+
}
68+
69+
/* dark mode */
70+
.dark .aside .sponsor-item {
71+
background-color: var(--vt-c-bg-soft);
72+
}
73+
.aside .sponsor-item img {
74+
transition: filter 0.2s ease;
75+
}
76+
.dark .aside .sponsor-item img {
77+
filter: grayscale(1) invert(1);
78+
}
79+
.dark .aside .sponsor-item:hover {
80+
color: var(--vt-c-indigo);
81+
background-color: var(--vt-c-white-mute);
82+
}
83+
.dark .sponsor-item:hover img {
84+
filter: none;
85+
}
86+
</style>

‎docs/.vitepress/theme/components/SponsorsHome.vue

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<script setup lang="ts">
2+
import { useData } from 'vitepress'
3+
4+
import sponsorData from './sponsors.json'
5+
6+
const { frontmatter } = useData()
7+
</script>
8+
9+
<template>
10+
<div v-if="frontmatter.sponsors !== false" class="sponsors-home">
11+
<div class="title">Sponsors</div>
12+
13+
<a
14+
v-for="{ url, img, name, description } in sponsorData"
15+
class="sponsor-item"
16+
:href="url"
17+
target="_blank"
18+
rel="sponsored noopener"
19+
>
20+
<div class="sponsor-item-img">
21+
<img :src="img" :alt="name" />
22+
</div>
23+
<div class="sponsor-item-description">🎁{{ description }}</div>
24+
</a>
25+
</div>
26+
</template>
27+
28+
<style scoped>
29+
.sponsors-home {
30+
margin: 0 auto;
31+
max-width: 1152px;
32+
}
33+
34+
.title {
35+
margin: 50px 0 10px;
36+
font-size: 19px;
37+
font-weight: 600;
38+
}
39+
40+
.sponsor-item {
41+
padding: 12px 6px;
42+
display: block;
43+
border-radius: 2px;
44+
background-color: #f6f6f6;
45+
}
46+
47+
.sponsor-item-img {
48+
display: flex;
49+
justify-content: space-around;
50+
align-items: center;
51+
}
52+
53+
.sponsor-item-img img {
54+
max-height: 160px;
55+
}
56+
57+
.sponsor-item-description {
58+
text-align: center;
59+
font-size: 14px;
60+
color: rgb(74, 74, 74);
61+
}
62+
</style>

‎docs/.vitepress/theme/components/sponsors.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[
2+
{
3+
"url": "https://console.123proxy.cn/price-dynamic.html?plist=1&utm_source=xcrawl",
4+
"img": "/x-crawl/sponsors/123proxy.webp",
5+
"name": "123proxy",
6+
"description": "企业级 HTTP 代理 IP ! 现免费测试 2-4 小时 + 15% 返现活动"
7+
}
8+
]

‎docs/.vitepress/theme/custom.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,7 @@
1010
*::-webkit-scrollbar-track {
1111
border-radius: 10px;
1212
}
13+
14+
.spacer {
15+
flex-grow: 0 !important;
16+
}

‎docs/.vitepress/theme/index.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
1+
import { h } from 'vue'
12
import DefaultTheme from 'vitepress/theme'
23

4+
import SponsorsHome from './components/SponsorsHome.vue'
5+
import SponsorsAside from './components/SponsorsAside.vue'
6+
37
import './custom.css'
48
import './style/vars.css'
59

6-
export default DefaultTheme
10+
export default {
11+
extends: DefaultTheme,
12+
Layout() {
13+
return h(DefaultTheme.Layout, null, {
14+
'home-features-after': () => h(SponsorsHome),
15+
'aside-bottom': () => h(SponsorsAside)
16+
})
17+
}
18+
}

‎docs/public/sponsors/123proxy.webp

34.4 KB
Binary file not shown.

‎tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,5 @@
1818
"publish/*": ["./publish"]
1919
}
2020
},
21-
"include": ["packages/**/*", "test/**/*", "publish/**/*"]
21+
"include": ["packages/**/*", "test/**/*", "publish/**/*", "docs/**/*"]
2222
}

0 commit comments

Comments
 (0)