feat: 添加友情链接页面支持

pengzhanbo · Dec 26, 2023 · 25d703b · 25d703b
1 parent e5db17f
commit 25d703b
Show file tree

Hide file tree

Showing 3 changed files with 243 additions and 0 deletions.
diff --git a/docs/friends.md b/docs/friends.md
@@ -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: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+---
diff --git a/theme/src/client/components/Friends.vue b/theme/src/client/components/Friends.vue
@@ -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>
diff --git a/theme/src/client/components/FriendsItem.vue b/theme/src/client/components/FriendsItem.vue
@@ -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>