335d273d2c
1. 新增首页首屏banner;2. 首页首屏个人信息;3. 新增文章列表banner;4. 更新backToTOP 新增首页大图banner 首页首屏首屏个人信息 文章列表新增文章列表banner 更新backToTop按钮样式;
100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
import DropdownTransition from '@theme-plume/DropdownTransition.vue'
|
|
import PostMeta from '@theme-plume/PostMeta.vue'
|
|
import Sidebar from '@theme-plume/Sidebar.vue'
|
|
import { usePageData } from '@vuepress/client'
|
|
import { computed } from 'vue'
|
|
import type { PlumeThemePageData } from '../../shared'
|
|
import { useDarkMode, useThemeLocaleData } from '../composables'
|
|
import Toc from './Toc'
|
|
|
|
const page = usePageData<PlumeThemePageData>()
|
|
const themeLocale = useThemeLocaleData()
|
|
const isDarkMode = useDarkMode()
|
|
|
|
const isNote = computed(() => {
|
|
return page.value.isNote || false
|
|
})
|
|
|
|
const enabledSidebar = computed(() => {
|
|
return isNote.value
|
|
})
|
|
</script>
|
|
<template>
|
|
<DropdownTransition>
|
|
<main class="page-wrapper">
|
|
<slot name="top"></slot>
|
|
<div class="page-container" :class="{ 'has-sidebar': enabledSidebar }">
|
|
<main class="plume-theme-content">
|
|
<Sidebar v-if="enabledSidebar" />
|
|
<div class="page-content">
|
|
<h1>{{ page.title }}</h1>
|
|
<PostMeta :post="page" type="post" border />
|
|
<Content />
|
|
<div class="comment-container">
|
|
<Comment :darkmode="isDarkMode" />
|
|
</div>
|
|
</div>
|
|
<div v-if="page.headers?.length > 0" class="plume-theme-page-toc">
|
|
<Toc />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<slot name="bottom"></slot>
|
|
</main>
|
|
</DropdownTransition>
|
|
</template>
|
|
<style lang="scss">
|
|
@import '../styles/_mixins';
|
|
@import '../styles/variables';
|
|
.page-wrapper {
|
|
@include wrapper;
|
|
|
|
.page-container {
|
|
display: flex;
|
|
padding-top: 1.25rem;
|
|
padding-bottom: 1.25rem;
|
|
|
|
.plume-theme-content {
|
|
@include container_wrapper;
|
|
@include content;
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.page-content {
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: var(--content-width);
|
|
padding: 0 2rem 1rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
&.has-sidebar {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
|
|
.plume-theme-content {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.comment-container {
|
|
margin-top: 8rem;
|
|
}
|
|
|
|
@media (max-width: $MQMobile) {
|
|
.page-wrapper .page-container .page-content {
|
|
padding: 0 0.75rem 1rem;
|
|
}
|
|
.plume-theme-page-toc {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|