gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme): optimize friends layout

Browse Source
This commit is contained in:
pengzhanbo 2024-06-28 03:10:07 +08:00
parent 6952ba94c3
commit 7448483586
11 changed files with 113 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
docs/friends.md
View File

@ -4,11 +4,63 @@ title: 友情链接
description: 这里是友情链接的描述文字
permalink: /friends/
list:
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
socials:
-
icon: github
link: https://github.com/pengzhanbo
-
icon: twitter
link: https://twitter.com/pengzhanbo
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
socials:
-
icon: github
link: https://github.com/pengzhanbo
-
icon: twitter
link: https://twitter.com/pengzhanbo
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
socials:
-
icon: github
link: https://github.com/pengzhanbo
-
icon: twitter
link: https://twitter.com/pengzhanbo
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
socials:
-
icon: github
link: https://github.com/pengzhanbo
-
icon: twitter
link: https://twitter.com/pengzhanbo
-
name: pengzhanbo
link: https://github.com/pengzhanbo
@ -19,21 +71,7 @@ list:
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
groups:
-
title: 分组 1
@ -47,7 +85,6 @@ groups:
backgroundColor: rgb(255,153,0)
color: rgb(255,255,153)
nameColor: rgb(255,255,170)
borderColor: rgb(255,255,204)
-
name: pengzhanbo
link: https://github.com/pengzhanbo
@ -56,7 +93,6 @@ groups:
backgroundColor: rgb(255,102,102)
color: rgb(255,204,204)
nameColor: rgb(255,238,238)
borderColor: rgb(255,255,238)
-
name: pengzhanbo
link: https://github.com/pengzhanbo
@ -65,7 +101,6 @@ groups:
backgroundColor: rgb(0,153,204)
color: rgb(153,238,255)
nameColor: rgb(153,255,255)
borderColor: rgb(153,238,255)
-
title: 分组 2
desc: 这里是分组 2 的描述文字

11
docs/notes/theme/config/frontmatter/friend.md
View File

@ -80,6 +80,11 @@ interface FriendsItem {
*/
desc?: string
/**
* 社交链接
*/
socials?: SocialLink[]
/**
* 背景色
*/
@ -92,13 +97,11 @@ interface FriendsItem {
* 名字颜色
*/
nameColor?: string | { light: string, dark: string }
/**
* 边框颜色
*/
borderColor?: string | { light: string, dark: string }
}
```
社交链接配置请查看 [配置/主题配置/社交链接](../../config/主题配置.md#social)。
### groups
- 类型： `FriendsGroup[]`

11
theme/src/client/components/Blog/VPBlog.vue
View File

@ -74,6 +74,8 @@ const { theme, page } = useData()
.vp-blog {
position: relative;
min-height: calc(100vh - var(--vp-footer-height, 0px));
background-color: var(--vp-c-bg);
transition: background-color var(--t-color);
}
.blog-container {
@ -93,14 +95,7 @@ const { theme, page } = useData()
@media (min-width: 768px) {
.vp-blog {
min-height: calc(100vh + var(--vp-nav-height) - var(--vp-footer-height, 0px));
}
.vp-blog {
padding-top: var(--vp-nav-height);
margin-top: calc(var(--vp-nav-height) * -1);
background-color: var(--vp-c-bg-alt);
transition: background-color var(--t-color);
background-color: transparent;
}
.blog-container {

10
theme/src/client/components/VPContent.vue
View File

@ -1,11 +1,12 @@
<script setup lang="ts">
import { computed } from 'vue'
import { computed, nextTick, watch } from 'vue'
import VPBlog from '@theme/Blog/VPBlog.vue'
import VPDoc from '@theme/VPDoc.vue'
import VPPage from '@theme/VPPage.vue'
import VPHome from '@theme/Home/VPHome.vue'
import VPFriends from '@theme/VPFriends.vue'
import { useData, useSidebar } from '../composables/index.js'
import { inBrowser } from '../utils/index.js'
const props = defineProps<{
isNotFound?: boolean
@ -18,6 +19,13 @@ const isBlogLayout = computed(() => {
const { type } = page.value
return type === 'blog' || type === 'blog-archives' || type === 'blog-tags'
})
watch([isBlogLayout, () => frontmatter.value.pageLayout], () => nextTick(() =>
inBrowser && document.documentElement.classList.toggle(
'bg-gray',
isBlogLayout.value,
),
), { immediate: true })
</script>
<template>

3
theme/src/client/components/VPFooter.vue
View File

@ -44,8 +44,9 @@ onMounted(() => {
position: relative;
z-index: var(--vp-z-index-footer);
padding: 24px;
background-color: var(--vp-c-bg);
border-top: 1px solid var(--vp-c-gutter);
transition: all var(--t-color);
transition: border-top var(--t-color), background-color var(--t-color);
}
.footer-no-border .vp-footer {

17
theme/src/client/components/VPFriends.vue
View File

@ -47,25 +47,19 @@ const groups = computed(() => matter.value.groups || [])
<style scoped>
.vp-friends {
width: 100%;
min-height: calc(100vh - var(--vp-footer-height, 0px));
padding-top: var(--vp-nav-height);
padding-bottom: 5rem;
margin: 0 auto;
}
@media (min-width: 960px) {
.vp-friends {
min-height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
}
}
.vp-friends .title {
padding-top: 3rem;
padding-left: 1rem;
margin-bottom: 1rem;
font-size: 24px;
margin-bottom: 2rem;
font-size: 28px;
font-weight: 700;
color: var(--vp-c-text-1);
text-align: center;
outline: none;
}
@ -74,13 +68,14 @@ const groups = computed(() => matter.value.groups || [])
margin-bottom: 16px;
line-height: 28px;
color: var(--vp-c-text-1);
text-align: center;
}
.friends-list {
display: grid;
gap: 16px;
gap: 20px;
padding: 0 16px;
margin-top: 64px;
margin-top: 48px;
}
.edit-link {

9
theme/src/client/components/VPFriendsGroup.vue
View File

@ -33,11 +33,13 @@ defineProps<{
}
.vp-friends-group .title {
padding-top: 2rem;
padding-top: 3rem;
padding-bottom: 8px;
font-size: 20px;
margin-bottom: 28px;
font-size: 24px;
font-weight: 700;
color: var(--vp-c-text-1);
text-align: center;
border-top: solid 1px var(--vp-c-divider);
outline: none;
transition: color var(--t-color), border-color var(--t-color);
@ -47,12 +49,13 @@ defineProps<{
margin-bottom: 16px;
line-height: 28px;
color: var(--vp-c-text-1);
text-align: center;
transition: color var(--t-color);
}
.friends-list {
display: grid;
gap: 16px;
gap: 20px;
margin-top: 32px;
}

34
theme/src/client/components/VPFriendsItem.vue
View File

@ -4,6 +4,7 @@ import { computed } from 'vue'
import VPLink from '@theme/VPLink.vue'
import type { FriendsItem } from '../../shared/index'
import { useDarkMode } from '../composables/dark-mode.js'
import VPSocialLinks from './VPSocialLinks.vue'
const props = defineProps<{
friend: FriendsItem
@ -22,14 +23,17 @@ const friendStyle = computed(() => {
return {
...getStyle('--vp-friends-text-color', props.friend.color),
...getStyle('--vp-friends-bg-color', props.friend.backgroundColor),
...getStyle('--vp-friends-border-color', props.friend.borderColor),
...getStyle('--vp-friends-name-color', props.friend.nameColor),
}
})
</script>
<template>
<div class="vp-friend" :style="friendStyle">
<div
class="vp-friend" :style="friendStyle" :class="{
'only-title': !friend.desc && (!friend.socials || !friend.socials.length),
}"
>
<VPLink
class="avatar-link"
:href="friend.link"
@ -49,6 +53,7 @@ const friendStyle = computed(() => {
>
{{ friend.name }}
</VPLink>
<VPSocialLinks v-if="friend.socials" :links="friend.socials" />
<p v-if="friend.desc">
{{ friend.desc }}
</p>
@ -58,21 +63,16 @@ const friendStyle = computed(() => {
<style scoped>
.vp-friend {
position: relative;
display: flex;
align-items: flex-start;
padding: 16px;
padding: 20px;
margin-bottom: 8px;
background-color: var(--vp-friends-bg-color);
border: 1px solid var(--vp-friends-border-color);
border-radius: 6px;
box-shadow: var(--vp-shadow-1);
transition: all var(--t-color);
}
.vp-friend:hover {
box-shadow: var(--vp-shadow-2);
}
.avatar-link {
display: inline-block;
margin-right: 16px;
@ -90,24 +90,26 @@ const friendStyle = computed(() => {
flex: 1;
}
.vp-friend.only-title .content {
margin-top: 20px;
}
.content .title {
display: block;
padding-bottom: 8px;
padding-left: 16px;
margin-bottom: 8px;
margin-left: -16px;
font-size: 16px;
font-size: 20px;
font-weight: 700;
color: var(--vp-friends-name-color);
border-bottom: 1px dashed var(--vp-friends-border-color);
transition: color var(--t-color), border-bottom var(--t-color);
}
.content :deep(.vp-social-links) {
justify-content: flex-start;
}
.content p {
display: -webkit-box;
padding-top: 8px;
overflow: hidden;
font-size: 0.875rem;
line-height: 1.5;
color: var(--vp-friends-text-color);
transition: color var(--t-color);

6
theme/src/client/styles/normalize.css vendored
View File

@ -46,6 +46,7 @@ body {
font-family: var(--vp-font-family-base);
font-weight: 400;
line-height: 24px;
background-color: var(--vp-c-bg);
direction: ltr;
}
@ -53,13 +54,16 @@ body {
html,
body {
color: var(--vp-c-text-1);
background-color: var(--vp-c-bg);
transition: var(--t-color);
transition-property: color, background-color;
scrollbar-width: thin;
}
html.bg-gray body {
background-color: var(--vp-c-bg-alt);
}
main {
display: block;
}

3
theme/src/client/styles/vars.css
View File

@ -485,9 +485,8 @@
* -------------------------------------------------------------------------- */
:root {
--vp-friends-text-color: var(--vp-c-text-2);
--vp-friends-bg-color: var(--vp-c-bg);
--vp-friends-bg-color: var(--vp-c-bg-alt);
--vp-friends-name-color: var(--vp-c-text-2);
--vp-friends-border-color: var(--vp-c-divider);
}
/**

4
theme/src/shared/frontmatter/friends.ts
View File

@ -1,12 +1,14 @@
import type { SocialLink } from '../base.js'
export interface FriendsItem {
name: string
link: string
avatar?: string
desc?: string
socials?: SocialLink[]
backgroundColor?: string | { light: string, dark: string }
color?: string | { light: string, dark: string }
nameColor?: string | { light: string, dark: string }
borderColor?: string | { light: string, dark: string }
}
export interface FriendGroup {