gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update docs

Browse Source
This commit is contained in:
pengzhanbo 2025-04-30 22:34:01 +08:00
parent 497aeb37d6
commit d14961d038
15 changed files with 288 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/notes/theme/guide/components/badge.md
View File

@ -13,13 +13,29 @@ permalink: /guide/components/badge/
## Props
| 名称 | 类型 | 默认值 | 说明 |
| ------------ | -------- | ------------------ | ------------------------------------------------------------------ |
| type | `string` | `'tip'` | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 |
| text | `string` | `''` | 文本 |
| color | `string` | `''` | 文本颜色 |
| bg-color | `string` | `''` | 背景颜色 |
| border-color | `string` | `'transparent'` | 边框颜色 |
:::: field-group
::: field name="type" type="'info' | 'tip' | 'warning' | 'danger' | string" default="'tip'" optional
徽章类型，不同的类型使用不同的颜色方案。支持自定义类型
:::
::: field name="text" type="string" default="''" optional
徽章文本
:::
::: field name="color" type="string" optional
自定义徽章文本颜色
:::
::: field name="bgColor" type="string" optional
自定义徽章背景颜色
:::
::: field name="borderColor" type="string" optional
自定义徽章边框颜色
:::
::::
## 示例

10
docs/notes/theme/guide/components/card-grid.md
View File

@ -11,9 +11,10 @@ permalink: /guide/components/card-grid/
## Props
| 名称 | 类型 | 默认值 | 说明 |
| :--- | :----------------------------------------------- | :----- | :------------- |
| cols | `number \| Record<'sm' \| 'md' \| 'lg', number>` | `2` | 卡片排列列数。 |
:::: field-group
::: field name="cols" type="number | { sm: number, md: number, lg: number }" default="2"
卡片排列列数。
组件默认会根据屏幕宽度自动调整列数。在空间足够时，默认显示双列，小屏幕下显示单列。
@ -26,6 +27,9 @@ permalink: /guide/components/card-grid/
建议传入的 `number` 不超过 `3`。
:::
::::
## 示例
**输入：**

15
docs/notes/theme/guide/components/card-masonry.md
View File

@ -31,10 +31,10 @@ permalink: /guide/components/card-masonry/
## Props
| 名称 | 类型 | 默认值 | 说明 |
| :--- | :----------------------------------------------- | :----- | :------------- |
| cols | `number \| Record<'sm' \| 'md' \| 'lg', number>` | `3` | 列数 |
| gap | `number` | `16` | 列之间的间距 |
:::: field-group
::: field name="cols" type="number | { sm: number, md: number, lg: number }" optional
列数。
组件默认会根据屏幕宽度自动调整列数。在空间足够时，默认显示三列，小屏幕下显示双列。
@ -44,6 +44,13 @@ permalink: /guide/components/card-masonry/
- `sm` : `< 640px`
- `md` : `>= 640px < 960px`
- `lg` : `>= 960px`
:::
::: field name="gap" type="number" optional default="16"
列之间的间距。
:::
::::
## Markdown 语法支持

15
docs/notes/theme/guide/components/card.md
View File

@ -13,10 +13,17 @@ permalink: /guide/components/card/
## Props
| 名称 | 类型 | 默认值 | 说明 |
| ----- | --------------------------- | ------ | ---------------------------------------------------------------- |
| title | `string` | `''` | 标题 |
| icon | `string \| { svg: string }` | `''` | 显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接 |
:::: field-group
::: field name="title" type="string" default="''" optional
卡片标题
:::
::: field name="icon" type="string | { svg: string }" default="''" optional
显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接
:::
::::
## 插槽

25
docs/notes/theme/guide/components/home-box.md
View File

@ -11,9 +11,22 @@ permalink: /guide/components/home-box/
## Props
| 名称 | 类型 | 默认值 | 说明 |
| --------------------- | ------------------ | --------- | ---------------- |
| type | string | `''` | 区域类型 |
| full | boolean | `false` | 是否全屏 |
| background-image | string | `''` | 区域背景图片 |
| background-attachment | `'fixed'\|'local'` | `'local'` | 区域背景定位方式 |
:::: field-group
::: field name="type" type="string" default="''" optional
区域类型
:::
::: field name="full" type="boolean" default="false" optional
是否全屏
:::
::: field name="background-image" type="string" default="''" optional
区域背景图片
:::
::: field name="background-attachment" type="'fixed' | 'local'" default="'local'" optional
区域背景定位方式
:::
::::

20
docs/notes/theme/guide/components/icon.md
View File

@ -13,11 +13,21 @@ permalink: /guide/components/icon/
## Props
| 名称 | 类型 | 默认值 | 说明 |
| ----- | ------ | ---------------- | -------- |
| name | string | `''` | 图标名 |
| color | string | `'currentcolor'` | 图标颜色 |
| size | string | `'1em'` | 图标大小 |
:::: field-group
::: field name="name" type="string" default="''" optional
图标名称
:::
::: field name="color" type="string" default="'currentcolor'" optional
图标颜色
:::
::: field name="size" type="string" default="'1em'" optional
图标大小
:::
::::
## 示例

45
docs/notes/theme/guide/components/image-card.md
View File

@ -14,16 +14,41 @@ permalink: /guide/components/image-card/
## Props
| 名称 | 类型 | 默认值 | 说明 |
| ----------- | -------------------------- | ------- | --------------------------------------- |
| image | `string` | `''` | 必填，图片链接 |
| title | `string` | `''` | 可选，标题 (展示其它信息需要依赖此属性) |
| description | `string` | `''` | 可选，描述 |
| author | `string` | `''` | 可选，作者 |
| href | `string` | `''` | 可选，链接 |
| date | `string \| Date \| number` | `''` | 可选，日期 |
| width | `string \| number` | `''` | 可选，宽度 |
| center | `boolean` | `false` | 可选，是否居中 |
:::: field-group
::: field name="image" type="string" required
图片链接地址，本地图片必须使用绝对路径，即以 `/` 开头的路径，指向 `/public` 目录
:::
::: field name="title" type="string" optional
图片标题
:::
::: field name="description" type="string" optional
图片描述信息
:::
::: field name="author" type="string" optional
图片作者
:::
::: field name="href" type="string" optional
点击图片标题后的跳转链接
:::
::: field name="date" type="string | Date | number" optional
图片 创作日期
:::
::: field name="width" type="string | number" optional
图片宽度
:::
::: field name="center" type="boolean" optional
图片宽度不满屏时是否居中
:::
::::
## 示例

30
docs/notes/theme/guide/components/link-card.md
View File

@ -11,13 +11,29 @@ permalink: /guide/components/link-card/
## Props
| 名称 | 类型 | 默认值 | 说明 |
| ----------- | --------------------------- | ------ | ---------------------------------------------------------------- |
| title | `string` | `''` | 标题 |
| icon | `string \| { svg: string }` | `''` | 显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接 |
| href | `string` | `''` | 链接 |
| description | `string` | `''` | 详情 |
| target | `string` | `''` | 链接打开方式 |
:::: field-group
::: field name="title" type="string" default="''" optional
链接卡片标题
:::
::: field name="icon" type="string | { svg: string }" default="''" optional
显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接
:::
::: field name="href" type="string" default="''" optional
链接卡片跳转地址
:::
::: field name="description" type="string" default="''" optional
链接卡片描述，建议使用组件默认插槽添加描述内容
:::
::: field name="target" type="string" default="''" optional
链接跳转方式
:::
::::
## 插槽

95
docs/notes/theme/guide/components/npm-badge.md
View File

@ -44,17 +44,45 @@ import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
### 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 项目 |
:::: field-group
::: field name="name" type="string" optional
npm 包名，为空则从 `repo` 中获取
:::
::: field name="repo" type="string"
包 github 仓库地址，格式为 `owner/repo`，当 `name` 为空时必填
:::
::: field name="type" type="NpmBadgeType"
徽章类型
:::
::: field name="theme" type="NpmBadgeTheme" optional default="'flat'"
徽章主题
:::
::: field name="label" type="string" optional
徽章标签
:::
::: field name="color" type="string" optional default="'#32A9C3'"
徽章颜色
:::
::: field name="labelColor" type="string" optional default="'#1B3C4A'"
徽章标签颜色
:::
::: field name="branch" type="string" optional default="'main'"
仓库分支
:::
::: field name="dir" type="string" optional
包所在仓库目录，适用于 monorepo 项目
:::
::::
### Types
@ -95,16 +123,41 @@ type NpmBadgeTheme = 'flat' | 'flat-square' | 'plastic' | 'for-the-badge' | 'soc
### 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 项目 |
:::: field-group
::: field name="name" type="string" optional
npm 包名，为空则从 `repo` 中获取
:::
::: field name="repo" type="string"
包 github 仓库地址，格式为 `owner/repo`，当 `name` 为空时必填
:::
::: field name="items" type="string | NpmBadgeType[]" optional default="[]"
徽章类型列表, 传入 `string` 时用 `','`分隔，会自动转换为 `NpmBadgeType[]`
:::
::: field name="theme" type="NpmBadgeTheme" optional
徽章主题
:::
::: field name="color" type="string" optional
徽章颜色
:::
::: field name="labelColor" type="string" optional
徽章标签颜色
:::
::: field name="branch" type="string" optional
仓库分支
:::
::: field name="dir" type="string" optional
包所在仓库目录，适用于 monorepo 项目
:::
::::
### Slots

20
docs/notes/theme/guide/components/plot.md
View File

@ -23,11 +23,21 @@ export default defineUserConfig({
## Props
| 名称 | 类型 | 默认值 | 说明 |
| ------- | ------------------------------------------- | --------- | -------------------------- |
| trigger | `'hover' \| 'click'` | `'hover'` | 鼠标悬停触发，或者点击触发 |
| mask | `string \| { light: string, dark: string }` | `#000` | 遮罩颜色 |
| color | `string \| { light: string, dark: string }` | `#fff` | 文本颜色 |
:::: field-group
::: field name="trigger" type="'hover' | 'click'" default="'hover'" optional
鼠标悬停触发，或者点击触发
:::
::: field name="mask" type="string | { light: string, dark: string }" default="'#000'" optional
遮罩颜色
:::
::: field name="color" type="string | { light: string, dark: string }" default="'#fff'" optional
文本颜色
:::
::::
## 示例

8
docs/notes/theme/guide/components/repo-card.md
View File

@ -48,7 +48,13 @@ export default defineClientConfig({
### Props
`RepoCard` 组件的 接收一个 `repo` 参数，传入的是仓库的地址，格式为 `owner/repo`。
:::: field-group
::: field name="repo" type="string" required
仓库地址，格式为 `owner/repo`
:::
::::
## 示例

11
docs/notes/theme/guide/markdown/card.md
View File

@ -36,7 +36,16 @@ permalink: /guide/markdown/card/
::::
```
卡片 支持 可选的 `title` 和 `icon`。 其中， icon 支持传入 图片链接，也可以传入 iconify 图标名。
## Props
:::: field-group
::: field name="title" type="string" optional default="''"
卡片标题
:::
::: field name="icon" type="string" optional
卡片图标 支持传入图片链接，还可以传入 [iconify](https://icon-sets.iconify.design/) 图标名。
::::
## 示例

6
docs/notes/theme/guide/markdown/field.md
View File

@ -52,12 +52,13 @@ export default defineUserConfig({
## 属性
:::: field-group
::: field name="name" required type="string"
字段名称
:::
::: field name="type" type="string" optional
字段类型
字段的类型
:::
::: field name="required" type="boolean" optional
@ -69,8 +70,9 @@ export default defineUserConfig({
:::
::: field name="default" type="string" optional
默认值
默认值， 如果为空字符串，应该使用 `default="''"`
:::
::::
## 示例

2
docs/notes/theme/guide/markdown/file-tree.md
View File

@ -106,7 +106,7 @@ permalink: /guide/markdown/file-tree/
## 配置
你可以在 `plugins.mdPower.fileTree` 选项中配置 文件树的图标默认类型：
你可以在 `markdown.fileTree` 选项中配置 文件树的图标默认类型：
::: code-tabs
@tab .vuepress/config.ts

89
docs/notes/theme/guide/markdown/timeline.md
View File

@ -123,91 +123,68 @@ __时间线__ 支持非常灵活且灵活的配置项，配置主要分为两个
### 容器配置
#### horizontal
:::: field-group
- __类型:__ `boolean`
- __默认值:__ `false`
::: field name="horizontal" type="boolean" default="false" optional
渲染为 水平方向 的时间线
:::
渲染为 水平方向的时间线。
::: field name="card" type="boolean" default="false" optional
每个时间节点默认渲染为卡片样式（可在列表项配置中覆盖）
:::
#### card
- __类型:__ `boolean`
- __默认值:__ `false`
每个时间节点默认渲染为卡片样式（可在列表项配置中覆盖）。
#### placement
- __类型:__ `'left' | 'right' | 'between'`
- __默认值:__ `'left'`
::: field name="placement" type="'left' | 'right' | 'between'" default="'left'" optional
时间节点的对齐方式。==仅在垂直方向时生效=={.warning}
- `left` : 时间轴左侧对齐
- `right` : 时间轴右侧对齐
- `between` : 时间轴两端对齐 (通过列表项配置中的 `placement` 定义位置，默认为 `left`)
:::
#### line
- __类型:__ `'solid' | 'dashed' | 'dotted'`
- __默认值:__ `'solid'`
::: field name="line" type="'solid' | 'dashed' | 'dotted'" default="'solid'" optional
线条样式（可在列表项配置中覆盖）
:::
::::
### 列表项配置
#### time
- __类型:__ `string`
- __默认值:__ `''`
:::: field-group
::: field name="time" type="string" default="''" optional
时间点，可以是任何字符串，比如 `2025-03-20`， `Q1` 等。
:::
#### type
- __类型:__ `'info' | 'tip' | 'success' | 'warning' | 'danger' | 'caution' | 'important'`
- __默认值:__ `'info'`
::: field name="type" type="'info' | 'tip' | 'success' | 'warning' | 'danger' | 'caution' | 'important'" default="'info'" optional
时间节点的类型。
:::
#### card
::: field name="card" type="boolean" default="false" optional
当前 时间节点渲染为卡片样式。默认值从 容器配置 `card` 中继承
:::
- __类型:__ `boolean`
- __默认值:__ `false` 从 容器配置 `card` 中继承
当前 时间节点渲染为卡片样式。
#### line
- __类型:__ `'solid' | 'dashed' | 'dotted'`
- __默认值:__ `'solid'` 从 容器配置 `line` 中继承
线条样式
#### icon
- __类型:__ `string`
- __默认值:__ `''`
::: field name="line" type="'solid' | 'dashed' | 'dotted'" default="'solid'" optional
线条样式。 默认值从 容器配置 `line` 中继承
:::
::: field name="icon" type="string" default="''" optional
时间节点的图标，支持所有的 [iconify](https://icon-sets.iconify.design/) 图标。
:::
#### placement
::: field name="placement" type="'left' | 'right'" default="'left'" optional
- __类型:__ `'left' | 'right'`
- __默认值:__ `'left'`
当 容器配置为 `between` 时，定义当前时间节点的位置。
当 容器配置 `placement` 为 `between` 时，定义当前时间节点的位置。
- `left` : 在时间轴左侧
- `right` : 在时间轴右侧
:::
#### color
- __类型:__ `string`
- __默认值:__ `''`
::: field name="color" type="string" default="''" optional
时间节点线条颜色，可以是任何有效的颜色值。
:::
::::
## 示例