perf: 优化 博客文章列表页 布局

theme/src/client/components/Blog.vue

@@ -1,18 +1,22 @@
 <script lang="ts" setup>
 import { usePageData } from 'vuepress/client'
 import type { PlumeThemePageData } from '../../shared/index.js'
+import { useThemeLocaleData } from '../composables/index.js'
 import Archives from './Archives.vue'
 import BlogAside from './BlogAside.vue'
 import BlogExtract from './BlogExtract.vue'
 import PostList from './PostList.vue'
 import Tags from './Tags.vue'
+import BlogNav from './BlogNav.vue'
 
+const theme = useThemeLocaleData()
 const page = usePageData<PlumeThemePageData>()
 </script>
 
 <template>
   <div class="blog-wrapper">
-    <div class="blog-container">
+    <div class="blog-container" :class="{ 'no-avatar': !theme.avatar }">
+      <BlogNav v-if="!theme.avatar" is-local />
       <PostList v-if="page.type === 'blog'" />
       <Tags v-if="page.type === 'blog-tags'" />
       <Archives v-if="page.type === 'blog-archives'" />
@@ -37,6 +41,12 @@ const page = usePageData<PlumeThemePageData>()
   margin: 0 auto;
 }
 
+.blog-container.no-avatar {
+  display: block;
+  max-width: 784px;
+  padding-right: 24px;
+}
+
 @media (min-width: 768px) {
   .blog-wrapper {
     min-height: calc(100vh + var(--vp-nav-height) - var(--vp-footer-height, 0px));
@@ -61,7 +71,6 @@ const page = usePageData<PlumeThemePageData>()
   }
 
   .blog-container {
-    max-width: 784px;
     padding-top: 0;
   }
 }

theme/src/client/components/BlogAside.vue

@@ -1,52 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useBlogExtract, useThemeLocaleData } from '../composables/index.js'
-import AutoLink from './AutoLink.vue'
-import IconArchive from './icons/IconArchive.vue'
-import IconTag from './icons/IconTag.vue'
-import IconChevronRight from './icons/IconChevronRight.vue'
+import { useThemeLocaleData } from '../composables/index.js'
+import BlogNav from './BlogNav.vue'
+import BlogProfile from './BlogProfile.vue'
 
 const theme = useThemeLocaleData()
-const route = useRoute()
-
-const avatar = computed(() => theme.value.avatar)
-const { hasBlogExtract, tags, archives } = useBlogExtract()
 </script>
 
 <template>
-  <div v-if="avatar" class="blog-aside-wrapper">
-    <div class="avatar-profile">
-      <p v-if="avatar.url" :class="{ circle: avatar.circle }">
-        <img :src="avatar.url" :alt="avatar.name">
-      </p>
-      <div>
-        <h3>{{ avatar.name }}</h3>
-        <p>{{ avatar.description }}</p>
-      </div>
-    </div>
-    <div v-if="hasBlogExtract" class="blog-nav">
-      <AutoLink
-        class="nav-link"
-        :class="{ active: route.path === tags.link }"
-        :href="tags.link"
-      >
-        <IconTag class="icon icon-logo" />
-        <span class="text">{{ tags.text }}</span>
-        <span class="total">{{ tags.total }}</span>
-        <IconChevronRight class="icon" />
-      </AutoLink>
-      <AutoLink
-        class="nav-link"
-        :class="{ active: route.path === archives.link }"
-        :href="archives.link"
-      >
-        <IconArchive class="icon icon-logo" />
-        <span class="text">{{ archives.text }}</span>
-        <span class="total">{{ archives.total }}</span>
-        <IconChevronRight class="icon" />
-      </AutoLink>
-    </div>
+  <div v-if="theme.avatar" class="blog-aside-wrapper">
+    <BlogProfile />
+    <BlogNav />
   </div>
 </template>
 
@@ -56,114 +19,14 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   top: calc(var(--vp-nav-height) + 2rem);
   display: none;
   width: 270px;
-  margin: 2rem 1rem 0 2rem;
+  margin: 2rem 1px 0 2rem;
   text-align: center;
 }
 
-.blog-aside-wrapper img {
-  width: 60%;
-  margin: auto;
-
-  object-fit: cover;
-}
-
-.blog-aside-wrapper h3 {
-  margin-top: 1.5rem;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.avatar-profile {
-  padding: 24px 20px;
-  margin-bottom: 24px;
-  background-color: var(--vp-c-bg);
-  border-radius: 8px;
-  box-shadow: var(--vp-shadow-1);
-  transition: var(--t-color);
-  transition-property: background-color, color, box-shadow, transform;
-  transform: scale(1);
-}
-
-.avatar-profile:hover {
-  box-shadow: var(--vp-shadow-2);
-  transform: scale(1.002);
-}
-
-.avatar-profile h3,
-.avatar-profile p {
-  color: var(--vp-c-text-1);
-  transition: color var(--t-color);
-}
-
-.avatar-profile .circle img {
-  overflow: hidden;
-  border-radius: 50%;
-}
-
-.blog-nav {
-  padding: 0;
-  text-align: left;
-}
-
-.nav-link {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 10px 14px 10px 20px;
-  margin-bottom: 20px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-  background-color: var(--vp-c-bg);
-  border-radius: 8px;
-  box-shadow: var(--vp-shadow-1);
-  transition: var(--t-color);
-  transition-property: background-color, color, box-shadow, transform;
-  transform: scale(1);
-}
-
-.nav-link:hover {
-  box-shadow: var(--vp-shadow-2);
-  transform: scale(1.002);
-}
-
-.nav-link:hover,
-.nav-link.active {
-  color: var(--vp-c-brand-1);
-}
-
-.nav-link .text {
-  flex: 1;
-  min-width: 0;
-  padding-right: 14px;
-}
-
-.nav-link .total {
-  padding-right: 8px;
-  color: var(--vp-c-text-3);
-  transition: color var(--t-color);
-}
-
-.nav-link .icon {
-  width: 1em;
-  height: 1em;
-  font-size: 1.2em;
-  color: var(--vp-c-text-3);
-  transition: color var(--t-color);
-}
-
-.nav-link .icon-logo {
-  margin-right: 10px;
-  color: var(--vp-c-brand-1);
-}
-
 @media (min-width: 768px) {
-  .blog-aside-wrapper {
-    margin: 2rem 1rem 2rem 1.25rem;
-  }
-
   .blog-aside-wrapper {
     display: block;
+    margin: 2rem 1rem 2rem 1.5rem;
   }
 }
 </style>

theme/src/client/components/BlogNav.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+import { useBlogExtract } from '../composables/index.js'
+import AutoLink from './AutoLink.vue'
+import IconArchive from './icons/IconArchive.vue'
+import IconTag from './icons/IconTag.vue'
+import IconChevronRight from './icons/IconChevronRight.vue'
+
+const props = defineProps<{
+  isLocal?: boolean
+}>()
+
+const route = useRoute()
+
+const { hasBlogExtract, tags, archives } = useBlogExtract()
+</script>
+
+<template>
+  <div v-if="hasBlogExtract" class="blog-nav" :class="{ local: props.isLocal }">
+    <AutoLink
+      class="nav-link"
+      :class="{ active: route.path === tags.link }"
+      :href="tags.link"
+    >
+      <IconTag class="icon icon-logo" />
+      <span class="text">{{ tags.text }}</span>
+      <span class="total">{{ tags.total }}</span>
+      <IconChevronRight class="icon" />
+    </AutoLink>
+    <AutoLink
+      class="nav-link"
+      :class="{ active: route.path === archives.link }"
+      :href="archives.link"
+    >
+      <IconArchive class="icon icon-logo" />
+      <span class="text">{{ archives.text }}</span>
+      <span class="total">{{ archives.total }}</span>
+      <IconChevronRight class="icon" />
+    </AutoLink>
+  </div>
+</template>
+
+<style scoped>
+.blog-nav {
+  padding: 0;
+  text-align: left;
+}
+
+.blog-nav.local {
+  display: none;
+  padding-top: 2rem;
+  margin-left: 20px;
+}
+
+@media (min-width: 768px) {
+  .blog-nav.local {
+    display: flex;
+  }
+}
+
+@media (min-width: 1200px) {
+  .blog-nav.local {
+    margin-left: 0;
+  }
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px 14px 10px 20px;
+  margin-bottom: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  background-color: var(--vp-c-bg);
+  border-radius: 8px;
+  box-shadow: var(--vp-shadow-1);
+  transition: var(--t-color);
+  transition-property: background-color, color, box-shadow, transform;
+  transform: scale(1);
+}
+
+.nav-link:hover {
+  box-shadow: var(--vp-shadow-2);
+  transform: scale(1.002);
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: var(--vp-c-brand-1);
+}
+
+.blog-nav.local .nav-link {
+  flex: 1;
+  max-width: 200px;
+  margin-right: 20px;
+  margin-bottom: 0;
+}
+
+.blog-nav.local .nav-link:last-of-type {
+  margin-right: 0;
+}
+
+.nav-link .text {
+  flex: 1;
+  min-width: 0;
+  padding-right: 14px;
+}
+
+.nav-link .total {
+  padding-right: 8px;
+  color: var(--vp-c-text-3);
+  transition: color var(--t-color);
+}
+
+.nav-link .icon {
+  width: 1em;
+  height: 1em;
+  font-size: 1.2em;
+  color: var(--vp-c-text-3);
+  transition: color var(--t-color);
+}
+
+.nav-link .icon-logo {
+  margin-right: 10px;
+  color: var(--vp-c-brand-1);
+}
+</style>

theme/src/client/components/BlogProfile.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useThemeLocaleData } from '../composables/index.js'
+
+const theme = useThemeLocaleData()
+const avatar = computed(() => theme.value.avatar)
+</script>
+
+<template>
+  <div v-if="avatar" class="avatar-profile">
+    <p v-if="avatar.url" :class="{ circle: avatar.circle }">
+      <img :src="avatar.url" :alt="avatar.name">
+    </p>
+    <div>
+      <h3>{{ avatar.name }}</h3>
+      <p>{{ avatar.description }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.avatar-profile {
+  padding: 24px 20px;
+  margin-bottom: 24px;
+  background-color: var(--vp-c-bg);
+  border-radius: 8px;
+  box-shadow: var(--vp-shadow-1);
+  transition: var(--t-color);
+  transition-property: background-color, color, box-shadow, transform;
+  transform: scale(1);
+}
+
+.avatar-profile:hover {
+  box-shadow: var(--vp-shadow-2);
+  transform: scale(1.002);
+}
+
+.avatar-profile img {
+  width: 60%;
+  margin: auto;
+
+  object-fit: cover;
+}
+
+.avatar-profile h3 {
+  margin-top: 1.5rem;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.avatar-profile h3,
+.avatar-profile p {
+  color: var(--vp-c-text-1);
+  transition: color var(--t-color);
+}
+
+.avatar-profile .circle img {
+  overflow: hidden;
+  border-radius: 50%;
+}
+</style>

theme/src/client/components/PageMeta.vue

@@ -1,19 +1,22 @@
 <script lang="ts" setup>
 import { usePageData, usePageFrontmatter } from 'vuepress/client'
 import { computed } from 'vue'
+import {
+  useReadingTimeLocale,
+} from '@vuepress/plugin-reading-time/client'
 import type {
   PlumeThemePageData,
   PlumeThemePostFrontmatter,
 } from '../../shared/index.js'
-import { useExtraBlogData, useReadingTime } from '../composables/index.js'
+import { useExtraBlogData } from '../composables/index.js'
 import IconBooks from './icons/IconBooks.vue'
 import IconClock from './icons/IconClock.vue'
 import IconTag from './icons/IconTag.vue'
 
 const page = usePageData<PlumeThemePageData>()
 const matter = usePageFrontmatter<PlumeThemePostFrontmatter>()
-const readingTime = useReadingTime()
 const extraData = useExtraBlogData()
+const readingTime = useReadingTimeLocale()
 
 const createTime = computed(() => {
   if (matter.value.createTime)
@@ -37,7 +40,7 @@ const tags = computed(() => {
   return []
 })
 
-const hasMeta = computed(() => readingTime.value.times || tags.value.length || createTime.value)
+const hasMeta = computed(() => readingTime.value.time || tags.value.length || createTime.value)
 </script>
 
 <template>
@@ -57,10 +60,10 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
     {{ page.title }}
   </h2>
   <div v-if="hasMeta" class="page-meta-wrapper">
-    <p v-if="readingTime.times" class="reading-time">
+    <p v-if="readingTime.time" class="reading-time">
       <IconBooks class="icon" />
       <span>{{ readingTime.words }}</span>
-      <span>{{ readingTime.times }}</span>
+      <span>{{ readingTime.time }}</span>
     </p>
     <p v-if="tags.length > 0">
       <IconTag class="icon" />
@@ -142,6 +145,7 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
   display: inline-block;
   padding: 3px 5px;
   margin-right: 6px;
+  font-size: 12px;
   line-height: 1;
   color: var(--vp-tag-color);
   background-color: var(--vp-tag-bg-color);

theme/src/client/components/PostItem.vue

@@ -34,15 +34,15 @@ const createTime = computed(() =>
 <template>
   <div class="post-item">
     <h3>
-      <AutoLink :href="post.path">
-        {{ post.title }}
-      </AutoLink>
       <div
         v-if="typeof post.sticky === 'boolean' ? post.sticky : post.sticky >= 0"
         class="sticky"
       >
         TOP
       </div>
+      <AutoLink :href="post.path">
+        {{ post.title }}
+      </AutoLink>
     </h3>
     <div class="post-meta">
       <div v-if="categoryList.length" class="category-list">
@@ -68,7 +68,7 @@ const createTime = computed(() =>
         <span>{{ createTime }}</span>
       </div>
     </div>
-    <div v-if="post.excerpt" class="plume-content" v-html="post.excerpt" />
+    <div v-if="post.excerpt" class="plume-content excerpt" v-html="post.excerpt" />
   </div>
 </template>
 
@@ -85,12 +85,12 @@ const createTime = computed(() =>
 .post-item .sticky {
   display: inline-block;
   padding: 3px 6px;
-  margin-left: 0.5rem;
+  margin-right: 0.5rem;
   font-size: 13px;
   font-weight: 600;
   line-height: 1;
   color: var(--vp-c-text-2);
-  background-color: var(--vp-c-default-soft);
+  background-color: var(--vp-c-brand-soft);
   border-radius: 4px;
   transition: var(--t-color);
   transition-property: color, background-color;
@@ -129,15 +129,19 @@ const createTime = computed(() =>
   .post-item:hover {
     box-shadow: var(--vp-shadow-2);
   }
-}
 
-@media (min-width: 960px) {
-  .post-item {
-    margin-left: 0;
+  .post-item .post-meta {
+    margin-bottom: 0;
   }
 
-  .post-item h3 {
-    font-size: 20px;
+  .post-item .excerpt {
+    margin-top: 24px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .post-item {
+    margin-left: 0;
   }
 }
 
@@ -173,6 +177,7 @@ const createTime = computed(() =>
   display: inline-block;
   padding: 3px 5px;
   margin-right: 6px;
+  font-size: 12px;
   line-height: 1;
   color: var(--vp-tag-color);
   background-color: var(--vp-tag-bg-color);

theme/src/client/components/PostList.vue

@@ -49,7 +49,6 @@ const {
 <style scoped>
 .post-list {
   flex: 1;
-  max-width: 768px;
   padding-top: 2rem;
   margin: 0 auto;
 }

theme/src/client/composables/index.ts

@@ -5,7 +5,7 @@ export * from './useResolveRouteWithRedirect.js'
 export * from './sidebar.js'
 export * from './aside.js'
 export * from './page.js'
-export * from './readingTime.js'
+// export * from './readingTime.js'
 export * from './blog.js'
 export * from './locale.js'
 export * from './useRouteQuery.js'

theme/src/node/plugins.ts

@@ -18,7 +18,7 @@ import { notesDataPlugin } from '@vuepress-plume/plugin-notes-data'
 import { shikiPlugin } from '@vuepress-plume/plugin-shikiji'
 import { commentPlugin } from 'vuepress-plugin-comment2'
 import { type MarkdownEnhanceOptions, mdEnhancePlugin } from 'vuepress-plugin-md-enhance'
-import { readingTimePlugin } from 'vuepress-plugin-reading-time2'
+import { readingTimePlugin } from '@vuepress/plugin-reading-time'
 import { seoPlugin } from '@vuepress/plugin-seo'
 import { sitemapPlugin } from '@vuepress/plugin-sitemap'
 import { contentUpdatePlugin } from '@vuepress-plume/plugin-content-update'

theme/src/shared/options/plugins.ts

@@ -7,7 +7,7 @@ import type { CopyCodeOptions } from '@vuepress-plume/plugin-copy-code'
 import type { ShikiPluginOptions } from '@vuepress-plume/plugin-shikiji'
 import type { CommentPluginOptions } from 'vuepress-plugin-comment2'
 import type { MarkdownEnhanceOptions } from 'vuepress-plugin-md-enhance'
-import type { ReadingTimeOptions } from 'vuepress-plugin-reading-time2'
+import type { ReadingTimePluginOptions } from '@vuepress/plugin-reading-time'
 
 export interface PlumeThemePluginOptions {
   /**
@@ -64,5 +64,5 @@ export interface PlumeThemePluginOptions {
 
   frontmatter?: Omit<AutoFrontmatterOptions, 'frontmatter'>
 
-  readingTime?: false | ReadingTimeOptions
+  readingTime?: false | ReadingTimePluginOptions
 }