diff --git a/docs/notes/theme/config/主题配置.md b/docs/notes/theme/config/主题配置.md index 500d0256..72ac01fb 100644 --- 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 index 2a748669..46e6c8e2 100644 --- 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 index 81a65f00..127a099c 100644 --- a/theme/src/client/components/Blog/VPBlog.vue +++ b/theme/src/client/components/Blog/VPBlog.vue @@ -22,7 +22,10 @@ const { theme, page } = useData()
-
+
@@ -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 index 0bfb4c1f..71f92bc4 100644 --- a/theme/src/client/components/VPSocialLink.vue +++ b/theme/src/client/components/VPSocialLink.vue @@ -17,7 +17,7 @@ const svg = computed(() => {