@sugarat/theme 0.5.13 → 0.5.15

package/node.d.ts

@@ -4,6 +4,7 @@ import { Repo, Mapping } from '@giscus/vue';
 import { Options } from 'oh-my-live2d';
 import { PagefindConfig } from 'vitepress-plugin-pagefind';
 import { AnnouncementOptions } from 'vitepress-plugin-announcement';
+import { ImagePreviewOptions } from 'vitepress-plugin-image-preview';
 
 type RSSPluginOptions = RSSOptions;
 type ThemeableImage = string | {
@@ -392,6 +393,10 @@ declare namespace Theme {
          */
         alert?: Alert;
         popover?: AnnouncementOptions;
+        /**
+         * 图片预览插件配置
+         */
+        imagePreview?: ImagePreviewOptions;
         friend?: FriendLink[] | FriendConfig;
         authorList?: Omit<FriendLink, 'avatar'>[];
         /**
@@ -617,6 +622,11 @@ declare namespace Theme {
          * @default '🏷 标签'
          */
         title?: string;
+        /**
+         * 首页标签默认展示数量，超出部分折叠
+         * @default 999
+         */
+        limit?: number;
     }
 }
 

package/node.js

@@ -40,7 +40,7 @@ module.exports = __toCommonJS(node_exports);
 // src/utils/node/mdPlugins.ts
 var import_module = require("module");
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.7.3_vitepress@2.0.0-alpha.15_@types+node@24.5.2_async-validator_f00dcfd3cc5e72074cf41a606f1d799c/node_modules/vitepress-plugin-tabs/dist/node/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.7.3_vitepress@2.0.0-alpha.16_@types+node@24.5.2_async-validator@4.2.5_wszfouv2xxx6bizfwwcmbwut3e/node_modules/vitepress-plugin-tabs/dist/node/index.js
 function container_plugin(md, name, options) {
   function validateDefault(params) {
     return params.trim().split(" ", 2)[0] === name;
@@ -422,7 +422,8 @@ async function getArticleMeta(filepath, route, timeZone = defaultTimeZoneOffset,
   meta.tag = [meta.tag || []].flat().concat([
     .../* @__PURE__ */ new Set([...meta.categories || [], ...meta.tags || []])
   ]);
-  meta.description = meta.description || (0, import_theme_shared2.getTextSummary)(content, 100) || excerpt;
+  const contentWithoutHeadings = content.replace(/^#+\s+.*$/gm, "");
+  meta.description = meta.description || (0, import_theme_shared2.getTextSummary)(contentWithoutHeadings, 100) || excerpt;
   meta.cover = meta.cover ?? getFirstImagURLFromMD(fileContent, route);
   if (meta.publish === false) {
     meta.hidden = true;
@@ -487,6 +488,7 @@ var import_vitepress_plugin_rss = require("vitepress-plugin-rss");
 var import_theme_shared4 = require("@sugarat/theme-shared");
 var import_vitepress_plugin_announcement = require("vitepress-plugin-announcement");
 var import_vitepress_plugin_group_icons2 = require("vitepress-plugin-group-icons");
+var import_vitepress_plugin_image_preview = require("vitepress-plugin-image-preview");
 
 // src/utils/node/hot-reload-plugin.ts
 var import_fs = __toESM(require("fs"));
@@ -569,6 +571,7 @@ function themeReloadPlugin() {
 function getVitePlugins(cfg = {}) {
   const plugins = [];
   plugins.push(cacheAllGitTimestampsPlugin());
+  plugins.push((0, import_vitepress_plugin_image_preview.ImagePreviewPlugin)(cfg?.imagePreview));
   if (cfg.themeColor) {
     plugins.push(setThemeScript(cfg.themeColor));
   }

package/node.mjs

@@ -9,7 +9,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/utils/node/mdPlugins.ts
 import { createRequire } from "module";
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.7.3_vitepress@2.0.0-alpha.15_@types+node@24.5.2_async-validator_f00dcfd3cc5e72074cf41a606f1d799c/node_modules/vitepress-plugin-tabs/dist/node/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.7.3_vitepress@2.0.0-alpha.16_@types+node@24.5.2_async-validator@4.2.5_wszfouv2xxx6bizfwwcmbwut3e/node_modules/vitepress-plugin-tabs/dist/node/index.js
 function container_plugin(md, name, options) {
   function validateDefault(params) {
     return params.trim().split(" ", 2)[0] === name;
@@ -389,7 +389,8 @@ async function getArticleMeta(filepath, route, timeZone = defaultTimeZoneOffset,
   meta.tag = [meta.tag || []].flat().concat([
     .../* @__PURE__ */ new Set([...meta.categories || [], ...meta.tags || []])
   ]);
-  meta.description = meta.description || getTextSummary(content, 100) || excerpt;
+  const contentWithoutHeadings = content.replace(/^#+\s+.*$/gm, "");
+  meta.description = meta.description || getTextSummary(contentWithoutHeadings, 100) || excerpt;
   meta.cover = meta.cover ?? getFirstImagURLFromMD(fileContent, route);
   if (meta.publish === false) {
     meta.hidden = true;
@@ -456,6 +457,7 @@ import { RssPlugin } from "vitepress-plugin-rss";
 import { cacheAllGitTimestamps, joinPath as joinPath2 } from "@sugarat/theme-shared";
 import { AnnouncementPlugin } from "vitepress-plugin-announcement";
 import { groupIconVitePlugin } from "vitepress-plugin-group-icons";
+import { ImagePreviewPlugin } from "vitepress-plugin-image-preview";
 
 // src/utils/node/hot-reload-plugin.ts
 import fs2 from "fs";
@@ -538,6 +540,7 @@ function themeReloadPlugin() {
 function getVitePlugins(cfg = {}) {
   const plugins = [];
   plugins.push(cacheAllGitTimestampsPlugin());
+  plugins.push(ImagePreviewPlugin(cfg?.imagePreview));
   if (cfg.themeColor) {
     plugins.push(setThemeScript(cfg.themeColor));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -52,9 +52,10 @@
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-tabs": "0.7.3",
     "@sugarat/theme-shared": "0.0.7",
-    "vitepress-plugin-pagefind": "0.4.18",
-    "vitepress-plugin-rss": "0.4.2",
-    "vitepress-plugin-announcement": "0.1.7"
+    "vitepress-plugin-announcement": "0.1.7",
+    "vitepress-plugin-image-preview": "0.1.1",
+    "vitepress-plugin-pagefind": "0.4.19",
+    "vitepress-plugin-rss": "0.4.3"
   },
   "devDependencies": {
     "artalk": "^2.8.5",
@@ -62,7 +63,7 @@
     "pagefind": "^1.3.0",
     "typescript": "^5.4.5",
     "vite": "^5.4.9",
-    "vitepress": "2.0.0-alpha.15",
+    "vitepress": "2.0.0-alpha.16",
     "vue": "^3.5.24",
     "vitepress-plugin-51la": "0.1.1"
   },

package/src/components/BlogApp.vue

@@ -8,7 +8,7 @@ import BlogHomeInfo from './BlogHomeInfo.vue'
 import BlogHomeBanner from './BlogHomeBanner.vue'
 import BlogList from './BlogList.vue'
 import BlogSidebar from './BlogSidebar.vue'
-import BlogImagePreview from './BlogImagePreview.vue'
+
 import BlogArticleAnalyze from './BlogArticleAnalyze.vue'
 import BlogAlert from './BlogAlert.vue'
 import BlogFooter from './BlogFooter.vue'
@@ -49,8 +49,6 @@ const openTransition = useDarkTransitionConfig()
       <!-- 阅读时间分析 -->
       <ClientOnly>
         <BlogArticleAnalyze />
-        <!-- 图片预览 -->
-        <BlogImagePreview />
       </ClientOnly>
     </template>
 
@@ -128,10 +126,6 @@ const openTransition = useDarkTransitionConfig()
     <!-- content -->
     <template #page-top>
       <slot name="page-top" />
-      <ClientOnly>
-        <!-- 图片预览 -->
-        <BlogImagePreview />
-      </ClientOnly>
     </template>
     <template #page-bottom>
       <slot name="page-bottom" />

package/src/components/BlogHomeTags.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useBrowserLocation, useUrlSearchParams } from '@vueuse/core'
 import { useRoute, useRouter } from 'vitepress'
 import {
@@ -19,9 +19,42 @@ const title = computed(() => (typeof homeTagsConfig.value === 'boolean' || !home
   ? `${tagsSvgStr}标签`
   : homeTagsConfig.value?.title
 )
-const tags = computed(() => {
-  return [...new Set(docs.value.map(v => v.meta.tag || []).flat(3))]
+
+// 统计每个标签的文章数量，并按数量降序排序
+const tagsWithCount = computed(() => {
+  const tagCountMap = new Map<string, number>()
+  docs.value.forEach((v) => {
+    const articleTags = v.meta.tag || []
+    const flatTags = Array.isArray(articleTags) ? articleTags.flat(3) : [articleTags]
+    flatTags.forEach((tag: string) => {
+      tagCountMap.set(tag, (tagCountMap.get(tag) || 0) + 1)
+    })
+  })
+  // 按文章数量降序排序
+  return [...tagCountMap.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([tag, count]) => ({ tag, count }))
+})
+
+// 折叠/展开功能，从配置中读取 limit，默认 10
+const showCount = computed(() => {
+  if (typeof homeTagsConfig.value === 'object' && homeTagsConfig.value?.limit) {
+    return homeTagsConfig.value.limit
+  }
+  return 999
+})
+const isExpanded = ref(false)
+const displayTags = computed(() => {
+  if (isExpanded.value || tagsWithCount.value.length <= showCount.value) {
+    return tagsWithCount.value
+  }
+  return tagsWithCount.value.slice(0, showCount.value)
 })
+const hasMore = computed(() => tagsWithCount.value.length > showCount.value)
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value
+}
 
 const activeTag = useActiveTag()
 
@@ -78,7 +111,7 @@ watch(
 </script>
 
 <template>
-  <div v-if="showTags && tags.length" class="card tags" data-pagefind-ignore="all">
+  <div v-if="showTags && tagsWithCount.length" class="card tags" data-pagefind-ignore="all">
     <!-- 头部 -->
     <div class="card-header">
       <span class="title svg-icon" v-html="title" />
@@ -91,15 +124,33 @@ watch(
     </div>
     <!-- 标签列表 -->
     <ul class="tag-list">
-      <li v-for="(tag, idx) in tags" :key="tag">
+      <li v-for="(item, idx) in displayTags" :key="item.tag">
         <Tag
           :type="tagType[idx % tagType.length] || 'primary'"
-          @click="handleTagClick(tag, tagType[idx % tagType.length])"
+          @click="handleTagClick(item.tag, tagType[idx % tagType.length])"
         >
-          {{ tag }}
+          {{ item.tag }}
+          <span class="tag-count">{{ item.count }}</span>
         </Tag>
       </li>
     </ul>
+    <!-- 展开/收起按钮 -->
+    <div v-if="hasMore" class="expand-btn" @click="toggleExpand">
+      <span>{{ isExpanded ? '收起' : `展开全部 ${tagsWithCount.length} 个标签` }}</span>
+      <svg
+        class="expand-icon"
+        :class="{ 'is-expanded': isExpanded }"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+      >
+        <path
+          fill="currentColor"
+          d="M488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"
+        />
+      </svg>
+    </div>
   </div>
 </template>
 
@@ -147,4 +198,43 @@ watch(
   margin-bottom: 10px;
   cursor: pointer;
 }
+
+.tag-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 10px;
+  line-height: 1;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 6px;
+  padding: 4px 0;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  transition: color 0.3s;
+  user-select: none;
+}
+.expand-btn:hover {
+  color: var(--vp-c-brand);
+}
+
+.expand-icon {
+  transition: transform 0.3s;
+  transform: rotate(180deg);
+}
+.expand-icon.is-expanded {
+  transform: rotate(0deg);
+}
 </style>

package/src/composables/config/index.ts

@@ -5,6 +5,7 @@ import type { Mapping, Repo } from '@giscus/vue'
 import type { Options as Oml2dOptions } from 'oh-my-live2d'
 import type { PagefindConfig } from 'vitepress-plugin-pagefind'
 import type { AnnouncementOptions } from 'vitepress-plugin-announcement'
+import type { ImagePreviewOptions } from 'vitepress-plugin-image-preview'
 
 type RSSPluginOptions = RSSOptions
 
@@ -420,6 +421,10 @@ export namespace Theme {
      */
     alert?: Alert
     popover?: AnnouncementOptions
+    /**
+     * 图片预览插件配置
+     */
+    imagePreview?: ImagePreviewOptions
     friend?: FriendLink[] | FriendConfig
     authorList?: Omit<FriendLink, 'avatar'>[]
     /**
@@ -654,5 +659,10 @@ export namespace Theme {
      * @default '🏷 标签'
      */
     title?: string
+    /**
+     * 首页标签默认展示数量，超出部分折叠
+     * @default 999
+     */
+    limit?: number
   }
 }

package/src/utils/node/theme.ts

@@ -66,8 +66,10 @@ export async function getArticleMeta(filepath: string, route: string, timeZone =
 
   // 获取摘要信息
   // TODO：摘要生成优化，支持AI？
+  // 先去除 Markdown 中的标题行（# 开头），避免 description 中重复出现标题文字
+  const contentWithoutHeadings = content.replace(/^#+\s+.*$/gm, '')
   meta.description
-    = meta.description || getTextSummary(content, 100) || excerpt
+    = meta.description || getTextSummary(contentWithoutHeadings, 100) || excerpt
 
   // 获取封面图
   // TODO: 耦合信息优化

package/src/utils/node/vitePlugins.ts

@@ -7,6 +7,7 @@ import type { PluginOption } from 'vite'
 import { cacheAllGitTimestamps, joinPath } from '@sugarat/theme-shared'
 import { AnnouncementPlugin } from 'vitepress-plugin-announcement'
 import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
+import { ImagePreviewPlugin } from 'vitepress-plugin-image-preview'
 import type { Theme } from '../../composables/config/index'
 import { _require } from './mdPlugins'
 import { themeReloadPlugin } from './hot-reload-plugin'
@@ -18,6 +19,9 @@ export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
   // 缓存所有文章的 git 提交时间
   plugins.push(cacheAllGitTimestampsPlugin())
 
+  // 图片预览
+  plugins.push(ImagePreviewPlugin(cfg?.imagePreview))
+
   // 处理自定义主题色
   if (cfg.themeColor) {
     plugins.push(setThemeScript(cfg.themeColor))