feat(theme): add comment and markdown content into friends page (#580)

docs/notes/theme/config/frontmatter/friend.md

@@ -62,6 +62,13 @@ list:
 
 友情链接页的描述
 
+### contentPosition <Badge text="新" />
+
+- 类型： `'before' | 'after'`
+- 默认值： `'after'`
+
+markdown 内容在友情链接列表之前还是之后，默认插入到列表之后。
+
 ### list
 
 - 类型： `FriendsItem[]`

docs/notes/theme/guide/features/friend-links.md

@@ -18,6 +18,7 @@ friends: true
 title: 友情链接
 description: 友情链接描述文本
 permalink: /friends/
+contentPosition: after
 list:
   -
     name: pengzhanbo
@@ -30,9 +31,11 @@ list:
     avatar: https://github.com/pengzhanbo.png
     desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
 ---
+
+自定义内容 <!-- markdown 内容 会插入到 友情链接页中 -->
 ```
 
-主题会根据 配置信息 生成友情链接页。 如果未配置 `permalink` ，默认为 `/friends/`。
+主题会根据 配置信息 生成友情链接页。
 
 你需要自行将 友情链接页 的入口链接 配置到 `navbar` 的合适的位置中。
 

theme/src/client/components/VPComment.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData, useEncrypt } from '../composables/index.js'
+
+const { frontmatter, isDark } = useData()
+const { isPageDecrypted } = useEncrypt()
+
+const hasComment = computed(() =>
+  frontmatter.value.comments !== false && isPageDecrypted.value,
+)
+</script>
+
+<template>
+  <DocComment v-if="hasComment" :darkmode="isDark" vp-comment />
+</template>

theme/src/client/components/VPDoc.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import VPComment from '@theme/VPComment.vue'
 import VPDocAside from '@theme/VPDocAside.vue'
 import VPDocBreadcrumbs from '@theme/VPDocBreadcrumbs.vue'
 import VPDocCopyright from '@theme/VPDocCopyright.vue'
@@ -17,7 +18,7 @@ import {
   useSidebar,
 } from '../composables/index.js'
 
-const { page, theme, frontmatter, isDark } = useData()
+const { page, theme, frontmatter } = useData()
 const route = useRoute()
 
 const { hasSidebar, hasAside, leftAside } = useSidebar()
@@ -26,10 +27,6 @@ const headers = useHeaders()
 const { isPageDecrypted } = useEncrypt()
 const { mode: contributorsMode } = useContributors()
 
-const hasComments = computed(() =>
-  page.value.frontmatter.comments !== false && isPageDecrypted.value,
-)
-
 const enableAside = computed(() => {
   if (!hasAside.value)
     return false
@@ -153,9 +150,9 @@ watch(
                 <slot name="doc-footer-before" />
               </template>
             </VPDocFooter>
-            <template v-if="hasComments">
-              <DocComment :darkmode="isDark" vp-comment />
-            </template>
+
+            <VPComment />
+
             <slot name="doc-after" />
           </div>
         </div>

theme/src/client/components/VPFriends.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import VPComment from '@theme/VPComment.vue'
 import VPFriendsGroup from '@theme/VPFriendsGroup.vue'
 import VPFriendsItem from '@theme/VPFriendsItem.vue'
 import VPLink from '@theme/VPLink.vue'
@@ -14,6 +15,8 @@ const groups = computed(() => matter.value.groups || [])
 
 <template>
   <div class="vp-friends">
+    <Content v-if="matter.contentPosition === 'before'" class="vp-doc plume-content before" vp-content />
+
     <h2 class="title">
       {{ matter.title || 'My Friends' }}
     </h2>
@@ -30,6 +33,8 @@ const groups = computed(() => matter.value.groups || [])
 
     <VPFriendsGroup v-for="(group, index) in groups" :key="index" :group="group" />
 
+    <Content v-if="matter.contentPosition !== 'before'" class="vp-doc plume-content after" vp-content />
+
     <div v-if="editLink" class="edit-link">
       <VPLink
         class="edit-link-button"
@@ -40,6 +45,8 @@ const groups = computed(() => matter.value.groups || [])
         {{ editLink.text }}
       </VPLink>
     </div>
+
+    <VPComment />
   </div>
 </template>
 
@@ -134,4 +141,8 @@ const groups = computed(() => matter.value.groups || [])
   margin-right: 8px;
   fill: currentcolor;
 }
+
+.vp-friends .vp-doc.after {
+  margin-top: 48px;
+}
 </style>

theme/src/shared/frontmatter/friends.ts

@@ -82,6 +82,10 @@ export interface ThemeFriendsFrontmatter extends ThemeNormalFrontmatter {
    * 描述
    */
   description?: string
+  /**
+   * markdown 内容位置
+   */
+  contentPosition?: 'before' | 'after'
   /**
    * 友链列表
    */