pengzhanbo
GitHub
parent
ab4ff06756
commit
07c274cdbf
156
skills/README.md
Normal file
156
skills/README.md
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
# VuePress Plume Skills
|
||||||
|
|
||||||
|
This directory contains specialized skills for VuePress Plume theme, designed to enhance your development experience with AI agents.
|
||||||
|
|
||||||
|
## 1. Skill Introduction
|
||||||
|
|
||||||
|
The `skills` directory currently provides the following skills:
|
||||||
|
|
||||||
|
### 🌟 Available Skills
|
||||||
|
|
||||||
|
| Skill Name | Description | Key Features |
|
||||||
|
| ---------- | ----------- | ------------ |
|
||||||
|
| **vuepress-plume-config** | Theme Configuration Generator | • Generates `config.ts`, `plume.config.ts`<br>• Manages `themeConfig`, `navbar`, `sidebar`<br>• Supports `locales` and `plugins` configuration |
|
||||||
|
| **vuepress-plume-markdown** | Markdown Writing Assistant | • Provides syntax for Plume's Markdown extensions<br>• Supports Charts (Mermaid, ECharts, etc.)<br>• Supports Embeds (YouTube, Bilibili, PDF) |
|
||||||
|
|
||||||
|
### 🔍 Selection Guide
|
||||||
|
|
||||||
|
- **Use `vuepress-plume-config` when:**
|
||||||
|
- You are initializing a new VuePress Plume project.
|
||||||
|
- You need to update the theme configuration, navbar, or sidebar.
|
||||||
|
- You want to configure complex settings like locales or plugins.
|
||||||
|
|
||||||
|
- **Use `vuepress-plume-markdown` when:**
|
||||||
|
- You are writing content in Markdown files.
|
||||||
|
- You want to use advanced features like containers, code groups, or diagrams.
|
||||||
|
- You need to embed media or external content.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Installation and Configuration
|
||||||
|
|
||||||
|
You can install these skills into your project or globally using the `skills` CLI tool.
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js installed
|
||||||
|
- `npx` available
|
||||||
|
|
||||||
|
### Installation Steps
|
||||||
|
|
||||||
|
1. **Install specific skills from this repository:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install into your current project (recommended for teams)
|
||||||
|
npx skills add https://github.com/pengzhanbo/vuepress-plume
|
||||||
|
|
||||||
|
# Install specific skill only
|
||||||
|
npx skills add https://github.com/pengzhanbo/vuepress-plume --skill vuepress-plume-config
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Verify Installation:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx skills list
|
||||||
|
```
|
||||||
|
|
||||||
|
You should see the installed skills listed in the output.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Integration Guide
|
||||||
|
|
||||||
|
### 🤖 Claude Code Integration
|
||||||
|
|
||||||
|
Claude Code automatically detects skills in the `.claude/skills` directory or the standard `skills` directory if configured.
|
||||||
|
|
||||||
|
**Setup:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install for Claude Code specifically
|
||||||
|
npx skills add https://github.com/pengzhanbo/vuepress-plume -a claude-code
|
||||||
|
```
|
||||||
|
|
||||||
|
**Configuration:**
|
||||||
|
Ensure your `~/.claude/config.json` or project configuration allows loading skills from the installed location.
|
||||||
|
|
||||||
|
### 🌐 OpenCode Integration
|
||||||
|
|
||||||
|
OpenCode supports the open agent skills standard.
|
||||||
|
|
||||||
|
**Setup:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install for OpenCode
|
||||||
|
npx skills add https://github.com/pengzhanbo/vuepress-plume -a opencode
|
||||||
|
```
|
||||||
|
|
||||||
|
**Usage:**
|
||||||
|
Once installed, OpenCode agents will automatically index the skills and can be invoked using natural language prompts.
|
||||||
|
|
||||||
|
### 🚀 Trae Integration
|
||||||
|
|
||||||
|
Trae is a powerful IDE that can utilize these skills to assist you better.
|
||||||
|
|
||||||
|
**Setup:**
|
||||||
|
|
||||||
|
1. **Project-level:** Clone or install the skills into your project's `skills/` directory. Trae can scan and utilize `SKILL.md` files located in the project workspace.
|
||||||
|
2. **Usage:** Simply ask Trae to perform tasks related to the skills.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
> "Help me configure the navbar for my VuePress site using the plume config skill."
|
||||||
|
|
||||||
|
**Debugging:**
|
||||||
|
If Trae doesn't recognize the skill, ensure the `SKILL.md` file is valid and contains the correct frontmatter (name, description).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Usage Examples
|
||||||
|
|
||||||
|
### 🛠️ Using `vuepress-plume-config`
|
||||||
|
|
||||||
|
**Scenario:** Initialize a new configuration file.
|
||||||
|
|
||||||
|
**Prompt:**
|
||||||
|
> "Generate a `config.ts` for my VuePress Plume site with a blog setup, English and Chinese locales, and the filesystem cache enabled."
|
||||||
|
|
||||||
|
**Outcome:**
|
||||||
|
The agent will use the skill to create a `src/.vuepress/config.ts` file with the requested configuration structure.
|
||||||
|
|
||||||
|
### 📝 Using `vuepress-plume-markdown`
|
||||||
|
|
||||||
|
**Scenario:** Add a complex diagram to a documentation page.
|
||||||
|
|
||||||
|
**Prompt:**
|
||||||
|
> "I want to add a timeline of VuePress release history to my markdown file using the Plume timeline extension."
|
||||||
|
|
||||||
|
**Outcome:**
|
||||||
|
The agent will reference the `vuepress-plume-markdown` skill to provide the correct syntax:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
::: timeline 2024
|
||||||
|
2024-01-01: **VuePress Plume v1.0.0 Released**
|
||||||
|
The first official release.
|
||||||
|
|
||||||
|
2024-06-01: **Feature Update**
|
||||||
|
Added support for new markdown extensions.
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Best Practices
|
||||||
|
|
||||||
|
### Recommendations
|
||||||
|
|
||||||
|
- **Version Control:** Commit your `skills/` directory to Git if you are using project-level skills. This ensures all team members have access to the same capabilities.
|
||||||
|
- **Updates:** Regularly check for updates to the skills to get the latest features and fixes.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx skills update
|
||||||
|
```
|
||||||
|
|
||||||
|
### Performance & Security
|
||||||
|
|
||||||
|
- **Review Changes:** Always review the configuration files generated by the `vuepress-plume-config` skill before deploying.
|
||||||
|
- **Safe Execution:** These skills primarily generate text/code. They do not execute system commands directly without user confirmation in most agent environments.
|
||||||
158
skills/README.zh-CN.md
Normal file
158
skills/README.zh-CN.md
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
# VuePress Plume Skills
|
||||||
|
|
||||||
|
此目录包含为 VuePress Plume 主题定制的专用技能（Skills），旨在通过 AI 代理提升您的开发体验。
|
||||||
|
|
||||||
|
## 1. 技能介绍
|
||||||
|
|
||||||
|
`skills` 目录目前提供以下技能：
|
||||||
|
|
||||||
|
### 🌟 可用技能
|
||||||
|
|
||||||
|
| 技能名称 | 描述 | 主要特性 |
|
||||||
|
| ---------- | ----------- | ------------ |
|
||||||
|
| **vuepress-plume-config** | 主题配置生成器 | • 生成 `config.ts`, `plume.config.ts`<br>• 管理 `themeConfig`, `navbar`, `sidebar`<br>• 支持 `locales` 和 `plugins` 配置 |
|
||||||
|
| **vuepress-plume-markdown** | Markdown 写作助手 | • 提供 Plume Markdown 扩展语法<br>• 支持图表 (Mermaid, ECharts 等)<br>• 支持嵌入 (YouTube, Bilibili, PDF) |
|
||||||
|
|
||||||
|
### 🔍 选择指南
|
||||||
|
|
||||||
|
- **使用 `vuepress-plume-config` 的场景：**
|
||||||
|
- 初始化一个新的 VuePress Plume 项目。
|
||||||
|
- 需要更新主题配置、导航栏或侧边栏。
|
||||||
|
- 需要配置复杂设置，如多语言或插件。
|
||||||
|
|
||||||
|
- **使用 `vuepress-plume-markdown` 的场景：**
|
||||||
|
- 编写 Markdown 内容文件。
|
||||||
|
- 需要使用高级功能，如容器、代码组或图表。
|
||||||
|
- 需要嵌入媒体或外部内容。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 安装与配置
|
||||||
|
|
||||||
|
您可以使用 `skills` CLI 工具将这些技能安装到您的项目中或全局安装。
|
||||||
|
|
||||||
|
### 前置要求
|
||||||
|
|
||||||
|
- 已安装 Node.js
|
||||||
|
- `npx` 可用
|
||||||
|
|
||||||
|
### 安装步骤
|
||||||
|
|
||||||
|
1. **从本仓库安装特定技能：**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 安装到当前项目（团队协作推荐）
|
||||||
|
npx skills add https://github.com/pengzhanbo/vuepress-plume
|
||||||
|
|
||||||
|
# 仅安装特定技能
|
||||||
|
npx skills add https://github.com/pengzhanbo/vuepress-plume --skill vuepress-plume-config
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **验证安装：**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx skills list
|
||||||
|
```
|
||||||
|
|
||||||
|
您应该能看到已安装的技能列在输出中。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 集成指南
|
||||||
|
|
||||||
|
### 🤖 Claude Code 集成
|
||||||
|
|
||||||
|
Claude Code 会自动检测 `.claude/skills` 目录或配置的标准 `skills` 目录中的技能。
|
||||||
|
|
||||||
|
**设置：**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 专为 Claude Code 安装
|
||||||
|
npx skills add https://github.com/pengzhanbo/vuepress-plume -a claude-code
|
||||||
|
```
|
||||||
|
|
||||||
|
**配置：**
|
||||||
|
确保您的 `~/.claude/config.json` 或项目配置允许从安装位置加载技能。
|
||||||
|
|
||||||
|
### 🌐 OpenCode 集成
|
||||||
|
|
||||||
|
OpenCode 支持开放代理技能（open agent skills）标准。
|
||||||
|
|
||||||
|
**设置：**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 为 OpenCode 安装
|
||||||
|
npx skills add https://github.com/pengzhanbo/vuepress-plume -a opencode
|
||||||
|
```
|
||||||
|
|
||||||
|
**使用：**
|
||||||
|
安装后，OpenCode 代理将自动索引技能，并可通过自然语言提示调用。
|
||||||
|
|
||||||
|
### 🚀 Trae 集成
|
||||||
|
|
||||||
|
Trae 是一个强大的 IDE，可以利用这些技能更好地协助您。
|
||||||
|
|
||||||
|
**设置：**
|
||||||
|
|
||||||
|
1. **项目级：** 克隆或安装技能到您项目的 `skills/` 目录。Trae 可以扫描并利用项目工作区中的 `SKILL.md` 文件。
|
||||||
|
2. **使用：** 直接要求 Trae 执行与技能相关的任务。
|
||||||
|
|
||||||
|
**示例：**
|
||||||
|
> "帮我使用 plume config skill 配置 VuePress 站点的导航栏。"
|
||||||
|
|
||||||
|
**调试：**
|
||||||
|
如果 Trae 无法识别技能，请确保 `SKILL.md` 文件有效且包含正确的 frontmatter（name, description）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 使用示例
|
||||||
|
|
||||||
|
### 🛠️ 使用 `vuepress-plume-config`
|
||||||
|
|
||||||
|
**场景：** 初始化一个新的配置文件。
|
||||||
|
|
||||||
|
**提示词：**
|
||||||
|
> "Generate a `config.ts` for my VuePress Plume site with a blog setup, English and Chinese locales, and the filesystem cache enabled."
|
||||||
|
> （"为我的 VuePress Plume 站点生成一个 `config.ts`，包含博客设置、中英文多语言支持，并启用文件系统缓存。"）
|
||||||
|
|
||||||
|
**结果：**
|
||||||
|
代理将使用技能创建一个包含请求配置结构的 `src/.vuepress/config.ts` 文件。
|
||||||
|
|
||||||
|
### 📝 使用 `vuepress-plume-markdown`
|
||||||
|
|
||||||
|
**场景：** 向文档页面添加复杂图表。
|
||||||
|
|
||||||
|
**提示词：**
|
||||||
|
> "I want to add a timeline of VuePress release history to my markdown file using the Plume timeline extension."
|
||||||
|
> （"我想使用 Plume 时间轴扩展在 Markdown 文件中添加 VuePress 发布历史的时间轴。"）
|
||||||
|
|
||||||
|
**结果：**
|
||||||
|
代理将引用 `vuepress-plume-markdown` 技能提供正确的语法：
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
::: timeline 2024
|
||||||
|
2024-01-01: **VuePress Plume v1.0.0 Released**
|
||||||
|
The first official release.
|
||||||
|
|
||||||
|
2024-06-01: **Feature Update**
|
||||||
|
Added support for new markdown extensions.
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 最佳实践
|
||||||
|
|
||||||
|
### 建议
|
||||||
|
|
||||||
|
- **版本控制：** 如果使用项目级技能，请将 `skills/` 目录提交到 Git。这确保所有团队成员都能使用相同的功能。
|
||||||
|
- **更新：** 定期检查技能更新以获取最新功能和修复。
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx skills update
|
||||||
|
```
|
||||||
|
|
||||||
|
### 性能与安全
|
||||||
|
|
||||||
|
- **审查更改：** 在部署之前，始终审查由 `vuepress-plume-config` 技能生成的配置文件。
|
||||||
|
- **安全执行：** 这些技能主要生成文本/代码。在大多数代理环境中，未经用户确认，它们不会直接执行系统命令。
|
||||||
361
skills/vuepress-plume-config/SKILL.md
Normal file
361
skills/vuepress-plume-config/SKILL.md
Normal file
@ -0,0 +1,361 @@
|
|||||||
|
---
|
||||||
|
name: vuepress-plume-config
|
||||||
|
description: Generate and write VuePress Plume theme config. Invoke when user asks to init or update theme config.
|
||||||
|
---
|
||||||
|
|
||||||
|
# VuePress Plume Config Skill
|
||||||
|
|
||||||
|
This skill generates, manages, and writes VuePress Plume theme configuration files based on the official documentation. It supports `.vuepress/config.ts`, `.vuepress/config.js`, and `.vuepress/plume.config.ts`.
|
||||||
|
|
||||||
|
**When to Invoke**
|
||||||
|
|
||||||
|
- Initialize or update Plume theme configuration
|
||||||
|
- Dynamically generate themeConfig, collections, navbar, sidebar, locales according to input
|
||||||
|
- Write the generated configuration into a specified target file
|
||||||
|
|
||||||
|
**Documentation Sources**
|
||||||
|
|
||||||
|
- [Theme Configuration](https://theme-plume.vuejs.press/config/theme/index.md)
|
||||||
|
- [Locales Configuration](https://theme-plume.vuejs.press/config/locales/index.md)
|
||||||
|
- [Collections Configuration](https://theme-plume.vuejs.press/config/collections/index.md)
|
||||||
|
- [Navbar](https://theme-plume.vuejs.press/config/navigation/index.md)
|
||||||
|
- [Sidebar](https://theme-plume.vuejs.press/config/sidebar/index.md)
|
||||||
|
- [Markdown](https://theme-plume.vuejs.press/config/markdown/index.md)
|
||||||
|
- [Plugins](https://theme-plume.vuejs.press/config/plugins/index.md)
|
||||||
|
|
||||||
|
## Input Schema
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"type": "object",
|
||||||
|
"required": ["format", "target_file"],
|
||||||
|
"properties": {
|
||||||
|
"format": {
|
||||||
|
"type": "string",
|
||||||
|
"enum": ["plume-config-ts", "vuepress-config-ts", "vuepress-config-js"],
|
||||||
|
"description": "Output file type and configuration style"
|
||||||
|
},
|
||||||
|
"target_file": {
|
||||||
|
"type": "string",
|
||||||
|
"description": "Target file path to write (relative to project root or absolute)"
|
||||||
|
},
|
||||||
|
"site": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "VuePress site-level config (config.ts/js only)",
|
||||||
|
"properties": {
|
||||||
|
"lang": { "type": "string", "description": "Default language" },
|
||||||
|
"title": { "type": "string", "description": "Site title" },
|
||||||
|
"description": { "type": "string", "description": "Site description" },
|
||||||
|
"base": { "type": "string", "description": "Deployment base path like /subpath/" },
|
||||||
|
"head": { "type": "array", "description": "Extra <head> tags", "items": { "type": "array" } },
|
||||||
|
"locales": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Site locales (config.ts/js only)",
|
||||||
|
"additionalProperties": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"lang": { "type": "string" },
|
||||||
|
"title": { "type": "string" },
|
||||||
|
"description": { "type": "string" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"theme": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Plume theme configuration (themeConfig)",
|
||||||
|
"properties": {
|
||||||
|
"hostname": { "type": "string", "default": "", "description": "Deployment hostname (for sitemap/SEO)" },
|
||||||
|
"autoFrontmatter": {
|
||||||
|
"type": ["object", "boolean"],
|
||||||
|
"default": { "permalink": true, "createTime": true, "title": true },
|
||||||
|
"properties": {
|
||||||
|
"permalink": { "type": "boolean", "default": true },
|
||||||
|
"createTime": { "type": "boolean", "default": true },
|
||||||
|
"title": { "type": "boolean", "default": true }
|
||||||
|
},
|
||||||
|
"description": "Automatically add frontmatter to Markdown"
|
||||||
|
},
|
||||||
|
"cache": {
|
||||||
|
"type": ["string", "boolean"],
|
||||||
|
"enum": ["memory", "filesystem", false],
|
||||||
|
"default": "filesystem",
|
||||||
|
"description": "Compilation cache (config.ts/js only)"
|
||||||
|
},
|
||||||
|
"docsRepo": { "type": "string", "default": "", "description": "Docs repository url" },
|
||||||
|
"docsBranch": { "type": "string", "default": "", "description": "Docs repository branch" },
|
||||||
|
"docsDir": { "type": "string", "default": "", "description": "Docs directory (relative to repo root)" },
|
||||||
|
"editLink": { "type": "boolean", "default": true, "description": "Enable edit link (config.ts/js only)" },
|
||||||
|
"lastUpdated": {
|
||||||
|
"type": ["object", "boolean"],
|
||||||
|
"default": { "formatOptions": { "dateStyle": "short", "timeStyle": "short" } },
|
||||||
|
"properties": {
|
||||||
|
"formatOptions": { "type": "object", "description": "Intl.DateTimeFormatOptions & { forceLocale?: boolean }" }
|
||||||
|
},
|
||||||
|
"description": "Last updated time (config.ts/js only)"
|
||||||
|
},
|
||||||
|
"contributors": { "type": ["boolean", "object"], "default": true, "description": "Show contributors (config.ts/js only)" },
|
||||||
|
"changelog": { "type": ["boolean", "object"], "default": false, "description": "Show page change history (config.ts/js only)" },
|
||||||
|
"home": { "type": ["string", "boolean"], "default": "/", "description": "Home path" },
|
||||||
|
"logo": { "type": ["string", "boolean"], "default": false, "description": "Navbar logo" },
|
||||||
|
"logoDark": { "type": ["string", "boolean"], "default": false, "description": "Navbar logo for dark mode" },
|
||||||
|
"appearance": {
|
||||||
|
"type": ["string", "boolean"],
|
||||||
|
"enum": [true, false, "dark", "force-dark"],
|
||||||
|
"default": true,
|
||||||
|
"description": "Dark mode toggle and default mode"
|
||||||
|
},
|
||||||
|
"profile": {
|
||||||
|
"type": "object",
|
||||||
|
"default": {},
|
||||||
|
"description": "Site profile info",
|
||||||
|
"properties": {
|
||||||
|
"avatar": { "type": "string" },
|
||||||
|
"name": { "type": "string" },
|
||||||
|
"description": { "type": "string" },
|
||||||
|
"circle": { "type": "boolean" },
|
||||||
|
"location": { "type": "string" },
|
||||||
|
"organization": { "type": "string" },
|
||||||
|
"layout": { "type": "string", "enum": ["left", "right"], "default": "right" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"social": {
|
||||||
|
"type": ["array", "boolean"],
|
||||||
|
"default": false,
|
||||||
|
"description": "Social links (Iconify name or custom SVG)",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"icon": { "type": ["string", "object"] },
|
||||||
|
"link": { "type": "string" },
|
||||||
|
"ariaLabel": { "type": "string" }
|
||||||
|
},
|
||||||
|
"required": ["icon", "link"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"navbarSocialInclude": {
|
||||||
|
"type": "array",
|
||||||
|
"default": ["github", "twitter", "discord", "facebook"],
|
||||||
|
"items": { "type": "string" },
|
||||||
|
"description": "Social links allowed to display in navbar (PC)"
|
||||||
|
},
|
||||||
|
"navbar": {
|
||||||
|
"type": "array",
|
||||||
|
"default": [],
|
||||||
|
"description": "Navbar configuration",
|
||||||
|
"items": {
|
||||||
|
"type": ["string", "object"],
|
||||||
|
"properties": {
|
||||||
|
"text": { "type": "string" },
|
||||||
|
"link": { "type": "string" },
|
||||||
|
"prefix": { "type": "string" },
|
||||||
|
"items": { "type": "array" },
|
||||||
|
"icon": { "type": ["string", "object"] },
|
||||||
|
"activeMatch": { "type": "string" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"collections": {
|
||||||
|
"type": "array",
|
||||||
|
"default": [],
|
||||||
|
"description": "Content collections (post/doc)",
|
||||||
|
"items": {
|
||||||
|
"type": "object",
|
||||||
|
"required": ["type", "dir", "title"],
|
||||||
|
"properties": {
|
||||||
|
"type": { "type": "string", "enum": ["post", "doc"] },
|
||||||
|
"dir": { "type": "string" },
|
||||||
|
"title": { "type": "string" },
|
||||||
|
"linkPrefix": { "type": "string" },
|
||||||
|
"tagsTheme": { "type": "string", "enum": ["colored", "gray", "brand"], "default": "colored" },
|
||||||
|
"autoFrontmatter": { "type": ["object", "boolean"] },
|
||||||
|
"include": { "type": "array", "items": { "type": "string" } },
|
||||||
|
"exclude": { "type": "array", "items": { "type": "string" } },
|
||||||
|
"pagination": {
|
||||||
|
"type": ["boolean", "number", "object"],
|
||||||
|
"properties": { "perPage": { "type": "number", "default": 15 } }
|
||||||
|
},
|
||||||
|
"link": { "type": "string" },
|
||||||
|
"postList": { "type": "boolean" },
|
||||||
|
"tags": { "type": "boolean" },
|
||||||
|
"tagsLink": { "type": "string" },
|
||||||
|
"tagsText": { "type": "string" },
|
||||||
|
"archives": { "type": "boolean" },
|
||||||
|
"archivesLink": { "type": "string" },
|
||||||
|
"archivesText": { "type": "string" },
|
||||||
|
"categories": { "type": "boolean" },
|
||||||
|
"categoriesLink": { "type": "string" },
|
||||||
|
"categoriesText": { "type": "string" },
|
||||||
|
"categoriesExpand": { "type": ["number", "string"], "enum": ["deep"] },
|
||||||
|
"postCover": {
|
||||||
|
"type": ["string", "object"],
|
||||||
|
"description": "Layout or style",
|
||||||
|
"properties": {
|
||||||
|
"layout": { "type": "string", "enum": ["left", "right", "odd-left", "odd-right", "top"] },
|
||||||
|
"ratio": { "type": "string" },
|
||||||
|
"width": { "type": "number" },
|
||||||
|
"compact": { "type": "boolean" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"profile": { "type": ["object", "boolean"] },
|
||||||
|
"social": { "type": ["array", "boolean"] },
|
||||||
|
"sidebar": { "type": ["string", "array"], "description": "Doc type only" },
|
||||||
|
"sidebarScrollbar": { "type": "boolean" },
|
||||||
|
"sidebarCollapsed": { "type": "boolean" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sidebar": {
|
||||||
|
"type": ["object", "boolean"],
|
||||||
|
"description": "Global sidebar (prefer configuring in collections)"
|
||||||
|
},
|
||||||
|
"sidebarScrollbar": { "type": "boolean", "default": true },
|
||||||
|
"aside": { "type": ["boolean", "string"], "enum": [true, false, "left"], "default": true },
|
||||||
|
"outline": { "type": ["boolean", "number", "array", "string"], "default": [2, 3], "description": "false|n|[min,max]|'deep'" },
|
||||||
|
"transition": {
|
||||||
|
"type": ["boolean", "object"],
|
||||||
|
"default": true,
|
||||||
|
"properties": { "page": { "type": "boolean", "default": true } }
|
||||||
|
},
|
||||||
|
"locales": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Theme locales (texts and per-locale theme config)",
|
||||||
|
"additionalProperties": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"selectLanguageName": { "type": "string" },
|
||||||
|
"selectLanguageText": { "type": "string" },
|
||||||
|
"selectLanguageAriaLabel": { "type": "string" },
|
||||||
|
"appearanceText": { "type": "string" },
|
||||||
|
"homeText": { "type": "string" },
|
||||||
|
"postsText": { "type": "string" },
|
||||||
|
"tagText": { "type": "string" },
|
||||||
|
"categoryText": { "type": "string" },
|
||||||
|
"archiveText": { "type": "string" },
|
||||||
|
"archiveTotalText": { "type": "string" },
|
||||||
|
"sidebarMenuLabel": { "type": "string" },
|
||||||
|
"returnToTopLabel": { "type": "string" },
|
||||||
|
"outlineLabel": { "type": "string" },
|
||||||
|
"editLinkText": { "type": "string" },
|
||||||
|
"latestUpdatedText": { "type": "string" },
|
||||||
|
"contributorsText": { "type": "string" },
|
||||||
|
"changelogText": { "type": "string" },
|
||||||
|
"changelogOnText": { "type": "string" },
|
||||||
|
"changelogButtonText": { "type": "string" },
|
||||||
|
"copyrightText": { "type": "string" },
|
||||||
|
"copyrightAuthorText": { "type": "string" },
|
||||||
|
"copyrightCreationOriginalText": { "type": "string" },
|
||||||
|
"copyrightCreationTranslateText": { "type": "string" },
|
||||||
|
"copyrightCreationReprintText": { "type": "string" },
|
||||||
|
"copyrightLicenseText": { "type": "string" },
|
||||||
|
"prevPageLabel": { "type": "string" },
|
||||||
|
"nextPageLabel": { "type": "string" },
|
||||||
|
"notFound": {
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"code": { "type": "string" },
|
||||||
|
"title": { "type": "string" },
|
||||||
|
"quote": { "type": "string" },
|
||||||
|
"linkLabel": { "type": "string" },
|
||||||
|
"linkText": { "type": "string" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"collections": { "type": "array" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"plugins": {
|
||||||
|
"type": "object",
|
||||||
|
"description": "Built-in plugin options for the theme (config.ts/js only)"
|
||||||
|
},
|
||||||
|
"markdown": { "type": "object", "description": "Markdown options (config.ts/js only)" },
|
||||||
|
"codeHighlighter": { "type": ["object", "boolean"], "description": "Code highlighter (config.ts/js only)" },
|
||||||
|
"search": { "type": ["object", "boolean"], "description": "Search (config.ts/js only)" },
|
||||||
|
"comment": { "type": ["object", "boolean"], "description": "Comments (config.ts/js only)" },
|
||||||
|
"watermark": { "type": ["object", "boolean"], "description": "Watermark (config.ts/js only)" },
|
||||||
|
"readingTime": { "type": ["object", "boolean"], "description": "Reading time (config.ts/js only)" },
|
||||||
|
"copyCode": { "type": ["object", "boolean"], "description": "Copy code (config.ts/js only)" },
|
||||||
|
"replaceAssets": { "type": ["object", "boolean"], "description": "Replace assets (config.ts/js only)" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Execution Logic
|
||||||
|
|
||||||
|
- Parse input and validate `format` and fields
|
||||||
|
- If `format=plume-config-ts`:
|
||||||
|
- Only write fields supported in `.vuepress/plume.config.ts` (ignore and report fields like `plugins`, `markdown`, `search`, etc.)
|
||||||
|
- Generate `defineThemeConfig({ ...theme })`
|
||||||
|
- If `format=vuepress-config-ts`:
|
||||||
|
- Generate `defineUserConfig({ site..., theme: plumeTheme({ ...theme }) })`
|
||||||
|
- If `format=vuepress-config-js`:
|
||||||
|
- Generate equivalent JavaScript version (remove types and `import type`)
|
||||||
|
- Write generated text to `target_file` (create parent dirs if missing)
|
||||||
|
- Output feedback: path, format, field summary, and ignored fields
|
||||||
|
|
||||||
|
## Templates
|
||||||
|
|
||||||
|
### plume.config.ts
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineThemeConfig } from 'vuepress-theme-plume'
|
||||||
|
|
||||||
|
export default defineThemeConfig({
|
||||||
|
// Supported fields in plume.config.ts: hostname, home, logo, logoDark, appearance, profile, social,
|
||||||
|
// navbarSocialInclude, navbar, collections, sidebar, sidebarScrollbar,
|
||||||
|
// aside, outline, transition, locales, docsRepo/docsBranch/docsDir, autoFrontmatter
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### .vuepress/config.ts
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineUserConfig } from 'vuepress'
|
||||||
|
import { plumeTheme } from 'vuepress-theme-plume'
|
||||||
|
|
||||||
|
export default defineUserConfig({
|
||||||
|
// Optional site-level config: lang, title, description, base, head, locales
|
||||||
|
theme: plumeTheme({
|
||||||
|
// Full theme config available, including plugins/markdown/search/comment etc.
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### .vuepress/config.js
|
||||||
|
|
||||||
|
```js
|
||||||
|
const { defineUserConfig } = require('vuepress')
|
||||||
|
const { plumeTheme } = require('vuepress-theme-plume')
|
||||||
|
|
||||||
|
module.exports = defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
// Same as TS version
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Validation and Hints
|
||||||
|
|
||||||
|
- Check consistency between `format` and `target_file` extension
|
||||||
|
- If `format=plume-config-ts` and input contains `plugins/markdown/codeHighlighter/search/comment/watermark/readingTime/copyCode/replaceAssets/editLink/lastUpdated/contributors/changelog/cache`:
|
||||||
|
- Exclude these fields from output
|
||||||
|
- Report they are only supported in `.vuepress/config.ts`/`.js`
|
||||||
|
- In `collections`, `type` must be `post` or `doc`; `dir` and `title` are required
|
||||||
|
- `navbar` accepts strings (paths) and objects (with `text/link`)
|
||||||
|
- Keys in `locales` should be path prefixes like `'/'`, `'/en/'`, `'/zh/'`
|
||||||
|
|
||||||
|
## Execution Feedback
|
||||||
|
|
||||||
|
- Written file path and format type
|
||||||
|
- Summary of generated fields (collections count, navbar items, locales count)
|
||||||
|
- Ignored fields list with reasons
|
||||||
|
- For cache to take effect, remind removing `--clean-cache` from dev script
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- Theme: [theme.md](https://theme-plume.vuejs.press/config/theme/index.md)
|
||||||
|
- Locales: [locales.md](https://theme-plume.vuejs.press/config/locales/index.md)
|
||||||
|
- Collections: [collections.md](https://theme-plume.vuejs.press/config/collections/index.md)
|
||||||
50
skills/vuepress-plume-markdown/SKILL.md
Normal file
50
skills/vuepress-plume-markdown/SKILL.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
name: vuepress-plume-markdown
|
||||||
|
description: Help users write markdown files with VuePress Plume theme extensions, charts, and embeds.
|
||||||
|
---
|
||||||
|
|
||||||
|
# VuePress Plume Markdown Skill
|
||||||
|
|
||||||
|
This skill provides assistance with VuePress Plume markdown extensions, charts, and embeds.
|
||||||
|
It helps users write rich content using the features provided by the theme.
|
||||||
|
|
||||||
|
## Markdown Extensions
|
||||||
|
|
||||||
|
- [Abbreviation](resources/abbreviation.md) - Define abbreviations with tooltips.
|
||||||
|
- [Annotation](resources/annotation.md) - Add inline annotations.
|
||||||
|
- [Attributes](resources/attrs.md) - Add custom attributes to elements.
|
||||||
|
- [Card](resources/card.md) - Create card-style layouts.
|
||||||
|
- [Chat](resources/chat.md) - Simulate chat conversations.
|
||||||
|
- [Code Tree](resources/code-tree.md) - Display file trees alongside code blocks.
|
||||||
|
- [Collapse](resources/collapse.md) - Create collapsible details/summary blocks.
|
||||||
|
- [Container](resources/container.md) - Custom containers (info, tip, warning, etc.).
|
||||||
|
- [File Tree](resources/file-tree.md) - Display file directory structures.
|
||||||
|
- [Flex](resources/flex.md) - Create flexible column layouts.
|
||||||
|
- [GitHub Alerts](resources/github-alerts.md) - Use GitHub-style alerts.
|
||||||
|
- [Icons](resources/icons.md) - Embed icons from Iconify.
|
||||||
|
- [Include](resources/include.md) - Include content from other files.
|
||||||
|
- [Mark](resources/mark.md) - Highlight text.
|
||||||
|
- [Math](resources/math.md) - Render mathematical formulas using KaTeX.
|
||||||
|
- [NPM To](resources/npm-to.md) - Switch between npm, yarn, pnpm, etc.
|
||||||
|
- [QR Code](resources/qrcode.md) - Generate QR codes.
|
||||||
|
- [Steps](resources/steps.md) - Create step-by-step guides.
|
||||||
|
- [Tabs](resources/tabs.md) - Create tabbed content.
|
||||||
|
- [Timeline](resources/timeline.md) - Create timelines.
|
||||||
|
|
||||||
|
## Charts
|
||||||
|
|
||||||
|
- [Chart.js](resources/chart.md) - Embed Chart.js charts.
|
||||||
|
- [ECharts](resources/echarts.md) - Embed ECharts visualizations.
|
||||||
|
- [Flowchart](resources/flowchart.md) - Create flowcharts.
|
||||||
|
- [Markmap](resources/markmap.md) - Create mind maps.
|
||||||
|
- [Mermaid](resources/mermaid.md) - Create diagrams using Mermaid.
|
||||||
|
- [PlantUML](resources/plantuml.md) - Create UML diagrams.
|
||||||
|
|
||||||
|
## Embeds
|
||||||
|
|
||||||
|
- [AcFun Video](resources/acfun.md) - Embed AcFun videos.
|
||||||
|
- [ArtPlayer](resources/artplayer.md) - Embed custom videos with ArtPlayer.
|
||||||
|
- [Audio Reader](resources/audio-reader.md) - Embed audio clips/pronunciation guides.
|
||||||
|
- [Bilibili Video](resources/bilibili.md) - Embed Bilibili videos.
|
||||||
|
- [PDF Reader](resources/pdf.md) - Embed PDF files.
|
||||||
|
- [YouTube Video](resources/youtube.md) - Embed YouTube videos.
|
||||||
19
skills/vuepress-plume-markdown/resources/abbreviation.md
Normal file
19
skills/vuepress-plume-markdown/resources/abbreviation.md
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
# Abbreviation
|
||||||
|
|
||||||
|
Use `*[Abbreviation]: Description` to define an abbreviation.
|
||||||
|
The definition can be placed anywhere in the document, usually at the bottom.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
```md
|
||||||
|
*[Abbreviation]: Description
|
||||||
|
```
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
The HTML specification is maintained by the W3C.
|
||||||
|
|
||||||
|
*[HTML]: Hyper Text Markup Language
|
||||||
|
*[W3C]: World Wide Web Consortium
|
||||||
|
```
|
||||||
42
skills/vuepress-plume-markdown/resources/acfun.md
Normal file
42
skills/vuepress-plume-markdown/resources/acfun.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# AcFun Video
|
||||||
|
|
||||||
|
Embed AcFun videos in your markdown.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
acfun: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[acfun](id)
|
||||||
|
```
|
||||||
|
|
||||||
|
With options:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[acfun width="100%" height="400px" ratio="16:9"](id)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Parameters:**
|
||||||
|
|
||||||
|
- `id`: Video ID
|
||||||
|
- `width`: Video width
|
||||||
|
- `height`: Video height
|
||||||
|
- `ratio`: Video aspect ratio (default `16:9`)
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[acfun](ac47431669)
|
||||||
|
```
|
||||||
18
skills/vuepress-plume-markdown/resources/annotation.md
Normal file
18
skills/vuepress-plume-markdown/resources/annotation.md
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
# Annotation
|
||||||
|
|
||||||
|
Annotation allows adding extra information or hints that are revealed on click.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
1. **Inline Marker**: `[+label]` (must have a space before `[+`)
|
||||||
|
2. **Definition**: `[+label]: content` (can be multiline with indentation)
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
This site is powered by VuePress [+vuepress].
|
||||||
|
|
||||||
|
[+vuepress]:
|
||||||
|
VuePress is a [Static Site Generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG).
|
||||||
|
It is specifically designed for building fast, content-centric sites.
|
||||||
|
```
|
||||||
60
skills/vuepress-plume-markdown/resources/artplayer.md
Normal file
60
skills/vuepress-plume-markdown/resources/artplayer.md
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
# ArtPlayer Video
|
||||||
|
|
||||||
|
Embed custom source videos using ArtPlayer.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
artPlayer: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
You must install `artplayer`. Additional dependencies may be needed for specific formats:
|
||||||
|
|
||||||
|
- `dashjs` for `.mpd`, `.dash`
|
||||||
|
- `hls.js` for `.m3u8`, `.hls`
|
||||||
|
- `mpegts.js` for `.ts`, `.flv`
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i artplayer
|
||||||
|
# Optional
|
||||||
|
npm i dashjs hls.js mpegts.js
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[artPlayer](src)
|
||||||
|
```
|
||||||
|
|
||||||
|
With options:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[artPlayer muted autoplay loop width="100%" height="400px" ratio="16:9"](src)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Parameters:**
|
||||||
|
|
||||||
|
- `src`: Video source URL
|
||||||
|
- `width`: Video width
|
||||||
|
- `height`: Video height
|
||||||
|
- `ratio`: Video aspect ratio (default `16:9`)
|
||||||
|
- `type`: Video format (auto-detected)
|
||||||
|
- `autoplay`: Enable autoplay
|
||||||
|
- `muted`: Mute video (default `true` if autoplay)
|
||||||
|
- `volume`: Volume (0-1)
|
||||||
|
- `poster`: Poster image URL
|
||||||
|
- `auto-mini`: Auto mini-player on scroll
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[artPlayer](https://example.com/video.mp4)
|
||||||
|
```
|
||||||
43
skills/vuepress-plume-markdown/resources/attrs.md
Normal file
43
skills/vuepress-plume-markdown/resources/attrs.md
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
# Attributes
|
||||||
|
|
||||||
|
Add classes, IDs, and attributes to Markdown elements using `{ }`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
- **Inline**: Place `{.class #id attr=value}` immediately after the element.
|
||||||
|
- **Block**: Place `{.class #id attr=value}` on the line immediately following the block.
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Inline
|
||||||
|
|
||||||
|
```md
|
||||||
|
__bold__{.red}
|
||||||
|
[link](https://example.com){target=_blank}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Headers
|
||||||
|
|
||||||
|
```md
|
||||||
|
## Heading{#custom-id}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Blocks (List/Table)
|
||||||
|
|
||||||
|
```md
|
||||||
|
- list item
|
||||||
|
|
||||||
|
{.red}
|
||||||
|
|
||||||
|
| header |
|
||||||
|
| ------ |
|
||||||
|
| cell |
|
||||||
|
|
||||||
|
{.table-class}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Table Cells (Merge)
|
||||||
|
|
||||||
|
```md
|
||||||
|
| 1 | 2 {colspan=2} |
|
||||||
|
```
|
||||||
55
skills/vuepress-plume-markdown/resources/audio-reader.md
Normal file
55
skills/vuepress-plume-markdown/resources/audio-reader.md
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
# Audio Reader
|
||||||
|
|
||||||
|
Embed a simple audio player button, useful for pronunciation guides.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
audioReader: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Inline syntax:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[audioReader](src)
|
||||||
|
```
|
||||||
|
|
||||||
|
With options:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[audioReader type="audio/mpeg" title="title" autoplay start-time="0" end-time="10" volume="0.7"](src)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Parameters:**
|
||||||
|
|
||||||
|
- `src`: Audio source URL
|
||||||
|
- `type`: Audio MIME type (e.g., `audio/mpeg`)
|
||||||
|
- `title`: Title displayed before the icon
|
||||||
|
- `autoplay`: Enable autoplay
|
||||||
|
- `start-time`: Start time in seconds
|
||||||
|
- `end-time`: End time in seconds
|
||||||
|
- `volume`: Volume (0-1)
|
||||||
|
|
||||||
|
## Global Component
|
||||||
|
|
||||||
|
You can also use the `<AudioReader />` component.
|
||||||
|
|
||||||
|
```md
|
||||||
|
<AudioReader src="/audio/audio.mp3">[ˈɔːdioʊ]</AudioReader>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
audio 美 [ˈɔːdioʊ] @[audioReader](/audio/audio.mp3)
|
||||||
|
```
|
||||||
49
skills/vuepress-plume-markdown/resources/bilibili.md
Normal file
49
skills/vuepress-plume-markdown/resources/bilibili.md
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
# Bilibili Video
|
||||||
|
|
||||||
|
Embed Bilibili videos in your markdown.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
bilibili: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Simple syntax (using BVID):
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[bilibili](bvid)
|
||||||
|
```
|
||||||
|
|
||||||
|
With options:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[bilibili p1 autoplay time="0" width="100%" height="400px" ratio="16:9"](bvid aid cid)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Parameters:**
|
||||||
|
|
||||||
|
- `bvid`: Video BV ID (can be omitted if `aid` and `cid` are provided)
|
||||||
|
- `aid`: Video AID
|
||||||
|
- `cid`: Video CID
|
||||||
|
- `pX`: Page number (e.g., `p1`, `p2`)
|
||||||
|
- `autoplay`: Enable autoplay
|
||||||
|
- `time`: Start time (seconds or `mm:ss` / `hh:mm:ss`)
|
||||||
|
- `width`: Video width
|
||||||
|
- `height`: Video height
|
||||||
|
- `ratio`: Video aspect ratio (default `16:9`)
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[bilibili](BV1EZ42187Hg)
|
||||||
|
```
|
||||||
30
skills/vuepress-plume-markdown/resources/card.md
Normal file
30
skills/vuepress-plume-markdown/resources/card.md
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
# Card
|
||||||
|
|
||||||
|
Create highlighted content cards using `::: card`. Wrap multiple cards in `:::: card-grid` for layout.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: card title="Title" icon="icon-name"
|
||||||
|
Content
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
- `title`: String, card title.
|
||||||
|
- `icon`: String, iconify name or image URL.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
:::: card-grid
|
||||||
|
::: card title="Feature A" icon="mdi:star"
|
||||||
|
Description of feature A.
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: card title="Feature B" icon="mdi:check"
|
||||||
|
Description of feature B.
|
||||||
|
:::
|
||||||
|
::::
|
||||||
|
```
|
||||||
68
skills/vuepress-plume-markdown/resources/chart.md
Normal file
68
skills/vuepress-plume-markdown/resources/chart.md
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
# Chart.js
|
||||||
|
|
||||||
|
The theme supports embedding [chart.js] charts within articles.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
chartjs: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
You also need to install the `chart.js` library:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install chart.js
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Use the `chartjs` container with a JSON code block:
|
||||||
|
|
||||||
|
````md
|
||||||
|
::: chartjs Title
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"type": "bar",
|
||||||
|
"data": {
|
||||||
|
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||||
|
"datasets": [{
|
||||||
|
"label": "# of Votes",
|
||||||
|
"data": [12, 19, 3, 5, 2, 3],
|
||||||
|
"backgroundColor": [
|
||||||
|
"rgba(255, 99, 132, 0.2)",
|
||||||
|
"rgba(54, 162, 235, 0.2)",
|
||||||
|
"rgba(255, 206, 86, 0.2)",
|
||||||
|
"rgba(75, 192, 192, 0.2)",
|
||||||
|
"rgba(153, 102, 255, 0.2)",
|
||||||
|
"rgba(255, 159, 64, 0.2)"
|
||||||
|
],
|
||||||
|
"borderColor": [
|
||||||
|
"rgba(255, 99, 132, 1)",
|
||||||
|
"rgba(54, 162, 235, 1)",
|
||||||
|
"rgba(255, 206, 86, 1)",
|
||||||
|
"rgba(75, 192, 192, 1)",
|
||||||
|
"rgba(153, 102, 255, 1)",
|
||||||
|
"rgba(255, 159, 64, 1)"
|
||||||
|
],
|
||||||
|
"borderWidth": 1
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
"options": {
|
||||||
|
"scales": {
|
||||||
|
"y": {
|
||||||
|
"beginAtZero": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
````
|
||||||
27
skills/vuepress-plume-markdown/resources/chat.md
Normal file
27
skills/vuepress-plume-markdown/resources/chat.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# Chat
|
||||||
|
|
||||||
|
Display chat records using `::: chat` container.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
- Container: `::: chat title="Title"`
|
||||||
|
- Timestamp: `{:timestamp}`
|
||||||
|
- Other User: `{username}`
|
||||||
|
- Current User: `{.}`
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: chat title="Conversation"
|
||||||
|
{:2023-10-01 12:00}
|
||||||
|
|
||||||
|
{Alice}
|
||||||
|
Hello there!
|
||||||
|
|
||||||
|
{.}
|
||||||
|
Hi Alice! How are you?
|
||||||
|
|
||||||
|
{Alice}
|
||||||
|
I'm good, thanks.
|
||||||
|
:::
|
||||||
|
```
|
||||||
26
skills/vuepress-plume-markdown/resources/code-tree.md
Normal file
26
skills/vuepress-plume-markdown/resources/code-tree.md
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
# Code Tree
|
||||||
|
|
||||||
|
Display a file tree alongside code blocks.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
````md
|
||||||
|
::: code-tree title="Project Name" height="400px" entry="src/main.ts"
|
||||||
|
```lang title="src/main.ts"
|
||||||
|
// code
|
||||||
|
```
|
||||||
|
|
||||||
|
```lang title="package.json"
|
||||||
|
// code
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
````
|
||||||
|
|
||||||
|
- `entry`: Default expanded file path.
|
||||||
|
- `title` on code blocks: Defines the file path in the tree.
|
||||||
|
|
||||||
|
## Import from Directory
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[code-tree](dir_path)
|
||||||
|
```
|
||||||
32
skills/vuepress-plume-markdown/resources/collapse.md
Normal file
32
skills/vuepress-plume-markdown/resources/collapse.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
# Collapse
|
||||||
|
|
||||||
|
Create collapsible panels using `::: collapse`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: collapse [accordion] [expand]
|
||||||
|
- Title 1
|
||||||
|
Content 1
|
||||||
|
|
||||||
|
- Title 2
|
||||||
|
Content 2
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
- `accordion`: Only one panel expanded at a time.
|
||||||
|
- `expand`: Expand all by default.
|
||||||
|
- `:+ Title`: Mark specific item as expanded.
|
||||||
|
- `:- Title`: Mark specific item as collapsed.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: collapse accordion
|
||||||
|
- Panel 1
|
||||||
|
Content 1
|
||||||
|
|
||||||
|
- :+ Panel 2 (Initially Expanded)
|
||||||
|
Content 2
|
||||||
|
:::
|
||||||
|
```
|
||||||
32
skills/vuepress-plume-markdown/resources/container.md
Normal file
32
skills/vuepress-plume-markdown/resources/container.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
# Containers
|
||||||
|
|
||||||
|
Use `::: type [title]` to create alert boxes or collapsible details.
|
||||||
|
|
||||||
|
## Supported Types
|
||||||
|
|
||||||
|
- `note`, `info`, `tip`, `warning`, `caution` (Alerts)
|
||||||
|
- `details` (Collapsible)
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: type [Optional Title]
|
||||||
|
Content
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: tip
|
||||||
|
This is a tip.
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: warning CAUTION
|
||||||
|
Custom title for warning.
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: details Click to expand
|
||||||
|
Hidden content.
|
||||||
|
:::
|
||||||
|
```
|
||||||
73
skills/vuepress-plume-markdown/resources/echarts.md
Normal file
73
skills/vuepress-plume-markdown/resources/echarts.md
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
# ECharts
|
||||||
|
|
||||||
|
The theme supports embedding [ECharts](https://echarts.apache.org/zh/index.html) charts within articles.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
echarts: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
You also need to install the `echarts` library:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install echarts
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
### JSON Configuration
|
||||||
|
|
||||||
|
````md
|
||||||
|
::: echarts Title
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"xAxis": {
|
||||||
|
"type": "category",
|
||||||
|
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
|
||||||
|
},
|
||||||
|
"yAxis": {
|
||||||
|
"type": "value"
|
||||||
|
},
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"data": [150, 230, 224, 218, 135, 147, 260],
|
||||||
|
"type": "line"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
````
|
||||||
|
|
||||||
|
### JavaScript Configuration
|
||||||
|
|
||||||
|
````md
|
||||||
|
::: echarts Title
|
||||||
|
```js
|
||||||
|
const option = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [150, 230, 224, 218, 135, 147, 260],
|
||||||
|
type: 'line'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
````
|
||||||
27
skills/vuepress-plume-markdown/resources/file-tree.md
Normal file
27
skills/vuepress-plume-markdown/resources/file-tree.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# File Tree
|
||||||
|
|
||||||
|
Display directory structure using `::: file-tree`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Use unordered lists.
|
||||||
|
|
||||||
|
- `++`: Added file/dir.
|
||||||
|
- `--`: Deleted file/dir.
|
||||||
|
- `**name**`: Bold name.
|
||||||
|
- `/` at end of dir name: Hide contents (if not listed).
|
||||||
|
- `...` or `…`: Placeholder.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: file-tree title="Structure" icon="simple"
|
||||||
|
- root
|
||||||
|
- .vuepress
|
||||||
|
- ++ config.ts
|
||||||
|
- -- old-file.md
|
||||||
|
- src/
|
||||||
|
- README.md
|
||||||
|
- ...
|
||||||
|
:::
|
||||||
|
```
|
||||||
29
skills/vuepress-plume-markdown/resources/flex.md
Normal file
29
skills/vuepress-plume-markdown/resources/flex.md
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
# Flex Container
|
||||||
|
|
||||||
|
Apply Flexbox layout using `::: flex`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: flex [justify] [align] [gap="20"] [column]
|
||||||
|
Block 1
|
||||||
|
|
||||||
|
Block 2
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
- Justify: `center`, `between`, `around`
|
||||||
|
- Align: `start`, `center`, `end`
|
||||||
|
- `column`: Vertical direction.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: flex between center
|
||||||
|
| Table 1 |
|
||||||
|
| ------- |
|
||||||
|
|
||||||
|
| Table 2 |
|
||||||
|
| ------- |
|
||||||
|
:::
|
||||||
|
```
|
||||||
46
skills/vuepress-plume-markdown/resources/flowchart.md
Normal file
46
skills/vuepress-plume-markdown/resources/flowchart.md
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
# Flowchart
|
||||||
|
|
||||||
|
The theme supports embedding [flowchart](http://flowchart.js.org/) diagrams within articles.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
flowchart: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
You also need to install the `flowchart.ts` library:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install flowchart.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Use the `flow` code block with an optional preset (default `vue`, `ant`, `pie`).
|
||||||
|
|
||||||
|
````md
|
||||||
|
```flow:preset
|
||||||
|
st=>start: Start|past:>http://www.google.com[blank]
|
||||||
|
e=>end: End|future:>http://www.google.com
|
||||||
|
op1=>operation: Operation 1|past
|
||||||
|
op2=>operation: Operation 2|current
|
||||||
|
sub1=>subroutine: Subroutine|invalid
|
||||||
|
cond=>condition: Yes/No?|approved:>http://www.google.com
|
||||||
|
c2=>condition: Condition 2|rejected
|
||||||
|
io=>inputoutput: Process input...|future
|
||||||
|
|
||||||
|
st->op1(right)->cond
|
||||||
|
cond(yes, right)->c2
|
||||||
|
cond(no)->sub1(left)->op1
|
||||||
|
c2(yes)->io->e
|
||||||
|
c2(no)->op2->e
|
||||||
|
```
|
||||||
|
````
|
||||||
22
skills/vuepress-plume-markdown/resources/github-alerts.md
Normal file
22
skills/vuepress-plume-markdown/resources/github-alerts.md
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
# GitHub Alerts
|
||||||
|
|
||||||
|
Use GitHub-style alerts.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
```md
|
||||||
|
> [!NOTE]
|
||||||
|
> Note content.
|
||||||
|
|
||||||
|
> [!TIP]
|
||||||
|
> Tip content.
|
||||||
|
|
||||||
|
> [!IMPORTANT]
|
||||||
|
> Important content.
|
||||||
|
|
||||||
|
> [!WARNING]
|
||||||
|
> Warning content.
|
||||||
|
|
||||||
|
> [!CAUTION]
|
||||||
|
> Caution content.
|
||||||
|
```
|
||||||
17
skills/vuepress-plume-markdown/resources/icons.md
Normal file
17
skills/vuepress-plume-markdown/resources/icons.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# Icons
|
||||||
|
|
||||||
|
Insert icons using `::name::`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
- Basic: `::name::` (e.g. `::mdi:home::`)
|
||||||
|
- Size: `::name =size::` (e.g. `::mdi:home =24px::`)
|
||||||
|
- Color: `::name /color::` (e.g. `::mdi:home /#f00::`)
|
||||||
|
- Collection: `::collection:name::` (e.g. `::mdi:home::`)
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
::mdi:home::
|
||||||
|
::mdi:home =24px /#ff0000::
|
||||||
|
```
|
||||||
21
skills/vuepress-plume-markdown/resources/include.md
Normal file
21
skills/vuepress-plume-markdown/resources/include.md
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
# File Include
|
||||||
|
|
||||||
|
Include content from other files.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
```md
|
||||||
|
<!-- @include: filename -->
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Lines**: `<!-- @include: filename{1-10} -->`
|
||||||
|
- **Region**: `<!-- @include: filename#region-name -->`
|
||||||
|
- In source file: `<!-- region region-name -->` ... `<!-- endregion region-name -->`
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
<!-- @include: ./snippet.md -->
|
||||||
|
<!-- @include: ./snippet.md{1-5} -->
|
||||||
|
<!-- @include: ./snippet.md#snippet-name -->
|
||||||
|
```
|
||||||
19
skills/vuepress-plume-markdown/resources/mark.md
Normal file
19
skills/vuepress-plume-markdown/resources/mark.md
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
# Mark
|
||||||
|
|
||||||
|
Highlight text using `==text==`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
- **Basic**: `==text==`
|
||||||
|
- **Custom Color**: `==text=={.class}`
|
||||||
|
|
||||||
|
## Built-in Classes
|
||||||
|
|
||||||
|
`info`, `note`, `tip`, `warning`, `danger`, `caution`, `important`.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
This is ==highlighted==.
|
||||||
|
This is ==warning=={.warning}.
|
||||||
|
```
|
||||||
57
skills/vuepress-plume-markdown/resources/markmap.md
Normal file
57
skills/vuepress-plume-markdown/resources/markmap.md
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
# Markmap
|
||||||
|
|
||||||
|
The theme supports embedding [markmap](https://markmap.js.org/) mind maps within articles.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
markmap: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
You also need to install `markmap-lib`, `markmap-toolbar`, and `markmap-view`:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i markmap-lib markmap-toolbar markmap-view
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Use the `markmap` code block. Frontmatter configuration is supported within the block.
|
||||||
|
|
||||||
|
````md
|
||||||
|
```markmap
|
||||||
|
---
|
||||||
|
markmap:
|
||||||
|
colorFreezeLevel: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
# markmap
|
||||||
|
|
||||||
|
## Links
|
||||||
|
|
||||||
|
- <https://markmap.js.org/>
|
||||||
|
- [GitHub](https://github.com/markmap/markmap)
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Links
|
||||||
|
- **Strong** ~~Strikethrough~~ *Italic* ==Highlight==
|
||||||
|
- Multi-line
|
||||||
|
text
|
||||||
|
- `Inline code`
|
||||||
|
-
|
||||||
|
```js
|
||||||
|
console.log('code block');
|
||||||
|
```
|
||||||
|
- Katex
|
||||||
|
- $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
|
||||||
|
```
|
||||||
|
````
|
||||||
19
skills/vuepress-plume-markdown/resources/math.md
Normal file
19
skills/vuepress-plume-markdown/resources/math.md
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
# Math
|
||||||
|
|
||||||
|
Render mathematical formulas.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
- **Inline**: `$formula$`
|
||||||
|
- **Block**: `$$formula$$`
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
Inline: $E=mc^2$
|
||||||
|
|
||||||
|
Block:
|
||||||
|
$$
|
||||||
|
\sum_{i=1}^n i = \frac{n(n+1)}{2}
|
||||||
|
$$
|
||||||
|
```
|
||||||
68
skills/vuepress-plume-markdown/resources/mermaid.md
Normal file
68
skills/vuepress-plume-markdown/resources/mermaid.md
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
# Mermaid
|
||||||
|
|
||||||
|
The theme supports embedding diagrams generated by [Mermaid](https://mermaid.js.org/) within articles.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
mermaid: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
You also need to install the `mermaid` library:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install mermaid
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Use the `mermaid` code block or specific diagram type code blocks (e.g., `sequence`, `class`, `flow`, etc.).
|
||||||
|
|
||||||
|
````md
|
||||||
|
```mermaid
|
||||||
|
flowchart TD
|
||||||
|
A[Start] --> B{Is it?}
|
||||||
|
B -- Yes --> C[OK]
|
||||||
|
C --> D[Rethink]
|
||||||
|
D --> B
|
||||||
|
B -- No --> E[End]
|
||||||
|
```
|
||||||
|
````
|
||||||
|
|
||||||
|
### Supported Diagram Types
|
||||||
|
|
||||||
|
You can use these aliases directly:
|
||||||
|
|
||||||
|
- `class` -> `classDiagram`
|
||||||
|
- `c4c` -> `C4Context`
|
||||||
|
- `er` -> `erDiagram`
|
||||||
|
- `gantt` -> `gantt`
|
||||||
|
- `git-graph` -> `gitGraph`
|
||||||
|
- `journey` -> `journey`
|
||||||
|
- `mindmap` -> `mindmap`
|
||||||
|
- `pie` -> `pie`
|
||||||
|
- `quadrant` -> `quadrantChart`
|
||||||
|
- `requirement` -> `requirementDiagram`
|
||||||
|
- `sankey` -> `sankey-beta`
|
||||||
|
- `sequence` -> `sequenceDiagram`
|
||||||
|
- `state` -> `stateDiagram-v2`
|
||||||
|
- `timeline` -> `timeline`
|
||||||
|
- `xy` -> `xychart-beta`
|
||||||
|
|
||||||
|
Example with title:
|
||||||
|
|
||||||
|
````md
|
||||||
|
```sequence Diagram Title
|
||||||
|
Alice->>John: Hello John, how are you?
|
||||||
|
John-->>Alice: Great!
|
||||||
|
Alice-)John: See you later!
|
||||||
|
```
|
||||||
|
````
|
||||||
19
skills/vuepress-plume-markdown/resources/npm-to.md
Normal file
19
skills/vuepress-plume-markdown/resources/npm-to.md
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
# Npm To
|
||||||
|
|
||||||
|
Convert `npm` commands to `pnpm`, `yarn`, `bun`, `deno`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Wrap an `npm` code block in `::: npm-to`.
|
||||||
|
|
||||||
|
````md
|
||||||
|
::: npm-to
|
||||||
|
```sh
|
||||||
|
npm install vuepress
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
````
|
||||||
|
|
||||||
|
## Supported Commands
|
||||||
|
|
||||||
|
`install`, `run`, `init`, `create`, `uninstall`, `ci`, `npx`.
|
||||||
47
skills/vuepress-plume-markdown/resources/pdf.md
Normal file
47
skills/vuepress-plume-markdown/resources/pdf.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
# PDF Reader
|
||||||
|
|
||||||
|
Embed PDF files directly in your markdown.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
pdf: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Simple syntax:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[pdf](url)
|
||||||
|
```
|
||||||
|
|
||||||
|
With options:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[pdf 2 no-toolbar width="100%" height="400px" ratio="16:9" zoom="100"](url)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Parameters:**
|
||||||
|
|
||||||
|
- `url`: PDF URL
|
||||||
|
- `page`: Page number (e.g., `2` in `@[pdf 2]`)
|
||||||
|
- `no-toolbar`: Hide the toolbar
|
||||||
|
- `width`: Width (default `100%`)
|
||||||
|
- `height`: Height (default `auto`)
|
||||||
|
- `ratio`: Aspect ratio (default `16:9` if height not set)
|
||||||
|
- `zoom`: Zoom level percentage
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[pdf 2 no-toolbar](https://plume.pengzhanbo.cn/files/sample.pdf)
|
||||||
|
```
|
||||||
50
skills/vuepress-plume-markdown/resources/plantuml.md
Normal file
50
skills/vuepress-plume-markdown/resources/plantuml.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
# PlantUML
|
||||||
|
|
||||||
|
The theme supports embedding [PlantUML](https://plantuml.com/) diagrams within articles.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
plantuml: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Use the `plantuml` syntax within a markdown file. Note: The example uses a raw code block,
|
||||||
|
but typically you would use the `@startuml` and `@enduml` tags directly or inside a code block if the plugin supports it.
|
||||||
|
The documentation shows:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@startuml
|
||||||
|
Alice -> Bob: Authentication Request
|
||||||
|
|
||||||
|
alt successful case
|
||||||
|
|
||||||
|
Bob -> Alice: Authentication Accepted
|
||||||
|
|
||||||
|
else some failure case
|
||||||
|
|
||||||
|
Bob -> Alice: Authentication Failed
|
||||||
|
group My own label
|
||||||
|
Alice -> Log : Log attack start
|
||||||
|
loop 1000 times
|
||||||
|
Alice -> Bob: DNS Attack
|
||||||
|
end
|
||||||
|
Alice -> Log : Log attack end
|
||||||
|
end
|
||||||
|
|
||||||
|
else Another failure
|
||||||
|
|
||||||
|
Bob -> Alice: Please repeat
|
||||||
|
|
||||||
|
end
|
||||||
|
@enduml
|
||||||
|
```
|
||||||
28
skills/vuepress-plume-markdown/resources/qrcode.md
Normal file
28
skills/vuepress-plume-markdown/resources/qrcode.md
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
# QR Code
|
||||||
|
|
||||||
|
Generate QR codes from text.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
- **Inline**: `@[qrcode](text)`
|
||||||
|
- **Container**:
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: qrcode [card] [title="..."]
|
||||||
|
text
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
`card`, `svg`, `title="name"`, `align="center"`.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[qrcode](https://example.com)
|
||||||
|
|
||||||
|
::: qrcode card title="Scan Me"
|
||||||
|
https://example.com
|
||||||
|
:::
|
||||||
|
```
|
||||||
17
skills/vuepress-plume-markdown/resources/steps.md
Normal file
17
skills/vuepress-plume-markdown/resources/steps.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# Steps
|
||||||
|
|
||||||
|
Display sequential steps using `::: steps`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Use ordered or unordered lists inside.
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: steps
|
||||||
|
1. Step 1
|
||||||
|
Content for step 1.
|
||||||
|
|
||||||
|
2. Step 2
|
||||||
|
Content for step 2.
|
||||||
|
:::
|
||||||
|
```
|
||||||
25
skills/vuepress-plume-markdown/resources/tabs.md
Normal file
25
skills/vuepress-plume-markdown/resources/tabs.md
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
# Tabs
|
||||||
|
|
||||||
|
Create tabbed content using `::: tabs`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
- `::: tabs[#id]`: Container.
|
||||||
|
- `@tab Title`: Tab separator.
|
||||||
|
- `@tab:active Title`: Default active tab.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
````md
|
||||||
|
::: tabs
|
||||||
|
@tab npm
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
@tab:active pnpm
|
||||||
|
```sh
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
````
|
||||||
24
skills/vuepress-plume-markdown/resources/timeline.md
Normal file
24
skills/vuepress-plume-markdown/resources/timeline.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Timeline
|
||||||
|
|
||||||
|
Create a timeline using `::: timeline`.
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
- Container config: `horizontal`, `card`, `line="style"`, `placement="right|between"`.
|
||||||
|
- Item config (line after title): `time="date"`, `type="info|success|..."`, `icon=""`.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: timeline
|
||||||
|
- Event 1
|
||||||
|
time=2023-01-01 type=success
|
||||||
|
|
||||||
|
Content 1
|
||||||
|
|
||||||
|
- Event 2
|
||||||
|
time=2023-02-01 type=warning icon=mdi:alert
|
||||||
|
|
||||||
|
Content 2
|
||||||
|
:::
|
||||||
|
```
|
||||||
48
skills/vuepress-plume-markdown/resources/youtube.md
Normal file
48
skills/vuepress-plume-markdown/resources/youtube.md
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
# YouTube Video
|
||||||
|
|
||||||
|
Embed YouTube videos in your markdown.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
Enable the feature in `.vuepress/config.ts`:
|
||||||
|
|
||||||
|
```ts title=".vuepress/config.ts"
|
||||||
|
export default defineUserConfig({
|
||||||
|
theme: plumeTheme({
|
||||||
|
markdown: {
|
||||||
|
youtube: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Syntax
|
||||||
|
|
||||||
|
Simple syntax:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[youtube](id)
|
||||||
|
```
|
||||||
|
|
||||||
|
With options:
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[youtube autoplay loop start="0" end="0" width="100%" height="400px" ratio="16:9"](id)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Parameters:**
|
||||||
|
|
||||||
|
- `id`: Video ID
|
||||||
|
- `autoplay`: Enable autoplay
|
||||||
|
- `loop`: Enable loop playback
|
||||||
|
- `start`: Start time
|
||||||
|
- `end`: End time
|
||||||
|
- `width`: Video width
|
||||||
|
- `height`: Video height
|
||||||
|
- `ratio`: Video aspect ratio (default `16:9`)
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```md
|
||||||
|
@[youtube](0JJPfz5dg20)
|
||||||
|
```
|
||||||
Loading…
x
Reference in New Issue
Block a user