@sugarat/theme 0.1.47 → 0.1.49

package/node.d.ts

@@ -299,6 +299,7 @@ declare namespace Theme {
          * @description (0 不限制；> 1 会按照日期排序对输出内容进行调整)
          */
         limit?: number;
+        ariaLabel?: string;
     };
     interface Config extends DefaultTheme.Config {
         blog?: BlogConfig;

package/node.js

@@ -433,15 +433,17 @@ function getArticles(cfg) {
   }).filter((v) => v.meta.layout !== "home");
   return data;
 }
+var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><title>RSS</title><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z" fill="currentColor"></path></svg>';
 function patchVPThemeConfig(cfg, vpThemeConfig = {}) {
   const RSS = cfg?.RSS;
   if (RSS && RSS.icon !== false) {
     vpThemeConfig.socialLinks = [
       {
         icon: {
-          svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z" fill="currentColor"></path></svg>'
+          svg: svgIcon
         },
-        link: RSS?.url
+        link: RSS?.url,
+        ariaLabel: RSS?.ariaLabel || "RSS"
       }
     ];
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {

package/src/components/BlogFriendLink.vue

@@ -2,7 +2,16 @@
   <div class="card friend-wrapper" v-if="friendList?.length">
     <!-- 头部 -->
     <div class="card-header">
-      <span class="title">🤝 友情链接</span>
+      <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">
@@ -76,6 +85,8 @@ const friendList = computed(() => {
 
   .title {
     font-size: 12px;
+    display: flex;
+    align-items: center;
   }
 }
 
@@ -94,15 +105,19 @@ const friendList = computed(() => {
   li {
     padding: 6px;
     margin-top: 10px;
+
     .el-avatar {
       min-width: 50px;
     }
+
     a {
       display: flex;
     }
+
     div {
       padding-left: 10px;
     }
+
     .nickname {
       font-size: 16px;
       font-weight: 450;
@@ -113,5 +128,4 @@ const friendList = computed(() => {
       font-size: 14px;
     }
   }
-}
-</style>
+}</style>

package/src/components/BlogHomeOverview.vue

@@ -24,7 +24,7 @@ import { useArticles } from '../composables/config/blog'
 
 const docs = useArticles()
 const notHiddenArticles = computed(() => {
-  return docs.value.filter((v) => !v.meta.hidden)
+  return docs.value.filter((v) => v.meta?.publish !== false)
 })
 const nowMonth = new Date().getMonth()
 const nowYear = new Date().getFullYear()

package/src/components/BlogHomeTags.vue

@@ -2,25 +2,30 @@
   <div class="card tags" v-if="tags.length" data-pagefind-ignore="all">
     <!-- 头部 -->
     <div class="card-header">
-      <span class="title">🏷 标签</span>
-      <el-tag
-        v-if="activeTag.label"
-        :type="(activeTag.type as any)"
-        :effect="colorMode"
-        closable
-        @close="handleCloseTag"
-      >
+      <span class="title svg-icon"><svg t="1695048840129" class="icon" viewBox="0 0 1024 1024" version="1.1"
+          xmlns="http://www.w3.org/2000/svg" p-id="4290" width="200" height="200">
+          <path
+            d="M810.88 245.888a118.432 118.432 0 1 0 0 236.864 118.432 118.432 0 0 0 0-236.864z m-151.008 118.432a151.008 151.008 0 1 1 302.016 0 151.008 151.008 0 0 1-302.016 0z"
+            fill="#D3D3D3" p-id="4291"></path>
+          <path
+            d="M774.08 565.6l61.76-160.64c6.4-16.64 2.56-35.84-10.24-48.64l-151.04-151.04c-12.8-12.8-31.68-16.64-48.64-10.24l-160.64 61.76c-12.16 4.8-23.36 11.84-32.64 21.12l-355.2 355.2c-17.92 17.92-17.92 46.72 0 64.32l256 256c17.92 17.92 46.72 17.92 64.32 0l355.2-355.2c9.28-9.28 16.32-20.16 21.12-32.64z m-159.36-149.12c-22.08-22.08-22.08-57.6 0-79.68 22.08-22.08 57.6-22.08 79.68 0 22.08 22.08 22.08 57.6 0 79.68-22.08 21.76-57.92 21.76-79.68 0z"
+            fill="#FCD53F" p-id="4292"></path>
+          <path
+            d="M654.4 320.48c14.4 0 28.8 5.44 39.68 16.64 22.08 22.08 22.08 57.6 0 79.68-10.88 10.88-25.28 16.64-39.68 16.64-14.4 0-28.8-5.44-39.68-16.64-22.08-22.08-22.08-57.6 0-79.68 10.88-11.2 25.28-16.64 39.68-16.64z m0-30.08c-23.04 0-44.8 8.96-61.12 25.28a86.72 86.72 0 0 0 0 122.24c16.32 16.32 38.08 25.28 61.12 25.28s44.8-8.96 61.12-25.28a86.72 86.72 0 0 0 0-122.24c-16.32-16.32-38.08-25.28-61.12-25.28z"
+            fill="#F8312F" p-id="4293"></path>
+          <path
+            d="M676.16 348.032c8.992 0 16.288 7.296 16.288 16.288a118.144 118.144 0 0 0 64.288 105.44h0.064c22.24 11.296 47.36 15.264 71.68 11.84a16.288 16.288 0 0 1 4.48 32.32 154.24 154.24 0 0 1-90.848-15.04 150.72 150.72 0 0 1-82.24-134.56c0-8.992 7.296-16.288 16.288-16.288z"
+            fill="#D3D3D3" p-id="4294"></path>
+        </svg> 标签</span>
+      <el-tag v-if="activeTag.label" :type="(activeTag.type as any)" :effect="colorMode" closable @close="handleCloseTag">
         {{ activeTag.label }}
       </el-tag>
     </div>
     <!-- 标签列表 -->
     <ul class="tag-list">
       <li v-for="(tag, idx) in tags" :key="tag">
-        <el-tag
-          :type="tagType[idx % tagType.length]"
-          @click="handleTagClick(tag, tagType[idx % tagType.length])"
-          :effect="colorMode"
-        >
+        <el-tag :type="tagType[idx % tagType.length]" @click="handleTagClick(tag, tagType[idx % tagType.length])"
+          :effect="colorMode">
           {{ tag }}
         </el-tag>
       </li>
@@ -112,6 +117,7 @@ watch(
     box-shadow: var(--box-shadow-hover);
   }
 }
+
 .card-header {
   display: flex;
   width: 100%;
@@ -120,6 +126,8 @@ watch(
 
   .title {
     font-size: 12px;
+    display: flex;
+    align-items: center;
   }
 }
 
@@ -131,10 +139,10 @@ watch(
   display: flex;
   flex-wrap: wrap;
   margin-top: 10px;
+
   li {
     margin-right: 10px;
     margin-bottom: 10px;
     cursor: pointer;
   }
-}
-</style>
+}</style>

package/src/components/BlogHotArticle.vue

@@ -1,20 +1,9 @@
 <template>
-  <div
-    class="card recommend"
-    v-if="recommendList.length || empty"
-    data-pagefind-ignore="all"
-  >
+  <div class="card recommend" v-if="recommendList.length || empty" data-pagefind-ignore="all">
     <!-- 头部 -->
     <div class="card-header">
-      <span class="title">{{ title }}</span>
-      <el-button
-        v-if="showChangeBtn"
-        size="small"
-        type="primary"
-        text
-        @click="changePage"
-        >{{ nextText }}</el-button
-      >
+      <span class="title" v-html="title"></span>
+      <el-button v-if="showChangeBtn" size="small" type="primary" text @click="changePage">{{ nextText }}</el-button>
     </div>
     <!-- 文章列表 -->
     <ol class="recommend-container" v-if="currentWikiData.length">
@@ -45,9 +34,9 @@ import { ElButton, ElLink } from 'element-plus'
 import { withBase } from 'vitepress'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
 import { formatShowDate } from '../utils/client'
-
+import { fireSVG } from '../constants/svg'
 const { hotArticle } = useBlogConfig()
-const title = computed(() => hotArticle?.title || '🔥 精选文章')
+const title = computed(() => hotArticle?.title || (`<span class="svg-icon">${fireSVG}</span>` + ' 精选文章'))
 const nextText = computed(() => hotArticle?.nextText || '换一组')
 const pageSize = computed(() => hotArticle?.pageSize || 9)
 const empty = computed(() => hotArticle?.empty ?? '暂无精选内容')
@@ -105,6 +94,8 @@ const showChangeBtn = computed(() => {
 
   .title {
     font-size: 12px;
+    display: flex;
+    align-items: center;
   }
 }
 
@@ -179,4 +170,4 @@ const showChangeBtn = computed(() => {
   font-size: 14px;
   text-align: center;
 }
-</style>
+</style>

package/src/components/BlogImagePreview.vue

@@ -25,6 +25,11 @@ const previewImage = (e: Event) => {
     previewImageInfo.list = urls
     previewImageInfo.idx = idx
 
+    // 兼容点击main之外的图片
+    if (idx === -1 && url) {
+      previewImageInfo.list.push(url)
+      previewImageInfo.idx = previewImageInfo.list.length - 1
+    }
     show.value = true
   }
 }
@@ -40,13 +45,6 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ElImageViewer
-    :infinite="false"
-    hide-on-click-modal
-    teleported
-    @close="show = false"
-    :url-list="previewImageInfo.list"
-    :initial-index="previewImageInfo.idx"
-    v-if="show"
-  />
+  <ElImageViewer :infinite="false" hide-on-click-modal teleported @close="show = false" :url-list="previewImageInfo.list"
+    :initial-index="previewImageInfo.idx" v-if="show" />
 </template>

package/src/components/BlogPopover.vue

@@ -136,7 +136,7 @@ const PopoverValue = (
   position: fixed;
   top: 80px;
   right: 20px;
-  z-index: 19;
+  z-index: 22;
   box-sizing: border-box;
   border: 1px solid var(--vp-c-brand-3);
   border-radius: 6px;
@@ -207,7 +207,7 @@ const PopoverValue = (
   cursor: pointer;
   opacity: 0.5;
   position: fixed;
-  z-index: 19;
+  z-index: 22;
   top: 80px;
   right: 10px;
   position: fixed;

package/src/components/BlogRecommendArticle.vue

@@ -1,21 +1,10 @@
 <template>
-  <div
-    class="recommend"
-    :class="{ card: sidebarStyle === 'card' }"
-    v-if="_recommend !== false && (recommendList.length || emptyText)"
-    data-pagefind-ignore="all"
-  >
+  <div class="recommend" :class="{ card: sidebarStyle === 'card' }"
+    v-if="_recommend !== false && (recommendList.length || emptyText)" data-pagefind-ignore="all">
     <!-- 头部 -->
     <div class="card-header">
-      <span class="title" v-if="title">{{ title }}</span>
-      <el-button
-        v-if="showChangeBtn"
-        size="small"
-        type="primary"
-        text
-        @click="changePage"
-        >{{ nextText }}</el-button
-      >
+      <span class="title" v-if="title" v-html="title"></span>
+      <el-button v-if="showChangeBtn" size="small" type="primary" text @click="changePage">{{ nextText }}</el-button>
     </div>
     <!-- 文章列表 -->
     <ol class="recommend-container" v-if="currentWikiData.length">
@@ -25,15 +14,9 @@
         <!-- 简介 -->
         <div class="des">
           <!-- title -->
-          <el-link
-            type="info"
-            class="title"
-            :class="{
-              current: isCurrentDoc(v.route)
-            }"
-            :href="v.route"
-            >{{ v.meta.title }}</el-link
-          >
+          <el-link type="info" class="title" :class="{
+            current: isCurrentDoc(v.route)
+          }" :href="v.route">{{ v.meta.title }}</el-link>
           <!-- 描述信息 -->
           <div class="suffix">
             <!-- 日期 -->
@@ -52,6 +35,7 @@ import { useRoute, withBase } from 'vitepress'
 import { ElButton, ElLink } from 'element-plus'
 import { formatShowDate } from '../utils/client'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
+import { recommendSVG } from '../constants/svg'
 
 const { recommend: _recommend } = useBlogConfig()
 
@@ -65,7 +49,7 @@ const recommendPadding = computed(() =>
 const recommend = computed(() =>
   _recommend === false ? undefined : _recommend
 )
-const title = computed(() => recommend.value?.title ?? '🔍 相关文章')
+const title = computed(() => recommend.value?.title ?? (`<span class="svg-icon">${recommendSVG}</span>` + '相关文章'))
 const pageSize = computed(() => recommend.value?.pageSize || 9)
 const nextText = computed(() => recommend.value?.nextText || '换一组')
 const emptyText = computed(() => recommend.value?.empty ?? '暂无相关文章')
@@ -190,6 +174,7 @@ const showChangeBtn = computed(() => {
       color: var(--vp-c-text-1);
       word-break: break-all;
       white-space: break-spaces;
+
       &.current {
         color: var(--vp-c-brand-1);
       }
@@ -208,10 +193,14 @@ const showChangeBtn = computed(() => {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
+
   .title {
-    font-size: 16px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
   }
 }
+
 .empty-text {
   padding: 6px;
   font-size: 14px;

package/src/composables/config/index.ts

@@ -328,6 +328,7 @@ export namespace Theme {
      * @description (0 不限制；> 1 会按照日期排序对输出内容进行调整)
      */
     limit?: number
+    ariaLabel?: string
   }
   export interface Config extends DefaultTheme.Config {
     blog?: BlogConfig

package/src/constants/svg.ts

@@ -0,0 +1,45 @@
+export const fireSVG = `<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+<radialGradient id="notoFire0" cx="68.884" cy="124.296" r="70.587" gradientTransform="matrix(-1 -.00434 -.00713 1.6408 131.986 -79.345)" gradientUnits="userSpaceOnUse">
+    <stop offset=".314" stop-color="#FF9800"/>
+    <stop offset=".662" stop-color="#FF6D00"/>
+    <stop offset=".972" stop-color="#F44336"/>
+</radialGradient>
+<path fill="url(#notoFire0)" d="M35.56 40.73c-.57 6.08-.97 16.84 2.62 21.42c0 0-1.69-11.82 13.46-26.65c6.1-5.97 7.51-14.09 5.38-20.18c-1.21-3.45-3.42-6.3-5.34-8.29c-1.12-1.17-.26-3.1 1.37-3.03c9.86.44 25.84 3.18 32.63 20.22c2.98 7.48 3.2 15.21 1.78 23.07c-.9 5.02-4.1 16.18 3.2 17.55c5.21.98 7.73-3.16 8.86-6.14c.47-1.24 2.1-1.55 2.98-.56c8.8 10.01 9.55 21.8 7.73 31.95c-3.52 19.62-23.39 33.9-43.13 33.9c-24.66 0-44.29-14.11-49.38-39.65c-2.05-10.31-1.01-30.71 14.89-45.11c1.18-1.08 3.11-.12 2.95 1.5z"/>
+<radialGradient id="notoFire1" cx="64.921" cy="54.062" r="73.86" gradientTransform="matrix(-.0101 .9999 .7525 .0076 26.154 -11.267)" gradientUnits="userSpaceOnUse">
+    <stop offset=".214" stop-color="#FFF176"/>
+    <stop offset=".328" stop-color="#FFF27D"/>
+    <stop offset=".487" stop-color="#FFF48F"/>
+    <stop offset=".672" stop-color="#FFF7AD"/>
+    <stop offset=".793" stop-color="#FFF9C4"/>
+    <stop offset=".822" stop-color="#FFF8BD" stop-opacity=".804"/>
+    <stop offset=".863" stop-color="#FFF6AB" stop-opacity=".529"/>
+    <stop offset=".91" stop-color="#FFF38D" stop-opacity=".209"/>
+    <stop offset=".941" stop-color="#FFF176" stop-opacity="0"/>
+</radialGradient>
+<path fill="url(#notoFire1)" d="M76.11 77.42c-9.09-11.7-5.02-25.05-2.79-30.37c.3-.7-.5-1.36-1.13-.93c-3.91 2.66-11.92 8.92-15.65 17.73c-5.05 11.91-4.69 17.74-1.7 24.86c1.8 4.29-.29 5.2-1.34 5.36c-1.02.16-1.96-.52-2.71-1.23a16.09 16.09 0 0 1-4.44-7.6c-.16-.62-.97-.79-1.34-.28c-2.8 3.87-4.25 10.08-4.32 14.47C40.47 113 51.68 124 65.24 124c17.09 0 29.54-18.9 19.72-34.7c-2.85-4.6-5.53-7.61-8.85-11.88z"/>
+</svg>`
+
+export const recommendSVG =`<svg width="512" height="512" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+<radialGradient id="notoFaceWithMonocle0" cx="63.6" cy="-2088.9" r="56.96" gradientTransform="matrix(1 0 0 -1 0 -2026)" gradientUnits="userSpaceOnUse">
+    <stop offset=".5" stop-color="#FDE030"/>
+    <stop offset=".919" stop-color="#F7C02B"/>
+    <stop offset="1" stop-color="#F4A223"/>
+</radialGradient>
+<path fill="url(#notoFaceWithMonocle0)" d="M63.6 118.8c-27.9 0-58-17.5-58-55.9S35.7 7 63.6 7c15.5 0 29.8 5.1 40.4 14.4c11.5 10.2 17.6 24.6 17.6 41.5s-6.1 31.2-17.6 41.4c-10.6 9.3-25 14.5-40.4 14.5z"/>
+<path fill="#EB8F00" d="M111.49 29.67c5.33 8.6 8.11 18.84 8.11 30.23c0 16.9-6.1 31.2-17.6 41.4c-10.6 9.3-25 14.5-40.4 14.5c-18.06 0-37.04-7.35-48.18-22.94c10.76 17.66 30.99 25.94 50.18 25.94c15.4 0 29.8-5.2 40.4-14.5c11.5-10.2 17.6-24.5 17.6-41.4c0-12.74-3.47-24.06-10.11-33.23z"/>
+<path fill="#422B0D" d="M74.3 24.5c.9-.8 1.8-1.5 2.8-2.2s2.1-1.2 3.1-1.8c2.2-1 4.6-2 7.5-2.1c.7-.1 1.4.1 2.2.1c.7 0 1.5.3 2.2.5c.2.1.4.1.5.2l.5.3l1 .5c.6.4 1.2.9 1.8 1.4c1.1 1 1.8 2.3 2.4 3.5c.3.6.5 1.2.7 1.8c.2.6.3 1.2.4 1.6l.1.3c.2 1.2-.6 2.4-1.8 2.6c-1 .2-1.9-.3-2.4-1.1c-.3-.6-.6-1.1-.8-1.5c-.2-.4-.5-.8-.7-1.2c-.5-.7-1.1-1.3-1.7-1.8c-.1-.1-.3-.2-.5-.3c-.2-.1-.3-.2-.4-.3c-.2-.1-.3-.1-.5-.2l-.2-.1h-.3c-.7-.2-1.4-.3-2.2-.2c-1.6 0-3.5.6-5.4 1.3c-.9.4-1.9.8-2.8 1.2c-.9.5-1.9.9-2.9 1.3l-.2.1c-1.2.5-2.5-.1-2.9-1.2c-.5-1-.2-2.1.5-2.7zm-28.7 14c-.8.2-1.3.3-2 .3c-.6 0-1.3.1-1.9 0c-1.3 0-2.6-.2-3.8-.6c-2-.5-4-.8-5.7-.8c-.8 0-1.6.1-2.2.3s-1.1.5-1.6 1c-1 1-2 2.8-3 4.6c-.6 1.1-2 1.5-3.1.9c-.9-.5-1.3-1.5-1.2-2.4c.2-1.1.5-2.3.9-3.5c.5-1.2 1-2.4 2-3.6c1-1.2 2.3-2.2 3.8-2.7s2.9-.7 4.3-.7c2.7.1 5 .8 7.2 1.6c.9.3 1.8.6 2.7.8c.5.1.9.2 1.4.2c.4 0 1 .1 1.3.1h.4c1.2 0 2.2 1.1 2.1 2.3c.1 1.2-.6 2-1.6 2.2zM44 91.3c1.8-2 6.6-4.3 13.3-4.2c8.9.2 13.7 4.2 13.7 4.2c2.9 2.4 1.6 6.1-1.5 5.8c-5-.6-4.7-1.5-13.7-1.7c-6.5-.1-9.6.9-9.9.9c-1.8.1-2.5-.6-2.8-1.8c-.3-1 0-2.3.9-3.2zm38.3-47.5c4.4 0 8.4 3.7 8.4 9.9s-4 9.9-8.4 9.9s-8.4-3.7-8.4-9.9s4-9.9 8.4-9.9zm-45.1 1.7c-4.2 0-8 3.5-8 9.4s3.8 9.4 8 9.4s8-3.5 8-9.4s-3.8-9.4-8-9.4z"/>
+<path fill="#896024" d="M81.37 48.35c-1.03-.72-2.58-.49-3.58.95c-1 1.45-.67 2.97.36 3.69c1.03.72 2.58.49 3.58-.95c1.01-1.45.67-2.98-.36-3.69z"/>
+<path fill="#404040" d="M106.5 49.9h-5.6v9h5.6c2.7 0 5.4-1.7 5.4-4.3v-.4c0-2.7-2.7-4.3-5.4-4.3zm-.5 7.7c-1.9 0-3.4-1.5-3.4-3.3s1.5-3.3 3.4-3.3s3.4 1.5 3.4 3.3s-1.5 3.3-3.4 3.3zm.1 13.2c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .2-.2.5-.5.5zm0 7.6c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5V81c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5zm0 7.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .3-.2.5-.5.5z"/>
+<path fill="#404040" d="M106.1 62.7c-.3 0-.6-.2-.6-.5v-4.6c0-.3.2-.5.5-.5h.1c.3 0 .5.2.5.5v4.6c0 .2-.2.5-.5.5z"/>
+<circle cx="106.1" cy="64.1" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
+<circle cx="106.1" cy="71.8" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
+<circle cx="106.1" cy="79.4" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
+<circle cx="106.1" cy="87.1" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
+<circle cx="106.1" cy="94.7" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
+<circle cx="106.1" cy="102.4" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
+<circle cx="106.1" cy="110" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
+<circle cx="106.1" cy="117.7" r="2.6" fill="none" stroke="#404040" stroke-miterlimit="10"/>
+<circle cx="79.6" cy="53.7" r="20.6" fill="#CCC" fill-opacity=".5" stroke="#404040" stroke-miterlimit="10" stroke-width="3.5"/>
+<path fill="#FFF" d="M94.8 52.5c-.4-3.8-2.1-7.3-4.9-9.7s-6.4-3.7-10-3.7c-3.7 0-7.3 1.2-10.1 3.5s-4.6 5.8-4.9 9.6c0 .3-.3.5-.5.4c-.2 0-.4-.2-.4-.5c-.1-2 .3-4.1 1.1-6c.8-1.9 2-3.6 3.5-5.1c3-2.9 7.3-4.3 11.4-4.3c4.2 0 8.3 1.6 11.3 4.5c1.5 1.5 2.7 3.2 3.5 5.1c.8 1.9 1.1 4 1 6c0 .3-.2.5-.5.5c-.3.1-.5-.1-.5-.3z"/>
+<path fill="#896024" d="M37.01 49.35c-1.03-.72-2.58-.49-3.58.95s-.67 2.97.36 3.69c1.03.72 2.58.49 3.58-.95c1.01-1.45.68-2.98-.36-3.69z"/>
+</svg>`

package/src/styles/index.scss

@@ -132,4 +132,14 @@ main .vp-doc a{
 }
 main .vp-doc a:hover{
   text-decoration: underline dotted;
+}
+
+
+// 自定义全局样式
+span.svg-icon{
+  svg{
+    width: 14px;
+    height: 14px;
+    margin-right: 4px;
+  }
 }

package/src/utils/node/theme.ts

@@ -123,6 +123,8 @@ export function patchVPConfig(vpConfig: any, cfg?: Partial<Theme.BlogConfig>) {
   // TODO: 待确定场景
 }
 
+const svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><title>RSS</title><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z" fill="currentColor"></path></svg>'
+
 export function patchVPThemeConfig(
   cfg?: Partial<Theme.BlogConfig>,
   vpThemeConfig: any = {}
@@ -133,9 +135,10 @@ export function patchVPThemeConfig(
     vpThemeConfig.socialLinks = [
       {
         icon: {
-          svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z" fill="currentColor"></path></svg>'
+          svg: svgIcon
         },
-        link: RSS?.url
+        link: RSS?.url,
+        ariaLabel: RSS?.ariaLabel || 'RSS'
       }
     ]
   }