feat: add banner

bsdayo · Sep 1, 2023 · 8d96a56 · 8d96a56
1 parent dcc4cd6
commit 8d96a56
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git a/content/.vitepress/config.ts b/content/.vitepress/config.ts
@@ -35,8 +35,9 @@ export default defineConfigWithTheme<BsBlogThemeConfig>({
 
   themeConfig: {
     author: 'bsdayo',
-    bio: '♪sakana——\\(＞○＜\\)♪',
+    bio: '怎么会是呢？',
     avatar: 'https://avatars.githubusercontent.com/u/41754841',
+    avatarBg: '/img/avatarBg.jpg',
     defaultPostCover: 'https://cdn.vuetifyjs.com/images/parallax/material.jpg',
     navLinks: [
       {

diff --git a/content/pages/links/index.md b/content/pages/links/index.md
@@ -83,4 +83,5 @@ Pull Request；或是直接在下面评论。记得带上类似上面的的格
 </v-container>
 
 <script setup>
+import LinkCard from './LinkCard.vue'
 </script>
diff --git a/content/public/img/avatarBg.jpg b/content/public/img/avatarBg.jpg
diff --git a/theme/components/MainFrame.vue b/theme/components/MainFrame.vue
@@ -13,6 +13,30 @@ defineEmits<{
 </script>
 
 <template>
+  <v-navigation-drawer v-model="drawerOpened">
+    <v-img class="d-flex align-end text-white" :src="theme.avatarBg" height="150px" :cover="true">
+      <v-list-item>
+        <template #prepend>
+          <v-avatar size="56">
+            <v-img :src="theme.avatar"/>
+          </v-avatar>
+        </template>
+
+        <v-list-item-title>{{ theme.author }}</v-list-item-title>
+        <v-list-item-subtitle>{{ theme.bio }}</v-list-item-subtitle>
+      </v-list-item>
+    </v-img>
+
+    <v-list :nav="true">
+      <v-list-item v-for="link in theme.navLinks"
+                   :key="link.href"
+                   @click="drawerOpened = $vuetify.display.mobile ? false : drawerOpened"
+                   :prepend-icon="link.icon"
+                   :title="link.title"
+                   :value="link.title"
+                   :href="link.href"/>
+    </v-list>
+  </v-navigation-drawer>
 
   <v-app-bar>
     <template #prepend>
@@ -25,18 +49,6 @@ defineEmits<{
       <v-btn icon="mdi-brightness-6" @click="$emit('toggleTheme')"/>
     </template>
   </v-app-bar>
-
-  <v-navigation-drawer v-model="drawerOpened">
-    <v-list :nav="true">
-      <v-list-item v-for="link in theme.navLinks"
-                   :key="link.href"
-                   @click="drawerOpened = $vuetify.display.mobile ? false : drawerOpened"
-                   :prepend-icon="link.icon"
-                   :title="link.title"
-                   :value="link.title"
-                   :href="link.href"/>
-    </v-list>
-  </v-navigation-drawer>
 </template>
 
 <style scoped lang="scss">

diff --git a/theme/types/config.ts b/theme/types/config.ts
@@ -4,6 +4,7 @@ export interface BsBlogThemeConfig {
   author: string
   bio: string
   avatar: string
+  avatarBg: string
   defaultPostCover: string
   navLinks?: NavLink[]
   socialLinks?: SocialLink[]