yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

docs: update docs

Browse Source
This commit is contained in:
pengzhanbo 2024-07-27 19:23:53 +08:00
parent a81c20a21c
commit ac8984d050
4 changed files with 264 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/.vuepress/notes.ts
View File

@ -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',

2
docs/notes/theme/config/主题配置.md
View File

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

151
docs/notes/theme/guide/功能/npmBadge.md Normal file
View File

@ -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>

91
docs/notes/theme/guide/功能/repoCard.md Normal file
View File

@ -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>