Skip to content

Commit cec1e14

Browse files
author
coder-zrl
committed
add Home.vue
1 parent 7a501a9 commit cec1e14

File tree

4 files changed

+208
-2
lines changed

4 files changed

+208
-2
lines changed

‎docs/.vuepress/client.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineClientConfig } from '@vuepress/client'
2+
import Home from './components/Home.vue'
3+
4+
export default defineClientConfig({
5+
enhance({ app }) {
6+
app.component('Home', Home)
7+
},
8+
})

‎docs/.vuepress/components/Home.vue

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<template>
2+
<div class="home-container">
3+
<div class="hero">
4+
<img class="hero-image" src="/img/logo.png" alt="Logo">
5+
<div class="action-buttons">
6+
<a class="primary-button" href="/guide/">开始阅读</a>
7+
</div>
8+
</div>
9+
10+
<div class="latest-posts">
11+
<h2>最新文章</h2>
12+
<div class="post-grid">
13+
<div class="post-card" v-for="post in posts" :key="post.title">
14+
<div class="post-info">
15+
<h3>{{ post.title }}</h3>
16+
<p class="post-desc">{{ post.description }}</p>
17+
<div class="post-meta">
18+
<span class="post-date">{{ post.date }}</span>
19+
<span class="post-tags" v-for="tag in post.tags" :key="tag">{{ tag }}</span>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</template>
27+
28+
<script>
29+
export default {
30+
data() {
31+
return {
32+
posts: [
33+
{
34+
title: 'Base64编码原理与应用',
35+
description: 'Base64编码原理与在实际开发中的应用场景',
36+
date: '2024-03-21',
37+
tags: ['编码', '开发']
38+
},
39+
{
40+
title: 'Java异步编程',
41+
description: '深入理解Java异步编程原理与实践',
42+
date: '2024-03-20',
43+
tags: ['Java', '并发']
44+
},
45+
{
46+
title: 'Stream流式处理',
47+
description: 'Java Stream API的使用与最佳实践',
48+
date: '2024-03-19',
49+
tags: ['Java', '函数式编程']
50+
}
51+
]
52+
}
53+
}
54+
}
55+
</script>
56+
57+
<style scoped>
58+
.home-container {
59+
max-width: 1200px;
60+
margin: 0 auto;
61+
padding: 2rem 1rem;
62+
}
63+
64+
.hero {
65+
text-align: center;
66+
padding: 6rem 0;
67+
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8));
68+
}
69+
70+
.hero-image {
71+
width: 180px;
72+
height: 180px;
73+
margin-bottom: 2rem;
74+
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
75+
}
76+
77+
.hero h1 {
78+
font-size: 3rem;
79+
margin: 1rem 0;
80+
background: linear-gradient(120deg, #3eaf7c, #2c3e50);
81+
-webkit-background-clip: text;
82+
-webkit-text-fill-color: transparent;
83+
}
84+
85+
.description {
86+
font-size: 1.4rem;
87+
color: #666;
88+
margin: 1.5rem 0 3rem;
89+
font-style: italic;
90+
}
91+
92+
.action-buttons a {
93+
padding: 1rem 2.5rem;
94+
border-radius: 25px;
95+
font-weight: 500;
96+
text-decoration: none;
97+
transition: all 0.3s ease;
98+
font-size: 1.1rem;
99+
}
100+
101+
.primary-button {
102+
background-color: #3eaf7c;
103+
color: white;
104+
box-shadow: 0 4px 12px rgba(62, 175, 124, 0.3);
105+
}
106+
107+
.primary-button:hover {
108+
background-color: #2c8f63;
109+
transform: translateY(-2px);
110+
}
111+
112+
.latest-posts {
113+
padding: 4rem 0;
114+
}
115+
116+
.latest-posts h2 {
117+
text-align: center;
118+
margin-bottom: 3rem;
119+
font-size: 2rem;
120+
color: #2c3e50;
121+
}
122+
123+
.post-grid {
124+
display: grid;
125+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
126+
gap: 2rem;
127+
}
128+
129+
.post-card {
130+
background: white;
131+
border-radius: 12px;
132+
padding: 1.5rem;
133+
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
134+
transition: all 0.3s ease;
135+
}
136+
137+
.post-card:hover {
138+
transform: translateY(-5px);
139+
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
140+
}
141+
142+
.post-info h3 {
143+
font-size: 1.2rem;
144+
margin-bottom: 0.8rem;
145+
color: #2c3e50;
146+
}
147+
148+
.post-desc {
149+
color: #666;
150+
margin-bottom: 1rem;
151+
line-height: 1.6;
152+
}
153+
154+
.post-meta {
155+
display: flex;
156+
flex-wrap: wrap;
157+
gap: 0.8rem;
158+
font-size: 0.9rem;
159+
}
160+
161+
.post-date {
162+
color: #999;
163+
}
164+
165+
.post-tags {
166+
background: #f0f0f0;
167+
padding: 0.2rem 0.8rem;
168+
border-radius: 15px;
169+
color: #666;
170+
}
171+
172+
@media (max-width: 719px) {
173+
.hero {
174+
padding: 3rem 0;
175+
}
176+
177+
.hero-image {
178+
width: 140px;
179+
height: 140px;
180+
}
181+
182+
.hero h1 {
183+
font-size: 2.2rem;
184+
}
185+
186+
.description {
187+
font-size: 1.2rem;
188+
}
189+
}
190+
</style>
191+
192+

‎docs/.vuepress/config.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {viteBundler} from '@vuepress/bundler-vite'
22
import {defaultTheme} from '@vuepress/theme-default'
33
import {defineUserConfig} from 'vuepress'
4+
import { path } from '@vuepress/utils'
45

56
export default defineUserConfig({
67
bundler: viteBundler(),
@@ -65,4 +66,5 @@ export default defineUserConfig({
6566
lang: 'zh-CN',
6667
title: 'Bird的个人知识库',
6768
description: 'Just playing around',
69+
clientConfigFile: path.resolve(__dirname, './client.js')
6870
})

‎docs/README.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
# Bird的个人知识库
1+
---
2+
home: true
3+
---
24

3-
欢迎来到我的个人知识库！
5+
<ClientOnly>
6+
<Home />
7+
</ClientOnly>

0 commit comments

Comments
 (0)