feat(Article): refactor article layout and improve styling for aside section

.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"

.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");