@sugarat/theme 0.1.49 → 0.2.0

package/src/components/BlogArticleAnalyze.vue

@@ -1,47 +1,3 @@
-<template>
-  <div class="doc-analyze" v-if="showAnalyze" data-pagefind-ignore="all">
-    <span>
-      <el-icon><EditPen /></el-icon>
-      字数：{{ wordCount }} 个字
-    </span>
-    <span>
-      <el-icon><AlarmClock /></el-icon>
-      预计：{{ readTime }} 分钟
-    </span>
-  </div>
-  <div class="meta-des" ref="$des" id="hack-article-des">
-    <!-- TODO：是否需要原创？转载等标签，理论上可以添加标签解决，可以参考 charles7c -->
-    <span v-if="author && !hiddenAuthor" class="author">
-      <el-icon title="本文作者"><UserFilled /></el-icon>
-      <a
-        class="link"
-        :href="currentAuthorInfo.url"
-        :title="currentAuthorInfo.des"
-        v-if="currentAuthorInfo"
-      >
-        {{ currentAuthorInfo.nickname }}
-      </a>
-      <template v-else>
-        {{ author }}
-      </template>
-    </span>
-    <span v-if="publishDate && !hiddenTime" class="publishDate">
-      <el-icon :title="timeTitle"><Clock /></el-icon>
-      {{ publishDate }}
-    </span>
-    <span v-if="tags.length" class="tags">
-      <el-icon :title="timeTitle"><CollectionTag /></el-icon>
-      <a class="link" :href="`/?tag=${tag}`" v-for="tag in tags" :key="tag"
-        >{{ tag }}
-      </a>
-    </span>
-    <!-- 封面展示 -->
-    <ClientOnly>
-      <BlogDocCover />
-    </ClientOnly>
-  </div>
-</template>
-
 <script lang="ts" setup>
 // 阅读时间计算方式参考
 // https://zhuanlan.zhihu.com/p/36375802
@@ -49,15 +5,15 @@ import { useData, useRoute } from 'vitepress'
 import { computed, onMounted, ref, watch } from 'vue'
 import { ElIcon } from 'element-plus'
 import {
-  UserFilled,
+  AlarmClock,
   Clock,
+  CollectionTag,
   EditPen,
-  AlarmClock,
-  CollectionTag
+  UserFilled
 } from '@element-plus/icons-vue'
 import { useBlogConfig, useCurrentArticle } from '../composables/config/blog'
 import countWord, { formatShowDate } from '../utils/client'
-import { Theme } from '../composables/config'
+import type { Theme } from '../composables/config'
 import BlogDocCover from './BlogDocCover.vue'
 
 const { article, authorList } = useBlogConfig()
@@ -69,7 +25,7 @@ const tags = computed(() => {
       []
         .concat(tag, tags, categories)
         .flat()
-        .filter((v) => !!v)
+        .filter(v => !!v)
     )
   ]
 })
@@ -99,20 +55,20 @@ const readTime = computed(() => {
 const route = useRoute()
 const $des = ref<HTMLDivElement>()
 
-const analyze = () => {
+function analyze() {
   if (!$des.value) {
     return
   }
-  document.querySelectorAll('.meta-des').forEach((v) => v.remove())
+  document.querySelectorAll('.meta-des').forEach(v => v.remove())
   const docDomContainer = window.document.querySelector('#VPContent')
   const imgs = docDomContainer?.querySelectorAll<HTMLImageElement>(
     '.content-container .main img'
   )
   imageCount.value = imgs?.length || 0
 
-  const words =
-    docDomContainer?.querySelector('.content-container .main')?.textContent ||
-    ''
+  const words
+    = docDomContainer?.querySelector('.content-container .main')?.textContent
+    || ''
 
   wordCount.value = countWord(words)
   docDomContainer?.querySelector('h1')?.after($des.value!)
@@ -151,11 +107,11 @@ const { theme } = useData<Theme.Config>()
 const globalAuthor = computed(() => theme.value.blog?.author || '')
 const author = computed(
   () =>
-    (frontmatter.value.author || currentArticle.value?.meta.author) ??
-    globalAuthor.value
+    (frontmatter.value.author || currentArticle.value?.meta.author)
+    ?? globalAuthor.value
 )
 const currentAuthorInfo = computed(() =>
-  authorList?.find((v) => author.value === v.nickname)
+  authorList?.find(v => author.value === v.nickname)
 )
 const hiddenAuthor = computed(() => frontmatter.value.author === false)
 
@@ -171,6 +127,49 @@ watch(
 )
 </script>
 
+<template>
+  <div v-if="showAnalyze" class="doc-analyze" data-pagefind-ignore="all">
+    <span>
+      <ElIcon><EditPen /></ElIcon>
+      字数：{{ wordCount }} 个字
+    </span>
+    <span>
+      <ElIcon><AlarmClock /></ElIcon>
+      预计：{{ readTime }} 分钟
+    </span>
+  </div>
+  <div id="hack-article-des" ref="$des" class="meta-des">
+    <!-- TODO：是否需要原创？转载等标签，理论上可以添加标签解决，可以参考 charles7c -->
+    <span v-if="author && !hiddenAuthor" class="author">
+      <ElIcon title="本文作者"><UserFilled /></ElIcon>
+      <a
+        v-if="currentAuthorInfo"
+        class="link"
+        :href="currentAuthorInfo.url"
+        :title="currentAuthorInfo.des"
+      >
+        {{ currentAuthorInfo.nickname }}
+      </a>
+      <template v-else>
+        {{ author }}
+      </template>
+    </span>
+    <span v-if="publishDate && !hiddenTime" class="publishDate">
+      <ElIcon :title="timeTitle"><Clock /></ElIcon>
+      {{ publishDate }}
+    </span>
+    <span v-if="tags.length" class="tags">
+      <ElIcon :title="timeTitle"><CollectionTag /></ElIcon>
+      <a v-for="tag in tags" :key="tag" class="link" :href="`/?tag=${tag}`">{{ tag }}
+      </a>
+    </span>
+    <!-- 封面展示 -->
+    <ClientOnly>
+      <BlogDocCover />
+    </ClientOnly>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .doc-analyze {
   color: var(--vp-c-text-2);

package/src/components/BlogAuthor.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import { useBlogConfig } from '../composables/config/blog'
+
+const { home } = useBlogConfig()
+const { frontmatter, site } = useData()
+const author = computed(() =>
+  frontmatter.value.author
+  ?? frontmatter.value?.blog?.author
+  ?? home?.author
+  ?? site.value.themeConfig?.blog?.author
+)
+const logo = computed(() =>
+  frontmatter.value.logo
+  ?? frontmatter.value?.blog?.logo
+  ?? home?.logo
+  ?? site.value.themeConfig.logo
+)
+const show = computed(() => author.value || logo.value)
+</script>
+
+<template>
+  <div v-if="show" class="blog-author">
+    <img v-if="logo" :src="logo" alt="avatar">
+    <p v-if="author">
+      {{ author }}
+    </p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.blog-author {
+  margin-bottom: 20px;
+
+  img {
+    display: block;
+    margin: 10px auto;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background-color: rgba(var(--bg-gradient-home));
+  }
+
+  img:hover {
+    transform: rotate(666turn);
+    transition-duration: 59s;
+    transition-timing-function: cubic-bezier(.34, 0, .84, 1)
+  }
+
+  p {
+    text-align: center;
+  }
+}
+</style>

package/src/components/BlogComment.vue

@@ -1,47 +1,3 @@
-<template>
-  <div
-    class="comment"
-    v-if="show"
-    id="giscus-comment"
-    data-pagefind-ignore="all"
-    ref="commentEl"
-  >
-    <el-affix
-      :class="{ hidden: commentIsVisible }"
-      class="comment-btn"
-      target="main"
-      position="bottom"
-      :offset="40"
-    >
-      <el-button
-        @click="handleScrollToComment"
-        plain
-        :icon="Comment"
-        type="primary"
-        >评论</el-button
-      >
-    </el-affix>
-    <component
-      v-if="showComment"
-      :is="'script'"
-      src="https://giscus.app/client.js"
-      :data-repo="commentConfig.repo"
-      :data-repo-id="commentConfig.repoId"
-      :data-category="commentConfig.category"
-      :data-category-id="commentConfig.categoryId"
-      :data-mapping="commentConfig.mapping || 'pathname'"
-      data-reactions-enabled="1"
-      data-emit-metadata="0"
-      :data-input-position="commentConfig.inputPosition || 'top'"
-      :data-theme="isDark ? 'dark' : 'light'"
-      :data-lang="commentConfig.lang || 'zh-CN'"
-      crossorigin="anonymous"
-      :data-loading="commentConfig.loading || 'eager'"
-      async
-    >
-    </component>
-  </div>
-</template>
 <script setup lang="ts">
 import { useElementVisibility } from '@vueuse/core'
 import { useData, useRoute } from 'vitepress'
@@ -49,13 +5,13 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElAffix, ElButton } from 'element-plus'
 import { Comment } from '@element-plus/icons-vue'
 import { useGiscusConfig } from '../composables/config/blog'
-import { Theme } from '../composables/config/index'
+import type { Theme } from '../composables/config/index'
 
 const { frontmatter } = useData()
 const commentEl = ref(null)
 const commentIsVisible = useElementVisibility(commentEl)
 
-const handleScrollToComment = () => {
+function handleScrollToComment() {
   document.querySelector('#giscus-comment')?.scrollIntoView({
     behavior: 'smooth',
     block: 'start'
@@ -78,10 +34,10 @@ const show = computed(() => {
     return giscusConfig
   }
   return (
-    giscusConfig.repo &&
-    giscusConfig.repoId &&
-    giscusConfig.category &&
-    giscusConfig.categoryId
+    giscusConfig.repo
+    && giscusConfig.repoId
+    && giscusConfig.category
+    && giscusConfig.categoryId
   )
 })
 
@@ -110,6 +66,53 @@ watch(isDark, () => {
   })
 })
 </script>
+
+<template>
+  <div
+    v-if="show"
+    id="giscus-comment"
+    ref="commentEl"
+    class="comment"
+    data-pagefind-ignore="all"
+  >
+    <ElAffix
+      :class="{ hidden: commentIsVisible }"
+      class="comment-btn"
+      target="main"
+      position="bottom"
+      :offset="40"
+    >
+      <ElButton
+        plain
+        :icon="Comment"
+        type="primary"
+        @click="handleScrollToComment"
+      >
+        评论
+      </ElButton>
+    </ElAffix>
+    <!-- eslint-disable-next-line vue/require-component-is -->
+    <component
+      is="script"
+      v-if="showComment"
+      src="https://giscus.app/client.js"
+      :data-repo="commentConfig.repo"
+      :data-repo-id="commentConfig.repoId"
+      :data-category="commentConfig.category"
+      :data-category-id="commentConfig.categoryId"
+      :data-mapping="commentConfig.mapping || 'pathname'"
+      data-reactions-enabled="1"
+      data-emit-metadata="0"
+      :data-input-position="commentConfig.inputPosition || 'top'"
+      :data-theme="isDark ? 'dark' : 'light'"
+      :data-lang="commentConfig.lang || 'zh-CN'"
+      crossorigin="anonymous"
+      :data-loading="commentConfig.loading || 'eager'"
+      async
+    />
+  </div>
+</template>
+
 <style scoped lang="scss">
 .comment {
   width: 100%;

package/src/components/BlogDocCover.vue

@@ -1,7 +1,3 @@
-<template>
-  <img class="blog-doc-cover" v-if="cover && !hiddenCover" :src="cover" />
-</template>
-
 <script lang="ts" setup>
 import { useData } from 'vitepress'
 import { computed } from 'vue'
@@ -15,6 +11,10 @@ const hiddenCover = computed(
 )
 </script>
 
+<template>
+  <img v-if="cover && !hiddenCover" class="blog-doc-cover" :src="cover">
+</template>
+
 <style lang="scss" scoped>
 img.blog-doc-cover.blog-doc-cover.blog-doc-cover {
   width: 100%;

package/src/components/BlogFooter.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useHomeFooterConfig } from '../composables/config/blog'
+import packageJSON from '../../package.json'
+import { copyrightSVG, icpSVG, themeSVG } from '../constants/svg'
+
+const footer = useHomeFooterConfig()
+const data = ref<{
+  name: string
+  link?: string
+  icon?: string | boolean
+}[]>([])
+onMounted(() => {
+  if (!footer) {
+    return
+  }
+  const { icpRecord, securityRecord, copyright, version } = footer
+  // version
+  if (version !== false) {
+    data.value.push({
+      name: `@sugarat/theme@${packageJSON.version}`,
+      link: 'https://www.npmjs.com/package/@sugarat/create-theme',
+      icon: themeSVG
+    })
+  }
+  // copyright
+  if (typeof copyright === 'string') {
+    data.value.push({
+      name: copyright,
+      icon: copyrightSVG
+    })
+  }
+  if (copyright instanceof Object) {
+    data.value.push({
+      icon: copyrightSVG,
+      name: copyright.message,
+      ...copyright
+    })
+  }
+  // 备案信息
+  if (icpRecord) {
+    data.value.push({
+      icon: icpSVG,
+      ...icpRecord
+    })
+  }
+  // 网备信息
+  if (securityRecord) {
+    data.value.push({
+      icon: 'security',
+      ...securityRecord
+    })
+  }
+})
+</script>
+
+<template>
+  <footer v-if="footer" class="blog-footer">
+    <p v-if="footer?.message" v-html="footer?.message" />
+    <p class="footer-item-list">
+      <span v-for="(item, index) in data" :key="index" class="footer-item">
+        <i v-if="item.icon === 'security'">
+          <img src="./../styles/gongan.png" alt="公网安备">
+        </i>
+        <i v-else-if="item.icon" v-html="item.icon" />
+        <a v-if="item.link" :href="item.link" target="_blank" rel="noopener noreferrer">
+          {{ item.name }}
+        </a>
+        <span v-else>{{ item.name }}</span>
+      </span>
+    </p>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+footer.blog-footer {
+  text-align: center;
+  position: relative;
+  border-top: 1px solid var(--vp-c-gutter);
+  padding: 20px 12px;
+  background-color: var(--vp-c-bg);
+
+  p {
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--vp-c-text-2);
+  }
+}
+
+.footer-item-list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 719px) {
+  .footer-item-list {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.footer-item {
+  display: flex;
+  align-items: center;
+  margin: 0 8px;
+
+  i {
+    margin-right: 4px;
+  }
+
+  i :deep(svg) {
+    fill: var(--vp-c-text-2);
+    width: 16px;
+    height: 16px;
+  }
+
+  i :deep(img) {
+    width: 16px;
+    height: 16px;
+  }
+
+  a:hover {
+    color: var(--vp-c-brand-1);
+    text-decoration: underline;
+    text-decoration-color: var(--vp-c-brand-1);
+    text-decoration-style: dashed;
+  }
+}
+</style>

package/src/components/BlogFriendLink.vue

@@ -1,33 +1,3 @@
-<template>
-  <div class="card friend-wrapper" v-if="friendList?.length">
-    <!-- 头部 -->
-    <div class="card-header">
-      <span class="title svg-icon"><svg width="512" height="512" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-          <path fill="#EF9645"
-            d="M16.428 30.331a2.31 2.31 0 0 0 3.217-.568a.798.798 0 0 0-.197-1.114l-1.85-1.949l4.222 2.955a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089l-3.596-3.305l5.375 3.763a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089l-4.766-4.073l5.864 4.105a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089L4.733 11.194l-3.467 5.521c-.389.6-.283 1.413.276 1.891l7.786 6.671c.355.304.724.591 1.107.859l5.993 4.195z" />
-          <path fill="#FFDC5D"
-            d="M29.802 21.752L18.5 13.601l-.059-.08l.053-.08l.053-.053l.854.469c.958.62 3.147 1.536 4.806 1.536c1.135 0 1.815-.425 2.018-1.257a1.409 1.409 0 0 0-1.152-1.622a6.788 6.788 0 0 1-2.801-1.091l-.555-.373c-.624-.421-1.331-.898-1.853-1.206c-.65-.394-1.357-.585-2.163-.585c-1.196 0-2.411.422-3.585.83l-1.266.436a5.18 5.18 0 0 1-1.696.271c-1.544 0-3.055-.586-4.516-1.152l-.147-.058a1.389 1.389 0 0 0-1.674.56L1.35 15.669a1.357 1.357 0 0 0 .257 1.761l7.785 6.672c.352.301.722.588 1.1.852l6.165 4.316a2 2 0 0 0 2.786-.491a.803.803 0 0 0-.196-1.115l-1.833-1.283a.424.424 0 0 1-.082-.618a.422.422 0 0 1 .567-.075l3.979 2.785a1.4 1.4 0 0 0 1.606-2.294l-3.724-2.606a.424.424 0 0 1-.082-.618a.423.423 0 0 1 .567-.075l5.132 3.593a1.4 1.4 0 0 0 1.606-2.294l-4.868-3.407a.42.42 0 0 1-.081-.618a.377.377 0 0 1 .506-.066l5.656 3.959a1.4 1.4 0 0 0 1.606-2.295z" />
-          <path fill="#EF9645"
-            d="M16.536 27.929c-.07.267-.207.498-.389.681l-1.004.996a1.494 1.494 0 0 1-1.437.396a1.5 1.5 0 0 1-.683-2.512l1.004-.996a1.494 1.494 0 0 1 1.437-.396a1.502 1.502 0 0 1 1.072 1.831zM5.992 23.008l1.503-1.497a1.5 1.5 0 0 0-.444-2.429a1.495 1.495 0 0 0-1.674.31l-1.503 1.497a1.5 1.5 0 0 0 .445 2.429a1.496 1.496 0 0 0 1.673-.31zm5.204.052a1.5 1.5 0 1 0-2.122-2.118L6.072 23.94a1.5 1.5 0 1 0 2.122 2.118l3.002-2.998zm2.25 3a1.5 1.5 0 0 0-.945-2.555a1.489 1.489 0 0 0-1.173.44L9.323 25.94a1.5 1.5 0 0 0 .945 2.556c.455.036.874-.141 1.173-.44l2.005-1.996zm16.555-4.137l.627-.542l-6.913-10.85l-12.27 1.985a1.507 1.507 0 0 0-1.235 1.737c.658 2.695 6.003.693 8.355-.601l11.436 8.271z" />
-          <path fill="#FFCC4D"
-            d="M16.536 26.929c-.07.267-.207.498-.389.681l-1.004.996a1.494 1.494 0 0 1-1.437.396a1.5 1.5 0 0 1-.683-2.512l1.004-.996a1.494 1.494 0 0 1 1.437-.396a1.502 1.502 0 0 1 1.072 1.831zM5.992 22.008l1.503-1.497a1.5 1.5 0 0 0-.444-2.429a1.497 1.497 0 0 0-1.674.31l-1.503 1.497a1.5 1.5 0 0 0 .445 2.429a1.496 1.496 0 0 0 1.673-.31zm5.204.052a1.5 1.5 0 1 0-2.122-2.118L6.072 22.94a1.5 1.5 0 1 0 2.122 2.118l3.002-2.998zm2.25 3a1.5 1.5 0 0 0-.945-2.555a1.489 1.489 0 0 0-1.173.44L9.323 24.94a1.5 1.5 0 0 0 .945 2.556c.455.036.874-.141 1.173-.44l2.005-1.996zm21.557-7.456a1.45 1.45 0 0 0 .269-1.885l-.003-.005l-3.467-6.521a1.488 1.488 0 0 0-1.794-.6c-1.992.771-4.174 1.657-6.292.937l-1.098-.377c-1.948-.675-4.066-1.466-6-.294c-.695.409-1.738 1.133-2.411 1.58a6.873 6.873 0 0 1-2.762 1.076a1.502 1.502 0 0 0-1.235 1.737c.613 2.512 5.3.908 7.838-.369a.968.968 0 0 1 1.002.081l11.584 8.416l4.369-3.776z" />
-        </svg> 友情链接</span>
-    </div>
-    <!-- 文章列表 -->
-    <ol class="friend-list">
-      <li v-for="v in friendList" :key="v.nickname">
-        <a :href="v.url" target="_blank">
-          <el-avatar :size="50" :src="v.avatar" :alt="v.alt" />
-          <div>
-            <span class="nickname">{{ v.nickname }}</span>
-            <p class="des">{{ v.des }}</p>
-          </div>
-        </a>
-      </li>
-    </ol>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { ElAvatar } from 'element-plus'
 import { useDark } from '@vueuse/core'
@@ -58,6 +28,44 @@ const friendList = computed(() => {
 })
 </script>
 
+<template>
+  <div v-if="friendList?.length" class="card friend-wrapper">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title svg-icon"><svg width="512" height="512" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill="#EF9645"
+          d="M16.428 30.331a2.31 2.31 0 0 0 3.217-.568a.798.798 0 0 0-.197-1.114l-1.85-1.949l4.222 2.955a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089l-3.596-3.305l5.375 3.763a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089l-4.766-4.073l5.864 4.105a1.497 1.497 0 0 0 2.089-.369a1.5 1.5 0 0 0-.369-2.089L4.733 11.194l-3.467 5.521c-.389.6-.283 1.413.276 1.891l7.786 6.671c.355.304.724.591 1.107.859l5.993 4.195z"
+        />
+        <path
+          fill="#FFDC5D"
+          d="M29.802 21.752L18.5 13.601l-.059-.08l.053-.08l.053-.053l.854.469c.958.62 3.147 1.536 4.806 1.536c1.135 0 1.815-.425 2.018-1.257a1.409 1.409 0 0 0-1.152-1.622a6.788 6.788 0 0 1-2.801-1.091l-.555-.373c-.624-.421-1.331-.898-1.853-1.206c-.65-.394-1.357-.585-2.163-.585c-1.196 0-2.411.422-3.585.83l-1.266.436a5.18 5.18 0 0 1-1.696.271c-1.544 0-3.055-.586-4.516-1.152l-.147-.058a1.389 1.389 0 0 0-1.674.56L1.35 15.669a1.357 1.357 0 0 0 .257 1.761l7.785 6.672c.352.301.722.588 1.1.852l6.165 4.316a2 2 0 0 0 2.786-.491a.803.803 0 0 0-.196-1.115l-1.833-1.283a.424.424 0 0 1-.082-.618a.422.422 0 0 1 .567-.075l3.979 2.785a1.4 1.4 0 0 0 1.606-2.294l-3.724-2.606a.424.424 0 0 1-.082-.618a.423.423 0 0 1 .567-.075l5.132 3.593a1.4 1.4 0 0 0 1.606-2.294l-4.868-3.407a.42.42 0 0 1-.081-.618a.377.377 0 0 1 .506-.066l5.656 3.959a1.4 1.4 0 0 0 1.606-2.295z"
+        />
+        <path
+          fill="#EF9645"
+          d="M16.536 27.929c-.07.267-.207.498-.389.681l-1.004.996a1.494 1.494 0 0 1-1.437.396a1.5 1.5 0 0 1-.683-2.512l1.004-.996a1.494 1.494 0 0 1 1.437-.396a1.502 1.502 0 0 1 1.072 1.831zM5.992 23.008l1.503-1.497a1.5 1.5 0 0 0-.444-2.429a1.495 1.495 0 0 0-1.674.31l-1.503 1.497a1.5 1.5 0 0 0 .445 2.429a1.496 1.496 0 0 0 1.673-.31zm5.204.052a1.5 1.5 0 1 0-2.122-2.118L6.072 23.94a1.5 1.5 0 1 0 2.122 2.118l3.002-2.998zm2.25 3a1.5 1.5 0 0 0-.945-2.555a1.489 1.489 0 0 0-1.173.44L9.323 25.94a1.5 1.5 0 0 0 .945 2.556c.455.036.874-.141 1.173-.44l2.005-1.996zm16.555-4.137l.627-.542l-6.913-10.85l-12.27 1.985a1.507 1.507 0 0 0-1.235 1.737c.658 2.695 6.003.693 8.355-.601l11.436 8.271z"
+        />
+        <path
+          fill="#FFCC4D"
+          d="M16.536 26.929c-.07.267-.207.498-.389.681l-1.004.996a1.494 1.494 0 0 1-1.437.396a1.5 1.5 0 0 1-.683-2.512l1.004-.996a1.494 1.494 0 0 1 1.437-.396a1.502 1.502 0 0 1 1.072 1.831zM5.992 22.008l1.503-1.497a1.5 1.5 0 0 0-.444-2.429a1.497 1.497 0 0 0-1.674.31l-1.503 1.497a1.5 1.5 0 0 0 .445 2.429a1.496 1.496 0 0 0 1.673-.31zm5.204.052a1.5 1.5 0 1 0-2.122-2.118L6.072 22.94a1.5 1.5 0 1 0 2.122 2.118l3.002-2.998zm2.25 3a1.5 1.5 0 0 0-.945-2.555a1.489 1.489 0 0 0-1.173.44L9.323 24.94a1.5 1.5 0 0 0 .945 2.556c.455.036.874-.141 1.173-.44l2.005-1.996zm21.557-7.456a1.45 1.45 0 0 0 .269-1.885l-.003-.005l-3.467-6.521a1.488 1.488 0 0 0-1.794-.6c-1.992.771-4.174 1.657-6.292.937l-1.098-.377c-1.948-.675-4.066-1.466-6-.294c-.695.409-1.738 1.133-2.411 1.58a6.873 6.873 0 0 1-2.762 1.076a1.502 1.502 0 0 0-1.235 1.737c.613 2.512 5.3.908 7.838-.369a.968.968 0 0 1 1.002.081l11.584 8.416l4.369-3.776z"
+        />
+      </svg> 友情链接</span>
+    </div>
+    <!-- 文章列表 -->
+    <ol class="friend-list">
+      <li v-for="v in friendList" :key="v.nickname">
+        <a :href="v.url" target="_blank">
+          <ElAvatar :size="50" :src="v.avatar" :alt="v.alt" />
+          <div>
+            <span class="nickname">{{ v.nickname }}</span>
+            <p class="des">{{ v.des }}</p>
+          </div>
+        </a>
+      </li>
+    </ol>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card {
   position: relative;
@@ -128,4 +136,5 @@ const friendList = computed(() => {
       font-size: 14px;
     }
   }
-}</style>
+}
+</style>

package/src/components/BlogHomeBanner.vue

@@ -1,14 +1,3 @@
-<template>
-  <div>
-    <h1>
-      <span class="name">{{ name }}</span>
-      <span class="motto" v-show="motto">{{ motto }}</span>
-    </h1>
-    <div class="inspiring-wrapper">
-      <h2 @click="changeSlogan" v-show="!!inspiring">{{ inspiring }}</h2>
-    </div>
-  </div>
-</template>
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useData } from 'vitepress'
@@ -28,7 +17,7 @@ const inspiringList = computed<string[]>(() => {
     ...new Set(
       [frontmatter.value.blog?.inspiring, home?.inspiring]
         .flat()
-        .filter((v) => !!v)
+        .filter(v => !!v)
     )
   ]
 })
@@ -41,7 +30,7 @@ watch(inspiringTimeout, () => {
   startTimer()
 })
 const timer = ref<any>(0)
-const startTimer = () => {
+function startTimer() {
   if (timer.value) {
     clearTimeout(timer.value)
   }
@@ -61,15 +50,17 @@ onUnmounted(() => {
   }
 })
 
-const changeSlogan = async () => {
+async function changeSlogan() {
   // 顺手启动定时器
   startTimer()
 
-  if (inspiringList.value.length < 1) return
+  if (inspiringList.value.length < 1)
+    return
 
   inspiringIndex.value = (inspiringIndex.value + 1) % inspiringList.value.length
   const newValue = inspiringList.value[inspiringIndex.value]
-  if (newValue === inspiring.value) return
+  if (newValue === inspiring.value)
+    return
 
   // 重新渲染数据，同时触发动画
   inspiring.value = ''
@@ -78,6 +69,21 @@ const changeSlogan = async () => {
   }, 100)
 }
 </script>
+
+<template>
+  <div>
+    <h1>
+      <span class="name">{{ name }}</span>
+      <span v-show="motto" class="motto">{{ motto }}</span>
+    </h1>
+    <div class="inspiring-wrapper">
+      <h2 v-show="!!inspiring" @click="changeSlogan">
+        {{ inspiring }}
+      </h2>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 h1 {
   text-align: center;

package/src/components/BlogHomeInfo.vue

@@ -3,10 +3,14 @@ import BlogHomeOverview from './BlogHomeOverview.vue'
 import BlogHotArticle from './BlogHotArticle.vue'
 import BlogHomeTags from './BlogHomeTags.vue'
 import BlogFriendLink from './BlogFriendLink.vue'
+import BlogAuthor from './BlogAuthor.vue'
 </script>
 
 <template>
   <div class="blog-info" data-pagefind-ignore="all">
+    <!-- 头像信息 -->
+    <BlogAuthor />
+
     <!-- 统计数据，日后支持，点击筛选出左侧的数据 -->
     <BlogHomeOverview />