From ac8984d050c79f7589830fe6b6cdb8b5e4ef3ed2 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Sat, 27 Jul 2024 19:23:53 +0800 Subject: [PATCH] docs: update docs --- docs/.vuepress/notes.ts | 30 +++-- docs/notes/theme/config/主题配置.md | 2 + docs/notes/theme/guide/功能/npmBadge.md | 151 ++++++++++++++++++++++++ docs/notes/theme/guide/功能/repoCard.md | 91 ++++++++++++++ 4 files changed, 264 insertions(+), 10 deletions(-) create mode 100644 docs/notes/theme/guide/功能/npmBadge.md create mode 100644 docs/notes/theme/guide/功能/repoCard.md diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index b0e17600..7438bdc8 100644 --- 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: false, + 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 index 7a14c0d3..68a66509 100644 --- 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 new file mode 100644 index 00000000..e3640aae --- /dev/null +++ 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/ +--- + + + +## 概述 + +Npm 徽章组件 用于显示 npm 包信息，并提供相关的链接。 + +徽章由 提供支持。 + +## 使用 + +使用该组件需要你手动导入 `NpmBadge` 或 `NpmBadgeGroup` 组件： + +```md :no-line-numbers + + + + + + + + +``` + + + + + +## `` + +单个 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' +``` + +### 示例 + +- `` - +- `` - +- `` - +- `` - +- `` - +- `` - +- `` - +- `` - +- `` - +- `` - + +## `` + +组合多个 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 + +`` 支持传入 多个 `` 组件。 + +`` 声明的 `Props` 将被注入到 `` 组件中。通过这种方式来实现和简化徽章组合。 + +### 示例 + +**输入：** + +```md :no-line-numbers + +``` + +**输出：** + + + +使用 `` 灵活定义徽章组合： + +**输入：** + +```md :no-line-numbers + + + + + + +``` + +**输出：** + + + + + + + diff --git a/docs/notes/theme/guide/功能/repoCard.md b/docs/notes/theme/guide/功能/repoCard.md new file mode 100644 index 00000000..60535f6d --- /dev/null +++ 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/ +--- + + + +## 概述 + +Repo 卡片组件 用于显示 GitHub 仓库信息。 + +## 使用 + +使用该组件需要你手动导入 `RepoCard` 组件： + +```md :no-line-numbers + + + + + +``` + +注册为全局组件： + +::: 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 + +``` + +### Props + +`RepoCard` 组件的 接收一个 `repo` 参数，传入的是仓库的地址，格式为 `owner/repo`。 + +## 示例 + +### 单卡片 + +**输入：** + +```md + +``` + +**输出：** + + + +### 多卡片 + +如果希望以紧凑的方式并排展示多个卡片，可以使用 `CardGrid` 组件。 + +**输入：** + +```md + + + + +``` + +**输出：** + + + + +