diff --git a/skills/vuepress-plume-config/SKILL.md b/skills/vuepress-plume-config/SKILL.md
index 95fbe896..0e27deb9 100644
--- a/skills/vuepress-plume-config/SKILL.md
+++ b/skills/vuepress-plume-config/SKILL.md
@@ -1,6 +1,6 @@
---
name: vuepress-plume-config
-description: Generate and write VuePress Plume theme config. Invoke when user asks to init or update theme config.
+description: Generate and write VuePress Plume theme config. Invoke when user asks to init or update theme config, including collections, navbar, sidebar, locales, plugins, and all theme features like search, comments, watermark, encryption, bulletin, copyright, etc.
---
# VuePress Plume Config Skill
@@ -10,18 +10,24 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
**When to Invoke**
- Initialize or update Plume theme configuration
-- Dynamically generate themeConfig, collections, navbar, sidebar, locales according to input
+- Configure collections (post/doc types), navbar, sidebar, locales
+- Setup plugins (search, comments, watermark, etc.)
+- Configure encryption, bulletin, copyright, and other advanced features
- 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)
+- [Theme Configuration](https://theme-plume.vuejs.press/config/theme/)
+- [Locales Configuration](https://theme-plume.vuejs.press/config/locales/)
+- [Collections Configuration](https://theme-plume.vuejs.press/config/collections/)
+- [Navbar](https://theme-plume.vuejs.press/config/navigation/)
+- [Sidebar](https://theme-plume.vuejs.press/config/sidebar/)
+- [Markdown](https://theme-plume.vuejs.press/config/markdown/)
+- [Plugins](https://theme-plume.vuejs.press/config/plugins/)
+- [Frontmatter - Basic](https://theme-plume.vuejs.press/config/frontmatter/basic/)
+- [Frontmatter - Post](https://theme-plume.vuejs.press/config/frontmatter/post/)
+- [Frontmatter - Home](https://theme-plume.vuejs.press/config/frontmatter/home/)
+- [Frontmatter - Friend](https://theme-plume.vuejs.press/config/frontmatter/friend/)
## Input Schema
@@ -43,7 +49,7 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"type": "object",
"description": "VuePress site-level config (config.ts/js only)",
"properties": {
- "lang": { "type": "string", "description": "Default language" },
+ "lang": { "type": "string", "description": "Default language, e.g., 'zh-CN', 'en-US'", "default": "zh-CN" },
"title": { "type": "string", "description": "Site title" },
"description": { "type": "string", "description": "Site description" },
"base": { "type": "string", "description": "Deployment base path like /subpath/" },
@@ -66,12 +72,13 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"type": "object",
"description": "Plume theme configuration (themeConfig)",
"properties": {
- "hostname": { "type": "string", "default": "", "description": "Deployment hostname (for sitemap/SEO)" },
+ "hostname": { "type": "string", "default": "", "description": "Deployment hostname (for sitemap/SEO). Not supported in plume.config.ts" },
+ "configFile": { "type": "string", "default": "", "description": "Custom theme config file path. Not supported in plume.config.ts" },
"autoFrontmatter": {
"type": ["object", "boolean"],
"default": { "permalink": true, "createTime": true, "title": true },
"properties": {
- "permalink": { "type": "boolean", "default": true },
+ "permalink": { "type": ["boolean", "string"], "default": true, "description": "true|false|'filepath'" },
"createTime": { "type": "boolean", "default": true },
"title": { "type": "boolean", "default": true }
},
@@ -81,22 +88,23 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"type": ["string", "boolean"],
"enum": ["memory", "filesystem", false],
"default": "filesystem",
- "description": "Compilation cache (config.ts/js only)"
+ "description": "Compilation cache: 'memory', 'filesystem', or false. Not supported in plume.config.ts"
},
- "docsRepo": { "type": "string", "default": "", "description": "Docs repository url" },
+ "docsRepo": { "type": "string", "default": "", "description": "Docs repository url for edit link" },
"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)" },
+ "editLink": { "type": "boolean", "default": true, "description": "Enable edit link. Not supported in plume.config.ts" },
+ "editLinkPattern": { "type": "string", "default": "", "description": "Edit link pattern, e.g., ':repo/edit/:branch/:path'" },
"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)"
+ "description": "Last updated time. Not supported in plume.config.ts"
},
- "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)" },
+ "contributors": { "type": ["boolean", "object"], "default": true, "description": "Show contributors. Not supported in plume.config.ts" },
+ "changelog": { "type": ["boolean", "object"], "default": false, "description": "Show page change history. Not supported in plume.config.ts" },
"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" },
@@ -104,19 +112,19 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"type": ["string", "boolean"],
"enum": [true, false, "dark", "force-dark"],
"default": true,
- "description": "Dark mode toggle and default mode"
+ "description": "Dark mode: true (auto), false (disabled), 'dark' (default dark), 'force-dark' (forced dark)"
},
"profile": {
"type": "object",
"default": {},
- "description": "Site profile info",
+ "description": "Site profile info for blogger display",
"properties": {
- "avatar": { "type": "string" },
- "name": { "type": "string" },
- "description": { "type": "string" },
- "circle": { "type": "boolean" },
- "location": { "type": "string" },
- "organization": { "type": "string" },
+ "avatar": { "type": "string", "description": "Avatar URL" },
+ "name": { "type": "string", "description": "Blogger name" },
+ "description": { "type": "string", "description": "Description/motto" },
+ "circle": { "type": "boolean", "description": "Circle avatar" },
+ "location": { "type": "string", "description": "User location" },
+ "organization": { "type": "string", "description": "User organization/company" },
"layout": { "type": "string", "enum": ["left", "right"], "default": "right" }
}
},
@@ -127,7 +135,7 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"items": {
"type": "object",
"properties": {
- "icon": { "type": ["string", "object"] },
+ "icon": { "type": ["string", "object"], "description": "Iconify name or { svg: string, name?: string }" },
"link": { "type": "string" },
"ariaLabel": { "type": "string" }
},
@@ -138,7 +146,7 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"type": "array",
"default": ["github", "twitter", "discord", "facebook"],
"items": { "type": "string" },
- "description": "Social links allowed to display in navbar (PC)"
+ "description": "Social links allowed to display in navbar (PC only)"
},
"navbar": {
"type": "array",
@@ -149,10 +157,11 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"properties": {
"text": { "type": "string" },
"link": { "type": "string" },
- "prefix": { "type": "string" },
- "items": { "type": "array" },
- "icon": { "type": ["string", "object"] },
- "activeMatch": { "type": "string" }
+ "prefix": { "type": "string", "description": "Page prefix for group" },
+ "items": { "type": "array", "description": "Nested nav items (max depth 2)" },
+ "icon": { "type": ["string", "object"], "description": "Iconify icon or { svg: string }" },
+ "badge": { "type": ["string", "object"], "description": "Badge text or { text, type, color, bgColor, borderColor }" },
+ "activeMatch": { "type": "string", "description": "Regex pattern for active state" }
}
}
},
@@ -164,45 +173,46 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"type": "object",
"required": ["type", "dir", "title"],
"properties": {
- "type": { "type": "string", "enum": ["post", "doc"] },
- "dir": { "type": "string" },
- "title": { "type": "string" },
- "linkPrefix": { "type": "string" },
+ "type": { "type": "string", "enum": ["post", "doc"], "description": "Collection type" },
+ "dir": { "type": "string", "description": "Directory relative to source" },
+ "title": { "type": "string", "description": "Collection title for breadcrumb" },
+ "linkPrefix": { "type": "string", "description": "Article link prefix" },
"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" } },
+ "include": { "type": "array", "items": { "type": "string" }, "description": "Glob patterns for included files" },
+ "exclude": { "type": "array", "items": { "type": "string" }, "description": "Glob patterns for excluded files" },
"pagination": {
"type": ["boolean", "number", "object"],
"properties": { "perPage": { "type": "number", "default": 15 } }
},
- "link": { "type": "string" },
- "postList": { "type": "boolean" },
- "tags": { "type": "boolean" },
+ "link": { "type": "string", "description": "Post list page link" },
+ "postList": { "type": "boolean", "default": true, "description": "Enable post list page (post type only)" },
+ "tags": { "type": "boolean", "default": true, "description": "Enable tags page (post type only)" },
"tagsLink": { "type": "string" },
"tagsText": { "type": "string" },
- "archives": { "type": "boolean" },
+ "archives": { "type": "boolean", "default": true, "description": "Enable archives page (post type only)" },
"archivesLink": { "type": "string" },
"archivesText": { "type": "string" },
- "categories": { "type": "boolean" },
+ "categories": { "type": "boolean", "default": true, "description": "Enable categories (post type only)" },
"categoriesLink": { "type": "string" },
"categoriesText": { "type": "string" },
- "categoriesExpand": { "type": ["number", "string"], "enum": ["deep"] },
+ "categoriesExpand": { "type": ["number", "string"], "enum": ["deep"], "default": "deep" },
+ "categoriesTransform": { "type": "string", "description": "Function name for categories transform" },
"postCover": {
"type": ["string", "object"],
- "description": "Layout or style",
+ "description": "Post cover layout/style",
"properties": {
"layout": { "type": "string", "enum": ["left", "right", "odd-left", "odd-right", "top"] },
- "ratio": { "type": "string" },
- "width": { "type": "number" },
- "compact": { "type": "boolean" }
+ "ratio": { "type": ["number", "string"], "description": "Aspect ratio like '16:9' or number" },
+ "width": { "type": "number", "default": 240 },
+ "compact": { "type": "boolean", "default": false }
}
},
- "profile": { "type": ["object", "boolean"] },
- "social": { "type": ["array", "boolean"] },
- "sidebar": { "type": ["string", "array"], "description": "Doc type only" },
- "sidebarScrollbar": { "type": "boolean" },
- "sidebarCollapsed": { "type": "boolean" }
+ "profile": { "type": ["object", "boolean"], "description": "Profile config for this collection" },
+ "social": { "type": ["array", "boolean"], "description": "Social links for this collection" },
+ "sidebar": { "type": ["string", "array"], "description": "Doc type only: 'auto' or sidebar config" },
+ "sidebarScrollbar": { "type": "boolean", "default": true },
+ "sidebarCollapsed": { "type": "boolean", "default": false }
}
}
},
@@ -211,13 +221,55 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"description": "Global sidebar (prefer configuring in collections)"
},
"sidebarScrollbar": { "type": "boolean", "default": true },
- "aside": { "type": ["boolean", "string"], "enum": [true, false, "left"], "default": true },
+ "aside": { "type": ["boolean", "string"], "enum": [true, false, "left"], "default": true, "description": "Right sidebar/outline display" },
"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 } }
+ "properties": {
+ "page": { "type": "boolean", "default": true, "description": "Page transition animation" },
+ "postList": { "type": "boolean", "default": true, "description": "Post list transition animation" },
+ "appearance": { "type": ["boolean", "string"], "default": "fade", "description": "Theme switch animation: fade, circle-clip, horizontal-clip, vertical-clip, skew-clip, blinds-vertical, blinds-horizontal, soft-blur-fade, diamond-reveal" }
+ }
},
+ "footer": {
+ "type": ["boolean", "object"],
+ "default": false,
+ "description": "Footer config",
+ "properties": {
+ "message": { "type": "string" },
+ "copyright": { "type": "string" }
+ }
+ },
+ "bulletin": {
+ "type": ["boolean", "object"],
+ "default": false,
+ "description": "Bulletin/announcement board config",
+ "properties": {
+ "layout": { "type": "string", "enum": ["top-left", "top-right", "bottom-left", "bottom-right", "center"], "default": "top-right" },
+ "border": { "type": "boolean", "default": true },
+ "enablePage": { "type": ["boolean", "string"], "description": "Boolean or function name" },
+ "lifetime": { "type": "string", "enum": ["session", "always", "once"], "default": "always" },
+ "id": { "type": "string", "description": "Bulletin unique ID" },
+ "title": { "type": "string" },
+ "content": { "type": "string" },
+ "contentType": { "type": "string", "enum": ["markdown", "text"], "default": "text" },
+ "contentFile": { "type": "string", "description": "Path to markdown/html file" }
+ }
+ },
+ "copyright": {
+ "type": ["boolean", "string", "object"],
+ "default": false,
+ "description": "Copyright config: true (CC-BY-4.0), license string, or object",
+ "properties": {
+ "license": { "type": ["string", "object"], "description": "License: CC-BY-4.0, CC-BY-SA-4.0, CC-BY-NC-4.0, CC-BY-NC-SA-4.0, CC-BY-ND-4.0, CC-BY-NC-ND-4.0, CC0, or { name, url }" },
+ "author": { "type": ["string", "object"], "description": "Author name or { name, url }" },
+ "creation": { "type": "string", "enum": ["original", "translate", "reprint"], "default": "original" }
+ }
+ },
+ "prevPage": { "type": "boolean", "default": true, "description": "Show previous page link" },
+ "nextPage": { "type": "boolean", "default": true, "description": "Show next page link" },
+ "createTime": { "type": ["boolean", "string"], "enum": [true, false, "only-posts"], "default": true, "description": "Show create time" },
"locales": {
"type": "object",
"description": "Theme locales (texts and per-locale theme config)",
@@ -251,6 +303,10 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
"copyrightLicenseText": { "type": "string" },
"prevPageLabel": { "type": "string" },
"nextPageLabel": { "type": "string" },
+ "encryptGlobalText": { "type": "string" },
+ "encryptPageText": { "type": "string" },
+ "encryptButtonText": { "type": "string" },
+ "encryptPlaceholder": { "type": "string" },
"notFound": {
"type": "object",
"properties": {
@@ -267,16 +323,25 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
},
"plugins": {
"type": "object",
- "description": "Built-in plugin options for the theme (config.ts/js only)"
+ "description": "Built-in plugin options. Not supported in plume.config.ts"
},
- "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)" }
+ "markdown": { "type": "object", "description": "Markdown options. Not supported in plume.config.ts" },
+ "codeHighlighter": { "type": ["object", "boolean"], "description": "Code highlighter options. Not supported in plume.config.ts" },
+ "search": { "type": ["object", "boolean"], "description": "Search config: { provider: 'local'|'algolia', ...options }. Not supported in plume.config.ts" },
+ "comment": { "type": ["object", "boolean"], "description": "Comments config: { provider: 'Giscus'|'Waline'|'Twikoo'|'Artalk', ...options }. Not supported in plume.config.ts" },
+ "watermark": { "type": ["object", "boolean"], "description": "Watermark config. Not supported in plume.config.ts" },
+ "readingTime": { "type": ["object", "boolean"], "description": "Reading time config. Not supported in plume.config.ts" },
+ "copyCode": { "type": ["object", "boolean"], "description": "Copy code config. Not supported in plume.config.ts" },
+ "replaceAssets": { "type": ["object", "boolean"], "description": "Replace assets config. Not supported in plume.config.ts" },
+ "encrypt": {
+ "type": ["object", "boolean"],
+ "description": "Encryption config. Not supported in plume.config.ts",
+ "properties": {
+ "global": { "type": "boolean", "default": false, "description": "Enable global site encryption" },
+ "admin": { "type": "array", "items": { "type": "string" }, "description": "Admin passwords" },
+ "rules": { "type": "object", "description": "Path-based encryption rules: { 'path/or/pattern': 'password' | ['password1', 'password2'] }" }
+ }
+ }
}
}
}
@@ -287,7 +352,7 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
- 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.)
+ - Only write fields supported in `.vuepress/plume.config.ts` (ignore and report fields like `plugins`, `markdown`, `search`, `comment`, `watermark`, `encrypt`, etc.)
- Generate `defineThemeConfig({ ...theme })`
- If `format=vuepress-config-ts`:
- Generate `defineUserConfig({ site..., theme: plumeTheme({ ...theme }) })`
@@ -305,8 +370,9 @@ 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
+ // navbarSocialInclude, navbar, collections, sidebar, sidebarScrollbar, aside, outline, transition,
+ // footer, bulletin, copyright, prevPage, nextPage, createTime, locales, docsRepo/docsBranch/docsDir,
+ // autoFrontmatter, editLinkPattern
})
```
@@ -319,7 +385,7 @@ 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.
+ // Full theme config available, including plugins/markdown/search/comment/watermark/encrypt etc.
})
})
```
@@ -340,12 +406,145 @@ module.exports = defineUserConfig({
## 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`
+- If `format=plume-config-ts` and input contains fields only supported in config.ts/js:
+ - Exclude these fields from output: `plugins`, `markdown`, `codeHighlighter`, `search`, `comment`, `watermark`, `readingTime`, `copyCode`, `replaceAssets`, `editLink`, `lastUpdated`, `contributors`, `changelog`, `cache`, `hostname`, `configFile`, `encrypt`
+ - Report them as ignored with reasons
- 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/'`
+- For `encrypt.rules`, keys can be: file paths, directory paths, URL paths, or regex patterns (starting with `^`)
+- For `copyright`, support both preset licenses (CC-BY-4.0, etc.) and custom { name, url } format
+
+## Common Configuration Patterns
+
+### Blog Setup
+
+```json
+{
+ "collections": [
+ {
+ "type": "post",
+ "dir": "blog",
+ "title": "博客",
+ "link": "/blog/",
+ "postCover": "right",
+ "tags": true,
+ "archives": true,
+ "categories": true
+ }
+ ],
+ "profile": {
+ "name": "博主名称",
+ "description": "博主描述",
+ "avatar": "/avatar.png"
+ },
+ "social": [
+ { "icon": "github", "link": "https://github.com/username" }
+ ]
+}
+```
+
+### Documentation Setup
+
+```json
+{
+ "collections": [
+ {
+ "type": "doc",
+ "dir": "guide",
+ "title": "指南",
+ "sidebar": "auto"
+ }
+ ],
+ "navbar": [
+ { "text": "指南", "link": "/guide/", "icon": "mdi:book-open-outline" }
+ ]
+}
+```
+
+### Multi-language Setup
+
+```json
+{
+ "locales": {
+ "/": {
+ "selectLanguageName": "简体中文",
+ "selectLanguageText": "选择语言"
+ },
+ "/en/": {
+ "selectLanguageName": "English",
+ "selectLanguageText": "Languages"
+ }
+ }
+}
+```
+
+### Search Configuration
+
+```text
+// Local search (default)
+{
+ search: {
+ provider: 'local'
+ }
+}
+
+// Algolia DocSearch
+{
+ search: {
+ provider: 'algolia',
+ appId: 'YOUR_APP_ID',
+ apiKey: 'YOUR_API_KEY',
+ indexName: 'YOUR_INDEX_NAME'
+ }
+}
+```
+
+### Comments Configuration
+
+```text
+// Giscus
+{
+ comment: {
+ provider: 'Giscus',
+ repo: 'owner/repo',
+ repoId: '...',
+ category: 'Announcements',
+ categoryId: '...'
+ }
+}
+
+// Waline
+{
+ comment: {
+ provider: 'Waline',
+ serverURL: 'https://your-waline-server.vercel.app'
+ }
+}
+```
+
+### Encryption Configuration
+
+```text
+// Global encryption
+{
+ encrypt: {
+ global: true,
+ admin: ['password1', 'password2']
+ }
+}
+
+// Partial encryption
+{
+ encrypt: {
+ rules: {
+ 'secret/': 'password',
+ '/article/secret/': ['pass1', 'pass2'],
+ '^/private/': 'private-pass'
+ }
+ }
+}
+```
## Execution Feedback
@@ -353,9 +552,17 @@ module.exports = defineUserConfig({
- 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
+- For encrypt to work properly, remind HTTPS requirement for partial content encryption
## 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)
+- Theme: [theme.md](https://theme-plume.vuejs.press/config/theme/)
+- Locales: [locales.md](https://theme-plume.vuejs.press/config/locales/)
+- Collections: [collections.md](https://theme-plume.vuejs.press/config/collections/)
+- Navbar: [navbar.md](https://theme-plume.vuejs.press/config/navigation/)
+- Sidebar: [sidebar.md](https://theme-plume.vuejs.press/config/sidebar/)
+- Markdown: [markdown.md](https://theme-plume.vuejs.press/config/markdown/)
+- Plugins: [plugins/README.md](https://theme-plume.vuejs.press/config/plugins/)
+- Encryption: [encryption.md](https://theme-plume.vuejs.press/guide/features/encryption/)
+- Bulletin: [bulletin.md](https://theme-plume.vuejs.press/guide/features/bulletin/)
+- Copyright: [copyright.md](https://theme-plume.vuejs.press/guide/features/copyright/)
diff --git a/skills/vuepress-plume-markdown/SKILL.md b/skills/vuepress-plume-markdown/SKILL.md
index 29644584..39a17921 100644
--- a/skills/vuepress-plume-markdown/SKILL.md
+++ b/skills/vuepress-plume-markdown/SKILL.md
@@ -1,50 +1,254 @@
---
name: vuepress-plume-markdown
-description: Help users write markdown files with VuePress Plume theme extensions, charts, and embeds.
+description: Help users write markdown files with VuePress Plume theme extensions, including containers, charts, embeds, code features, and all markdown enhancements. Invoke when user writes markdown content or asks about Plume's markdown syntax.
---
# VuePress Plume Markdown Skill
-This skill provides assistance with VuePress Plume markdown extensions, charts, and embeds.
+This skill provides assistance with VuePress Plume markdown extensions, charts, embeds, and code features.
It helps users write rich content using the features provided by the theme.
+## When to Invoke
+
+- Writing content in Markdown files
+- Using advanced features like containers, code groups, or diagrams
+- Embedding media or external content
+- Configuring code block features (highlight, focus, diff, etc.)
+- Using markdown enhancement syntax
+
+## Documentation Sources
+
+- [Markdown Extensions](https://theme-plume.vuejs.press/guide/markdown/extensions/)
+- [Markdown Basic](https://theme-plume.vuejs.press/guide/markdown/basic/)
+- [Code Features](https://theme-plume.vuejs.press/guide/code/features/)
+- [Code Intro](https://theme-plume.vuejs.press/guide/code/intro/)
+
## 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.
+### Containers
+
+- [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.)
+- [Demo Wrapper](resources/demo-wrapper.md) - Demo container for examples
+- [Field](resources/field.md) - Field/attribute display container
+- [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 with ==mark== syntax
+- [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.
+- [QR Code](resources/qrcode.md) - Generate QR codes
+- [Steps](resources/steps.md) - Create step-by-step guides
+- [Table](resources/table.md) - Enhanced table containers
+- [Tabs](resources/tabs.md) - Create tabbed content
+- [Timeline](resources/timeline.md) - Create timelines
-## Charts
+### 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.
+- [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
+### 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.
+- [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
+- [CodePen](resources/codepen.md) - Embed CodePen demos
+- [CodeSandbox](resources/codesandbox.md) - Embed CodeSandbox projects
+- [JSFiddle](resources/jsfiddle.md) - Embed JSFiddle demos
+- [PDF Reader](resources/pdf.md) - Embed PDF files
+- [Replit](resources/replit.md) - Embed Replit projects
+- [YouTube Video](resources/youtube.md) - Embed YouTube videos
+
+### Code Features
+
+See [resources/code-features.md](resources/code-features.md) for detailed code block features:
+
+- **Line Numbers** - `:line-numbers`, `:no-line-numbers`, `:line-numbers=2`
+- **Line Highlighting** - `{1,3,5-7}` or `// [!code highlight]`
+- **Line Focus** - `// [!code focus]` or `// [!code focus:3]`
+- **Diff Highlighting** - `// [!code ++]` and `// [!code --]`
+- **Warning/Error** - `// [!code warning]` and `// [!code error]`
+- **Word Highlight** - `// [!code word:keyword]` or `// [!code word:keyword:2]`
+- **Whitespace** - `:whitespace` to show tabs/spaces
+- **Collapsed Lines** - `:collapsed-lines` or `:collapsed-lines=10`
+- **Code Title** - `title="filename.ext"` after language
+
+## Enabling Features
+
+Most markdown extensions need to be enabled in `.vuepress/config.ts`:
+
+```ts
+export default defineUserConfig({
+ theme: plumeTheme({
+ markdown: {
+ // Containers
+ hint: true, // Info, tip, warning, caution containers
+ alert: true, // GitHub-style alerts
+
+ // Code
+ codeTabs: true, // Code block tabs
+ tabs: true, // General tabs
+
+ // Content
+ annotation: true, // Inline annotations
+ abbr: true, // Abbreviations
+ mark: 'eager', // Mark/highlight text
+
+ // Layout
+ fileTree: true, // File tree container
+ flex: true, // Flex layout
+ collapse: true, // Collapsible sections
+ chat: true, // Chat dialog
+ timeline: true, // Timeline
+
+ // Embeds
+ pdf: true, // PDF embed
+ bilibili: true, // Bilibili video
+ youtube: true, // YouTube video
+ artPlayer: true, // ArtPlayer video
+ audioReader: true, // Audio
+
+ // Code demos
+ codepen: true, // CodePen
+ codeSandbox: true, // CodeSandbox
+ jsfiddle: true, // JSFiddle
+ repl: true, // REPL
+
+ // Charts
+ chartjs: true, // Chart.js
+ echarts: true, // ECharts
+ mermaid: true, // Mermaid
+ markmap: true, // Markmap
+ plantuml: true, // PlantUML
+ flowchart: true, // Flowchart
+
+ // Other
+ npmTo: true, // npm/yarn/pnpm switcher
+ caniuse: true, // Can I Use embed
+ icon: { // Icons
+ provider: 'iconify' // or 'iconfont', 'fontawesome'
+ },
+ plot: true, // Hidden text (spoiler)
+ imageSize: true, // Auto image dimensions
+ }
+ })
+})
+```
+
+## Standard Markdown Extensions
+
+VuePress Plume supports these standard markdown extensions:
+
+- **Tables** - GitHub-flavored tables
+- **Task Lists** - `- [ ]` and `- [x]`
+- **Footnotes** - `[^1]` and `[^1]: note`
+- **Superscript** - `19^th^`
+- **Subscript** - `H~2~O`
+- **Custom Anchors** - `## Title {#custom-anchor}`
+- **Alignment** - `::: left/center/right`
+- **Table of Contents** - `[[TOC]]`
+
+## Code Block Features
+
+### Basic Syntax
+
+````md
+```language
+code content
+```
+````
+
+### With Features
+
+````md
+```ts:title="example.ts":line-numbers {2,4-6}
+// [!code highlight]
+const example = 'highlighted'
+// [!code ++]
+const added = 'new code'
+// [!code --]
+const removed = 'old code'
+// [!code warning]
+const warning = 'be careful'
+// [!code error]
+const error = 'something wrong'
+// [!code focus]
+const focused = 'focused line'
+// [!code word:example]
+console.log(example)
+```
+````
+
+## Frontmatter
+
+Common frontmatter for markdown files:
+
+```md
+---
+title: Article Title
+createTime: 2024/01/01 12:00:00
+permalink: /article/unique-id/
+tags:
+ - tag1
+ - tag2
+description: Article description for SEO
+---
+```
+
+### Post-specific Frontmatter
+
+```md
+---
+sticky: true # or number for ordering
+article: true # false to hide from list
+draft: true # dev only
+cover: /image.jpg # Cover image
+coverStyle:
+ layout: right # left, right, odd-left, odd-right, top
+ ratio: '16:9'
+ width: 240
+ compact: false
+---
+```
+
+### Home Page Frontmatter
+
+```md
+---
+pageLayout: home
+config:
+ - type: hero
+ hero:
+ name: Site Name
+ tagline: Tagline
+ text: Description
+ actions:
+ - text: Get Started
+ link: /guide/
+ theme: brand
+ - type: features
+ features:
+ - title: Feature 1
+ icon: icon-name
+ details: Description
+---
+```
+
+## References
+
+- [VuePress Markdown](https://v2.vuepress.vuejs.org/guide/markdown.html)
+- [Plume Theme Docs](https://theme-plume.vuejs.press/)
diff --git a/skills/vuepress-plume-markdown/resources/code-features.md b/skills/vuepress-plume-markdown/resources/code-features.md
new file mode 100644
index 00000000..4c3f5179
--- /dev/null
+++ b/skills/vuepress-plume-markdown/resources/code-features.md
@@ -0,0 +1,193 @@
+# Code Block Features
+
+VuePress Plume theme provides rich code block features via Shiki highlighter.
+
+## Line Numbers
+
+````md
+```ts:line-numbers
+// Enable line numbers (default)
+```
+
+```ts:no-line-numbers
+// Disable line numbers
+```
+
+```ts:line-numbers=2
+// Start from line 2
+```
+````
+
+## Line Highlighting
+
+### Bracket Syntax
+
+````md
+```ts{1,3,5-7}
+// Line 1 highlighted
+// Line 2 normal
+// Line 3 highlighted
+// Line 4 normal
+// Line 5-7 highlighted
+```
+````
+
+### Comment Syntax
+
+````md
+```ts
+const a = 1
+const b = 2 // [!code highlight]
+const c = 3
+```
+````
+
+## Line Focus
+
+Focus a line and dim others:
+
+````md
+```ts
+const a = 1
+const b = 2 // [!code focus]
+const c = 3
+```
+````
+
+Focus multiple lines:
+
+````md
+```ts
+const a = 1 // [!code focus:3]
+const b = 2
+const c = 3
+const d = 4
+```
+````
+
+## Diff Highlighting
+
+Show code changes:
+
+````md
+```ts
+const oldVal = 'value' // [!code --]
+const newVal = 'value' // [!code ++]
+```
+````
+
+## Warning and Error
+
+````md
+```ts
+const warning = 'caution' // [!code warning]
+const error = 'failed' // [!code error]
+```
+````
+
+## Word Highlight
+
+Highlight specific words:
+
+````md
+```ts
+// [!code word:config]
+const config = {}
+console.log(config)
+```
+````
+
+Highlight with count limit:
+
+````md
+```ts
+// [!code word:api:2]
+const api = {}
+const apiClient = {}
+const apiKey = {} // Not highlighted
+```
+````
+
+## Whitespace Visibility
+
+Show tabs and spaces:
+
+````md
+```ts:whitespace
+const a = 1
+```
+````
+
+## Collapsed Lines
+
+Collapse long code blocks:
+
+````md
+```ts:collapsed-lines
+// Lines after 15th will be collapsed
+```
+
+```ts:collapsed-lines=10
+// Lines after 10th will be collapsed
+```
+````
+
+## Code Title
+
+Add filename to code block:
+
+````md
+```ts title="config.ts"
+const config = {}
+```
+
+```ts title="/path/to/file.ts"
+const code = {}
+```
+````
+
+## Combining Features
+
+Multiple features can be combined:
+
+````md
+```ts:title="example.ts":line-numbers {2,4} // [!code highlight]
+const a = 1
+const b = 2 // [!code ++]
+const c = 3
+const d = 4 // [!code focus]
+```
+````
+
+## Language-Specific Comments
+
+Different languages use different comment syntax:
+
+| Language | Highlight | Focus | Diff Add | Diff Remove |
+|----------|-----------|-------|----------|-------------|
+| JS/TS/JSX/TSX | `// [!code highlight]` | `// [!code focus]` | `// [!code ++]` | `// [!code --]` |
+| Python/Ruby/YAML | `# [!code highlight]` | `# [!code focus]` | `# [!code ++]` | `# [!code --]` |
+| CSS/SCSS | `/* [!code highlight] */` | `/* [!code focus] */` | `/* [!code ++] */` | `/* [!code --] */` |
+| HTML/XML | `` | `` | `` | `` |
+| Bash/Shell | `# [!code highlight]` | `# [!code focus]` | `# [!code ++]` | `# [!code --]` |
+| SQL | `-- [!code highlight]` | `-- [!code focus]` | `-- [!code ++]` | `-- [!code --]` |
+| Rust | `// [!code highlight]` | `// [!code focus]` | `// [!code ++]` | `// [!code --]` |
+| Go | `// [!code highlight]` | `// [!code focus]` | `// [!code ++]` | `// [!code --]` |
+
+## Global Configuration
+
+Enable features globally in `.vuepress/config.ts`:
+
+```ts
+export default defineUserConfig({
+ theme: plumeTheme({
+ codeHighlighter: {
+ lineNumbers: true, // Enable line numbers globally
+ whitespace: true, // Show whitespace globally
+ collapsedLines: true, // Collapse lines globally
+ }
+ })
+})
+```
+
+When enabled globally, use `:no-line-numbers`, `:no-whitespace`, `:no-collapsed-lines` to disable per block.
diff --git a/skills/vuepress-plume-markdown/resources/codepen.md b/skills/vuepress-plume-markdown/resources/codepen.md
new file mode 100644
index 00000000..f7a3d913
--- /dev/null
+++ b/skills/vuepress-plume-markdown/resources/codepen.md
@@ -0,0 +1,58 @@
+# CodePen Embed
+
+Embed CodePen demos in your markdown files.
+
+## Configuration
+
+Enable in `.vuepress/config.ts`:
+
+```ts
+export default defineUserConfig({
+ theme: plumeTheme({
+ markdown: {
+ codepen: true
+ }
+ })
+})
+```
+
+## Syntax
+
+```md
+@[codepen](pen_id)
+
+@[codepen](pen_id title)
+
+@[codepen](pen_id title tab)
+```
+
+## Parameters
+
+- `pen_id` - The CodePen pen ID (from URL: codepen.io/user/pen/**XXXXXX**)
+- `title` - Optional title for the embed
+- `tab` - Optional default tab: `html`, `css`, `js`, `result` (default: `result`)
+
+## Example
+
+**Input:**
+
+```md
+@[codepen](VwKZgJG)
+
+@[codepen](VwKZgJG "My Demo")
+
+@[codepen](VwKZgJG "My Demo" css)
+```
+
+## Getting Pen ID
+
+1. Open the CodePen pen
+2. Copy the ID from the URL: `codepen.io/username/pen/XXXXXX`
+3. Use `XXXXXX` as the pen ID
+
+## Features
+
+- Embedded iframe preview
+- Editable code (if enabled on CodePen)
+- Responsive sizing
+- Dark/light theme support
diff --git a/skills/vuepress-plume-markdown/resources/codesandbox.md b/skills/vuepress-plume-markdown/resources/codesandbox.md
new file mode 100644
index 00000000..8030ea70
--- /dev/null
+++ b/skills/vuepress-plume-markdown/resources/codesandbox.md
@@ -0,0 +1,53 @@
+# CodeSandbox Embed
+
+Embed CodeSandbox projects in your markdown files.
+
+## Configuration
+
+Enable in `.vuepress/config.ts`:
+
+```ts
+export default defineUserConfig({
+ theme: plumeTheme({
+ markdown: {
+ codeSandbox: true
+ }
+ })
+})
+```
+
+## Syntax
+
+```md
+@[codesandbox](sandbox_id)
+
+@[codesandbox](sandbox_id title)
+```
+
+## Parameters
+
+- `sandbox_id` - The CodeSandbox sandbox ID
+- `title` - Optional title for the embed
+
+## Example
+
+**Input:**
+
+```md
+@[codesandbox](react-new)
+
+@[codesandbox](vue-vue "Vue Demo")
+```
+
+## Getting Sandbox ID
+
+1. Open the CodeSandbox project
+2. Copy the ID from the URL: `codesandbox.io/s/XXXXXX`
+3. Use `XXXXXX` as the sandbox ID
+
+## Features
+
+- Full IDE embedded
+- Live preview
+- File navigation
+- Code editing capabilities
diff --git a/skills/vuepress-plume-markdown/resources/container.md b/skills/vuepress-plume-markdown/resources/container.md
index 42ccc709..ef0f31b8 100644
--- a/skills/vuepress-plume-markdown/resources/container.md
+++ b/skills/vuepress-plume-markdown/resources/container.md
@@ -1,32 +1,133 @@
# Containers
-Use `::: type [title]` to create alert boxes or collapsible details.
+Use `::: type [title]` to create alert boxes, collapsible details, and custom containers.
+
+## Configuration
+
+Enable in `.vuepress/config.ts`:
+
+```ts
+export default defineUserConfig({
+ theme: plumeTheme({
+ markdown: {
+ hint: true, // Enable info, tip, warning, caution, note containers
+ alert: true, // Enable GitHub-style alerts
+ }
+ })
+})
+```
## Supported Types
-- `note`, `info`, `tip`, `warning`, `caution` (Alerts)
-- `details` (Collapsible)
+### Alert Containers
+
+- `note` - Neutral information
+- `info` - General information (blue)
+- `tip` - Helpful advice (green)
+- `warning` - Caution needed (yellow/orange)
+- `caution` / `danger` - Critical warning (red)
+- `important` - Important information (purple)
+
+### Collapsible Container
+
+- `details` - Collapsible content block
## Syntax
```md
::: type [Optional Title]
-Content
+Content here
:::
```
## Examples
+### Basic Alerts
+
```md
::: tip
-This is a tip.
+This is a tip with default title.
:::
-::: warning CAUTION
-Custom title for warning.
+::: tip Custom Title
+This tip has a custom title.
:::
-::: details Click to expand
-Hidden content.
+::: warning
+Be careful with this step.
+:::
+
+::: danger STOP!
+This action is irreversible.
:::
```
+
+### Collapsible Details
+
+```md
+::: details Click to expand
+This content is hidden by default.
+
+- Can contain
+- Any markdown
+- Content
+:::
+
+::: details Open by default {open}
+This content is visible by default.
+:::
+```
+
+### GitHub-Style Alerts
+
+```md
+> [!NOTE]
+> Useful information that users should know.
+
+> [!TIP]
+> Helpful advice for better results.
+
+> [!IMPORTANT]
+> Key information users need to know.
+
+> [!WARNING]
+> Urgent info that needs immediate attention.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes.
+```
+
+## Nested Containers
+
+Containers can be nested:
+
+```md
+::: tip Outer Container
+Some content
+
+::: warning Inner Container
+Nested warning inside tip
+:::
+
+More outer content
+:::
+```
+
+## Code Inside Containers
+
+````md
+::: tip Example Code
+
+```ts
+const example = 'code blocks work inside containers'
+```
+
+:::
+````
+
+## Styling
+
+Containers use theme colors and support:
+- Custom icons (based on type)
+- Dark/light mode adaptation
+- Consistent spacing and borders
diff --git a/skills/vuepress-plume-markdown/resources/demo-wrapper.md b/skills/vuepress-plume-markdown/resources/demo-wrapper.md
new file mode 100644
index 00000000..5aa8caeb
--- /dev/null
+++ b/skills/vuepress-plume-markdown/resources/demo-wrapper.md
@@ -0,0 +1,73 @@
+# Demo Wrapper
+
+The `::: demo` container wraps content with a demo preview and code display.
+
+## Configuration
+
+Enable in `.vuepress/config.ts`:
+
+```ts
+export default defineUserConfig({
+ theme: plumeTheme({
+ markdown: {
+ demo: true
+ }
+ })
+})
+```
+
+## Syntax
+
+````md
+::: demo [Title]
+
+```html
+
+Demo content
+```
+
+:::
+````
+
+## Example
+
+**Input:**
+
+`````md
+::: demo Button Example
+
+```html
+
+
+
+```
+
+:::
+`````
+
+**Output:**
+
+Displays both the rendered button and the source code with syntax highlighting.
+
+## Features
+
+- Live preview of HTML/Vue components
+- Syntax highlighted source code
+- Collapsible code section
+- Supports `