mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-25 11:28:13 +08:00
chore: tweak
This commit is contained in:
pengzhanbo
parent
86a50e9601
commit
e23faea2ba
@ -2,48 +2,48 @@
|
||||
import { computed } from 'vue'
|
||||
import { useData } from '../../composables/data.js'
|
||||
import TransitionFadeSlideY from '../TransitionFadeSlideY.vue'
|
||||
import PostList from './PostList.vue'
|
||||
import Archives from './Archives.vue'
|
||||
import BlogAside from './BlogAside.vue'
|
||||
import BlogExtract from './BlogExtract.vue'
|
||||
import Tags from './Tags.vue'
|
||||
import BlogNav from './BlogNav.vue'
|
||||
import VPPostList from './VPPostList.vue'
|
||||
import VPBlogArchives from './VPBlogArchives.vue'
|
||||
import VPBlogAside from './VPBlogAside.vue'
|
||||
import VPBlogExtract from './VPBlogExtract.vue'
|
||||
import VPBlogTags from './VPBlogTags.vue'
|
||||
import VPBlogNav from './VPBlogNav.vue'
|
||||
|
||||
const { theme, page } = useData()
|
||||
|
||||
const com = {
|
||||
PostList,
|
||||
Tags,
|
||||
Archives,
|
||||
VPPostList,
|
||||
VPBlogTags,
|
||||
VPBlogArchives,
|
||||
}
|
||||
|
||||
const type = computed(() => {
|
||||
const type = page.value.type
|
||||
if (type === 'blog-tags')
|
||||
return 'Tags'
|
||||
return 'VPBlogTags'
|
||||
if (type === 'blog-archives')
|
||||
return 'Archives'
|
||||
return 'PostList'
|
||||
return 'VPBlogArchives'
|
||||
return 'VPPostList'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="blog-wrapper">
|
||||
<div class="vp-blog">
|
||||
<div class="blog-container" :class="{ 'no-avatar': !theme.avatar }">
|
||||
<BlogNav v-if="!theme.avatar" is-local />
|
||||
<VPBlogNav v-if="!theme.avatar" is-local />
|
||||
|
||||
<TransitionFadeSlideY>
|
||||
<component :is="com[type]" />
|
||||
</TransitionFadeSlideY>
|
||||
|
||||
<BlogAside />
|
||||
<BlogExtract />
|
||||
<VPBlogAside />
|
||||
<VPBlogExtract />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.blog-wrapper {
|
||||
.vp-blog {
|
||||
position: relative;
|
||||
min-height: calc(100vh - var(--vp-footer-height, 0px));
|
||||
}
|
||||
@ -64,11 +64,11 @@ const type = computed(() => {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.blog-wrapper {
|
||||
.vp-blog {
|
||||
min-height: calc(100vh + var(--vp-nav-height) - var(--vp-footer-height, 0px));
|
||||
}
|
||||
|
||||
.blog-wrapper {
|
||||
.vp-blog {
|
||||
padding-top: var(--vp-nav-height);
|
||||
margin-top: calc(var(--vp-nav-height) * -1);
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
@ -82,7 +82,7 @@ const type = computed(() => {
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.blog-wrapper {
|
||||
.vp-blog {
|
||||
min-height: calc(100vh - var(--vp-footer-height, 0px));
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { useArchives, useBlogExtract } from '../../composables/blog.js'
|
||||
import ShortPostList from './ShortPostList.vue'
|
||||
import VPShortPostList from './VPShortPostList.vue'
|
||||
|
||||
const { archives: archivesLink } = useBlogExtract()
|
||||
const { archives } = useArchives()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="archives-wrapper">
|
||||
<div class="vp-blog-archives">
|
||||
<h2 class="archives-title">
|
||||
<span class="vpi-archive icon" />
|
||||
<span>{{ archivesLink.text }}</span>
|
||||
@ -18,7 +18,7 @@ const { archives } = useArchives()
|
||||
<h3 class="archive-title">
|
||||
{{ archive.label }}
|
||||
</h3>
|
||||
<ShortPostList :post-list="archive.list" />
|
||||
<VPShortPostList :post-list="archive.list" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@ -26,7 +26,7 @@ const { archives } = useArchives()
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.archives-wrapper {
|
||||
.vp-blog-archives {
|
||||
flex: 1;
|
||||
padding: 32px 24px;
|
||||
margin: 0 auto;
|
||||
@ -61,7 +61,7 @@ const { archives } = useArchives()
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.archives-wrapper {
|
||||
.vp-blog-archives {
|
||||
padding: 32px 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
@ -94,7 +94,7 @@ const { archives } = useArchives()
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.archives-wrapper {
|
||||
.vp-blog-archives {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
import { useData } from '../../composables/data.js'
|
||||
import BlogNav from './BlogNav.vue'
|
||||
import BlogProfile from './BlogProfile.vue'
|
||||
import VPBlogNav from './VPBlogNav.vue'
|
||||
import VPBlogProfile from './VPBlogProfile.vue'
|
||||
|
||||
const { theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="theme.avatar" class="blog-aside-wrapper">
|
||||
<BlogProfile />
|
||||
<BlogNav />
|
||||
<div v-if="theme.avatar" class="vp-blog-aside">
|
||||
<VPBlogProfile />
|
||||
<VPBlogNav />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.blog-aside-wrapper {
|
||||
.vp-blog-aside {
|
||||
position: sticky;
|
||||
top: calc(var(--vp-nav-height) + 2rem);
|
||||
display: none;
|
||||
@ -24,7 +24,7 @@ const { theme } = useData()
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.blog-aside-wrapper {
|
||||
.vp-blog-aside {
|
||||
display: block;
|
||||
margin: 2rem 1rem 1rem 1.5rem;
|
||||
}
|
||||
@ -58,7 +58,7 @@ const showBlogExtract = computed(() => {
|
||||
|
||||
<template>
|
||||
<template v-if="showBlogExtract">
|
||||
<div class="blog-extract" @click="open = !open">
|
||||
<div class="vp-blog-extract" @click="open = !open">
|
||||
<span class="vpi-blog-ext icon" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
@ -102,7 +102,7 @@ const showBlogExtract = computed(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.blog-extract {
|
||||
.vp-blog-extract {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 30%;
|
||||
@ -120,7 +120,7 @@ const showBlogExtract = computed(() => {
|
||||
transition-property: background-color, border, box-shadow;
|
||||
}
|
||||
|
||||
.blog-extract .icon {
|
||||
.vp-blog-extract .icon {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: var(--vp-c-text-2);
|
||||
@ -128,13 +128,13 @@ const showBlogExtract = computed(() => {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.blog-extract {
|
||||
.vp-blog-extract {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.blog-extract {
|
||||
.vp-blog-extract {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -13,7 +13,7 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasBlogExtract" class="blog-nav" :class="{ local: props.isLocal }">
|
||||
<div v-if="hasBlogExtract" class="vp-blog-nav" :class="{ local: props.isLocal }">
|
||||
<VPLink
|
||||
class="nav-link"
|
||||
:class="{ active: route.path === tags.link }"
|
||||
@ -38,25 +38,25 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.blog-nav {
|
||||
.vp-blog-nav {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.blog-nav.local {
|
||||
.vp-blog-nav.local {
|
||||
display: none;
|
||||
padding-top: 2rem;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.blog-nav.local {
|
||||
.vp-blog-nav.local {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.blog-nav.local {
|
||||
.vp-blog-nav.local {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@ -88,14 +88,14 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.blog-nav.local .nav-link {
|
||||
.vp-blog-nav.local .nav-link {
|
||||
flex: 1;
|
||||
max-width: 200px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.blog-nav.local .nav-link:last-of-type {
|
||||
.vp-blog-nav.local .nav-link:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -18,30 +18,30 @@ const imageUrl = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="avatar" class="avatar-profile">
|
||||
<div v-if="avatar" class="vp-blog-profile">
|
||||
<p v-if="imageUrl" :class="{ circle: !!avatar.circle }">
|
||||
<img :src="imageUrl" :alt="avatar.name">
|
||||
</p>
|
||||
<div class="avatar-info">
|
||||
<div class="profile-info">
|
||||
<h3>{{ avatar.name }}</h3>
|
||||
<p v-if="avatar.description" v-html="avatar.description" />
|
||||
<div v-if="avatar.location" class="avatar-location">
|
||||
<div v-if="avatar.location" class="profile-location">
|
||||
<span class="vpi-location" />
|
||||
<p v-if="avatar.location" v-html="avatar.location" />
|
||||
</div>
|
||||
<div v-if="avatar.organization" class="avatar-organization">
|
||||
<div v-if="avatar.organization" class="profile-organization">
|
||||
<span class="vpi-organization" />
|
||||
<p v-if="avatar.organization" v-html="avatar.organization" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="theme.social" class="avatar-social">
|
||||
<div v-if="theme.social" class="profile-social">
|
||||
<VPSocialLinks :links="theme.social" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.avatar-profile {
|
||||
.vp-blog-profile {
|
||||
padding: 24px 20px;
|
||||
margin-bottom: 24px;
|
||||
background-color: var(--vp-c-bg);
|
||||
@ -51,36 +51,36 @@ const imageUrl = computed(() => {
|
||||
transition-property: background-color, color, box-shadow;
|
||||
}
|
||||
|
||||
.avatar-profile:hover {
|
||||
.vp-blog-profile:hover {
|
||||
box-shadow: var(--vp-shadow-2);
|
||||
}
|
||||
|
||||
.avatar-profile img {
|
||||
.vp-blog-profile img {
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-profile h3 {
|
||||
.vp-blog-profile h3 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.avatar-profile h3,
|
||||
.avatar-profile p {
|
||||
.vp-blog-profile h3,
|
||||
.vp-blog-profile p {
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
.avatar-profile .circle img {
|
||||
.vp-blog-profile .circle img {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-location,
|
||||
.avatar-organization {
|
||||
.profile-location,
|
||||
.profile-organization {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -90,28 +90,28 @@ const imageUrl = computed(() => {
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
.avatar-location p,
|
||||
.avatar-organization p {
|
||||
.profile-location p,
|
||||
.profile-organization p {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.avatar-location + .avatar-organization {
|
||||
.profile-location + .profile-organization {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.avatar-social {
|
||||
.profile-social {
|
||||
padding-top: 12px;
|
||||
margin-top: 12px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
transition: border var(--t-color);
|
||||
}
|
||||
|
||||
.avatar-social :deep(.vp-social-link) {
|
||||
.profile-social :deep(.vp-social-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.avatar-social :deep(.vp-social-link:hover) {
|
||||
.profile-social :deep(.vp-social-link:hover) {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { useBlogExtract, useTags } from '../../composables/blog.js'
|
||||
import ShortPostList from './ShortPostList.vue'
|
||||
import VPShortPostList from './VPShortPostList.vue'
|
||||
|
||||
const { tags, currentTag, postList, handleTagClick } = useTags()
|
||||
const { tags: tagsLink } = useBlogExtract()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tags-wrapper" :class="{ 'has-list': postList.length > 0 }">
|
||||
<div class="vp-blog-tags" :class="{ 'has-list': postList.length > 0 }">
|
||||
<div class="tags-nav">
|
||||
<h2 class="tags-title">
|
||||
<span class="vpi-tag icon" />
|
||||
@ -32,19 +32,19 @@ const { tags: tagsLink } = useBlogExtract()
|
||||
{{ currentTag }}
|
||||
</h3>
|
||||
|
||||
<ShortPostList v-if="postList.length" :post-list="postList" />
|
||||
<VPShortPostList v-if="postList.length" :post-list="postList" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tags-wrapper {
|
||||
.vp-blog-tags {
|
||||
flex: 1;
|
||||
padding: 32px 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tags-wrapper.has-list {
|
||||
.vp-blog-tags.has-list {
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
@ -118,7 +118,7 @@ const { tags: tagsLink } = useBlogExtract()
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.tags-wrapper {
|
||||
.vp-blog-tags {
|
||||
padding: 32px 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
@ -149,7 +149,7 @@ const { tags: tagsLink } = useBlogExtract()
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.tags-wrapper {
|
||||
.vp-blog-tags {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@ -14,7 +14,7 @@ const { theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pagination">
|
||||
<div class="vp-blog-pagination">
|
||||
<button
|
||||
type="button"
|
||||
class="btn prev"
|
||||
@ -48,7 +48,7 @@ const { theme } = useData()
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pagination {
|
||||
.vp-blog-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -81,7 +81,7 @@ const { theme } = useData()
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.pagination {
|
||||
.vp-blog-pagination {
|
||||
padding: 20px;
|
||||
margin-left: 20px;
|
||||
background-color: var(--vp-c-bg);
|
||||
@ -107,7 +107,7 @@ const { theme } = useData()
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.pagination {
|
||||
.vp-blog-pagination {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@ -29,7 +29,7 @@ const createTime = computed(() =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="post-item">
|
||||
<div class="vp-blog-post-item">
|
||||
<h3>
|
||||
<div
|
||||
v-if="typeof post.sticky === 'boolean' ? post.sticky : post.sticky >= 0"
|
||||
@ -71,16 +71,16 @@ const createTime = computed(() =>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.post-item {
|
||||
.vp-blog-post-item {
|
||||
padding-top: 1rem;
|
||||
margin: 0 1.75rem 2rem;
|
||||
}
|
||||
|
||||
.post-item:last-of-type {
|
||||
.vp-blog-post-item:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.post-item .sticky {
|
||||
.vp-blog-post-item .sticky {
|
||||
display: inline-block;
|
||||
padding: 3px 6px;
|
||||
margin-right: 0.5rem;
|
||||
@ -94,7 +94,7 @@ const createTime = computed(() =>
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
|
||||
.post-item .icon-lock {
|
||||
.vp-blog-post-item .icon-lock {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 8px;
|
||||
@ -104,7 +104,7 @@ const createTime = computed(() =>
|
||||
transition-property: color;
|
||||
}
|
||||
|
||||
.post-item h3 {
|
||||
.vp-blog-post-item h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
@ -114,16 +114,16 @@ const createTime = computed(() =>
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
.post-item h3:hover {
|
||||
.vp-blog-post-item h3:hover {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.post-item h3:hover .sticky {
|
||||
.vp-blog-post-item h3:hover .sticky {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.post-item {
|
||||
.vp-blog-post-item {
|
||||
padding: 24px 20px;
|
||||
margin: 0 0 24px 20px;
|
||||
background-color: var(--vp-c-bg);
|
||||
@ -134,21 +134,21 @@ const createTime = computed(() =>
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.post-item:hover {
|
||||
.vp-blog-post-item:hover {
|
||||
box-shadow: var(--vp-shadow-2);
|
||||
}
|
||||
|
||||
.post-item .post-meta {
|
||||
.vp-blog-post-item .post-meta {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-item .excerpt {
|
||||
.vp-blog-post-item .excerpt {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.post-item {
|
||||
.vp-blog-post-item {
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { usePostListControl } from '../../composables/blog.js'
|
||||
import TransitionDrop from '../TransitionDrop.vue'
|
||||
import PostItem from './PostItem.vue'
|
||||
import Pagination from './Pagination.vue'
|
||||
import VPPostItem from './VPPostItem.vue'
|
||||
import VPPagination from './VPPagination.vue'
|
||||
|
||||
const {
|
||||
postList,
|
||||
@ -17,16 +17,16 @@ const {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="post-list">
|
||||
<div class="vp-blog-post-list">
|
||||
<template v-for="(post, index) in postList" :key="post.path">
|
||||
<TransitionDrop appear :delay="index * 0.04">
|
||||
<PostItem
|
||||
<VPPostItem
|
||||
:key="post.path"
|
||||
:post="post"
|
||||
/>
|
||||
</TransitionDrop>
|
||||
</template>
|
||||
<Pagination
|
||||
<VPPagination
|
||||
v-if="isPaginationEnabled"
|
||||
:page="page"
|
||||
:total-page="totalPage"
|
||||
@ -39,7 +39,7 @@ const {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.post-list {
|
||||
.vp-blog-post-list {
|
||||
flex: 1;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 64px;
|
||||
@ -11,7 +11,7 @@ defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="post-list">
|
||||
<ul class="vp-blog-short-post-list">
|
||||
<li v-for="post in postList" :key="post.path">
|
||||
<p class="post-title">
|
||||
<VPLink class="post-link" :href="post.path">
|
||||
@ -24,12 +24,12 @@ defineProps<{
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.post-list {
|
||||
.vp-blog-short-post-list {
|
||||
padding: 0 12px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.post-list li {
|
||||
.vp-blog-short-post-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -38,7 +38,7 @@ defineProps<{
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
.post-list .post-title {
|
||||
.vp-blog-short-post-list .post-title {
|
||||
display: -webkit-box;
|
||||
flex: 1;
|
||||
margin-right: 14px;
|
||||
@ -51,16 +51,16 @@ defineProps<{
|
||||
line-clamp: 1;
|
||||
}
|
||||
|
||||
.post-list .post-time {
|
||||
.vp-blog-short-post-list .post-time {
|
||||
color: var(--vp-c-text-3);
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
.post-list li:hover .post-title {
|
||||
.vp-blog-short-post-list li:hover .post-title {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.post-list li:hover .post-time {
|
||||
.vp-blog-short-post-list li:hover .post-time {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useData, useSidebar } from '../composables/index.js'
|
||||
import Blog from './Blog/Blog.vue'
|
||||
import VPBlog from './Blog/VPBlog.vue'
|
||||
import VPDoc from './VPDoc.vue'
|
||||
import VPPage from './VPPage.vue'
|
||||
import Home from './Home/Home.vue'
|
||||
@ -29,7 +29,7 @@ const isBlogLayout = computed(() => {
|
||||
'is-home': frontmatter.pageLayout === 'home',
|
||||
}"
|
||||
>
|
||||
<Blog v-if="isBlogLayout" />
|
||||
<VPBlog v-if="isBlogLayout" />
|
||||
|
||||
<VPPage v-else-if="frontmatter.pageLayout === 'page'">
|
||||
<template #page-top>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user