feat: 添加友情链接页面支持
This commit is contained in:
pengzhanbo
parent
e5db17fb7e
commit
25d703b906
42
docs/friends.md
Normal file
42
docs/friends.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
friends: true
|
||||
title: 友情链接
|
||||
description: 这里是友情链接的描述文字
|
||||
permalink: /friends/
|
||||
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: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
-
|
||||
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: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
-
|
||||
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: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
---
|
||||
123
theme/src/client/components/Friends.vue
Normal file
123
theme/src/client/components/Friends.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<script lang="ts" setup>
|
||||
import { usePageFrontmatter } from '@vuepress/client'
|
||||
import { computed } from 'vue'
|
||||
import type { PlumeThemeFriendsFrontmatter } from '../../shared/index.js'
|
||||
import { useEditNavLink } from '../composables/index.js'
|
||||
import AutoLink from './AutoLink.vue'
|
||||
import FriendsItem from './FriendsItem.vue'
|
||||
import IconEdit from './icons/IconEdit.vue'
|
||||
|
||||
|
||||
const matter = usePageFrontmatter<PlumeThemeFriendsFrontmatter>()
|
||||
const editNavLink = useEditNavLink()
|
||||
|
||||
const list = computed(() => matter.value.list || [])
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="friends-wrapper">
|
||||
<h2 class="title">{{ matter.title || 'My Friends' }}</h2>
|
||||
<p v-if="matter.description" class="description">{{ matter.description }}</p>
|
||||
<section v-if="list.length" class="friends-list">
|
||||
<FriendsItem v-for="(friend, index) in list" :key="friend.name + index" :friend="friend" />
|
||||
</section>
|
||||
|
||||
<div v-if="editNavLink" class="edit-link">
|
||||
<AutoLink class="edit-link-button" :href="editNavLink.link" :no-icon="true">
|
||||
<IconEdit class="edit-link-icon" aria-label="edit icon"/>
|
||||
{{ editNavLink.text }}
|
||||
</AutoLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.friends-wrapper {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--vp-nav-height);
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.friends-wrapper .title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand-1);
|
||||
padding-left: 1rem;
|
||||
padding-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.friends-wrapper .description {
|
||||
color: var(--vp-c-text-1);
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 64px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.edit-link {
|
||||
margin-top: 64px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.friends-wrapper .title,
|
||||
.friends-wrapper .description,
|
||||
.edit-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
.friends-list {
|
||||
padding: 0 16px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.friends-wrapper {
|
||||
max-width: 784px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.friends-list {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.friends-wrapper {
|
||||
max-width: 1104px;
|
||||
}
|
||||
.friends-list {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.edit-link-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.edit-link-button:hover {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.edit-link-icon {
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
78
theme/src/client/components/FriendsItem.vue
Normal file
78
theme/src/client/components/FriendsItem.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<script lang="ts" setup>
|
||||
import type {FriendsItem} from '../../shared/index';
|
||||
import AutoLink from './AutoLink.vue'
|
||||
|
||||
defineProps<{
|
||||
friend: FriendsItem
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="friend">
|
||||
<AutoLink class="avatar-link" :href="friend.link" no-icon>
|
||||
<div class="avatar" :style="{ backgroundImage: `url(${friend.avatar})` }"></div>
|
||||
</AutoLink>
|
||||
<div class="content">
|
||||
<AutoLink class="title" :href="friend.link" no-icon>{{ friend.name }}</AutoLink>
|
||||
<p v-if="friend.desc">{{ friend.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.friend {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-friends-border-color);
|
||||
margin-bottom: 8px;
|
||||
transition: all 0.25s;
|
||||
background-color: var(--vp-friends-bg-color);
|
||||
box-shadow: var(--vp-shadow-1);
|
||||
}
|
||||
|
||||
.friend:hover {
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 100%;
|
||||
background-size: cover;
|
||||
background-color: var(--vp-c-default-soft);
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content .title {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: var(--vp-friends-link-color);
|
||||
padding-left: 16px;
|
||||
padding-bottom: 8px;
|
||||
margin-left: -16px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px dashed var(--vp-friends-border-color);
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
padding-top: 8px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
color: var(--vp-friends-text-color);
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user