From 19d71f322d6dc0268f8d65a17bcb7afbd18e838f Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 21 Sep 2024 06:01:12 +0800
Subject: [PATCH] perf(theme): optimize blog layout

---
 .../src/client/components/Blog/VPPostItem.vue | 26 ++++++++++++++-----
 .../src/client/composables/blog-post-list.ts  | 18 ++++++++-----
 theme/src/node/config/resolveLocaleOptions.ts |  2 +-
 theme/src/shared/blog.ts                      |  4 +--
 4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/theme/src/client/components/Blog/VPPostItem.vue b/theme/src/client/components/Blog/VPPostItem.vue
index 4bda62efe..0bac7ec30 100644
--- a/theme/src/client/components/Blog/VPPostItem.vue
+++ b/theme/src/client/components/Blog/VPPostItem.vue
@@ -233,12 +233,18 @@ const coverStyles = computed(() => {
 .blog-post-item-content h3 {
   display: flex;
   align-items: center;
+  margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--vp-c-text-1);
   transition: color var(--t-color);
 }
 
+.blog-post-item-content h3 a {
+  color: inherit;
+  text-decoration: none;
+}
+
 .blog-post-item-content h3:hover {
   color: var(--vp-c-brand-1);
 }
@@ -271,7 +277,7 @@ const coverStyles = computed(() => {
   }
 }
 
-.post-meta {
+.blog-post-item-content .post-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -282,23 +288,23 @@ const coverStyles = computed(() => {
   transition: color var(--t-color);
 }
 
-.post-meta > div {
+.blog-post-item-content .post-meta > div {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin-right: 1rem;
 }
 
-.post-meta > div:last-of-type {
+.blog-post-item-content .post-meta > div:last-of-type {
   margin-right: 0;
 }
 
-.post-meta .tag-list {
+.blog-post-item-content .post-meta .tag-list {
   display: flex;
   align-items: center;
 }
 
-.post-meta .tag-list .tag {
+.blog-post-item-content .post-meta .tag-list .tag {
   display: inline-block;
   padding: 3px 5px;
   margin-right: 6px;
@@ -310,11 +316,11 @@ const coverStyles = computed(() => {
   transition: color var(--t-color), background-color var(--t-color);
 }
 
-.post-meta .tag-list .tag:last-of-type {
+.blog-post-item-content .post-meta .tag-list .tag:last-of-type {
   margin-right: 0;
 }
 
-.post-meta .icon {
+.blog-post-item-content .post-meta .icon {
   width: 14px;
   height: 14px;
   margin: 0.3rem;
@@ -322,6 +328,12 @@ const coverStyles = computed(() => {
   transition: color var(--t-color);
 }
 
+.blog-post-item-content .post-meta a {
+  font-weight: normal;
+  color: inherit;
+  text-decoration: none;
+}
+
 .excerpt.vp-doc :deep(p) {
   margin: 0.5rem 0;
 }
diff --git a/theme/src/client/composables/blog-post-list.ts b/theme/src/client/composables/blog-post-list.ts
index d929d16f1..0abdd0f14 100644
--- a/theme/src/client/composables/blog-post-list.ts
+++ b/theme/src/client/composables/blog-post-list.ts
@@ -42,11 +42,18 @@ export function usePostListControl(homePage: Ref<boolean>) {
     },
   })
 
+  const perPage = computed(() => {
+    if (blog.value.pagination === false)
+      return 0
+    if (typeof blog.value.pagination === 'number')
+      return blog.value.pagination
+    return blog.value.pagination?.perPage || DEFAULT_PER_PAGE
+  })
+
   const totalPage = computed(() => {
     if (blog.value.pagination === false)
       return 0
-    const perPage = blog.value.pagination?.perPage || DEFAULT_PER_PAGE
-    return Math.ceil(postList.value.length / perPage)
+    return Math.ceil(postList.value.length / perPage.value)
   })
   const isLastPage = computed(() => page.value >= totalPage.value)
   const isFirstPage = computed(() => page.value <= 1)
@@ -56,13 +63,12 @@ export function usePostListControl(homePage: Ref<boolean>) {
     if (blog.value.pagination === false)
       return postList.value
 
-    const perPage = blog.value.pagination?.perPage || DEFAULT_PER_PAGE
-    if (postList.value.length <= perPage)
+    if (postList.value.length <= perPage.value)
       return postList.value
 
     return postList.value.slice(
-      (page.value - 1) * perPage,
-      page.value * perPage,
+      (page.value - 1) * perPage.value,
+      page.value * perPage.value,
     )
   })
 
diff --git a/theme/src/node/config/resolveLocaleOptions.ts b/theme/src/node/config/resolveLocaleOptions.ts
index be34b6949..33c15526f 100644
--- a/theme/src/node/config/resolveLocaleOptions.ts
+++ b/theme/src/node/config/resolveLocaleOptions.ts
@@ -8,7 +8,7 @@ const FALLBACK_OPTIONS: PlumeThemeLocaleData = {
   appearance: true,
 
   blog: {
-    pagination: { perPage: 15 },
+    pagination: 15,
     postList: true,
     tags: true,
     archives: true,
diff --git a/theme/src/shared/blog.ts b/theme/src/shared/blog.ts
index 25bd5f29b..f271aa89a 100644
--- a/theme/src/shared/blog.ts
+++ b/theme/src/shared/blog.ts
@@ -41,10 +41,10 @@ export interface PlumeThemeBlog {
   /**
    * 分页
    */
-  pagination?: false | {
+  pagination?: false | number | {
     /**
      * 每页显示的文章数量
-     * @default 20
+     * @default 15
      */
     perPage?: number
   }