feat(theme): add support layout for blog profile (#182)

pengzhanbo · Sep 15, 2024 · db28c8b · db28c8b
1 parent 5f0dd0d
commit db28c8b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/docs/notes/theme/config/主题配置.md b/docs/notes/theme/config/主题配置.md
@@ -247,6 +247,7 @@ interface BlogOptions {
   - `profile.circle`: 是否为圆形头像
   - `profile.location`: 用户地理位置
   - `profile.organization`: 用户所在组织/公司
+  - `profile.layout`: 个人信息展示在左侧还是右侧，`'left' | 'right'`
 
 示例：
 
@@ -260,6 +261,7 @@ export default {
       circle: true,
       location: '杭州，中国',
       organization: 'xxx公司',
+      layout: 'right',
     }
   })
 }

diff --git a/docs/notes/theme/guide/博客.md b/docs/notes/theme/guide/博客.md
@@ -52,11 +52,19 @@ import VPBlogProfile from 'vuepress-theme-plume/components/Blog/VPBlogProfile.vu
 export default defineUserConfig({
   theme: plumeTheme({
     profile: {
-      name: '你的名字',
-      description: '描述文字',
+      name: '您的名字',
+      description: '描述文字，座右铭/签名',
       avatar: '/blogger.png',
+      location: '您的位置',
+      organization: '您的组织',
       circle: true, // 是否为圆形头像
-    }
+      layout: 'right', // 个人信息在左侧还是右侧，'left' | 'right'
+    },
+    // 社交链接
+    social: [
+      { icon: 'github', link: 'https://github.com/vuepress-theme-plume' },
+      // ... more
+    ]
   })
 })
 ```

diff --git a/theme/src/client/components/Blog/VPBlog.vue b/theme/src/client/components/Blog/VPBlog.vue
@@ -22,7 +22,10 @@ const { theme, page } = useData()
   <div class="vp-blog" :class="{ 'home-blog': homeBlog }" vp-blog>
     <slot name="blog-top" />
 
-    <div class="blog-container" :class="{ 'no-profile': !theme.profile }">
+    <div
+      class="blog-container"
+      :class="{ 'no-profile': !theme.profile, 'left': theme.profile?.layout === 'left' }"
+    >
       <VPBlogNav v-if="!theme.profile" is-local />
 
       <VPTransitionFadeSlideY>
@@ -117,6 +120,10 @@ const { theme, page } = useData()
   margin: 0 auto;
 }
 
+.blog-container:not(.no-profile).left {
+  flex-direction: row-reverse;
+}
+
 .blog-container.no-profile {
   display: block;
   max-width: 784px;

diff --git a/theme/src/client/components/VPSocialLink.vue b/theme/src/client/components/VPSocialLink.vue
@@ -17,7 +17,7 @@ const svg = computed(() => {
 
 <template>
   <a
-    class="vp-social-link"
+    class="vp-social-link no-icon"
     :href="link"
     :aria-label="ariaLabel ?? (typeof icon === 'string' ? icon : '')"
     target="_blank" rel="noopener" v-html="svg"

diff --git a/theme/src/shared/options/locale.ts b/theme/src/shared/options/locale.ts
@@ -326,6 +326,12 @@ export interface PlumeThemeProfile {
    * 组织，公司
    */
   organization?: string
+
+  /**
+   * 布局位置，左侧或者右侧
+   * @default 'right'
+   */
+  layout?: 'left' | 'right'
 }
 
 /** ========================== Page Meta ====================== */