From ac547baca9bf9c097e2b0605e42cc72a6a76d74f Mon Sep 17 00:00:00 2001
From: sendevia <me@sendevia.top>
Date: Thu, 8 Jan 2026 22:18:48 +0800
Subject: [PATCH] feat(Article): refactor article layout and improve styling
 for aside section

---
 .vitepress/theme/layouts/Article.vue         | 10 +++++-----
 .vitepress/theme/styles/layouts/Article.scss | 12 +++++++++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/.vitepress/theme/layouts/Article.vue b/.vitepress/theme/layouts/Article.vue
index 401b418..57a170c 100644
--- a/.vitepress/theme/layouts/Article.vue
+++ b/.vitepress/theme/layouts/Article.vue
@@ -215,13 +215,9 @@ if (isClient()) {
       </div>
     </hgroup>
     <Content />
-    <ButtonGroup v-if="frontmatter?.external_links" :links="frontmatter.external_links" />
     <PrevNext />
   </main>
-  <div id="article-beside">
-    <MaterialButton v-if="articleId" :color="'text'" :icon="'content_copy'" @click="copyShortLink">
-      复制短链
-    </MaterialButton>
+  <div id="article-aside">
     <div class="post-info">
       <p class="date-publish" v-if="formattedPublishDate">发布于 {{ formattedPublishDate }}</p>
       <ClientOnly>
@@ -231,7 +227,11 @@ if (isClient()) {
       </ClientOnly>
       <p class="id" v-if="articleId">文章ID {{ articleId }}</p>
     </div>
+    <ButtonGroup v-if="frontmatter?.external_links" :links="frontmatter.external_links" size="m" layout="vertical" />
     <PageIndicator />
+    <MaterialButton v-if="articleId" :color="'text'" :icon="'content_copy'" @click="copyShortLink">
+      复制短链
+    </MaterialButton>
   </div>
   <ImageViewer
     v-if="showImageViewer"
diff --git a/.vitepress/theme/styles/layouts/Article.scss b/.vitepress/theme/styles/layouts/Article.scss
index 3a32cd3..d20af9a 100644
--- a/.vitepress/theme/styles/layouts/Article.scss
+++ b/.vitepress/theme/styles/layouts/Article.scss
@@ -8,6 +8,10 @@ main#article-content {
   & {
     > div {
       width: 100%;
+
+      > div > :first-child {
+        margin-block-start: 0px;
+      }
     }
 
     > hgroup {
@@ -789,11 +793,14 @@ main#article-content {
   }
 }
 
-div#article-beside {
+div#article-aside {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
   grid-column: 10 / 13;
 
   position: sticky;
-  top: 120px;
+  top: 12px;
 
   .post-info {
     display: flex;
@@ -801,7 +808,6 @@ div#article-beside {
     gap: 3px;
 
     margin-inline-start: 16px;
-    margin-bottom: 18px;
 
     p {
       @include mixin.typescale-style("label-small");