pengzhanbo · pengzhanbo · Jul 28, 2024 · Jul 26, 2024 · Jul 26, 2024 · Jul 26, 2024
diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts
@@ -22,31 +22,36 @@ export const zhNotes = definePlumeNotesConfig({
             {
               text: 'markdown',
               icon: 'material-symbols:markdown-outline',
-              dir: 'markdown',
+              prefix: 'markdown',
+              collapsed: true,
               items: ['基础', '扩展', '进阶'],
             },
             {
               text: '代码块',
-              dir: '代码',
+              prefix: '代码',
               icon: 'ph:code-bold',
+              collapsed: true,
               items: ['介绍', '特性支持', '代码组', '导入代码', 'twoslash'],
             },
             {
               text: '代码演示',
-              dir: '代码演示',
+              prefix: '代码演示',
               icon: 'carbon:demo',
+              collapsed: true,
               items: ['前端', 'rust', 'golang', 'kotlin', 'codepen', 'jsFiddle', 'codeSandbox', 'replit'],
             },
             {
               text: '图表',
               icon: 'mdi:chart-line',
-              dir: '图表',
+              prefix: '图表',
+              collapsed: true,
               items: ['chart', 'echarts', 'mermaid', 'flowchart'],
             },
             {
               text: '资源嵌入',
               icon: 'dashicons:embed-video',
-              dir: '嵌入',
+              prefix: '嵌入',
+              collapsed: true,
               items: ['pdf', 'bilibili', 'youtube'],
             },
           ],
@@ -55,8 +60,13 @@ export const zhNotes = definePlumeNotesConfig({
           text: '功能',
           icon: 'lucide:box',
           collapsed: false,
-          dir: '功能',
-          items: ['图标', '代码复制', '内容搜索', '评论', '加密', '组件', '文章水印', '友情链接页', 'seo', 'sitemap'],
+          prefix: '功能',
+          items: ['图标', '代码复制', '内容搜索', '评论', '加密', '组件', '文章水印', '友情链接页', 'seo', 'sitemap', {
+            text: '非内置功能',
+            icon: 'system-uicons:box-add',
+            collapsed: true,
+            items: ['repoCard', 'npmBadge'],
+          }],
         },
         {
           text: '自定义',
@@ -89,13 +99,13 @@ export const zhNotes = definePlumeNotesConfig({
         },
         {
           text: 'frontmatter',
-          dir: 'frontmatter',
+          prefix: 'frontmatter',
           collapsed: false,
           items: ['basic', 'home', 'post', 'friend'],
         },
         {
           text: '内置插件',
-          dir: 'plugins',
+          prefix: 'plugins',
           collapsed: false,
           items: ['', '代码高亮', '搜索', '阅读统计', 'markdown增强', 'markdownPower', '百度统计', '水印'],
         },
@@ -109,7 +119,7 @@ export const zhNotes = definePlumeNotesConfig({
           text: '插件',
           items: [
             // 'caniuse',
-            'iconify',
+            // 'iconify',
             'shiki',
             'md-power',
             'content-updated',

diff --git a/docs/notes/theme/config/主题配置.md b/docs/notes/theme/config/主题配置.md
@@ -179,6 +179,8 @@ interface BlogOptions {
 
   ::: warning
   该字段不支持在 [主题配置文件 `plume.config.js`](./配置说明.md#主题配置文件) 中进行配置。
+
+  为了使缓存能够生效，您应该 **删除** `package.json` 中 `vuepress dev` 开发服务启动脚本中的 `--clean-cache` 参数。
   :::
 
 ### locales

diff --git a/docs/notes/theme/guide/功能/npmBadge.md b/docs/notes/theme/guide/功能/npmBadge.md
@@ -0,0 +1,151 @@
+---
+title: Npm 徽章
+author: pengzhanbo
+icon: akar-icons:npm-fill
+createTime: 2024/07/26 22:07:23
+permalink: /guide/npm-badge/
+---
+
+<script setup>
+import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
+import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
+</script>
+
+## 概述
+
+Npm 徽章组件 用于显示 npm 包信息，并提供相关的链接。
+
+徽章由 <https://shields.io> 提供支持。
+
+## 使用
+
+使用该组件需要你手动导入 `NpmBadge` 或 `NpmBadgeGroup` 组件：
+
+```md :no-line-numbers
+<!-- 在 markdown 中导入 -->
+<script setup>
+import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
+import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
+</script>
+
+<!-- 导入后，即可在 markdown 中使用 -->
+<NpmBadge name="vuepress-theme-plume" type="dm" />
+
+<!-- 并排显示多个 npm badge -->
+<NpmBadgeGroup name="vuepress-theme-plume" items="version,dm" />
+```
+
+<NpmBadge name="vuepress-theme-plume" type="dm" />
+
+<NpmBadgeGroup name="vuepress-theme-plume" items="version,dm" />
+
+## `<NpmBadge />`
+
+单个 npm badge
+
+### Props
+
+| 名称       | 类型            | 必填            | 默认值      | 说明                                    |
+| ---------- | --------------- | --------------- | ----------- | --------------------------------------- |
+| name       | `string`        | 否              | `''`        | npm 包名，为空则从 `repo` 中获取        |
+| repo       | `string`        | name 为空时必填 | `''`        | 包 github 仓库地址, 格式为 `owner/repo` |
+| type       | `NpmBadgeType`  | 是              | -           | 徽章类型                                |
+| theme      | `NpmBadgeTheme` | 否              | `'flat'`    | 徽章主题                                |
+| label      | `string`        | 否              | `''`        | 徽章标签                                |
+| color      | `string`        | 否              | `'#32A9C3'` | 徽章颜色                                |
+| labelColor | `string`        | 否              | `'#1B3C4A'` | 徽章标签颜色                            |
+| branch     | `string`        | 否              | `'main'`    | 仓库分支                                |
+| dir        | `string`        | 否              | `''`        | 包所在仓库目录，适用于 monorepo 项目    |
+
+### Types
+
+```ts
+type NpmBadgeType =
+  // github
+  | 'source' // github source
+  | 'stars' // github stars
+  | 'forks' // github forks
+  | 'license' // github license
+  // npm
+  | 'version' // npm version
+  | 'dt' // alias d18m
+  | 'd18m' // npm downloads last 18 months
+  | 'dw' // npm downloads weekly
+  | 'dm' // npm downloads monthly
+  | 'dy' // npm downloads yearly
+
+type NpmBadgeTheme = 'flat' | 'flat-square' | 'plastic' | 'for-the-badge' | 'social'
+```
+
+### 示例
+
+- `<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="source" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="source" />
+- `<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="stars" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="stars" />
+- `<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="forks" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="forks" />
+- `<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="license" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="license" />
+- `<NpmBadge name="vuepress-theme-plume" type="version" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="version" />
+- `<NpmBadge name="vuepress-theme-plume" type="dt" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="dt" />
+- `<NpmBadge name="vuepress-theme-plume" type="d18m" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="d18m" />
+- `<NpmBadge name="vuepress-theme-plume" type="dy" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="dy" />
+- `<NpmBadge name="vuepress-theme-plume" type="dm" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="dm" />
+- `<NpmBadge name="vuepress-theme-plume" type="dw" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="dw" />
+
+## `<NpmBadgeGroup />`
+
+组合多个 npm badge
+
+### Props
+
+| 名称       | 类型            | 必填            | 默认值 | 说明                                    |
+| ---------- | --------------- | --------------- | ------ | --------------------------------------- |
+| name       | `string`        | 否              | `''`   | npm 包名，为空则从 `repo` 中获取        |
+| repo       | `string`        | name 为空时必填 | `''`   | 包 github 仓库地址, 格式为 `owner/repo` |
+| items       | `string \| NpmBadgeType[]` | 否  | -      | 徽章类型列表, 传入 `string` 时用 `','`分隔，会自动转换为 `NpmBadgeType[]`        |
+| theme      | `NpmBadgeTheme` | 否              | `''`   | 徽章主题                                |
+| color      | `string`        | 否              | `''`   | 徽章颜色                                |
+| labelColor | `string`        | 否              | `''`   | 徽章标签颜色                            |
+| branch     | `string`        | 否              | `''`   | 仓库分支                                |
+| dir        | `string`        | 否              | `''`   | 包所在仓库目录，适用于 monorepo 项目    |
+
+### Slots
+
+`<NpmBadgeGroup />` 支持传入 多个 `<NpmBadge />` 组件。
+
+`<NpmBadgeGroup />` 声明的 `Props` 将被注入到 `<NpmBadge />` 组件中。通过这种方式来实现和简化徽章组合。
+
+### 示例
+
+**输入：**
+
+```md :no-line-numbers
+<NpmBadgeGroup
+  repo="pengzhanbo/vuepress-theme-plume"
+  items="stars,version,dm,source"
+/>
+```
+
+**输出：**
+
+<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume" items="stars,version,dm,source" />
+
+使用 `<slot />` 灵活定义徽章组合：
+
+**输入：**
+
+```md :no-line-numbers
+<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume">
+  <NpmBadge type="stars" />
+  <NpmBadge type="version" label="npm" />
+  <NpmBadge type="dm" />
+  <NpmBadge type="source" />
+</NpmBadgeGroup>
+```
+
+**输出：**
+
+<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume">
+  <NpmBadge type="stars" />
+  <NpmBadge type="version" label="npm" />
+  <NpmBadge type="dm" />
+  <NpmBadge type="source" />
+</NpmBadgeGroup>
diff --git a/docs/notes/theme/guide/功能/repoCard.md b/docs/notes/theme/guide/功能/repoCard.md
@@ -0,0 +1,91 @@
+---
+title: Repo 卡片
+author: pengzhanbo
+icon: octicon:repo-16
+createTime: 2024/07/26 21:11:56
+permalink: /guide/github-repo-card/
+---
+
+<script setup>
+import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
+</script>
+
+## 概述
+
+Repo 卡片组件 用于显示 GitHub 仓库信息。
+
+## 使用
+
+使用该组件需要你手动导入 `RepoCard` 组件：
+
+```md :no-line-numbers
+<!-- 在 markdown 中导入 -->
+<script setup>
+import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
+</script>
+
+<!-- 导入后，即可在 markdown 中使用 -->
+<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
+```
+
+注册为全局组件：
+
+::: code-tabs
+@tab .vuepress/client.ts
+
+```ts
+import { defineClientConfig } from 'vuepress/client'
+import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
+
+export default defineClientConfig({
+  enhance({ app }) {
+    app.component('RepoCard', RepoCard)
+  },
+})
+```
+
+:::
+
+全局组件可在 其他任意 markdown 文件中使用
+
+```md
+<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
+```
+
+### Props
+
+`RepoCard` 组件的 接收一个 `repo` 参数，传入的是仓库的地址，格式为 `owner/repo`。
+
+## 示例
+
+### 单卡片
+
+**输入：**
+
+```md
+<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
+```
+
+**输出：**
+
+<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
+
+### 多卡片
+
+如果希望以紧凑的方式并排展示多个卡片，可以使用 `CardGrid` 组件。
+
+**输入：**
+
+```md
+<CardGrid>
+  <RepoCard repo="vuepress/core" />
+  <RepoCard repo="vuepress/ecosystem" />
+</CardGrid>
+```
+
+**输出：**
+
+<CardGrid>
+  <RepoCard repo="vuepress/core" />
+  <RepoCard repo="vuepress/ecosystem" />
+</CardGrid>
diff --git a/theme/package.json b/theme/package.json
@@ -37,6 +37,9 @@
       "types": "./lib/client/composables/index.d.ts",
       "import": "./lib/client/composables/index.js"
     },
+    "./features/*": {
+      "import": "./lib/client/features/components/*"
+    },
     "./shared": {
       "types": "./lib/shared/index.d.ts",
       "import": "./lib/shared/index.js"

diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
@@ -174,7 +174,7 @@ watch(
 
 @media (min-width: 1440px) {
   .vp-doc-container:not(.has-sidebar) .content {
-    max-width: 784px;
+    max-width: 884px;
   }
 
   .vp-doc-container.is-blog:not(.has-sidebar.has-aside) .content {
@@ -275,6 +275,6 @@ watch(
 }
 
 .vp-doc-container.has-aside .content-container {
-  max-width: 688px;
+  max-width: 788px;
 }
 </style>
diff --git a/theme/src/client/components/VPIconify.vue b/theme/src/client/components/VPIconify.vue
@@ -61,7 +61,7 @@ const bind = computed<any>(() => ({
     <span v-if="!loaded" class="vp-icon" :style="{ color, width: size, height: size }" />
     <OfflineIcon
       v-else-if="icon"
-      class="vp-iconify"
+      class="vp-icon"
       v-bind="bind"
     />
   </ClientOnly>

diff --git a/theme/src/client/composables/langs.ts b/theme/src/client/composables/langs.ts
@@ -29,8 +29,9 @@ export function useLangs({
     const { notFound, path } = resolveRoute(targetPath)
     if (!notFound)
       return path
+
     const blog = theme.value.blog
-    if (isBlogPost.value)
+    if (isBlogPost.value && blog !== false)
       return withBase(blog?.link || normalizeLink(locale, 'blog/'))
 
     const sidebarList = sidebar.value