Skip to content

Commit 9a99c9b

Browse files
JursinJursin
committed
优化样式，添加 Wakatime 图表
1 parent 3d00bfb commit 9a99c9b

13 files changed

Lines changed: 432 additions & 398 deletions

File tree

‎docs/.vuepress/client.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ import ItemGrid from './theme/components/ItemGrid.vue'
99
import Douyin from './theme/components/Douyin.vue'
1010
import PostsTop from './theme/components/PostsTop.vue'
1111

12-
import './theme/styles/custom.css'
12+
import './theme/styles/var.css'
13+
import './theme/styles/posts-container.css'
14+
import './theme/styles/nav.css'
15+
import './theme/styles/doc.css'
16+
import './theme/styles/friends.css'
1317

1418
export default defineClientConfig({
1519
enhance({ app }) {

‎docs/.vuepress/theme/components/AsideNav.vue‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,16 @@ import { VPLink } from 'vuepress-theme-plume/client'
44
import { useRouteLocale, useRoute } from 'vuepress/client'
55
66
interface Locale {
7-
star: string
87
issue: string
98
share: string
109
copied: string
1110
}
1211
1312
const locales: Record<string, Locale> = {
14-
'/': {
15-
star: '在 GitHub 上 Star',
13+
'/': {
1614
issue: '指出发现的问题',
1715
share: '分享此页面',
18-
copied: '链接已复制！'
16+
copied: '链接复制成功！'
1917
},
2018
}
2119
@@ -31,20 +29,15 @@ const copyPageLink = () => {
3129
alert(locale.value.copied)
3230
})
3331
.catch(err => {
34-
console.error('复制失败:', err)
32+
console.error('链接复制失败:', err)
3533
})
3634
}
3735
}
3836
</script>
3937

4038
<template>
4139
<div class="aside-nav-wrapper">
42-
<VPLink class="link" no-icon href="https://github.com/Jursin/MC-Guide">
43-
<span class="vpi-github-star" />
44-
<span class="link-text">{{ locale.star }}</span>
45-
<span class="vpi-arrow-right" />
46-
</VPLink>
47-
<VPLink class="link" no-icon href="https://github.com/Jursin/MC-Guide/issues/new/choose">
40+
<VPLink class="link" no-icon href="https://github.com/Jursin/Blog/issues/new/choose">
4841
<span class="vpi-github-issue" />
4942
<span class="link-text">{{ locale.issue }}</span>
5043
<span class="vpi-arrow-right" />
@@ -61,8 +54,9 @@ const copyPageLink = () => {
6154
.aside-nav-wrapper {
6255
display: flex;
6356
flex-direction: column;
57+
gap: 4px;
6458
padding: 8px 0;
65-
margin: 16px 16px 0;
59+
margin: 8px 16px 0;
6660
border-top: solid 1px var(--vp-c-divider);
6761
}
6862
@@ -81,11 +75,7 @@ const copyPageLink = () => {
8175
8276
.aside-nav-wrapper .link .link-text {
8377
flex: 1 2;
84-
font-size: 12px;
85-
}
86-
87-
.vpi-github-star {
88-
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12 1.5l3.1 6.3l6.9 1l-5 4.8l1.2 6.9l-6.2-3.2l-6.2 3.2L7 13.6L2 8.8l6.9-1z'/%3E%3C/svg%3E");
78+
font-size: 14px;
8979
}
9080
9181
.vpi-github-issue {

‎docs/.vuepress/theme/components/GitHubCard.vue‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -287,20 +287,15 @@ export default {
287287
border-radius: 10px;
288288
padding: 12px;
289289
}
290-
291-
.avatar {
292-
width: 50px;
293-
height: 50px;
294-
}
295-
290+
296291
.repo-info h3 {
297292
font-size: 18px;
298293
}
299-
294+
300295
.description {
301296
font-size: 14px;
302297
}
303-
298+
304299
.stats {
305300
flex-direction: row;
306301
flex-wrap: wrap;
@@ -313,14 +308,14 @@ export default {
313308
flex: 0 0 auto;
314309
width: auto;
315310
}
316-
311+
317312
.footer {
318313
flex-direction: row;
319314
flex-wrap: wrap;
320315
align-items: flex-start;
321316
gap: 12px;
322317
}
323-
318+
324319
.dates {
325320
flex-direction: column;
326321
gap: 8px;

‎docs/.vuepress/theme/components/ItemGrid.vue‎

Lines changed: 103 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,72 @@
11
<template>
22
<div class="skills">
33
<h2 class="title">技能</h2>
4-
<!-- 技术栈 -->
5-
<h3>🫡使用的技术栈</h3>
6-
<div class="itemGrid">
7-
<div
8-
v-for="(item, index) in techStackData.techStack"
9-
:key="'tech-' + index"
10-
class="gridItem"
11-
:data-name="item.name"
12-
>
13-
<template v-if="item.custom">
14-
<svg width="2rem" height="2rem" viewBox="0 0 24 24" :fill="item.fill || 'currentColor'">
15-
<path :d="item.svg" :fill="item.fill || 'currentColor'"/>
16-
</svg>
17-
</template>
18-
<template v-else>
19-
<Icon :name="item.icon" size="2rem" />
20-
</template>
4+
<div class="wrapper-left">
5+
<!-- 技术栈 -->
6+
<h3>🫡使用的技术栈</h3>
7+
<div class="itemGrid">
8+
<div
9+
v-for="(item, index) in techStackData.techStack"
10+
:key="'tech-' + index"
11+
class="gridItem"
12+
:data-name="item.name"
13+
>
14+
<template v-if="item.custom">
15+
<svg width="2rem" height="2rem" viewBox="0 0 24 24" :fill="item.fill || 'currentColor'">
16+
<path :d="item.svg" :fill="item.fill || 'currentColor'"/>
17+
</svg>
18+
</template>
19+
<template v-else>
20+
<Icon :name="item.icon" size="2rem" />
21+
</template>
22+
</div>
2123
</div>
22-
</div>
2324

24-
<!-- 开发工具 -->
25-
<h3>🛠️使用的编程工具</h3>
26-
<div class="itemGrid">
27-
<div
28-
v-for="(item, index) in devToolsData.devTools"
29-
:key="'tool-' + index"
30-
class="gridItem"
31-
:data-name="item.name"
32-
>
33-
<template v-if="item.custom">
34-
<svg width="2rem" height="2rem" viewBox="0 0 24 24" :fill="item.fill || 'currentColor'">
35-
<path :d="item.svg" :fill="item.fill || 'currentColor'"/>
36-
</svg>
37-
</template>
38-
<template v-else>
39-
<Icon :name="item.icon" size="2rem" />
40-
</template>
25+
<!-- 开发工具 -->
26+
<h3>🛠️使用的编程工具</h3>
27+
<div class="itemGrid">
28+
<div
29+
v-for="(item, index) in devToolsData.devTools"
30+
:key="'tool-' + index"
31+
class="gridItem"
32+
:data-name="item.name"
33+
>
34+
<template v-if="item.custom">
35+
<svg width="2rem" height="2rem" viewBox="0 0 24 24" :fill="item.fill || 'currentColor'">
36+
<path :d="item.svg" :fill="item.fill || 'currentColor'"/>
37+
</svg>
38+
</template>
39+
<template v-else>
40+
<Icon :name="item.icon" size="2rem" />
41+
</template>
42+
</div>
4143
</div>
42-
</div>
4344

44-
<!-- 云服务平台 -->
45-
<h3>☁️使用的云服务平台</h3>
46-
<div class="itemGrid">
47-
<div
48-
v-for="(item, index) in cloudPlatformsData.cloudPlatforms"
49-
:key="'cloud-' + index"
50-
class="gridItem"
51-
:data-name="item.name"
52-
>
53-
<template v-if="item.custom">
54-
<svg width="2rem" height="2rem" viewBox="0 0 24 24" :fill="item.fill || 'currentColor'">
55-
<path :d="item.svg" :fill="item.fill || 'currentColor'"/>
56-
</svg>
57-
</template>
58-
<template v-else>
59-
<Icon :name="item.icon" size="2rem" />
60-
</template>
45+
<!-- 云服务平台 -->
46+
<h3>☁️使用的云服务平台</h3>
47+
<div class="itemGrid">
48+
<div
49+
v-for="(item, index) in cloudPlatformsData.cloudPlatforms"
50+
:key="'cloud-' + index"
51+
class="gridItem"
52+
:data-name="item.name"
53+
>
54+
<template v-if="item.custom">
55+
<svg width="2rem" height="2rem" viewBox="0 0 24 24" :fill="item.fill || 'currentColor'">
56+
<path :d="item.svg" :fill="item.fill || 'currentColor'"/>
57+
</svg>
58+
</template>
59+
<template v-else>
60+
<Icon :name="item.icon" size="2rem" />
61+
</template>
62+
</div>
6163
</div>
6264
</div>
65+
<div class="wrapper-right">
66+
<figure>
67+
<embed src="https://wakatime.com/share/@Jursin/a235ad1d-764d-4e34-bc33-02083dc0a213.svg"></embed>
68+
</figure>
69+
</div>
6370
<div class="project">
6471
<div class="project-header">
6572
<Icon name="octicon:repo-16" size="20px" />
@@ -85,9 +92,13 @@ import cloudPlatformsData from "../data/cloudPlatforms.json";
8592
max-width: 1400px;
8693
margin: 20px auto;
8794
padding: 20px;
95+
display: grid;
96+
grid-template-columns: 1fr 1fr;
97+
gap: 20px;
8898
}
8999
90100
.title {
101+
grid-column: 1 / -1;
91102
padding: 40px 0 0 0;
92103
margin: 0 0 16px 0 !important;
93104
padding: 0 !important;
@@ -99,6 +110,29 @@ import cloudPlatformsData from "../data/cloudPlatforms.json";
99110
transition: color var(--vp-t-color);
100111
}
101112
113+
.wrapper-left {
114+
grid-column: 1;
115+
}
116+
117+
.wrapper-right {
118+
grid-column: 2;
119+
display: flex;
120+
align-items: center;
121+
justify-content: center;
122+
}
123+
124+
.wrapper-right figure {
125+
width: 100%;
126+
height: auto;
127+
margin: 0;
128+
}
129+
130+
.wrapper-right embed {
131+
width: 100%;
132+
height: auto;
133+
display: block;
134+
}
135+
102136
h3 {
103137
margin-top: 2rem;
104138
margin-bottom: 1rem;
@@ -144,6 +178,10 @@ h3 {
144178
opacity: 1;
145179
}
146180
181+
.project {
182+
grid-column: 1 / -1;
183+
}
184+
147185
.project-header {
148186
display: flex;
149187
align-items: center;
@@ -162,6 +200,18 @@ h3 {
162200
}
163201
164202
@media (max-width: 768px) {
203+
.skills {
204+
grid-template-columns: 1fr;
205+
}
206+
207+
.wrapper-left {
208+
grid-column: 1;
209+
}
210+
211+
.wrapper-right {
212+
grid-column: 1;
213+
}
214+
165215
.github-cards-grid {
166216
grid-template-columns: 1fr;
167217
}

‎docs/.vuepress/theme/components/PostsTop.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@ canvas {
149149
box-shadow: var(--vp-shadow-1);
150150
border-radius: 8px;
151151
font-size: 20px;
152+
font-family: "SimSun", serif;
152153
color: var(--vp-c-text-1);
153154
padding: 0.65em;
154155
margin: 16px 0;

0 commit comments

Comments
 (0)