mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
feat: 支持友情链接页分组
This commit is contained in:
pengzhanbo
parent
826a527951
commit
de404b24db
@ -34,9 +34,50 @@ list:
|
||||
link: https://github.com/pengzhanbo
|
||||
avatar: https://github.com/pengzhanbo.png
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
groups:
|
||||
-
|
||||
name: pengzhanbo
|
||||
link: https://github.com/pengzhanbo
|
||||
avatar: https://github.com/pengzhanbo.png
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
title: 分组 1
|
||||
desc: 自定义颜色
|
||||
list:
|
||||
-
|
||||
name: pengzhanbo
|
||||
link: https://github.com/pengzhanbo
|
||||
avatar: https://github.com/pengzhanbo.png
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
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
|
||||
avatar: https://github.com/pengzhanbo.png
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
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
|
||||
avatar: https://github.com/pengzhanbo.png
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
backgroundColor: rgb(0,153,204)
|
||||
color: rgb(153,238,255)
|
||||
nameColor: rgb(153,255,255)
|
||||
borderColor: rgb(153,238,255)
|
||||
-
|
||||
title: 分组 2
|
||||
desc: 这里是分组 2 的描述文字
|
||||
list:
|
||||
-
|
||||
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: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
---
|
||||
|
||||
@ -71,5 +71,46 @@ interface FriendsItem {
|
||||
* 友情链接描述
|
||||
*/
|
||||
desc?: string
|
||||
|
||||
/**
|
||||
* 背景色
|
||||
*/
|
||||
backgroundColor?: string | { light: string, dark: string }
|
||||
/**
|
||||
* 字体颜色
|
||||
*/
|
||||
color?: string | { light: string, dark: string }
|
||||
/**
|
||||
* 名字颜色
|
||||
*/
|
||||
nameColor?: string | { light: string, dark: string }
|
||||
/**
|
||||
* 边框颜色
|
||||
*/
|
||||
borderColor?: string | { light: string, dark: string }
|
||||
}
|
||||
```
|
||||
|
||||
### groups
|
||||
|
||||
- 类型： `FriendsGroup[]`
|
||||
- 默认值: `[]`
|
||||
|
||||
友情链接分组
|
||||
|
||||
```ts
|
||||
interface FriendsGroup {
|
||||
/**
|
||||
* 分组名
|
||||
*/
|
||||
title?: string
|
||||
/**
|
||||
* 分组描述
|
||||
*/
|
||||
desc?: string
|
||||
/**
|
||||
* 友情链接列表
|
||||
*/
|
||||
list?: FriendsItem[]
|
||||
}
|
||||
```
|
||||
|
||||
@ -5,11 +5,13 @@ import type { PlumeThemeFriendsFrontmatter } from '../../shared/index.js'
|
||||
import { useEditNavLink } from '../composables/index.js'
|
||||
import AutoLink from './AutoLink.vue'
|
||||
import FriendsItem from './FriendsItem.vue'
|
||||
import FriendsGroup from './FriendsGroup.vue'
|
||||
|
||||
const matter = usePageFrontmatter<PlumeThemeFriendsFrontmatter>()
|
||||
const editNavLink = useEditNavLink()
|
||||
|
||||
const list = computed(() => matter.value.list || [])
|
||||
const groups = computed(() => matter.value.groups || [])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -28,6 +30,8 @@ const list = computed(() => matter.value.list || [])
|
||||
/>
|
||||
</section>
|
||||
|
||||
<FriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
|
||||
|
||||
<div v-if="editNavLink" class="edit-link">
|
||||
<AutoLink
|
||||
class="edit-link-button"
|
||||
@ -62,7 +66,7 @@ const list = computed(() => matter.value.list || [])
|
||||
margin-bottom: 1rem;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand-1);
|
||||
color: var(--vp-c-text-1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -87,9 +91,8 @@ const list = computed(() => matter.value.list || [])
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.friends-wrapper .title,
|
||||
.friends-wrapper .description,
|
||||
.edit-link {
|
||||
padding-left: 0;
|
||||
.friends-wrapper .description {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
@ -104,6 +107,12 @@ const list = computed(() => matter.value.list || [])
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.friends-wrapper .title,
|
||||
.friends-wrapper .description,
|
||||
.edit-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
81
theme/src/client/components/FriendsGroup.vue
Normal file
81
theme/src/client/components/FriendsGroup.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<script lang="ts" setup>
|
||||
import type { FriendGroup } from '../../shared/index.js'
|
||||
import FriendsItem from './FriendsItem.vue'
|
||||
|
||||
defineProps<{
|
||||
group: FriendGroup
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="friends-group">
|
||||
<h3 class="title">
|
||||
{{ group.title || 'My Friends' }}
|
||||
</h3>
|
||||
<p v-if="group.desc" class="description">
|
||||
{{ group.desc }}
|
||||
</p>
|
||||
<section v-if="group.list?.length" class="friends-list">
|
||||
<FriendsItem v-for="(friend, index) in group.list" :key="friend.name + index" :friend="friend" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.friends-group {
|
||||
width: 100%;
|
||||
padding: 64px 16px 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.friends-group .title {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
border-top: solid 1px var(--vp-c-divider);
|
||||
outline: none;
|
||||
transition: color var(--t-color), border-color var(--t-color);
|
||||
}
|
||||
|
||||
.friends-group .description {
|
||||
margin-bottom: 16px;
|
||||
line-height: 28px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.friends-list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.friends-group {
|
||||
padding: 64px 0 0;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.friends-group {
|
||||
max-width: 1104px;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,35 @@
|
||||
<script lang="ts" setup>
|
||||
import { isPlainObject } from '@vuepress/helper/client'
|
||||
import { computed } from 'vue'
|
||||
import type { FriendsItem } from '../../shared/index'
|
||||
import { useDarkMode } from '../composables/index.js'
|
||||
import AutoLink from './AutoLink.vue'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
friend: FriendsItem
|
||||
}>()
|
||||
|
||||
const isDark = useDarkMode()
|
||||
|
||||
function getStyle(name: string, color?: string | { light: string, dark: string }) {
|
||||
if (!color)
|
||||
return {}
|
||||
const value = isPlainObject(color) ? isDark.value ? color.dark : color.light : color
|
||||
return value ? { [name]: value } : {}
|
||||
}
|
||||
|
||||
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="friend">
|
||||
<div class="friend" :style="friendStyle">
|
||||
<AutoLink
|
||||
class="avatar-link"
|
||||
:href="friend.link"
|
||||
@ -49,7 +70,7 @@ defineProps<{
|
||||
}
|
||||
|
||||
.friend:hover {
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
box-shadow: var(--vp-shadow-2);
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
@ -77,7 +98,7 @@ defineProps<{
|
||||
margin-left: -16px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-friends-link-color);
|
||||
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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user