From bde059ac3ad338d0207803564e6b8a35041febf7 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 12 Sep 2024 02:22:58 +0800
Subject: [PATCH] perf(theme): optimize blog layout

---
 theme/src/client/components/Blog/VPBlog.vue   | 16 ++------
 .../client/components/Blog/VPBlogArchives.vue | 40 +++++++++----------
 .../client/components/Blog/VPBlogAside.vue    |  1 -
 .../components/Blog/VPBlogCategories.vue      | 21 +++++-----
 .../src/client/components/Blog/VPBlogNav.vue  |  7 ++--
 .../src/client/components/Blog/VPBlogTags.vue | 32 +++++++++------
 .../client/components/Blog/VPPagination.vue   |  8 ++--
 .../src/client/components/Blog/VPPostItem.vue | 28 ++++++-------
 .../src/client/components/Blog/VPPostList.vue | 12 +++++-
 .../components/Blog/VPShortPostList.vue       |  7 ++--
 10 files changed, 88 insertions(+), 84 deletions(-)

diff --git a/theme/src/client/components/Blog/VPBlog.vue b/theme/src/client/components/Blog/VPBlog.vue
index 66486b3f..81a65f00 100644
--- a/theme/src/client/components/Blog/VPBlog.vue
+++ b/theme/src/client/components/Blog/VPBlog.vue
@@ -19,7 +19,7 @@ const { theme, page } = useData()
 </script>
 
 <template>
-  <div class="vp-blog" :class="{ 'home-blog': homeBlog }">
+  <div class="vp-blog" :class="{ 'home-blog': homeBlog }" vp-blog>
     <slot name="blog-top" />
 
     <div class="blog-container" :class="{ 'no-profile': !theme.profile }">
@@ -98,7 +98,7 @@ const { theme, page } = useData()
 .vp-blog {
   position: relative;
   min-height: calc(100vh - var(--vp-footer-height, 0px));
-  background-color: var(--vp-c-bg);
+  padding: calc(var(--vp-nav-height) + 32px) 16px 32px;
   transition: background-color var(--t-color);
 }
 
@@ -110,24 +110,19 @@ const { theme, page } = useData()
 
 .blog-container {
   display: flex;
+  gap: 24px;
   align-items: flex-start;
   justify-content: flex-start;
   width: 100%;
-  padding-top: var(--vp-nav-height);
   margin: 0 auto;
 }
 
 .blog-container.no-profile {
   display: block;
   max-width: 784px;
-  padding-right: 24px;
 }
 
 @media (min-width: 768px) {
-  .vp-blog {
-    background-color: transparent;
-  }
-
   .blog-container {
     position: relative;
     z-index: 2;
@@ -137,10 +132,7 @@ const { theme, page } = useData()
 @media (min-width: 960px) {
   .vp-blog {
     min-height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
-  }
-
-  .blog-container {
-    padding-top: 0;
+    padding: 32px 24px;
   }
 }
 
diff --git a/theme/src/client/components/Blog/VPBlogArchives.vue b/theme/src/client/components/Blog/VPBlogArchives.vue
index 3b19e279..7c3d523b 100644
--- a/theme/src/client/components/Blog/VPBlogArchives.vue
+++ b/theme/src/client/components/Blog/VPBlogArchives.vue
@@ -32,17 +32,18 @@ const { archives } = useArchives()
 <style scoped>
 .vp-blog-archives {
   flex: 1;
-  padding: 32px 24px;
-  margin: 0 auto;
 }
 
 .archives-title {
   display: flex;
   align-items: center;
-  margin-bottom: 40px;
+  padding: 16px;
+  margin: 0 -16px 40px;
   font-size: 24px;
   font-weight: 700;
   color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-bg);
+  transition: background-color var(--t-color);
 }
 
 .archives-title .icon {
@@ -50,39 +51,34 @@ const { archives } = useArchives()
 }
 
 .archive {
-  padding-bottom: 1rem;
-  border-bottom: 1px dashed var(--vp-c-divider);
-}
-
-.archive:last-of-type {
-  border-bottom: none;
+  padding: 16px;
+  margin: 0 -16px 24px;
+  background-color: var(--vp-c-bg);
+  transition: background-color var(--t-color);
 }
 
 .archive-title {
-  margin-top: 2rem;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  margin: 0 -16px;
   font-size: 18px;
   font-weight: 700;
+  border-bottom: solid 1px var(--vp-c-divider);
+  transition: border-bottom var(--t-color);
 }
 
 @media (min-width: 768px) {
-  .vp-blog-archives {
-    padding: 32px 0;
-    margin-left: 20px;
-  }
-
   .archives-title {
     display: none;
   }
 
   .archive {
-    padding: 20px;
-    margin-bottom: 24px;
-    background-color: var(--vp-c-bg);
-    border-bottom: none;
+    padding: 20px 24px;
+    margin: 0 0 24px;
     border-radius: 8px;
     box-shadow: var(--vp-shadow-1);
     transition: var(--t-color);
-    transition-property: border-bottom, box-shadow, background-color;
+    transition-property: box-shadow, background-color;
   }
 
   .archive:hover {
@@ -90,8 +86,8 @@ const { archives } = useArchives()
   }
 
   .archive-title {
-    padding-bottom: 10px;
-    margin-top: 0;
+    padding-left: 24px;
+    margin: 0 -24px;
     border-bottom: solid 1px var(--vp-c-divider);
     transition: border-bottom var(--t-color);
   }
diff --git a/theme/src/client/components/Blog/VPBlogAside.vue b/theme/src/client/components/Blog/VPBlogAside.vue
index 7777b033..6b6f0994 100644
--- a/theme/src/client/components/Blog/VPBlogAside.vue
+++ b/theme/src/client/components/Blog/VPBlogAside.vue
@@ -28,7 +28,6 @@ const { theme } = useData()
 @media (min-width: 768px) {
   .vp-blog-aside {
     display: block;
-    margin: 2rem 1rem 1rem 1.5rem;
   }
 }
 </style>
diff --git a/theme/src/client/components/Blog/VPBlogCategories.vue b/theme/src/client/components/Blog/VPBlogCategories.vue
index 96cfb9a9..79609a8a 100644
--- a/theme/src/client/components/Blog/VPBlogCategories.vue
+++ b/theme/src/client/components/Blog/VPBlogCategories.vue
@@ -28,15 +28,16 @@ const { categories } = useBlogCategory()
 <style scoped>
 .vp-blog-categories {
   flex: 1;
-  padding: 32px 0;
-  margin: 0 auto;
+  padding: 16px;
+  margin: 0 -16px 32px;
+  background-color: var(--vp-c-bg);
   transition: background-color var(--t-color), box-shadow var(--t-color);
 }
 
 @media (min-width: 768px) {
   .vp-blog-categories {
-    padding: 20px 0;
-    margin: 32px auto 32px 20px;
+    padding: 20px 24px;
+    margin: 0 0 32px;
     background-color: var(--vp-c-bg);
     border-radius: 8px;
     box-shadow: var(--vp-shadow-1);
@@ -50,11 +51,13 @@ const { categories } = useBlogCategory()
 .categories-title {
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  padding: 0 16px 12px;
+  margin: 0 -16px;
   font-size: 20px;
   font-weight: 700;
   color: var(--vp-c-text-1);
-  transition: color var(--t-color);
+  border-bottom: solid 1px var(--vp-c-divider);
+  transition: color var(--t-color), border-color var(--t-color);
 }
 
 .categories-title .icon {
@@ -63,8 +66,8 @@ const { categories } = useBlogCategory()
 
 @media (min-width: 768px) {
   .categories-title {
-    padding-bottom: 20px;
-    margin-top: 0;
+    padding: 0 24px 12px;
+    margin: 0 -24px;
     border-bottom: solid 1px var(--vp-c-divider);
     transition: border-bottom var(--t-color);
   }
@@ -77,6 +80,6 @@ const { categories } = useBlogCategory()
 }
 
 .vp-blog-categories .content {
-  padding: 20px 20px 0;
+  padding: 20px 0 0;
 }
 </style>
diff --git a/theme/src/client/components/Blog/VPBlogNav.vue b/theme/src/client/components/Blog/VPBlogNav.vue
index f12ca38c..d245f005 100644
--- a/theme/src/client/components/Blog/VPBlogNav.vue
+++ b/theme/src/client/components/Blog/VPBlogNav.vue
@@ -55,13 +55,13 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
 
 .vp-blog-nav.local {
   display: none;
-  padding-top: 2rem;
-  margin-left: 20px;
+  margin-bottom: 24px;
 }
 
 @media (min-width: 768px) {
   .vp-blog-nav.local {
     display: flex;
+    gap: 24px;
   }
 }
 
@@ -100,8 +100,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
 
 .vp-blog-nav.local .nav-link {
   flex: 1;
-  max-width: 200px;
-  margin-right: 20px;
+  max-width: 50%;
   margin-bottom: 0;
 }
 
diff --git a/theme/src/client/components/Blog/VPBlogTags.vue b/theme/src/client/components/Blog/VPBlogTags.vue
index 6d625941..a7ff27bd 100644
--- a/theme/src/client/components/Blog/VPBlogTags.vue
+++ b/theme/src/client/components/Blog/VPBlogTags.vue
@@ -46,14 +46,24 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
 <style scoped>
 .vp-blog-tags {
   flex: 1;
-  padding: 32px 24px;
-  margin: 0 auto;
 }
 
 .vp-blog-tags.has-list {
   padding-bottom: 64px;
 }
 
+.tags-nav,
+.tags-container {
+  padding: 20px 16px;
+  margin: 0 -16px;
+  background-color: var(--vp-c-bg);
+  transition: background-color var(--t-color);
+}
+
+.tags-container {
+  margin-top: 24px;
+}
+
 .tags-title {
   display: flex;
   align-items: center;
@@ -73,6 +83,7 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
 .tags {
   display: flex;
   flex-wrap: wrap;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
 }
@@ -81,7 +92,6 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
   display: flex;
   align-items: center;
   padding: 6px 10px 6px 12px;
-  margin: 6px;
   font-size: 14px;
   line-height: 1;
   color: var(--vp-c-bg);
@@ -94,8 +104,9 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
 }
 
 .tag-title {
-  padding-bottom: 8px;
-  margin: 20px 12px -10px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  margin: 0 -16px;
   font-size: 20px;
   font-weight: 600;
   border-bottom: 1px solid var(--vp-c-divider);
@@ -124,14 +135,10 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
 }
 
 @media (min-width: 768px) {
-  .vp-blog-tags {
-    padding: 32px 0;
-    margin-left: 20px;
-  }
-
   .tags-nav,
   .tags-container {
-    padding: 20px;
+    padding: 16px 24px;
+    margin: 0;
     background-color: var(--vp-c-bg);
     border-radius: 8px;
     box-shadow: var(--vp-shadow-1);
@@ -150,7 +157,8 @@ const { tags, currentTag, postList, handleTagClick } = useTags()
   }
 
   .tags-container .tag-title {
-    margin-top: 0;
+    padding-left: 24px;
+    margin: 0 -24px;
   }
 }
 
diff --git a/theme/src/client/components/Blog/VPPagination.vue b/theme/src/client/components/Blog/VPPagination.vue
index c20e9d7f..820b86d0 100644
--- a/theme/src/client/components/Blog/VPPagination.vue
+++ b/theme/src/client/components/Blog/VPPagination.vue
@@ -52,7 +52,10 @@ const { theme } = useData()
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 32px 20px 24px;
+  padding: 16px;
+  margin: 0 -16px;
+  background-color: var(--vp-c-bg);
+  transition: background-color var(--t-color);
 }
 
 .btn {
@@ -82,8 +85,7 @@ const { theme } = useData()
 
 @media (min-width: 768px) {
   .vp-blog-pagination {
-    padding: 20px;
-    margin-left: 20px;
+    margin: 0;
     background-color: var(--vp-c-bg);
     border-radius: 6px;
     box-shadow: var(--vp-shadow-1);
diff --git a/theme/src/client/components/Blog/VPPostItem.vue b/theme/src/client/components/Blog/VPPostItem.vue
index 84e6b31a..067f95ea 100644
--- a/theme/src/client/components/Blog/VPPostItem.vue
+++ b/theme/src/client/components/Blog/VPPostItem.vue
@@ -83,8 +83,13 @@ const createTime = computed(() =>
 
 <style scoped>
 .vp-blog-post-item {
-  padding-top: 1rem;
-  margin: 0 1.75rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  margin: 0 -16px;
+  background-color: var(--vp-c-bg);
+  transition: background-color var(--t-color);
 }
 
 .vp-blog-post-item:last-of-type {
@@ -118,7 +123,6 @@ const createTime = computed(() =>
 .vp-blog-post-item h3 {
   display: flex;
   align-items: center;
-  margin-bottom: 0.75rem;
   font-size: 18px;
   font-weight: 600;
   color: var(--vp-c-text-1);
@@ -133,11 +137,14 @@ const createTime = computed(() =>
   color: var(--vp-c-text-2);
 }
 
+.vp-blog-post-item .excerpt {
+  margin-top: 12px;
+}
+
 @media (min-width: 768px) {
   .vp-blog-post-item {
     padding: 24px 20px;
-    margin: 0 0 24px 20px;
-    background-color: var(--vp-c-bg);
+    margin: 0;
     border-radius: 8px;
     box-shadow: var(--vp-shadow-1);
     transition: var(--t-color);
@@ -152,16 +159,6 @@ const createTime = computed(() =>
   .vp-blog-post-item .post-meta {
     margin-bottom: 0;
   }
-
-  .vp-blog-post-item .excerpt {
-    margin-top: 24px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .vp-blog-post-item {
-    margin: 0 0 24px;
-  }
 }
 
 .post-meta {
@@ -169,7 +166,6 @@ const createTime = computed(() =>
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  margin-bottom: 0.5rem;
   font-size: 14px;
   font-weight: 400;
   color: var(--vp-c-text-2);
diff --git a/theme/src/client/components/Blog/VPPostList.vue b/theme/src/client/components/Blog/VPPostList.vue
index 664dd8c4..70a3104b 100644
--- a/theme/src/client/components/Blog/VPPostList.vue
+++ b/theme/src/client/components/Blog/VPPostList.vue
@@ -48,9 +48,17 @@ const {
 
 <style scoped>
 .vp-blog-post-list {
+  display: flex;
   flex: 1;
-  padding-top: 32px;
-  padding-bottom: 36px;
+  flex-direction: column;
+  gap: 16px;
   margin: 0 auto;
 }
+
+@media (min-width: 419px) {
+  .vp-blog-post-list {
+    gap: 24px;
+    padding-bottom: 24px;
+  }
+}
 </style>
diff --git a/theme/src/client/components/Blog/VPShortPostList.vue b/theme/src/client/components/Blog/VPShortPostList.vue
index 70639ee6..3aec1152 100644
--- a/theme/src/client/components/Blog/VPShortPostList.vue
+++ b/theme/src/client/components/Blog/VPShortPostList.vue
@@ -25,15 +25,16 @@ defineProps<{
 
 <style scoped>
 .vp-blog-short-post-list {
-  padding: 0 12px;
-  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 24px;
 }
 
 .vp-blog-short-post-list li {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 14px 0;
   color: var(--vp-c-text-1);
   transition: color var(--t-color);
 }