update layout and config

Author: NeserCode

docs/.vuepress/theme/lib/client/components/Page.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from "./Sidebar.vue"
+import ReadingTime from "./ReadingTime.vue"
 import PageMeta from "./PageMeta.vue"
 import PageNav from "./PageNav.vue"
 import SubToc from "./SubToc.vue"
@@ -15,10 +16,10 @@ import { defaultConstants } from "../../shared"
 import type {
 	DefaultThemePageFrontmatter,
 	DefaultThemeLocaleData,
-	DefaultThemePageData,
+	ThemePageData,
 } from "../../shared"
 
-const pageData = usePageData<DefaultThemePageData>()
+const pageData = usePageData<ThemePageData>()
 const pageFrontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
 const themeData = useThemeData<DefaultThemeLocaleData>()
 
@@ -32,6 +33,14 @@ const isSidebarCategroyActive = computed(() =>
 	usePluginState("sidebarCategory", computedStateSource.value)
 )
 
+const isReadingTimeActive = computed(() =>
+	usePluginState("readingTime", computedStateSource.value)
+)
+
+const isPageMetaActive = computed(() =>
+	usePluginState("pageMeta", computedStateSource.value)
+)
+
 const isSidebarActive = computed(() =>
 	usePluginState("sidebar", computedStateSource.value)
 )
@@ -71,9 +80,8 @@ setupHeaders()
 					<slot name="page-title">{{ pageTitle }}</slot>
 				</h1>
 
-				<PageMeta
-					v-if="pageData.git.createdTime && pageData.git.contributors.length"
-				/>
+				<PageMeta v-if="isPageMetaActive" />
+				<ReadingTime :data="pageData.readingTime" v-if="isReadingTimeActive" />
 				<slot name="after-page-head"></slot>
 			</div>
 

docs/.vuepress/theme/lib/client/components/PageMeta.vue

@@ -26,9 +26,13 @@ const contributors = useContributors()
 				<span class="meta-item-label">{{ themeLocale.contributorsText }}</span>
 				<span class="meta-item-info">
 					<template v-for="(contributor, index) in contributors" :key="index">
-						<span class="contributor" :title="`email: ${contributor.email}`">
+						<a
+							class="contributor"
+							:title="`email: ${contributor.email}`"
+							:href="`mailto://${contributor.email}`"
+						>
 							{{ contributor.name }}
-						</span>
+						</a>
 						<template v-if="index !== contributors.length - 1">, </template>
 					</template>
 				</span>
@@ -53,10 +57,7 @@ const contributors = useContributors()
 }
 
 .meta-item-label {
-	@apply pr-1.5
-  font-bold
-  border-r border-slate-300 dark:border-slate-600
-  transition-colors ease-in-out duration-300;
+	@apply pr-1.5 font-bold;
 }
 .meta-item-info {
 	@apply font-mono;

docs/.vuepress/theme/lib/client/components/ReadingTime.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { toRefs } from "vue"
+import type { ReadingTime } from "@vuepress/plugin-reading-time/client"
+
+const $props = defineProps<{
+	data?: ReadingTime
+}>()
+const { data } = toRefs($props)
+</script>
+
+<template>
+	<div class="page-reading-time" v-if="data">
+		<span class="reading-time-label">📖阅读时间</span>
+		<span class="reading-time">
+			总字数 {{ data.words }}, 大约需要 {{ data.minutes }} 分钟阅读
+		</span>
+	</div>
+</template>
+
+<style lang="postcss" scoped>
+.page-reading-time {
+	@apply w-full inline-flex items-center gap-x-2
+  text-sm text-gray-500 dark:text-gray-400
+  transition-colors ease-in-out duration-300;
+}
+
+.reading-time-label {
+	@apply font-bold;
+}
+.reading-time {
+	@apply text-sm;
+}
+</style>

docs/.vuepress/theme/lib/client/layouts/Base.vue

@@ -175,7 +175,7 @@ div[data-highlighter="shiki"] {
 /* transitions */
 .fade-enter-active,
 .fade-leave-active {
-	@apply transition-opacity ease-in-out duration-100;
+	@apply transition-all ease-in-out duration-100;
 }
 .fade-enter-from,
 .fade-leave-to {

docs/.vuepress/theme/lib/node/utils/useBlog.ts

@@ -47,6 +47,7 @@ export const useBlogPlugin = () =>
 						readingTime: false,
 						readingLine: false,
 						comment: false,
+						pageMeta: false,
 						sidebarCategory: false,
 						sidebar: false,
 					},
@@ -60,6 +61,7 @@ export const useBlogPlugin = () =>
 					plugins: {
 						readingTime: false,
 						readingLine: false,
+						pageMeta: false,
 						comment: false,
 						sidebarCategory: false,
 						sidebar: false,
@@ -91,6 +93,7 @@ export const useBlogPlugin = () =>
 					plugins: {
 						readingTime: false,
 						readingLine: false,
+						pageMeta: false,
 						comment: false,
 						sidebarCategory: false,
 						sidebar: false,

docs/.vuepress/theme/lib/shared/component.ts

@@ -32,6 +32,7 @@ export interface PaginationProps {
 export type PluginName =
 	| "readingTime"
 	| "readingLine"
+	| "pageMeta"
 	| "comment"
 	| "sidebar"
 	| "sidebarCategory"