Skip to content

Commit 2bde6bf

Browse files
yyx990803yyx990803
committed
revert home page feature
1 parent 8809d2d commit 2bde6bf

File tree

7 files changed

+385
-2
lines changed

7 files changed

+385
-2
lines changed

‎docs/.vitepress/config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ function getConfigSidebar() {
7272
{
7373
text: 'Theme Config',
7474
children: [
75+
{ text: 'Homepage', link: '/config/homepage' },
7576
{ text: 'Algolia Search', link: '/config/algolia-search' },
7677
{ text: 'Carbon Ads', link: '/config/carbon-ads' }
7778
]

‎docs/config/homepage.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Theme Config: Homepage
2+
3+
VitePress provides a homepage layout. To use it, specify `home: true` plus some other metadata in your root `index.md`'s [YAML frontmatter](../guide/frontmatter). This is an example of how it works:
4+
5+
```yaml
6+
---
7+
home: true
8+
heroImage: /logo.png
9+
heroAlt: Logo image
10+
heroText: Hero Title
11+
tagline: Hero subtitle
12+
actionText: Get Started
13+
actionLink: /guide/
14+
features:
15+
- title: Simplicity First
16+
details: Minimal setup with markdown-centered project structure helps you focus on writing.
17+
- title: Vue-Powered
18+
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
19+
- title: Performant
20+
details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
21+
footer: MIT Licensed | Copyright © 2019-present Evan You
22+
---
23+
```

‎src/client/theme-default/Layout.vue‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,20 @@
1919
<!-- TODO: make this button accessible -->
2020
<div class="sidebar-mask" @click="toggleSidebar(false)" />
2121

22-
<Content v-if="isCustomLayout"/>
22+
<Content v-if="isCustomLayout" />
23+
24+
<Home v-else-if="enableHome">
25+
<template #hero>
26+
<slot name="home-hero" />
27+
</template>
28+
<template #features>
29+
<slot name="home-features" />
30+
</template>
31+
<template #footer>
32+
<slot name="home-footer" />
33+
</template>
34+
</Home>
35+
2336
<Page v-else>
2437
<template #top>
2538
<slot name="page-top-ads">
@@ -63,6 +76,7 @@ import type { DefaultTheme } from './config'
6376
import NavBar from './components/NavBar.vue'
6477
import SideBar from './components/SideBar.vue'
6578
import Page from './components/Page.vue'
79+
const Home = defineAsyncComponent(() => import('./components/Home.vue'))
6680
const CarbonAds = defineAsyncComponent(
6781
() => import('./components/CarbonAds.vue')
6882
)
@@ -82,6 +96,8 @@ const page = usePageData()
8296
8397
// custom layout
8498
const isCustomLayout = computed(() => !!route.data.frontmatter.customLayout)
99+
// home
100+
const enableHome = computed(() => !!route.data.frontmatter.home)
85101
86102
// navbar
87103
const showNavbar = computed(() => {
@@ -105,7 +121,7 @@ const showSidebar = computed(() => {
105121
const { frontmatter } = route.data
106122
const { themeConfig } = siteRouteData.value
107123
return (
108-
!frontmatter.customLayout &&
124+
!frontmatter.home &&
109125
frontmatter.sidebar !== false &&
110126
((typeof themeConfig.sidebar === 'object' &&
111127
Object.keys(themeConfig.sidebar).length != 0) ||

‎src/client/theme-default/components/Home.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<main class="home" aria-labelledby="main-title">
3+
<HomeHero />
4+
<slot name="hero" />
5+
<HomeFeatures />
6+
<slot name="features" />
7+
<HomeFooter />
8+
<slot name="footer" />
9+
</main>
10+
</template>
11+
12+
<script setup lang="ts">
13+
import HomeHero from './HomeHero.vue'
14+
import HomeFeatures from './HomeFeatures.vue'
15+
import HomeFooter from './HomeFooter.vue'
16+
</script>
17+
18+
<style scoped>
19+
.home {
20+
padding-top: var(--header-height);
21+
}
22+
</style>

‎src/client/theme-default/components/HomeFeatures.vue‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<template>
2+
<div v-if="hasFeatures" class="home-features">
3+
<div class="wrapper">
4+
<div class="container">
5+
<div class="features">
6+
<section v-for="(feature, index) in features" :key="index" class="feature">
7+
<h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
8+
<p class="details" v-if="feature.details">{{ feature.details }}</p>
9+
</section>
10+
</div>
11+
</div>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script setup lang="ts">
17+
import { computed } from 'vue'
18+
import { useSiteDataByRoute, useFrontmatter } from 'vitepress'
19+
20+
const data = useFrontmatter()
21+
22+
const hasFeatures = computed(() => {
23+
return data.value.features && data.value.features.length > 0
24+
})
25+
26+
const features = computed(() => {
27+
return data.value.features ? data.value.features : []
28+
})
29+
</script>
30+
31+
<style scoped>
32+
.home-features {
33+
margin: 0 auto;
34+
padding: 2.5rem 0 2.75rem;
35+
max-width: 960px;
36+
}
37+
38+
.home-hero + .home-features {
39+
padding-top: 0;
40+
}
41+
42+
@media (min-width: 420px) {
43+
.home-features {
44+
padding: 3.25rem 0 3.5rem;
45+
}
46+
47+
.home-hero + .home-features {
48+
padding-top: 0;
49+
}
50+
}
51+
52+
@media (min-width: 720px) {
53+
.home-features {
54+
padding-right: 1.5rem;
55+
padding-left: 1.5rem;
56+
}
57+
}
58+
59+
.wrapper {
60+
padding: 0 1.5rem;
61+
}
62+
63+
.home-hero + .home-features .wrapper {
64+
border-top: 1px solid var(--c-divider);
65+
padding-top: 2.5rem;
66+
}
67+
68+
@media (min-width: 420px) {
69+
.home-hero + .home-features .wrapper {
70+
padding-top: 3.25rem;
71+
}
72+
}
73+
74+
@media (min-width: 720px) {
75+
.wrapper {
76+
padding-right: 0;
77+
padding-left: 0;
78+
}
79+
}
80+
81+
.container {
82+
margin: 0 auto;
83+
max-width: 392px;
84+
}
85+
86+
@media (min-width: 720px) {
87+
.container {
88+
max-width: 960px;
89+
}
90+
}
91+
92+
.features {
93+
display: flex;
94+
flex-wrap: wrap;
95+
margin: -20px -24px;
96+
}
97+
98+
.feature {
99+
flex-shrink: 0;
100+
padding: 20px 24px;
101+
width: 100%;
102+
}
103+
104+
@media (min-width: 720px) {
105+
.feature {
106+
width: calc(100% / 3);
107+
}
108+
}
109+
110+
.title {
111+
margin: 0;
112+
border-bottom: 0;
113+
line-height: 1.4;
114+
font-size: 1.25rem;
115+
font-weight: 500;
116+
}
117+
118+
@media (min-width: 420px) {
119+
.title {
120+
font-size: 1.4rem;
121+
}
122+
}
123+
124+
.details {
125+
margin: 0;
126+
line-height: 1.6;
127+
font-size: 1rem;
128+
color: var(--c-text-light);
129+
}
130+
131+
.title + .details {
132+
padding-top: 0.25rem;
133+
}
134+
</style>

‎src/client/theme-default/components/HomeFooter.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<footer v-if="$frontmatter.footer" class="footer">
3+
<div class="container">
4+
<p class="text">{{ $frontmatter.footer }}</p>
5+
</div>
6+
</footer>
7+
</template>
8+
9+
<style scoped>
10+
.footer {
11+
margin: 0 auto;
12+
max-width: 960px;
13+
}
14+
15+
@media (min-width: 720px) {
16+
.footer {
17+
padding: 0 1.5rem;
18+
}
19+
}
20+
21+
.container {
22+
padding: 2rem 1.5rem 2.25rem;
23+
}
24+
25+
.home-hero + .footer .container,
26+
.home-features + .footer .container,
27+
.home-content + .footer .container {
28+
border-top: 1px solid var(--c-divider);
29+
}
30+
31+
@media (min-width: 420px) {
32+
.container {
33+
padding: 3rem 1.5rem 3.25rem;
34+
}
35+
}
36+
37+
.text {
38+
margin: 0;
39+
text-align: center;
40+
line-height: 1.4;
41+
font-size: .9rem;
42+
color: var(--c-text-light);
43+
}
44+
</style>

0 commit comments

Comments
 (0)