mirror of https://github.com/vuejs/vitepress
Kia King Ishii
5 years ago
parent
77bb75f7ee
commit
d4958400bb
@ -0,0 +1,23 @@
|
||||
# Theme Config: Homepage
|
||||
|
||||
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:
|
||||
|
||||
```yaml
|
||||
---
|
||||
home: true
|
||||
heroImage: /logo.png
|
||||
heroAlt: Logo image
|
||||
heroText: Hero Title
|
||||
tagline: Hero subtitle
|
||||
actionText: Get Started
|
||||
actionLink: /guide/
|
||||
features:
|
||||
- title: Simplicity First
|
||||
details: Minimal setup with markdown-centered project structure helps you focus on writing.
|
||||
- title: Vue-Powered
|
||||
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
|
||||
- title: Performant
|
||||
details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
|
||||
footer: MIT Licensed | Copyright © 2019-present Evan You
|
||||
---
|
||||
```
|
||||
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div v-if="hasFeatures" class="home-features">
|
||||
<div class="wrapper">
|
||||
<div class="container">
|
||||
<div class="features">
|
||||
<section v-for="(feature, index) in features" :key="index" class="feature">
|
||||
<h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
|
||||
<p class="details" v-if="feature.details">{{ feature.details }}</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useRoute, useSiteDataByRoute } from 'vitepress'
|
||||
import { withBase } from '../utils'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const siteData = useSiteDataByRoute()
|
||||
|
||||
const data = computed(() => route.data.frontmatter)
|
||||
|
||||
const hasFeatures = computed(() => {
|
||||
return data.value.features && data.value.features.length > 0
|
||||
})
|
||||
|
||||
const features = computed(() => {
|
||||
return data.value.features ? data.value.features : []
|
||||
})
|
||||
|
||||
return {
|
||||
data,
|
||||
hasFeatures,
|
||||
features
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-features {
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 0 2.75rem;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.home-hero + .home-features {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.home-features {
|
||||
padding: 3.25rem 0 3.5rem;
|
||||
}
|
||||
|
||||
.home-hero + .home-features {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.home-features {
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.home-hero + .home-features .wrapper {
|
||||
border-top: 1px solid var(--c-divider);
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.home-hero + .home-features .wrapper {
|
||||
padding-top: 3.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.wrapper {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 392px;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -20px -24px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
flex-shrink: 0;
|
||||
padding: 20px 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.feature {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
border-bottom: 0;
|
||||
line-height: 1.4;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
font-size: 1rem;
|
||||
color: var(--c-text-light);
|
||||
}
|
||||
|
||||
.title + .details {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<footer v-if="footer" class="footer">
|
||||
<div class="container">
|
||||
<p class="text">{{ footer }}</p>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useRoute } from 'vitepress'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
|
||||
const footer = computed(() => route.data.frontmatter.footer)
|
||||
|
||||
return {
|
||||
footer
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.footer {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 2rem 1.5rem 2.25rem;
|
||||
}
|
||||
|
||||
.home-hero + .footer .container,
|
||||
.home-features + .footer .container,
|
||||
.home-content + .footer .container {
|
||||
border-top: 1px solid var(--c-divider);
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.container {
|
||||
padding: 3rem 1.5rem 3.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
font-size: .9rem;
|
||||
color: var(--c-text-light);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<header v-if="showHero" class="home-hero">
|
||||
<figure v-if="hasHeroImage" class="figure">
|
||||
<img class="image" :src="heroImage" :alt="heroAlt">
|
||||
</figure>
|
||||
|
||||
<h1 v-if="hasHeroText" class="title">{{ heroText }}</h1>
|
||||
<p v-if="hasTagline" class="description">{{ tagline }}</p>
|
||||
|
||||
<div v-if="hasAction" class="action">
|
||||
<a class="action-link" :href="actionLink">
|
||||
{{ actionText }}
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { useRoute, useSiteDataByRoute } from 'vitepress'
|
||||
import { withBase } from '../utils'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const siteData = useSiteDataByRoute()
|
||||
|
||||
const data = computed(() => route.data.frontmatter)
|
||||
|
||||
const showHero = computed(() => {
|
||||
return hasHeroImage.value
|
||||
|| hasHeroText.value
|
||||
|| hasTagline.value
|
||||
|| hasAction.value
|
||||
})
|
||||
|
||||
const hasHeroImage = computed(() => !!data.value.heroImage)
|
||||
const heroImage = computed(() => withBase(data.value.heroImage))
|
||||
const heroAlt = computed(() => data.value.heroAlt || 'Hero image')
|
||||
|
||||
const hasHeroText = computed(() => data.value.heroText !== null)
|
||||
|
||||
const heroText = computed(() => {
|
||||
return data.value.heroText || siteData.value.title
|
||||
})
|
||||
|
||||
const hasTagline = computed(() => data.value.tagline !== null)
|
||||
|
||||
const tagline = computed(() => {
|
||||
return data.value.tagline || siteData.value.description
|
||||
})
|
||||
|
||||
const hasAction = computed(() => {
|
||||
return data.value.actionLink && data.value.actionText
|
||||
})
|
||||
|
||||
const actionLink = computed(() => data.value.actionLink)
|
||||
const actionText = computed(() => data.value.actionText)
|
||||
|
||||
return {
|
||||
showHero,
|
||||
hasHeroImage,
|
||||
heroImage,
|
||||
heroAlt,
|
||||
hasHeroText,
|
||||
heroText,
|
||||
hasTagline,
|
||||
tagline,
|
||||
hasAction,
|
||||
actionLink,
|
||||
actionText
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-hero {
|
||||
margin: 2.5rem 0 2.75rem;
|
||||
padding: 0 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.home-hero {
|
||||
margin: 3.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.home-hero {
|
||||
margin: 4rem 0 4.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.figure {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.title {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
margin-top: .25rem;
|
||||
line-height: 1.3;
|
||||
font-size: 1.2rem;
|
||||
color: var(--c-text-light);
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.description {
|
||||
line-height: 1.2;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.action {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.action-link {
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
padding: 0 20px;
|
||||
line-height: 48px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
background-color: var(--c-brand);
|
||||
transition: background-color .1s ease;
|
||||
}
|
||||
|
||||
.action-link:hover {
|
||||
text-decoration: none;
|
||||
background-color: var(--c-brand-light);
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.action-link {
|
||||
padding: 0 24px;
|
||||
line-height: 56px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue