fix(theme): the actionLink miss withBase (#168) (#169)

pull/183/head
qiang 4 years ago committed by GitHub
parent 2bde6bf88d
commit ffaca73992
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -11,17 +11,14 @@
<h1 v-if="hasHeroText" class="title">{{ heroText }}</h1> <h1 v-if="hasHeroText" class="title">{{ heroText }}</h1>
<p v-if="hasTagline" class="description">{{ tagline }}</p> <p v-if="hasTagline" class="description">{{ tagline }}</p>
<div v-if="hasAction" class="action"> <NavLink v-if="hasAction" :item="action" class="action" />
<a class="action-link" :href="$frontmatter.actionLink">
{{ $frontmatter.actionText }}
</a>
</div>
</header> </header>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import { useSiteDataByRoute, useFrontmatter } from 'vitepress' import { useSiteDataByRoute, useFrontmatter } from 'vitepress'
import NavLink from './NavLink.vue'
const site = useSiteDataByRoute() const site = useSiteDataByRoute()
const data = useFrontmatter() const data = useFrontmatter()
@ -40,6 +37,10 @@ const hasTagline = computed(() => data.value.tagline !== null)
const tagline = computed(() => data.value.tagline || site.value.description) const tagline = computed(() => data.value.tagline || site.value.description)
const hasAction = computed(() => data.value.actionLink && data.value.actionText) const hasAction = computed(() => data.value.actionLink && data.value.actionText)
const action = computed(() => ({
link: data.value.actionLink,
text: data.value.actionText,
}))
</script> </script>
<style scoped> <style scoped>
@ -115,7 +116,7 @@ const hasAction = computed(() => data.value.actionLink && data.value.actionText)
} }
} }
.action-link { .action ::v-deep(.item) {
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
padding: 0 20px; padding: 0 20px;
@ -127,13 +128,14 @@ const hasAction = computed(() => data.value.actionLink && data.value.actionText)
transition: background-color .1s ease; transition: background-color .1s ease;
} }
.action-link:hover { .action ::v-deep(.item:hover) {
text-decoration: none; text-decoration: none;
color: #ffffff;
background-color: var(--c-brand-light); background-color: var(--c-brand-light);
} }
@media (min-width: 420px) { @media (min-width: 420px) {
.action-link { .action ::v-deep(.item) {
padding: 0 24px; padding: 0 24px;
line-height: 56px; line-height: 56px;
font-size: 1.2rem; font-size: 1.2rem;

Loading…
Cancel
Save