✨ feat: Contributors 组件

docs/.vitepress/theme/components/Contributors.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+  import { useData } from "vitepress";
+import { ref } from "vue";
+
+  const defaultAuthor = "GlobeMC"
+  const { frontmatter } = useData()
+
+  const contributorsArr = [
+    frontmatter.value?.author,
+    ...(frontmatter.value.contributors || []),
+  ].filter((x) => x)
+  const contributors = ref(contributorsArr)
+
+  function getAvatarUrl(name: string) {
+    return `https://github.com/${name}.png`
+  }
+  function getGithubLink(name: string) {
+    return `https://github.com/${name}`
+  }
+
+  function isNotEmpty(arr: string | string[]) {
+    return Array.isArray(arr) && arr.length
+  }
+</script>
+
+<template>
+  <p class="vp-main-color con">本文贡献者:</p>
+  <div v-if="isNotEmpty(contributors)" class="flex flex-wrap gap-4">
+    <div
+      v-for="contributor of contributors"
+      :key="contributor"
+      class="flex gap-2 items-center vp-main-color">
+      <a :href="getGithubLink(contributor)" rel="noreferrer" target="_blank">
+        <img :src="getAvatarUrl(contributor)" class="w-8 h-8 rounded-full" />
+      </a>
+      <p class="vp-main-color">{{ contributor }}</p>
+    </div>
+  </div>
+  <div v-else class="flex gap-2 items-center">
+    <a :href="getGithubLink(defaultAuthor)" rel="noreferrer" target="_blank">
+      <img :src="getAvatarUrl(defaultAuthor)" class="w-8 h-8 rounded-full" />
+    </a>
+    <p class="vp-main-clolr">{{ "GlobeMC" }}</p>
+  </div>
+</template>
+
+<style scoped>
+  .flex {
+    display: flex;
+  }
+  .flex-warp {
+    flex-wrap: wrap;
+  }
+  .gap-2 {
+    grid-gap: 0.5rem;
+    gap: 0.5rem;
+  }
+  .gap-4 {
+    grid-gap: 1rem;
+    gap: 1rem;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .w-8 {
+    width: 2rem;
+  }
+  .h-8 {
+    width: 2rem;
+  }
+  .rounded-full {
+    border-radius: 9999px;
+  }
+
+  img {
+    display: block;
+    border: 0.1px solid var(--vp-c-brand);
+  }
+
+  p {
+    line-height: 24px;
+    /* font-size: 14px; */
+    font-weight: 500;
+    color: var(--vp-c-brand);
+  }
+  .con{
+    margin-bottom: 6px;
+  }
+</style>

docs/.vitepress/theme/index.ts

@@ -1,18 +1,18 @@
-import { h } from "vue"
 import Theme from "vitepress/theme"
-import "./style.css"
+import { h } from "vue"
 import Comment from "./components/Comment.vue"
-import Author from "./components/Author.vue"
+import Contributors from "./components/Contributors.vue"
+import LauncherBadge from "./components/LauncherBadge.vue"
 import ReloadPrompt from "./components/ReloadPrompt.vue"
-import LauncherBadge from "./globalComponents/LauncherBadge.vue"
+import "./style.css"
 
 export default {
   ...Theme,
   Layout: () => {
     return h(Theme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
       "doc-after": () => h(Comment),
-      "doc-footer-before": () => h(Author),
+      "doc-footer-before": () => h(Contributors),
       "layout-bottom": () => h(ReloadPrompt),
     })
   },

docs/basis.md

@@ -1,5 +1,5 @@
 ---
-author: bingling_sama
+contributors: [bingling-sama]
 ---
 
 # 基础知识

docs/contribute/contributing.md

@@ -1,3 +1,7 @@
+---
+contributors: [HRxiaohu]
+---
+
 # 贡献指南
 
 ## 排版标准
@@ -49,3 +53,14 @@
 ```
 
 :::
+
+在您完成文档修改后，请在 MarkDown 文档的最上方修改 contributors FrontMatter，将您的 Github 用户名添加到贡献者列表，格式如下。
+
+```md
+---
+contributors: [用户名,用户名,用户名]
+---
+```
+:::warning 警告
+请一定要使用您的 Github 用户名，否则我们的组件无法获取您的头像。
+:::

docs/contribute/crash-report.md

@@ -1,5 +1,5 @@
 ---
-author: bingling_sama
+contributors: [bingling-sama]
 ---
 
 # 崩溃提交