优化布局，添加内容

Author: Jursin

docs/.vuepress/client.ts

@@ -7,6 +7,7 @@ import AsideNav from './theme/components/AsideNav.vue'
 import GitHubCard from './theme/components/GitHubCard.vue'
 import ItemGrid from './theme/components/ItemGrid.vue'
 import Douyin from './theme/components/Douyin.vue'
+import PostsTop from './theme/components/PostsTop.vue'
 
 import './theme/styles/custom.css'
 
@@ -23,6 +24,7 @@ export default defineClientConfig({
     Layout: h(Layout, null, {
       'doc-title-after': () => h(PageContextMenu),
       'aside-outline-after': () => h(AsideNav),
+      'posts-top': () => h(PostsTop),
     }),
   },
 })

docs/.vuepress/navbar.ts

@@ -8,7 +8,6 @@ import { defineNavbarConfig } from 'vuepress-theme-plume'
 
 export default defineNavbarConfig([
   { text: '主页', icon: 'mdi:home', link: '/' },
-  { text: '博客', icon: 'mdi:blog', link: '/blog/' },
   { text: '技能', icon: 'mdi:code-tags', link: '/skills' },
   { text: '友链', icon: 'mdi:link', link: '/friends' },
   {

docs/.vuepress/plume.config.ts

@@ -8,7 +8,6 @@ export default defineThemeConfig({
   appearance: true,
   social: [
     { icon: 'github', link: 'https://github.com/Jursin/Blog' },
-    { icon: 'bilibili', link: 'https://space.bilibili.com/1575907920' },
     {
       icon: {
         svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2"/></svg>',
@@ -18,7 +17,7 @@ export default defineThemeConfig({
     },
     { icon: 'rss', link: '/rss.xml' },
   ],
-  navbarSocialInclude: ['github', 'bilibili', 'rss'], // 允许显示在导航栏的 social 社交链接
+  navbarSocialInclude: ['github', 'rss'], // 允许显示在导航栏的 social 社交链接
   // aside: true, // 页内侧边栏， 默认显示在右侧
   // outline: [2, 3], // 页内大纲， 默认显示 h2, h3
   copyright: { 

docs/.vuepress/theme/components/GitHubCard.vue

@@ -52,10 +52,6 @@
             <Icon name="material-symbols:update-rounded" size="1em" />
             更新于：{{ formatDate(repoData.updated_at) }}
           </span>
-          <span class="branch">
-            <Icon name="octicon:git-branch-16" size="0.8em" />
-            默认分支：{{ repoData.default_branch }}
-          </span>
         </div>
       </div>
     </div>
@@ -145,7 +141,7 @@ export default {
   padding: 16px;
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   position: relative;
-  background-color: transparent;
+  background-color: var(--vp-c-bg);
   color: var(--vp-c-text-1);
   transition: border-color var(--vp-t-color), box-shadow var(--vp-t-color), background-color var(--vp-t-color);
   width: 100%;
@@ -274,12 +270,6 @@ export default {
   margin-left: auto;
 }
 
-.branch {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
 .language-color {
   width: 16px;
   height: 16px;
@@ -325,15 +315,17 @@ export default {
   }
   
   .footer {
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
     align-items: flex-start;
-    gap: 8px;
+    gap: 12px;
   }
   
   .dates {
     flex-direction: column;
     gap: 8px;
-    align-items: flex-start;
+    align-items: flex-end;
+    margin-left: auto;
   }
 }
 </style>

docs/.vuepress/theme/components/ItemGrid.vue

@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div class="skills">
+    <h2 class="title">技能</h2>
     <!-- 技术栈 -->
-    <h2>🫡使用的技术栈</h2>
+    <h3>🫡使用的技术栈</h3>
     <div class="itemGrid">
       <div
         v-for="(item, index) in techStackData.techStack"
@@ -21,7 +22,7 @@
     </div>
 
     <!-- 开发工具 -->
-    <h2>🛠️使用的编程工具</h2>
+    <h3>🛠️使用的编程工具</h3>
     <div class="itemGrid">
       <div
         v-for="(item, index) in devToolsData.devTools"
@@ -41,7 +42,7 @@
     </div>
 
     <!-- 云服务平台 -->
-    <h2>☁️使用的云服务平台</h2>
+    <h3>☁️使用的云服务平台</h3>
     <div class="itemGrid">
       <div
         v-for="(item, index) in cloudPlatformsData.cloudPlatforms"
@@ -61,12 +62,14 @@
     </div>
     <div class="project">
       <div class="project-header">
-        <Icon name="octicon:repo-16" size="1em" />
-        <h2>开源项目</h2>
+        <Icon name="octicon:repo-16" size="20px" />
+        <h3>开源项目</h3>
+      </div>
+      <div class="github-cards-grid">
+        <GitHubCard owner="Jursin" repo="Awesome-Class-Softwares" />
+        <GitHubCard owner="Jursin" repo="Awesome-Class-Softwares-Web" />
+        <GitHubCard owner="Jursin" repo="MC-Guide" />
       </div>
-      <GitHubCard owner="Jursin" repo="Awesome-Class-Softwares" /><br/>
-      <GitHubCard owner="Jursin" repo="Awesome-Class-Softwares-Web" /><br/>
-      <GitHubCard owner="Jursin" repo="MC-Guide" /><br/>
     </div>
   </div>
 </template>
@@ -78,7 +81,25 @@ import cloudPlatformsData from "../data/cloudPlatforms.json";
 </script>
 
 <style scoped>
-h2 {
+.skills {
+  max-width: 1400px;
+  margin: 20px auto;
+  padding: 20px;
+}
+
+.title {
+  padding: 40px 0 0 0;
+  margin: 0 0 16px 0 !important;
+  padding: 0 !important;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--vp-c-brand-1);
+  text-align: center;
+  outline: none;
+  transition: color var(--vp-t-color);
+}
+
+h3 {
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
@@ -125,13 +146,24 @@ h2 {
 
 .project-header {
   display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
+  align-items: center;
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
 
-.project-header h2 {
+.project-header h3 {
   margin: 0;
 }
+
+.github-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .github-cards-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>