Compare commits

..

No commits in common. "main" and "v1.0.0-rc.189" have entirely different histories.

249 changed files with 5808 additions and 12304 deletions

View File

@ -13,9 +13,6 @@ on:
workflow_dispatch:
workflow_call:
permissions:
contents: write
jobs:
deploy-docs:
runs-on: ubuntu-latest

View File

@ -6,9 +6,6 @@ on:
- v*
workflow_dispatch:
permissions:
contents: write
jobs:
deploy-docs:
runs-on: ubuntu-latest

View File

@ -8,9 +8,6 @@ on:
branches: [main]
workflow_call:
permissions:
contents: read
jobs:
lint:
runs-on: ubuntu-latest

View File

@ -5,10 +5,6 @@ on:
tags:
- v*
permissions:
contents: write
id-token: write
jobs:
lint:
uses: ./.github/workflows/lint.yaml
@ -20,6 +16,9 @@ jobs:
if: github.repository == 'pengzhanbo/vuepress-theme-plume'
needs: [test, lint]
runs-on: ubuntu-latest
permissions:
contents: write
id-token: write
steps:
- uses: actions/checkout@v6
with:

View File

@ -8,9 +8,6 @@ on:
branches: [main]
workflow_call:
permissions:
contents: read
jobs:
unit-test:
runs-on: ubuntu-latest

3
.gitignore vendored
View File

@ -15,6 +15,3 @@ dist/
coverage/
.idea
.claude/
!.claude/skills/

File diff suppressed because it is too large Load Diff

111
CLAUDE.md
View File

@ -1,111 +0,0 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
vuepress-theme-plume is a VuePress 2 theme monorepo for building blogs, documentation, and knowledge bases.
It includes a main theme, several plugins, a CLI tool, and example implementations.
## Commands
```bash
# Install dependencies
pnpm install
# Build all packages (required after clone, outputs to lib/)
pnpm build
# Development - runs theme + docs dev servers concurrently
pnpm dev
# Lint (eslint + stylelint)
pnpm lint
pnpm lint:fix # auto-fix
# Run tests (vitest)
pnpm test
# Run a single test file
pnpm test src/path/to/file.spec.ts
# Run tests related to changed files (for pre-commit)
cross-env TZ=Etc/UTC vitest related --run
# Build docs only
pnpm docs:build
# Serve docs locally
pnpm docs:serve
# Release workflow
pnpm release # runs lint + build + version bump + changelog + git commit
```
## Monorepo Structure
```txt
├── theme/ # Main VuePress theme (vuepress-theme-plume)
├── plugins/ # VuePress plugins
│ ├── plugin-search/ # Full-text fuzzy search
│ ├── plugin-md-power/ # Markdown enhancements
│ └── plugin-fonts/ # Special character font support
├── cli/ # CLI tool (create project scaffolding)
├── docs/ # Documentation site
└── examples/ # Example implementations
├── pure-blog/
└── layout-slots/
```
## Theme Architecture
The theme is organized into three layers:
- **`src/node/`** - Build-time code (runs during `vuepress build/dev`)
- `prepare/` - Content preparation (frontmatter parsing, collection resolution)
- `plugins/` - VuePress plugin registration
- `config/` - Theme configuration handling
- `autoFrontmatter/` - Automatic frontmatter generation
- **`src/client/`** - Client-side code (runs in browser)
- `components/` - Vue components
- `composables/` - Vue composables (outline, search, etc.)
- `styles/` - CSS/SCSS styles
- `features/` - Feature-specific components and logic
- **`src/shared/`** - Shared code (used by both node and client)
- `frontmatter/` - Frontmatter schemas and utilities
- `locale/` - i18n translations
- `options.ts` - Theme options types
- `features/` - Feature flags and shared feature logic
## Build Output
Each package uses [tsdown](https://tsdown.dev/) to compile TypeScript. Build output goes to `lib/`:
- `lib/node/` - Node-side exports
- `lib/client/` - Client-side exports
- `lib/shared/` - Shared exports
The `lib/` directory is gitignored and must be built with `pnpm build`.
## Testing
Tests use Vitest with coverage enabled. Test files are located at `**/__test__/**/*.spec.ts` and are excluded from coverage reports. Run tests with timezone fixed to UTC to ensure consistent results.
## Key Dependencies
- **VuePress**: v2.0.0-rc.28 with @vuepress/bundler-vite
- **Vue**: ^3.5.30
- **Shiki**: ^4.x for syntax highlighting
- **VueUse**: ^14.x for composables
- **markdown-it**: ^14.x for Markdown processing
## Development Notes
- Node.js 20.19.0+ required
- pnpm catalogs are used for dependency management (`dev`, `peer`, `prod`, `vuepress`)
- The theme depends on `vuepress-plugin-md-power` and `@vuepress-plume/plugin-search` as workspace dependencies
- Some peer dependencies are optional (e.g., artplayer, dashjs, three.js)
- Plugins (`plugins/*`) do not have dev commands — changes require `pnpm build` to take effect
- The `lib/` directory is gitignored and must be rebuilt after `pnpm install`

View File

@ -19,7 +19,7 @@ In the `plugins` directory:
Development requirements:
- [Node.js](http://nodejs.org/) version 20.19.0+
- [Node.js](http://nodejs.org/) version 20.6.0+
- [pnpm](https://pnpm.io/zh/) version 9+
Clone the repository and install dependencies:

View File

@ -19,7 +19,7 @@
开发要求:
- [Node.js](http://nodejs.org/) version 20.19.0+
- [Node.js](http://nodejs.org/) version 20.6.0+
- [pnpm](https://pnpm.io/zh/) version 9+
克隆代码仓库,并安装依赖:

View File

@ -4,8 +4,8 @@
| Version | Supported |
| ---------------- | ------------------ |
| >= 1.0.0-rc.190 | :white_check_mark: |
| < 1.0.0-rc.190 | :x: |
| >= 1.0.0-rc.170 | :white_check_mark: |
| < 1.0.0-rc.170 | :x: |
## Reporting a Vulnerability

View File

@ -1,7 +1,7 @@
{
"name": "create-vuepress-theme-plume",
"type": "module",
"version": "1.0.0-rc.196",
"version": "1.0.0-rc.189",
"description": "The cli for create vuepress-theme-plume's project",
"author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
"license": "MIT",
@ -27,7 +27,7 @@
"templates"
],
"scripts": {
"build": "tsdown --config-loader unrun"
"build": "tsdown"
},
"dependencies": {
"@clack/prompts": "catalog:prod",
@ -40,8 +40,8 @@
"sort-package-json": "catalog:prod"
},
"plume-deps": {
"vuepress": "2.0.0-rc.28",
"vue": "^3.5.32",
"vuepress": "2.0.0-rc.26",
"vue": "^3.5.26",
"http-server": "^14.1.1",
"typescript": "^5.9.3"
},

View File

@ -1,15 +1,3 @@
/**
* VuePress Theme Plume CLI Entry Point
*
* VuePress Theme Plume CLI
*
* This module provides command-line interface for creating and initializing
* VuePress projects with vuepress-theme-plume.
*
* VuePress
*
* @module cli
*/
import cac from 'cac'
import { version } from '../package.json'
import { Mode } from './constants.js'

View File

@ -1,10 +1,5 @@
import type { Locale } from '../types.js'
/**
* English locale configuration for CLI prompts and messages.
*
* CLI
*/
export const en: Locale = {
'question.root': 'Where would you want to initialize VuePress?',
'question.site.name': 'Site Name:',

View File

@ -2,15 +2,6 @@ import type { Langs, Locale } from '../types.js'
import { en } from './en.js'
import { zh } from './zh.js'
/**
* Locale configurations for different languages.
*
*
*
* Maps language codes to their respective locale strings.
*
*
*/
export const locales: Record<Langs, Locale> = {
'zh-CN': zh,
'en-US': en,

View File

@ -1,10 +1,5 @@
import type { Locale } from '../types.js'
/**
* Chinese (Simplified) locale configuration for CLI prompts and messages.
*
* CLI
*/
export const zh: Locale = {
'question.root': '您想在哪里初始化 VuePress',
'question.site.name': '站点名称:',

View File

@ -5,14 +5,6 @@ import _sortPackageJson from 'sort-package-json'
import { Mode } from './constants.js'
import { readJsonFile, resolve } from './utils/index.js'
/**
* Sort package.json fields in a consistent order.
*
* package.json
*
* @param json - Package.json object to sort / package.json
* @returns Sorted package.json object / package.json
*/
function sortPackageJson(json: Record<any, any>) {
return _sortPackageJson(json, {
sortOrder: ['name', 'type', 'version', 'private', 'description', 'packageManager', 'author', 'license', 'scripts', 'devDependencies', 'dependencies', 'pnpm'],
@ -119,29 +111,12 @@ export async function createPackageJson(
}
}
/**
* Get user information from git global configuration.
*
* git
*
* @returns User information object with username and email /
* @throws Error if git command fails / git
*/
async function getUserInfo() {
const { output: username } = await spawn('git', ['config', '--global', 'user.name'])
const { output: email } = await spawn('git', ['config', '--global', 'user.email'])
return { username, email }
}
/**
* Get the version of a package manager.
*
*
*
* @param pkg - Package manager name (npm, yarn, pnpm) /
* @returns Version string of the package manager /
* @throws Error if package manager command fails /
*/
async function getPackageManagerVersion(pkg: string) {
const { output } = await spawn(pkg, ['--version'])
return output

View File

@ -78,15 +78,6 @@ export async function run(mode: Mode, root?: string): Promise<void> {
}
}
/**
* Resolve prompt result into final configuration data.
*
*
*
* @param result - Prompt result from user input /
* @param mode - Operation mode (init or create) /
* @returns Resolved configuration data /
*/
function resolveData(result: PromptResult, mode: Mode): ResolvedData {
return {
...result,

View File

@ -1,19 +1,6 @@
import type { PackageManager } from '../types.js'
import process from 'node:process'
/**
* Detect the current package manager from environment variables.
*
* 使
*
* @returns The detected package manager name /
* @example
* // When using pnpm
* const pm = getPackageManager() // returns 'pnpm'
*
* // When using npm
* const pm = getPackageManager() // returns 'npm'
*/
export function getPackageManager(): PackageManager {
const name = process.env?.npm_config_user_agent || 'npm'
return name.split('/')[0] as PackageManager

View File

@ -81,7 +81,7 @@ content right
**demo wrapper**
::: window title="Demo" height="200px"
::: demo-wrapper title="Demo" no-padding height="200px"
<style scoped>
.open-door {
display: flex;

View File

@ -95,9 +95,9 @@ H~2~O
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
- twitter - <Icon name="skill-icons:twitter" size="2em" />
**示例容器**
**demo wrapper**
::: window title="示例" height="200px"
::: demo-wrapper title="示例" no-padding height="200px"
<style scoped>
.open-door {
display: flex;

View File

@ -69,7 +69,6 @@ export const themeGuide: ThemeCollectionItem = defineCollection({
'chat',
'include',
'env',
'obsidian',
],
},
{

View File

@ -69,7 +69,6 @@ export const themeGuide: ThemeCollectionItem = defineCollection({
'chat',
'include',
'env',
'obsidian',
],
},
{

View File

@ -94,7 +94,7 @@ export const enNavbar: ThemeNavItem[] = defineNavbarConfig([
{
text: `${version}`,
icon: 'codicon:versions',
badge: 'New',
badge: '',
items: [
{ text: 'Changelog', link: '/en/changelog/' },
{ text: 'Contributing', link: '/en/contributing/' },

View File

@ -58,7 +58,6 @@ export const theme: Theme = plumeTheme({
jsfiddle: true,
demo: true,
encrypt: true,
obsidian: true,
npmTo: ['pnpm', 'yarn', 'npm'],
repl: {
go: true,

View File

@ -401,7 +401,7 @@ end tell
在代码块里面, `&``<``>` 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要复制粘贴,再加上缩进就可以了,剩下的 Markdown 都会帮你处理,例如:
````md
```html
```
<div class="footer">
&copy; 2004 Foo Corporation
</div>

View File

@ -239,7 +239,7 @@ Shiki 支持多种编程语言。需要做的就是将有效的语言别名附
**输入:**
````md
````
```js
export default {
name: 'MyComponent',
@ -248,7 +248,7 @@ export default {
```
````
````md
````
```html
<ul>
<li v-for="todo in todos" :key="todo.id">
@ -281,7 +281,7 @@ export default {
**输入:**
````md
````
```js{4}
export default {
data () {
@ -313,7 +313,7 @@ export default {
**输入:**
````md
````
```js{1,4,6-8}
export default { // Highlighted
data () {
@ -349,10 +349,10 @@ export default { // Highlighted
**输入:**
````md
````
```js
export default {
data() {
data () {
return {
msg: 'Highlighted!' // [\!code highlight]
}
@ -381,10 +381,10 @@ export default {
**输入:**
````md
````
```js
export default {
data() {
data () {
return {
msg: 'Focused!' // [\!code focus]
}
@ -411,10 +411,10 @@ export default {
**输入:**
````md
````
```js
export default {
data() {
data () {
return {
remove: 'Removed', // [\!code --]
add: 'Added' // [\!code ++]
@ -443,10 +443,10 @@ export default {
**输入:**
````md
````
```js
export default {
data() {
data () {
return {
error: 'Error', // [\!code error]
warning: 'Warning' // [\!code warning]
@ -473,7 +473,7 @@ export default {
**输入:**
````md
````
```ts
export function foo() { // [\!code word:Hello]
const msg = 'Hello World'
@ -495,7 +495,7 @@ export function foo() { // [!code word:Hello]
**输入:**
````md
````
```ts
// [\!code word:options:2]
const options = { foo: 'bar' }
@ -613,7 +613,7 @@ export default config
**输入:**
````md
````
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
@ -711,7 +711,7 @@ vuepress-theme-plume 是一个 ==简洁美观== 的 主题
这将为图片添加 一个 名为 `full-width` 的 class 属性,以及一个 `width` 属性,值为 `100%`
```md
![alt text](/plume.png){.full-width width="100%"}
![](/plume.png){.full-width width="100%"}
```
同时也支持其他属性:

View File

@ -102,9 +102,9 @@ H~2~O
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
- twitter - <Icon name="skill-icons:twitter" size="2em" />
**示例容器**
**demo wrapper**
::: window title="示例" height="200px"
::: demo-wrapper title="示例" no-padding height="200px"
<style scoped>
.open-door {
display: flex;

View File

@ -266,7 +266,7 @@ books:
- 1984:
author: *gOrwell
- animal-farm:
author:*gOrwell
author: *gOrwell
---
```

View File

@ -82,7 +82,7 @@ export default defineUserConfig({
主题提供了 `plume.config.ts` 配置文件,==对该文件的修改支持热更新,无需重启服务=={.tip} ::twemoji:confetti-ball::。
可以在其中配置支持热更新的字段,如 `navbar``profile` 等。
可以在其中配置支持热更新的字段,如 `navbar``profile` 等。
::: tip
这些字段仍可在 VuePress 配置文件的 `theme` 中配置,但主题配置文件的设置最终会合并到主配置中。

View File

@ -6,7 +6,7 @@ permalink: /config/locales/
这些选项用于配置与语言相关的文本。
如果您的站点是以非内置语言支持以外的其他语言提供服务的,您应该为每个语言设置这些选项来提供翻译。
如果你的站点是以非内置语言支持以外的其他语言提供服务的,你应该为每个语言设置这些选项来提供翻译。
## 内置语言支持

View File

@ -149,7 +149,7 @@ export default defineUserConfig({
- **默认值**: `{ provider: 'iconify' }`
- **详情**: 图标配置
[查看 **icon** 使用说明](../guide/features/icon.md){.read-more}
[查看 **icon** 使用说明](../../theme/guide/features/icon.md){.read-more}
### plot

View File

@ -11,7 +11,7 @@ permalink: /config/navigation/
主题默认会自动生成最简单的导航栏配置,仅包括 **首页****文章列表页**
您也可以自己配置导航栏,覆盖默认的导航栏配置。
你也可以自己配置导航栏,覆盖默认的的导航栏配置。
默认配置如下:

View File

@ -82,7 +82,6 @@ interface SearchBoxLocale {
### 启用
```ts title=".vuepress/config.ts" twoslash
// @errors: 2353
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

View File

@ -13,7 +13,6 @@ permalink: /config/watermark/
## 使用
```ts title=".vuepress/config.ts" twoslash
// @errors: 7006
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

View File

@ -14,7 +14,8 @@ permalink: /config/theme/
::: warning 该字段不支持在 [主题配置文件 `plume.config.js`](./intro.md#主题配置文件) 中进行配置。
:::
无以上声明的字段,您可以在 `.vuepress/config.ts` 或者 `.vuepress/plume.config.ts` 的任意一个文件中进行配置,一般情况下建议在 `.vuepress/plume.config.ts` 中进行配置。
无以上声明的字段,你可以在 `.vuepress/config.ts` 或者 `.vuepress/plume.config.ts` 的任意一个文件中
进行配置,一般情况下建议在 `.vuepress/plume.config.ts` 中进行配置。
::: warning 已经在一个配置文件中进行配置的字段,尽量不要在另一个配置文件中重复配置
:::
@ -440,9 +441,9 @@ export default defineUserConfig({
:::
[可以在这里查看 **simple-icons** 所有可用图标](https://icon-sets.iconify.design/simple-icons/){.readmore}
[可以在这里查看 **simple-icons** 所有可用图标](https://icon-sets.iconify.design/simple-icons/){.readmore}
如果 **Iconify** 无法满足您的需求,可以传入 `{ svg: string, name?: string }` 格式使用自定义图标,传入 SVG 源码字符串,可选 `name` 字段用于配置 [`navbarSocialInclude`](#navbarsocialinclude)
如果 **Iconify** 无法满足你的需求,可以传入 `{ svg: string, name?: string }`的格式,使用自定义图标,传入 svg 源码字符串,可选 `name` 字段,用于配置 [`navbarSocialInclude`](#navbarsocialinclude)
示例:

View File

@ -28,9 +28,9 @@ docs:
-
name: 哦麦 MC
desc: 我的世界教学文档。
logo: https://s.xc.life/img/img/minecraft-154749_1280.png
logo: https://static.ohmymc.com/img/minecraft-154749_1280.png?max_width=1920&max_height=1920
url: https://ohmymc.com/
preview: https://s.xc.life/img/img/20241228225159139.png
preview: https://static.ohmymc.com/img/20241228225159139.png?max_width=1920&max_height=1920
-
name: NcatBotDocs
desc: NcatBot一个 QQ 机器人框架项目的使用文档。
@ -93,12 +93,6 @@ docs:
logo: https://official.skycraft.cn/i/3.jpg
url: https://docs.skycraft.cn/
preview: https://bbsimage.skycraft.cn/docs-preview.jpg
-
name: mcenahle Docs
desc: mcenahle 的文档网站。
logo: https://d.mcenahle.cn/images/logo.png
url: https://d.mcenahle.cn/
preview: https://mcenahle.cn/resources/docs-site-preview.jpg
blog:
-
@ -224,9 +218,9 @@ blog:
name: 𝙁𝙡𝙖𝙨𝙝
desc: 路漫漫其修远兮,吾将上下而求索
logo: https://haipeng-lin.cn/images/avatar.jpg
url: https://blog.haipeng-lin.cn
url: https://haipeng-lin.cn
repo: https://gitee.com/linhaipengg
preview: https://img.haipeng-lin.cn/index.webp
preview: https://img.haipeng-lin.cn/1768622018580.png
-
name: PinkDopeyBug
desc: 山难现浮槎,心易陷镜花。
@ -275,13 +269,6 @@ blog:
logo: https://raw.githubusercontent.com/Konata9/pic-base/main/pics/20260126223726455.png
url: https://konata9.cc/
preview: https://raw.githubusercontent.com/Konata9/pic-base/main/pics/20260125225910673.webp
-
name: Esyka
desc: Esyka's Blog
logo: https://www.esyka.top/images/logo.png
url: https://www.esyka.top/
repo: https://github.com/esyka114514
preview: https://www.esyka.top/images/preview.png
---
:::important

View File

@ -1,6 +1,5 @@
---
pageLayout: home
title: Vuepress Theme Plume
config:
-
type: hero
@ -38,7 +37,7 @@ config:
-
title: Multi-language
icon: twemoji:balance-scale
details: Built-in support for 7 languages including Chinese and English, and you can customize and add more language support
details: Built-in support for Chinese/English, and you can customize and add more language support
-
title: Dual Color Theme
icon: twemoji:cityscape
@ -58,7 +57,7 @@ config:
-
title: Markdown Enhancement
icon: twemoji:writing-hand-light-skin-tone
details: Based on regular markdown syntax, adds dozens of enhanced syntaxes such as custom containers, file trees, code groups, etc.
details: Supports Markdown syntax, code block grouping, hint containers, task lists, mathematical formulas, code demonstrations, etc.
-
type: image-text
title: Features
@ -70,7 +69,7 @@ config:
description: Add tags, categories, word count, reading time, writing date, and other information to articles.
-
title: Comments
description: "Supports 4 comment systems: Giscus, Waline, Twikoo, Artalk<br>You can freely choose the comment system that suits your needs."
description: Supports 4 comment systems Giscus, Waline, Twikoo, Artalk<br>You can freely choose the comment system that suits your needs.
-
title: Search
description: Supports local search based on minisearch, and also supports Algolia search.
@ -82,7 +81,7 @@ config:
description: Code copying, CodePen demonstration, JSFiddle demonstration, CodeSandbox demonstration, code groups, line highlighting, line focusing, line warnings, difference comparison, code block folding, etc.
-
title: Resource Embedding
description: "Charts: chart.js/ECharts/Mermaid/flowchart<br>Videos: Bilibili/Youtube/ArtPlayer<br>PDF, 200K+ Iconify icons"
description: Chartschart.js/ECharts/Mermaid/flowchart<br>VideosBilibili/Youtube/ArtPlayer<br>PDF, 200K+ Iconify icons
-
type: text-image
title: Blog
@ -117,48 +116,64 @@ config:
<div style="max-width: 960px;margin:0 auto;" class="home-custom-content">
::: center
![GitHub Repo stars](https://img.shields.io/github/stars/pengzhanbo/vuepress-theme-plume)
![npm version](https://img.shields.io/npm/v/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A&label=npm)
![npm downloads](https://img.shields.io/npm/dm/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A&label=downloads)
![npm downloads](https://img.shields.io/npm/dt/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A&label=downloads)
![github license](https://img.shields.io/github/license/pengzhanbo/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A)
![GitHub Repo stars](https://img.shields.io/github/stars/pengzhanbo/vuepress-theme-plume){.no-view}
![npm version](https://img.shields.io/npm/v/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A&label=npm){.no-view}
![npm downloads](https://img.shields.io/npm/dm/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A&label=downloads){.no-view}
![npm downloads](https://img.shields.io/npm/dt/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A&label=downloads){.no-view}
![github license](https://img.shields.io/github/license/pengzhanbo/vuepress-theme-plume?color=32A9C3&labelColor=1B3C4A){.no-view}
![peer dependency](https://img.shields.io/npm/dependency-version/vuepress-theme-plume/peer/vuepress?color=32A9C3&labelColor=1B3C4A){.no-view}
![codecov](https://codecov.io/gh/pengzhanbo/vuepress-theme-plume/graph/badge.svg?token=W6KYBX7WO5){.no-view}
![peer dependency](https://img.shields.io/npm/dependency-version/vuepress-theme-plume/peer/vuepress?color=32A9C3&labelColor=1B3C4A)
![codecov](https://codecov.io/gh/pengzhanbo/vuepress-theme-plume/graph/badge.svg?token=W6KYBX7WO5)
:::
### Usage
### Installation
Use the following command to quickly create a new ==VuePress== project using this theme.
:::npm-to
:::code-tabs
@tab pnpm
```sh
npm create vuepress-theme-plume@latest
pnpm add vuepress@next vuepress-theme-plume vue
```
@tab npm
```sh
npm install vuepress@next vuepress-theme-plume
```
@tab yarn
```sh
yarn add vuepress@next vuepress-theme-plume
```
:::
### Start the project
### Configuration
::: npm-to
::: code-tabs
@tab .vuepress/config.ts
```sh
npm run docs:dev
```ts :no-line-numbers
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
// vuepress config...
theme: plumeTheme({
// theme config...
})
})
```
:::
### Changelog
### Update Log
[Changelog](./changelog)
[Changelog](../changelog)
### Contributors
Thanks to all contributors!
<Contributors :contributors="data" />
</div>

View File

@ -269,7 +269,7 @@ books:
- 1984:
author: *gOrwell
- animal-farm:
author:*gOrwell
author: *gOrwell
---
```

View File

@ -124,8 +124,8 @@ export default defineUserConfig({
'/': {
// Chinese collection configuration // [!code focus:4]
collections: [
{ type: 'post', dir: 'blog', title: 'Blog' },
{ type: 'doc', dir: 'typescript', title: 'TypeScript Notes', sidebar: 'auto' }
{ type: 'post', dir: 'blog', title: '博客' },
{ type: 'doc', dir: 'typescript', title: 'TypeScript笔记', sidebar: 'auto' }
],
},
'/en/': {
@ -150,8 +150,8 @@ export default defineThemeConfig({
'/': {
// Chinese collection configuration // [!code focus:4]
collections: [
{ type: 'post', dir: 'blog', title: 'Blog' },
{ type: 'doc', dir: 'typescript', title: 'TypeScript Notes', sidebar: 'auto' }
{ type: 'post', dir: 'blog', title: '博客' },
{ type: 'doc', dir: 'typescript', title: 'TypeScript笔记', sidebar: 'auto' }
],
},
'/en/': {

View File

@ -159,7 +159,7 @@ The `include` configuration is implemented by the
- **Default:** `{ provider: 'iconify' }`
- **Details:** Icon configuration.
[View **icon** usage instructions](../guide/features/icon.md){.read-more}
[View **icon** usage instructions](../../theme/guide/features/icon.md){.read-more}
### plot

View File

@ -82,7 +82,6 @@ Refer to [Algolia DocSearch Reference](/guide/features/content-search/#algolia-d
### Enable
```ts title=".vuepress/config.ts" twoslash
// @errors: 2353
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

View File

@ -13,7 +13,6 @@ Related plugin: [@vuepress/plugin-watermark](https://ecosystem.vuejs.press/zh/pl
## Usage
```ts title=".vuepress/config.ts" twoslash
// @errors: 7006
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

View File

@ -1,294 +0,0 @@
---
title: Demos
createTime: 2025/10/08 19:22:07
permalink: /en/demos/
readingTime: false
prev: false
next: false
article: false
externalLinkIcon: false
contributors: false
changelog: false
search: false
docs:
-
name: VuePress Plume
desc: A simple, feature-rich VuePress documentation & blog theme.
logo: /plume.png
url: https://theme-plume.vuejs.press
repo: https://github.com/pengzhanbo/vuepress-theme-plume
preview: /images/demos/plume.jpg
-
name: city walk
desc: An open data platform dedicated to gathering outdoor activity locations and cultural venues from over 350 cities across the country.
logo: https://pub-187e90a3327b41ccb8869558b6b8bbc0.r2.dev/city-shenzhen/2024/12/0a08e9417033ccaf116fb71cfc7bcdb9.png
url: https://shenzhen.citywalk.group/
repo: https://github.com/sunshang-hl/CityWalk
preview: https://pub-187e90a3327b41ccb8869558b6b8bbc0.r2.dev/city-shenzhen/2024/12/ed251c4438f722dffd6cb95db86c0d56.jpg
-
name: Oh My MC
desc: Minecraft tutorial documentation.
logo: https://static.ohmymc.com/img/minecraft-154749_1280.png?max_width=1920&max_height=1920
url: https://ohmymc.com/
preview: https://static.ohmymc.com/img/20241228225159139.png?max_width=1920&max_height=1920
-
name: NcatBotDocs
desc: Documentation for NcatBot, a QQ bot framework project.
logo: https://docs.ncatbot.xyz/images/logo.png
url: https://docs.ncatbot.xyz
repo: https://github.com/Isaaczhr/NcatBotDocs
preview: https://docs.ncatbot.xyz/images/preview.jpg
-
name: PGuide Docs
desc: A localized university guide related to self-study in computer science, campus life, and open public services.
logo: https://docs.pguide.studio/logo.svg
url: https://docs.pguide.studio
repo: https://github.com/PGuideDev/PGuide-Docs
preview: https://cos-global.pguide.cloud/pguide-docs/src/pguide-doc.png
-
name: Documentation Center | Shougan Interactive
desc: Shougan Interactive is a professional platform for live questions, voting, and large-screen interactions, providing one-stop interactive solutions for lecturers, hosts, and conference organizers
logo: https://docs.shougan.net/images/logo.png
url: https://docs.shougan.net
repo: https://github.com/SuJingnan/vuepress-theme-plume
preview: https://docs.shougan.net/images/docs-proview.png
-
name: Search-Rec-Ads Cosmos Explorer
desc: Explore the fascinating universe of search, recommendation, and advertising algorithms
logo: https://raw.githubusercontent.com/1985312383/search-rec-ads-cosmos-explorer/refs/heads/main/docs/.vuepress/public/img/favicon.png
url: https://1985312383.github.io/search-rec-ads-cosmos-explorer/
repo: https://github.com/1985312383/search-rec-ads-cosmos-explorer
preview: https://raw.githubusercontent.com/1985312383/search-rec-ads-cosmos-explorer/refs/heads/main/docs/.vuepress/public/img/preview.jpg
-
name: MaaAssistantArknights Documentation Site
desc: Arknights assistant, automatic farming, smart base shifts, one-click daily tasks
logo: https://cdn.jsdelivr.net/gh/MaaAssistantArknights/design@main/logo/maa-logo_128x128.jpg
url: https://docs.maa.plus
repo: https://github.com/MaaAssistantArknights/MaaAssistantArknights/tree/dev/docs
preview: https://docs.maa.plus/images/preview.jpg
-
name: Python Beginner Docs
desc: Beginner-friendly Python 3 documentation
logo: https://python.yxzl.dev/python-logo-only.svg
url: https://python.yxzl.dev/
repo: https://github.com/yxzlwz/python-doc-web
preview: https://python.yxzl.dev/screenshot.png
-
name: TinyPiXOS
desc: A domestically developed, lightweight, and highly customizable embedded mobile device desktop OS!
logo: https://file.tinypixos.com/tinypixos/tplogo.svg
url: https://www.tinypixos.com/
repo: https://github.com/TinyPiXOS/TinyPiXOS
preview: https://file.tinypixos.com/tinypixos/plume_theme_case.jpg
-
name: HEUOpenResource
desc: Harbin Engineering University Resource Sharing Program
logo: https://cdn.jsdelivr.net/gh/HEUOpenResource/HEUOpenResource.github.io@main/docs/.vuepress/public/avatar.jpg
url: https://heu.us.kg/
repo: https://github.com/HEUOpenResource/HEUOpenResource.github.io
preview: https://cdn.jsdelivr.net/gh/HEUOpenResource/HEUOpenResource.github.io@main/docs/.vuepress/public/intro.png
-
name: SKYCRAFT Server Docs
desc: Documentation for Minecraft server SKYCRAFT.
logo: https://official.skycraft.cn/i/3.jpg
url: https://docs.skycraft.cn/
preview: https://bbsimage.skycraft.cn/docs-preview.jpg
blog:
-
name: Peng Zhanbo
desc: Even if slow, keep going; even if you fall behind, even if you fail, you must be able to reach your goal.
logo: https://pengzhanbo.cn/images/blogger-fav.png
url: https://pengzhanbo.cn/
repo: https://github.com/pengzhanbo/pengzhanbo.cn
preview: /images/demos/pengzhanbo.webp
-
name: Er Mao Zi
desc: An honest Er Mao Zi, never talks nonsense
logo: https://www.ermao.net/images/logo.svg
url: https://www.ermao.net/
repo: https://github.com/ermaozi
preview: /images/demos/ermao.net.png
-
name: Keep It Simple
desc: Entities should not be multiplied beyond necessity
logo: https://www.dingyuqi.com/icon/icon.ico
url: https://dingyuqi.com
repo: https://github.com/dingyuqi
preview: https://www.dingyuqi.com/back-ground/site-home-page.png
-
name: Tu Yongtao
desc: The farther you go in your mind, the more stable you walk in reality!
logo: http://tuyongtao.top/fettjob/imgs/head.jpg
url: http://tuyongtao.top/fettjob/
repo: https://github.com/tuyongtao-T
preview: /images/demos/tuyongtao.top.jpeg
-
name: Hoey
desc: Teacher, I really want to improve.
logo: https://zhenghaoyang.cn/avatar.jpg
url: https://zhenghaoyang.cn/
repo: https://github.com/zhenghaoyang24
preview: https://zhenghaoyang.cn/siteshot.png
-
name: IXYZ
desc: Hi, there
logo: https://ixyz.org/favicon.ico
url: https://ixyz.org
repo: https://github.com/ixyzorg
preview: /images/demos/ixyz.org.jpg
-
name: AJohn
desc: Never, ever, ever give up
logo: https://cdn.jsdelivr.net/gh/zzyAJohn/Image/blog-favicon.png
url: https://ajohn.top/
repo: https://github.com/zzyAJohn
preview: https://cdn.jsdelivr.net/gh/zzyAJohn/Image/blog-preview.png
-
name: Jiawei Wang
desc: PLUS & WAVE!
logo: https://plus-wave.github.io/icon/wave+.png
url: https://plus-wave.github.io
repo: https://github.com/PLUS-WAVE
preview: https://raw.githubusercontent.com/PLUS-WAVE/blog-image/master/img/blog/2024-11-24/plus-wave.github.io.jpg
-
name: Xiao Mu Mu Ya
desc: Life is like chess, once you make a move, you can't take it back; the way of life lies in being calm
logo: https://blog.mu00.cn/logo.png
url: https://blog.mu00.cn/
repo: https://github.com/sunnyboy-mu/sunnyboy-blog
preview: /images/demos/sunnyboy_mu.jpg
-
name: QiHuang02's Notebook
desc: Experience is the best teacher.
logo: https://qihuang02.cn/favicon.svg
url: https://qihuang02.cn/
repo: https://github.com/QiHuang02/qihuang02.github.io
preview: https://image.qihuang02.cn/file/1736003534894_yulantu.png
-
name: jiahao
desc: Just pursue it, even if it's just a momentary light
logo: https://s.jhdev.cn/head.png
url: https://jhdev.cn/
repo: https://github.com/oh-yey
preview: https://s.jhdev.cn/demos/blog-preview.png
-
name: A Zhe
desc: Strengthening yourself is the only way to solve problems
logo: https://www.azhe.xin/blogger.png
url: https://www.azhe.xin/
repo: https://github.com/liuzhemax/blog
preview: /images/demos/azhe.jpg
-
name: jindongjie
desc: Keep.It.Simple.Stupid
logo: https://ar0m.com/logo/aptrue-sience-logo.png
url: https://ar0m.com
repo: https://github.com/jindongjie/blog-vuepress-2025
preview: /images/demos/jindongjie.jpg
-
name: Yi Shu Lun
desc: A programmer's blog who loves art
logo: https://yishulun.com/avatar.png
url: https://yishulun.com
repo: https://github.com/rixingyike/rixingyike.github.io
preview: /images/demos/yishulun.com.jpg
-
name: Phys Nya
desc: Notes and life of a physics student
logo: https://physnya.top/images/Physics_nya.jpg
url: https://physnya.top
repo: https://github.com/physnya/blog
preview: https://physnya.top/images/preview.png
-
name: XINGJI
desc: All life so far has been written with failure, but that doesn't stop me from moving forward✨
logo: https://i.p-i.vip/47/20240920-66ed7b168c38c.jpg
url: https://vue.xingji.fun
repo: https://github.com/XingJi-love/XingJi-blog-plume
preview: https://i.p-i.vip/47/20250407-67f3f1eca1983.png
-
name: Paiad
desc: Pessimists are always right, optimists always move forward.
logo: https://blog.paiad.top/sunflower.png
url: https://blog.paiad.top
repo: https://github.com/paiad
preview: https://blog.paiad.top/paiad-blog.png
-
name: Flash
desc: The road ahead is long; I shall search up and down
logo: https://haipeng-lin.cn/images/avatar.jpg
url: https://haipeng-lin.cn
repo: https://gitee.com/linhaipengg
preview: https://img.haipeng-lin.cn/1768622018580.png
-
name: PinkDopeyBug
desc: Mountains are hard to see floating rafts, hearts easily fall into mirror flowers.
logo: https://w20241204.dpdns.org/images/avatar.jpg
url: https://w20241204.dpdns.org/
repo: https://github.com/PinkDopeyBug/blog
preview: https://w20241204.dpdns.org/images/demos/preview.png
-
name: rand777
desc: Even wobbly, you can reach your destination.
logo: https://blog.rand777.space/avatar.jpg
url: https://blog.rand777.space
repo: https://github.com/rand777gg/rand777-plume-blog
preview: https://blog.rand777.space/siteshot.png
-
name: Yi Xiang Zhi Lu
desc: Yi Xiang Zhi Lu's Blog
logo: https://yxzl.dev/head.png
url: https://yxzl.dev/
repo: https://github.com/yxzlwz/blog
preview: https://yxzl.dev/screenshot.png
-
name: Honahec
desc: Honahec's Blog
logo: https://image.honahec.cc/avatar-circle.png
url: https://blog.honahec.cc/
repo: https://github.com/Honahec/blog
preview: https://image.honahec.cc/20251018223321710.png
-
name: Lucas
desc: Ad astra abyssosque.
logo: https://static.lucas04.top/static/favicon/favicon-64.png
url: https://blog.lucas04.top/
repo: https://github.com/lucas0-nhr/lucas04-nhr.github.io
preview: https://static.lucas04.top/static/blog_preview.png
-
name: Kairui's Website
desc: Mathematics is the art of expressing ideas precisely.
logo: https://kairui.ca/uoft.svg
url: https://kairui.ca
repo: https://github.com/orderization
preview: https://kairui.ca/img/homepage_demo.png
-
name: Konata's Secret Base
desc: A private space to record technology and life
logo: https://raw.githubusercontent.com/Konata9/pic-base/main/pics/20260126223726455.png
url: https://konata9.cc/
preview: https://raw.githubusercontent.com/Konata9/pic-base/main/pics/20260125225910673.webp
---
:::important
You can always add your documentation or blog to this page via ==PR==.
Site preview images should be placed in the `docs/.vuepress/public/images/demos` directory. Using remote links is recommended so you can update them at any time.
Please try to use `.jpg` format for images, and use [tinypng](https://tinypng.com/) for compression if the file size is large.
:::
[Go to **Github Pull Request** to submit your site](https://github.com/pengzhanbo/vuepress-theme-plume/edit/main/docs/en/demos.md){.read-more}
## Documentation
<Demos :list="$frontmatter.docs" />
## Blog
<Demos :list="$frontmatter.blog" />
<script setup>
import Demos from '~/components/Demos.vue'
</script>

View File

@ -77,12 +77,12 @@ list:
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: Even if slow, persist without stop; even if falling behind, even if failing, one must be able to reach the goal they are heading towards.
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: Even if slow, persist without stop; even if falling behind, even if failing, one must be able to reach the goal they are heading towards.
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
socials:
-
icon: github
@ -96,7 +96,7 @@ list:
avatar: https://github.com/pengzhanbo.png
location: GuangZhou
organization: PengZhanBo
desc: Even if slow, persist without stop; even if falling behind, even if failing, one must be able to reach the goal they are heading towards.
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
socials:
-
icon: github
@ -110,17 +110,17 @@ list:
avatar: https://github.com/pengzhanbo.png
location: GuangZhou
organization: PengZhanBo
desc: Even if slow, persist without stop; even if falling behind, even if failing, one must be able to reach the goal they are heading towards.
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
groups:
-
title: Group 1
desc: Custom colors
title: 分组 1
desc: 自定义颜色
list:
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: Even if slow, persist without stop; even if falling behind, even if failing, one must be able to reach the goal they are heading towards.
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
backgroundColor: rgb(255,153,0)
color: rgb(255,255,153)
nameColor: rgb(255,255,170)
@ -135,7 +135,7 @@ groups:
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: Even if slow, persist without stop; even if falling behind, even if failing, one must be able to reach the goal they are heading towards.
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
backgroundColor: rgb(255,102,102)
color: rgb(255,204,204)
nameColor: rgb(255,238,238)
@ -143,22 +143,22 @@ groups:
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: Even if slow, persist without stop; even if falling behind, even if failing, one must be able to reach the goal they are heading towards.
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
backgroundColor: rgb(0,153,204)
color: rgb(153,238,255)
nameColor: rgb(153,255,255)
-
title: Group 2
desc: Description for Group 2
title: 分组 2
desc: 这里是分组 2 的描述文字
list:
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: Even if slow, persist without stop; even if falling behind, even if failing, one must be able to reach the goal they are heading towards.
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: Even if slow, persist without stop; even if falling behind, even if failing, one must be able to reach the goal they are heading towards.
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
---

View File

@ -86,7 +86,7 @@ Refer to the [ECharts documentation](https://echarts.apache.org/handbook/zh/get-
## Advanced
You can import and use `defineEchartsConfig` in the
[client configuration file](https://vuejs.press/guide/configuration.html#client-config-file) to customize ECharts:
[client configuration file](https://vuejs.press/zh/guide/configuration.html##使用脚本) to customize ECharts:
```ts
import { defineEchartsConfig } from '@vuepress/plugin-markdown-chart/client'

View File

@ -346,6 +346,6 @@ Symbols that should probably not be used in text: `=>`, `->`, `:>`, `|`, `@>`, a
To emphasize a specific path in the flowchart, you can additionally define it as follows:
```md
```
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
```

View File

@ -260,7 +260,7 @@ object NewYork
map CapitalCity {
UK *-> London
USA*--> Washington
USA *--> Washington
Germany *---> Berlin
}
@ -427,9 +427,9 @@ rectangle "Investigate" as I <<$bProcess>><<behavior>> #Business
rectangle "Pay" as P <<$bProcess>><<behavior>> #Business
HC *-down- CI
HC*-down- NAS
HC *-down- NAS
HC *-down- V
HC*-down- I
HC *-down- I
HC *-down- P
CI -right->> NAS
@ -574,16 +574,16 @@ caption figure 1
title My super title
* <&flag>Debian
**<&globe>Ubuntu
***Linux Mint
** <&globe>Ubuntu
*** Linux Mint
*** Kubuntu
***Lubuntu
*** Lubuntu
*** KDE Neon
** <&graph>LMDE
**<&pulse>SolydXK
** <&pulse>SolydXK
** <&people>SteamOS
** <&star>Raspbian with a very long name
***<s>Raspmbc</s> => OSMC
*** <s>Raspmbc</s> => OSMC
*** <s>Raspyfi</s> => Volumio
header
@ -630,9 +630,9 @@ endlegend
```md
@startjson
# highlight "lastName"
# highlight "address" / "city"
# highlight "phoneNumbers" / "0" / "number"
#highlight "lastName"
#highlight "address" / "city"
#highlight "phoneNumbers" / "0" / "number"
{
"firstName": "John",
"lastName": "Smith",

View File

@ -49,7 +49,7 @@ for example `:line-numbers=2` indicates that line numbers in the code block star
**Input:**
````md
````
```ts:line-numbers
// Line numbers enabled
const line2 = 'This is line 2'
@ -95,7 +95,7 @@ Add `{xxxx}` immediately after `[lang]` to enable line highlighting, where `xxx`
**Input:**
````md
````
```js{4}
export default {
data () {
@ -127,7 +127,7 @@ In addition to single lines, you can specify multiple single lines, line ranges,
**Input:**
````md
````
```js{1,4,6-8}
export default { // Highlighted
data () {
@ -163,10 +163,10 @@ You can also use the `// [!code highlight]` comment to enable line highlighting.
**Input:**
````md
````
```js
export default {
data() {
data () {
return {
msg: 'Highlighted!' // [\!code highlight]
}
@ -195,10 +195,10 @@ Additionally, you can use `// [!code focus:<lines>]` to define the number of lin
**Input:**
````md
````
```js
export default {
data() {
data () {
return {
msg: 'Focused!' // [\!code focus]
}
@ -242,10 +242,10 @@ Adding `// [!code --]` or `// [!code ++]` comments to a line will create a diff
**Input:**
````md
````
```js
export default {
data() {
data () {
return {
error: 'Removed', // [\!code --]
warning: 'Added' // [\!code ++]
@ -289,10 +289,10 @@ Adding `// [!code warning]` or `// [!code error]` comments to a line will apply
**Input:**
````md
````
```js
export default {
data() {
data () {
return {
error: 'Error', // [\!code error]
warning: 'Warning' // [\!code warning]
@ -334,7 +334,7 @@ mkdir hello && cd hello # [!code warning]
**Input:**
````md
````
```ts
export function foo() { // [\!code word:Hello]
const msg = 'Hello World'
@ -357,7 +357,7 @@ will highlight only the first two occurrences of `options`.
**Input:**
````md
````
```ts
// [\!code word:options:2]
const options = { foo: 'bar' }

View File

@ -61,7 +61,7 @@ In Markdown, the `::: card-masonry` container can be used instead of `<CardMason
``` md
::: card-masonry cols="3" gap="16" <!-- [!code hl]-->
![alt text](/images/1.png)
![](/images/1.png)
<!-- More content -->
@ -79,17 +79,17 @@ Masonry layout is particularly suitable for displaying images. You can directly
``` md
::: card-masonry
![alt text](image_url)
![](image_url)
![alt text](image_url)
![](image_url)
![alt text](image_url)
![](image_url)
![alt text](image_url)
![](image_url)
![alt text](image_url)
![](image_url)
![alt text](image_url)
![](image_url)
:::
```

View File

@ -132,4 +132,4 @@ It can also be placed within a `<CardGrid>` component.
/>
</CardGrid>
[View Photography Works Example](/en/demos/)
[View Photography Works Example](../../../../../blog/1.示例/照片类作品示例.md)

View File

@ -129,7 +129,8 @@ config:
**Result:**
::: window
:::demo-wrapper img no-padding
![banner](/images/custom-banner.jpg)
:::
@ -245,7 +246,7 @@ config:
**Result:**
::: window
:::demo-wrapper img no-padding
<img src="/images/custom-doc-hero.jpg" alt="Theme Plume" />
:::
@ -358,7 +359,7 @@ config:
**Result:**
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-features.jpg" alt="custom-features" />
:::
@ -431,11 +432,11 @@ config:
**Result:**
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-image-text.jpg" alt="image-text" />
:::
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-text-image.jpg" alt="text-image" />
:::
@ -504,7 +505,7 @@ config:
**Result:**
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-profile.jpg" alt="profile" />
:::
@ -550,7 +551,7 @@ yarn add vuepress@next vuepress-theme-plume
**Result:**
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-content.jpg" alt="content" />
:::

View File

@ -64,7 +64,7 @@ export default defineUserConfig({
encrypt: {
rules: {
// Can be the relative path of an MD file to encrypt that file
'frontend/basics.md': '123456',
'前端/基础.md': '123456',
// Can be a directory path to encrypt all articles under that directory
'/notes/vuepress-theme-plume/': '123456',
// Can be a request path to encrypt all articles under that path

View File

@ -16,7 +16,7 @@ The theme supports icons from the following sources:
Icons are used in the same way across the following theme features:
- [Navbar Icons](../../config/navbar.md#configuration)
- [Sidebar Icons](../../guide/quick-start/sidebar.md#visual-enhancement-features)
- [Sidebar Icons](../../guide/document.md#sidebar-icons)
- [File Tree Icons](../../guide/markdown/file-tree.md)
- [Code Group Title Icons](../code/code-tabs.md#group-title-icons)

View File

@ -36,11 +36,11 @@ For more configuration options, please refer to [@vuepress/plugin-photo-swipe](h
Image preview can be disabled by using the `no-view` or `ignore` class names, or the `no-view` attribute.
```md
![alt text](path/to/image){.no-view}
![alt text](path/to/image){.ignore}
![alt text](path/to/image){no-view}
![](path/to/image){.no-view}
![](path/to/image){.ignore}
![](path/to/image){no-view}
<img src="path/to/image" class="no-view" alt="alt text">
<img src="path/to/image" class="ignore" alt="alt text">
<img src="path/to/image" no-view alt="alt text">
<img src="path/to/image" class="no-view">
<img src="path/to/image" class="ignore">
<img src="path/to/image" no-view>
```

View File

@ -90,7 +90,7 @@ In markdown, use local asset paths directly:
```md
![foo](/images/foo.jpg)
<img src="/images/foo.jpg" alt="foo">
<img src="/images/foo.jpg">
```
In `javascript`:

View File

@ -1,12 +1,9 @@
---
title: Demo Container
createTime: 2025/10/08 14:47:12
icon: fxemoji:window
permalink: /en/guide/markdown/window/
icon: icon-park-outline:eyes
permalink: /en/guide/markdown/demo-wrapper/
outline: 2
badge:
text: Change
type: warning
---
## Overview
@ -17,7 +14,7 @@ separately from other content. The theme supports adding demo containers in Mark
## Syntax
````md
::: window
::: demo-wrapper
Add your demo here
:::
````
@ -34,20 +31,20 @@ Add your demo here
Containing only images:
```md
::: window
::: demo-wrapper img no-padding
![hero](/images/custom-hero.jpg)
:::
```
**Output:**
::: window
::: demo-wrapper img no-padding
![hero](/images/custom-hero.jpg)
:::
Containing markdown syntax:
```md
::: window title="Title"
::: demo-wrapper title="Title"
### Level 3 Heading
This is content inside the demo container.
@ -55,7 +52,7 @@ This is content inside the demo container.
```
**Output:**
::: window title="Title"
::: demo-wrapper title="Title"
### Level 3 Heading
@ -65,7 +62,7 @@ This is content inside the demo container.
Containing HTML/Vue code:
```md
::: window
::: demo-wrapper
<h1 class="your-demo-title">This is a heading</h1>
<p class="your-demo-paragraph">This is a paragraph</p>
@ -81,7 +78,7 @@ Containing HTML/Vue code:
```
**Output:**
::: window
::: demo-wrapper
<h1 class="your-demo-title">This is a heading</h1>
<p class="your-demo-paragraph">This is a paragraph</p>

View File

@ -159,13 +159,13 @@ Right-aligned content
**Input:**
````md
The farthest distance in the world Is not the distance between life and death But you don't know I love you when I stand in front of you.[^footnote1].
The farthest distance in the world Is not the distance between life and death But you don't know I love you when I stand in front of you.[^footnote1]
[^footnote1]: From India.Rabindranath Tagore **The Farthest Distance in the World**
````
**Output:**
The farthest distance in the world Is not the distance between life and death But you don't know I love you when I stand in front of you.[^footnote1].
The farthest distance in the world Is not the distance between life and death But you don't know I love you when I stand in front of you.[^footnote1]
[^footnote1]: From India.Rabindranath Tagore **The Farthest Distance in the World**

View File

@ -3,9 +3,6 @@ title: File Tree
createTime: 2025/10/08 14:41:57
icon: mdi:file-tree
permalink: /en/guide/markdown/file-tree/
badge:
text: Change
type: warning
---
## Overview
@ -21,7 +18,7 @@ displayed, simply add a slash `/` at the end of the list item.
The following syntax can be used to customize the appearance of the file tree:
- Emphasize file or directory names by making them bold, e.g., `**README.md**`
- Add comments to files or directories by appending a comment starting with `#` after the name, for example, `README.md This is a README file`
- Add comments to files or directories by adding additional text after the name
- Mark files or directories as **added** or **deleted** by prefixing the name with `++` or `--`
- Use `...` or `…` as the name to add placeholder files and directories.
- Add `icon="simple"` or `icon="colored"` after `:::file-tree` to switch to simple icons or colored icons. The default is colored icons.
@ -37,7 +34,7 @@ The following syntax can be used to customize the appearance of the file tree:
- ++ config.ts
- -- page1.md
- README.md
- theme # A **theme** directory
- theme A **theme** directory
- client
- components
- **Navbar.vue**
@ -64,7 +61,7 @@ The following syntax can be used to customize the appearance of the file tree:
- ++ config.ts
- -- page1.md
- README.md
- theme # A **theme** directory
- theme A **theme** directory
- client
- components
- **Navbar.vue**

View File

@ -391,7 +391,7 @@ Output:
[Add more style support for Fontawesome](https://docs.fontawesome.com/web/style/styling){.read-more}
```md
```
::circle-user 2xl:: <!-- 2xl is shorthand for fa-2xl, icon size is 2em -->
::circle-user rotate-90:: <!-- icon rotated 90 degrees -->
::circle-user beat:: <!-- icon animation -->

View File

@ -144,18 +144,18 @@ Included via `<!-- @include: ./foo.snippet.md#snippet -->`.
Using `<!-- @include: ./foo.snippet.md -->` to include the entire file:
:::: window title="Include by file"
:::: demo-wrapper title="Include by file"
<!-- @include: ../../snippet/include-2.snippet.md -->
::::
Using `<!-- @include: ./foo.snippet.md{5-7} -->` to include lines 5-7 of the file:
:::: window title="Include by lines"
:::: demo-wrapper title="Include by lines"
<!-- @include: ../../snippet/include-2.snippet.md{5-7} -->
::::
Using `<!-- @include: ./foo.snippet.md#snippet -->` to include the `snippet` region:
:::: window title="Include by file region"
:::: demo-wrapper title="Include by file region"
<!-- @include: ../../snippet/include-2.snippet.md#snippet -->
::::

View File

@ -1,337 +0,0 @@
---
title: Obsidian Compatibility
icon: simple-icons:obsidian
createTime: 2026/04/17 21:56:55
permalink: /en/guide/markdown/obsidian/
---
## Overview
The theme provides compatibility support for Obsidian's official Markdown extension syntax through the `vuepress-plugin-md-power` plugin, enabling Obsidian users to write documentation using familiar syntax.
Currently supported Obsidian extension syntax includes:
- [Wiki Links](#wiki-links) - Syntax for inter-page linking
- [Embeds](#embeds) - Embed content from other files into the current page
- [Comments](#comments) - Add comments visible only during editing
::: warning No plans to support extension syntax provided by Obsidian's third-party community plugins
:::
## Wiki Links
Wiki Links are syntax used in Obsidian for linking to other notes. Use double brackets `[[]]` to wrap content to create internal links.
### Syntax
```md
[[filename]]
[[filename#heading]]
[[filename#heading#subheading]]
[[filename|alias]]
[[filename#heading|alias]]
[[https://example.com|External Link]]
```
### Filename Search Rules
When using Wiki Links, filenames are matched according to the following rules:
**Match Priority:**
1. **Full Path** - Exact match against file paths
2. **Fuzzy Match** - Match filenames at the end of paths, prioritizing the shortest path
**Path Resolution Rules:**
- **Relative paths** (starting with `.`): Resolved relative to the current file's directory
- **Absolute paths** (not starting with `.`): Searched throughout the document tree, prioritizing the shortest path
- **Directory form** (ending with `/`): Matches `README.md` in that directory
**Example:**
Assuming the following document structure:
```txt
docs/
├── README.md
├── guide/
│ ├── README.md
│ └── markdown/
│ └── obsidian.md
```
In `docs/guide/markdown/obsidian.md`:
| Syntax | Match Result |
| ------------------ | ----------------------------------------------------------------------------------------- |
| `[[obsidian]]` | Matches `docs/guide/markdown/obsidian.md` (matched via filename) |
| `[[./]]` | Matches `docs/guide/markdown/README.md` (relative path) |
| `[[../]]` | Matches `docs/guide/README.md` (parent directory) |
| `[[guide/]]` | Matches `docs/guide/README.md` (directory form) |
### Examples
**External Links:**
**Input:**
```md
[[https://example.com|External Link]]
```
**Output:**
[[https://example.com|External Link]]
**Internal Anchor Links:**
**Input:**
```md
[[npm-to]] <!-- Search by filename -->
[[guide/markdown/math]] <!-- Search by file path -->
[[#Wiki Links]] <!-- Heading on current page -->
[[file-tree#Configuration]] <!-- Search by filename, link to heading -->
```
**Output:**
[[npm-to]]
[[guide/markdown/math]]
[[#Wiki Links]]
[[file-tree#Configuration]]
[Obsidian Official - **Wiki Links**](https://obsidian.md/en/help/links){.readmore}
## Embeds
The embed syntax allows you to insert other file resources into the current page.
### Syntax
```md
![[filename]]
![[filename#heading]]
![[filename#heading#subheading]]
```
Filename search rules are the same as [Wiki Links](#filename-search-rules).
::: info Resources starting with `/` or having no path prefix like `./` are loaded from the `public` directory
:::
### Image Embeds
**Syntax:**
```md
![[image]]
![[image|300]]
![[image|300x200]]
```
Supported formats: `jpg`, `jpeg`, `png`, `gif`, `avif`, `webp`, `svg`, `bmp`, `ico`, `tiff`, `apng`, `jfif`, `pjpeg`, `pjp`, `xbm`
**Example:**
::: demo markdown title="Basic Image" expanded
```md
![[images/custom-hero.jpg]]
```
:::
::: demo markdown title="Set Width" expanded
```md
![[images/custom-hero.jpg|300]]
```
:::
::: demo markdown title="Set Width and Height" expanded
```md
![[images/custom-hero.jpg|300x200]]
```
:::
### PDF Embeds
> [!NOTE]
> PDF embeds require the `markdown.pdf` plugin to be enabled for proper functionality.
**Syntax:**
```md
![[document.pdf]]
![[document.pdf#page=1]] <!-- #page=1 means first page -->
![[document.pdf#page=1#height=300]] <!-- #page=page number #height=height -->
```
Supported formats: `pdf`
---
### Audio Embeds
**Syntax:**
```md
![[audio file]]
```
Supported formats: `mp3`, `flac`, `wav`, `ogg`, `opus`, `webm`, `acc`
---
### Video Embeds
> [!NOTE]
> Video embeds require the `markdown.artPlayer` plugin to be enabled for proper functionality.
**Syntax:**
```md
![[video file]]
![[video file#height=400]] <!-- Set video height -->
```
Supported formats: `mp4`, `webm`, `mov`, etc.
---
### Content Fragment Embeds
Content fragments under a specified heading can be embedded using `#heading`:
**Input:**
```md
![[my-note]]
![[my-note#Heading One]]
![[my-note#Heading One#Subheading]]
```
[Obsidian Official - **Insert Files**](https://obsidian.md/en/help/embeds){.readmore}
[Obsidian Official - **File Formats**](https://obsidian.md/en/help/file-formats){.readmore}
## Comments
Content wrapped in `%%` is treated as a comment and will not be rendered on the page.
### Syntax
**Inline Comments:**
```md
This is an %%inline comment%% example.
```
**Block Comments:**
```md
%%
This is a block comment.
It can span multiple lines.
%%
```
### Examples
**Inline Comments:**
**Input:**
```md
This is an %%inline comment%% example.
```
**Output:**
This is an %%inline comment%% example.
---
**Block Comments:**
**Input:**
```md
Content before the comment
%%
This is a block comment.
It can span multiple lines.
%%
Content after the comment
```
**Output:**
Content before the comment
%%
This is a block comment.
%%
It can span multiple lines.
[Obsidian Official - **Comments**](https://obsidian.md/en/help/syntax#%E6%B3%A8%E9%87%8B){.readmore}
## Configuration
Obsidian compatibility features are all enabled by default. You can selectively enable or disable them through configuration:
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
mdPower: {
obsidian: {
wikiLink: true, // Wiki Links
embedLink: true, // Embeds
comment: true, // Comments
},
pdf: true, // PDF embed functionality
artPlayer: true, // Video embed functionality
}
}
})
})
```
### Configuration Options
:::: field-group
::: field name="wikiLink" type="boolean" default="true" optional
Enable Wiki Links syntax.
:::
::: field name="embedLink" type="boolean" default="true" optional
Enable embed content syntax.
:::
::: field name="comment" type="boolean" default="true" optional
Enable comment syntax.
:::
::::
## Notes
- These plugins provide **compatibility support** and do not fully implement all of Obsidian's functionality
- Some Obsidian-specific features (such as internal link graph views, bidirectional links, etc.) are outside the scope of this support
- When embedding content, the embedded page also participates in the theme's build process
- PDF embeds require the `markdown.pdf` plugin to be enabled simultaneously
- Video embeds require the `markdown.artPlayer` plugin to be enabled simultaneously
- Embed resources starting with `/` or using `./` form are loaded from the `public` directory

View File

@ -12,7 +12,7 @@ This could be to pique readers' curiosity or simply to add a bit of reading diff
To satisfy this playful intention, the theme provides a fun little feature called **"plot" text**. It looks like this:
:::window
:::demo-wrapper
Did you know that !!Lu Xun!! once said: "!!I never said this!!!" It was an enlightening revelation that deeply
inspired me, filling me with unparalleled strength! So, !!I turned over in bed!!!
:::
@ -84,7 +84,7 @@ You can also control behavior through attribute syntax:
Use the `plot` option in Frontmatter to control the default behavior of this feature on the current page:
```md
```
---
plot:
trigger: hover
@ -102,7 +102,7 @@ Did you know that !!Lu Xun!! once said: "!!I never said this!!!" It was an enlig
**Output**:
:::window
:::demo-wrapper
Did you know that !!Lu Xun!! once said: "!!I never said this!!!" It was an enlightening revelation that
deeply inspired me, filling me with unparalleled strength! So, !!I turned over in bed!!!!
:::
@ -118,7 +118,7 @@ Blur effect + click: !!Click to see me!!{.blur .click}
**Output**:
:::window
:::demo-wrapper
Mask effect + hover: !!Hover to see me!!{.mask .hover}
Mask effect + click: !!Click to see me!!{.mask .click}

View File

@ -77,7 +77,7 @@ which represent the bound value of the tab and whether the tab is currently acti
**Input:**
````md
````
::: tabs
@tab npm

View File

@ -94,7 +94,7 @@ export default defineUserConfig({
{
type: 'doc',
dir: 'guide',
title: 'Guide',
title: '指南',
// autoFrontmatter: true, // Theme built-in configuration
autoFrontmatter: {
title: true, // Auto-generate title
@ -117,7 +117,7 @@ export default defineThemeConfig({
{
type: 'doc',
dir: 'guide',
title: 'Guide',
title: '指南',
// autoFrontmatter: true, // Theme built-in configuration
autoFrontmatter: {
title: true, // Auto-generate title
@ -297,23 +297,23 @@ Example:
::: code-tree
```md title="docs/blog/service.md"
```md title="docs/blog/服务.md"
---
title: Service
permalink: /blog/service/
title: 服务
permalink: /blog/wu-fu/
---
```
```md title="docs/blog/capital.md"
```md title="docs/blog/都城.md"
---
title: Capital
permalink: /blog/capital/
title: 都城
permalink: /blog/dou-cheng/
---
```
:::
You probably noticed that in the example, the permalink for the `capital.md` file is `/blog/capital/`,
You probably noticed that in the example, the permalink for the `都城.md` file is `/blog/dou-cheng/`,
which is incorrect. This is because `pinyin-pro`'s default dictionary cannot accurately identify polyphonic
characters. If you need a more precise conversion result,you can manually install `@pinyin-pro/data`,
and the theme will automatically load this dictionary to improve accuracy.
@ -326,9 +326,9 @@ npm i @pinyin-pro/data
:::
```md title="docs/blog/capital.md"
```md title="docs/blog/都城.md"
---
title: Capital
permalink: /blog/capital/
title: 都城
permalink: /blog/du-cheng/
---
```

View File

@ -595,7 +595,7 @@ title: Article Title
cover: /images/cover.jpg
coverStyle:
layout: left
ratio: 16/9
ratio: 16:9
width: 300
---
```
@ -606,7 +606,7 @@ Display effect:
<VPPostItem
:post="{ path: '/article/ecxnxxd0/', title: 'Article Title',
categoryList: [{id:'65f30c',sort:4,name:'Tutorial'}], createTime: '2024/09/18 09:19:36',
lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', coverStyle: { layout: 'left', ratio: '16/9', width: 300 } }"
lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', coverStyle: { layout: 'left', ratio: '16:9', width: 300 } }"
:index="1"
/>
</div>
@ -621,7 +621,7 @@ title: Article Title
cover: /images/cover.jpg
coverStyle:
layout: left
ratio: 16/9
ratio: 16:9
width: 300
compact: true
---
@ -634,7 +634,7 @@ Display effect:
:post="{ path: '/article/ecxnxxd0/', title: 'Article Title',
categoryList: [{id:'65f30c',sort:4,name:'Tutorial'}], createTime: '2024/09/18 09:19:36',
lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing',
coverStyle: { layout: 'left', ratio: '16/9', width: 300, compact: true } }"
coverStyle: { layout: 'left', ratio: '16:9', width: 300, compact: true } }"
:index="1"
/>
</div>
@ -650,7 +650,7 @@ title: Article Title
cover: /images/cover.jpg
coverStyle:
layout: top
ratio: 16/9
ratio: 16:9
width: 300
---
```
@ -662,7 +662,7 @@ Display effect:
:post="{ path: '/article/ecxnxxd0/', title: 'Article Title',
categoryList: [{id:'65f30c',sort:4,name:'Tutorial'}], createTime: '2024/09/18 09:19:36',
lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing',
coverStyle: { layout: 'top', ratio: '16/9', width: 300 } }"
coverStyle: { layout: 'top', ratio: '16:9', width: 300 } }"
:index="1"
/>
</div>
@ -684,7 +684,7 @@ export default defineUserConfig({
title: 'Blog',
postCover: {
layout: 'left',
ratio: '16/9',
ratio: '16:9',
width: 300,
compact: true
}
@ -701,28 +701,12 @@ type PostCoverLayout = 'left' | 'right' | 'odd-left' | 'odd-right' | 'top'
interface PostCoverStyle {
layout?: PostCoverLayout // Layout position
ratio?: number | `${number}/${number}` | `${number}:${number}` // Aspect ratio, default '4/3'
ratio?: number | `${number}:${number}` // Aspect ratio, default '4:3'
width?: number // Width (effective for left/right layouts), default 240
compact?: boolean // Compact mode, default false
}
```
:::warning Known Issue: Parsing Problem with `ratio` in Markdown Frontmatter
When defining `ratio` in markdown frontmatter, using the `:` separator may cause parsing errors.
It is recommended to use the `/` separator instead.
If you still prefer to use `:`, you can wrap it with `''`. Example:
```md '16:9'
---
coverStyle:
ratio: '16:9' # instead of ratio: 16:9
---
```
:::
Special layout modes:
- `odd-left` - Odd items left, even items right
@ -735,21 +719,21 @@ Special layout modes:
:post="{ path: '/article/ecxnxxd0/', title: 'Article Title',
categoryList: [{id:'65f30c',sort:4,name:'Tutorial'}], createTime: '2024/09/18 09:19:36',
lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing',
coverStyle: { layout: 'odd-left', ratio: '16/9', width: 300, compact: true } }"
coverStyle: { layout: 'odd-left', ratio: '16:9', width: 300, compact: true } }"
:index="0"
/>
<VPPostItem
:post="{ path: '/article/ecxnxxd0/', title: 'Article Title',
categoryList: [{id:'65f30c',sort:4,name:'Tutorial'}], createTime: '2024/09/18 09:19:36',
lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing',
coverStyle: { layout: 'odd-left', ratio: '16/9', width: 300,compact: true } }"
coverStyle: { layout: 'odd-left', ratio: '16:9', width: 300,compact: true } }"
:index="1"
/>
<VPPostItem
:post="{ path: '/article/ecxnxxd0/', title: 'Article Title',
categoryList: [{id:'65f30c',sort:4,name:'Tutorial'}], createTime: '2024/09/18 09:19:36',
lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing',
coverStyle: { layout: 'odd-left', ratio: '16/9', width: 300, compact: true } }"
coverStyle: { layout: 'odd-left', ratio: '16:9', width: 300, compact: true } }"
:index="2"
/>
</div>
@ -760,6 +744,8 @@ Automatically switches to `top` layout on narrow-screen devices to ensure displa
## Article Metadata
## 文章元数据
In the collection, the `meta` option allows you to set the display method of article metadata,
This setting will directly affect the display of metadata on both the **article list page** and the **article content page**:
@ -777,7 +763,7 @@ export default defineUserConfig({
{
type: 'post',
dir: 'blog',
title: 'Blog',
title: '博客',
// [!code hl:11]
meta: {
tags: true, // Whether to display labels
@ -806,7 +792,7 @@ export default defineThemeConfig({
{
type: 'post',
dir: 'blog',
title: 'Blog',
title: '博客',
// [!code hl:11]
meta: {
tags: true, // Whether to display labels

View File

@ -28,10 +28,10 @@ A typical VuePress static site has the following file structure:
:::file-tree
- my-site
- docs # Source directory
- docs \# Source directory
- .vuepress/
- …
- README.md # Homepage
- README.md \# Homepage
- package.json
:::

View File

@ -13,7 +13,7 @@ whether you are creating a **technical blog**, **personal journal**, **product d
**knowledge base**, or **tutorial series**.
Deep optimizations have been applied to typography and image display,
with extensive enhancements specifically for Markdown syntax. This allows you to effortlessly
with extensive enhancements specifically for Markdown syntax.This allows you to effortlessly
create professional content that is **aesthetically pleasing, highly readable, and expressive**.
::: details New to VuePress?
@ -42,7 +42,7 @@ a more beautiful, clean, and user-friendly reading experience.
==content encryption==, and ==article watermarking==.
- **Code Presentation**: Support for code block ==grouping==, ==collapsing==, ==focusing==,
==line highlighting==, ==diff comparison==, and embedding ==code demos== from platforms like CodePen, JSFiddle, and CodeSandbox.
- **Icon System**: Integration with [iconify](https://icon-sets.iconify.design/) providing access to
- **Icon System**: Integration with [iconify](https://icon-sets.iconify.d/) providing access to
**200,000+** ==icons==, with optional support for `iconfont` / `fontawesome` icon libraries.
- **Media Embedding**: Support for ==PDF embedding==, and ==Bilibili/Youtube/Local Video== embedding.
- **Chart Rendering**: Integration with multiple ==chart engines== including chart.js, Echarts, Mermaid, Flowchart, Markmap, and PlantUML.

View File

@ -13,22 +13,22 @@ For projects created via the [command-line tool](./usage.md#command-line-install
::: file-tree
- .git/
- **docs** # Documentation source directory
- .vuepress/ # VuePress configuration directory
- public/ # Static assets
- client.ts # Client configuration (optional)
- collections.ts # Collections configuration (optional)
- config.ts # VuePress main configuration
- navbar.ts # Navbar configuration (optional)
- plume.config.ts # Theme configuration file (optional)
- demo # `doc` type collection
- **docs** \# Documentation source directory
- .vuepress \# VuePress configuration directory
- public/ \# Static assets
- client.ts \# Client configuration (optional)
- collections.ts \# Collections configuration (optional)
- config.ts \# VuePress main configuration
- navbar.ts \# Navbar configuration (optional)
- plume.config.ts \# Theme configuration file (optional)
- demo \# `doc` type collection
- foo.md
- bar.md
- blog # `post` type collection
- preview # Blog category
- markdown.md # Category article
- article.md # Blog article
- README.md # Site homepage
- blog \# `post` type collection
- preview \# Blog category
- markdown.md \# Category article
- article.md \# Blog article
- README.md \# Site homepage
- …
- package.json
- pnpm-lock.yaml

View File

@ -33,7 +33,7 @@ A typical project structure might look like:
- rust # Rust Programming Notes
- tuple.md
- struct.md
- README.md # Site Homepage
- README.md # Site Homepage
:::
### Configuration via `sidebar`

View File

@ -35,7 +35,7 @@ Page content starts after the second `---`.
Frontmatter is a configuration block using
[YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) format, located at the top of a Markdown file and delimited by `---`.
It is recommended to read the [Frontmatter Detailed Guide](../auto-frontmatter.md) for the complete syntax specification.
It is recommended to read the [Frontmatter Detailed Guide](../../../../4.教程/frontmatter.md) for the complete syntax specification.
:::
## Automatic Frontmatter Generation
@ -139,14 +139,14 @@ The numeric part serves as the **sorting basis**. Directories without numbers ar
::: file-tree
- docs
- blog # post type collection
- blog \# post type collection
- 1.Frontend
- 1.html/
- 2.css/
- 3.javascript/
- 2.Backend/
- DevOps/
- typescript # doc type collection
- typescript \# doc type collection
- 1.Basics
- 1.Variables.md
- 2.Types.md

View File

@ -532,8 +532,7 @@ Using the demo container to wrap demo code in a markdown file allows for quick d
/* css code */
```
:::
````
```
::::
You can also wrap `::: code-tabs` within `::: demo` for better code block presentation:
@ -563,8 +562,7 @@ You can also wrap `::: code-tabs` within `::: demo` for better code block presen
```
:::
::::
````
```
:::::
---

View File

@ -5,19 +5,19 @@ createTime: 2024/04/22 09:44:37
permalink: /en/guide/repl/kotlin/
---
## Overview
## 概述
The theme provides Kotlin code demonstrations, supporting online execution of Kotlin code.
主题提供了 Kotlin 代码演示,支持 在线运行 Kotlin 代码。
::: important
This feature works by submitting code to a server for compilation and execution, and only a single code file can be submitted at a time.
该功能通过将 代码提交到 服务器 进行 编译并执行,且一次只能提交单个代码文件。
Therefore, please do not use this feature to execute overly complex code, and avoid making execution requests too frequently.
因此,请不要使用此功能 执行 过于复杂的代码,也不要过于频繁的进行执行请求。
:::
## Configuration
## 配置
This feature is disabled by default. You can enable it through configuration.
该功能默认不启用,你可以通过配置来启用它。
```ts title=".vuepress/config.ts"
export default defineUserConfig({
@ -31,39 +31,39 @@ export default defineUserConfig({
})
```
## Usage
## 使用
Use the `::: kotlin-repl` container syntax to wrap Kotlin code blocks. The theme will inspect the code block and add an execution button.
使用 `::: kotlin-repl` 容器语法 将 kotlin 代码块包裹起来。主题会检查代码块并添加执行按钮。
### Read-Only Code Demo
### 只读代码演示
Kotlin code demos are read-only by default and cannot be edited.
kotlin 代码演示默认是只读的,不可编辑。
````md
::: kotlin-repl title="Custom Title"
::: kotlin-repl title="自定义标题"
```kotlin
// your kotlin code
```
:::
````
### Editable Code Demo
### 可编辑代码演示
If you need online editing and execution, wrap the code block in the `::: kotlin-repl editable` container syntax.
如果需要在线编辑并执行,需要将代码块包裹在 `::: kotlin-repl editable` 容器语法中
````md
::: kotlin-repl editable title="Custom Title"
::: kotlin-repl editable title="自定义标题"
```kotlin
// your kotlin code
```
:::
````
## Examples
## 示例
### Print Content
### 打印内容
**Input:**
**输入:**
````md
::: kotlin-repl
@ -78,7 +78,7 @@ fun main(args: Array<String>) {
:::
````
**Output:**
**输出:**
::: kotlin-repl
@ -93,7 +93,7 @@ fun main(args: Array<String>) {
:::
### Computation
### 运算
::: kotlin-repl
@ -109,9 +109,9 @@ fun main(args: Array<String>) {
:::
### Editable Code Demo
### 可编辑代码演示
**Input:**
**输入:**
````md
::: kotlin-repl editable
@ -126,7 +126,7 @@ fun main(args: Array<String>) {
:::
````
**Output:**
**输出:**
::: kotlin-repl editable

View File

@ -2,7 +2,6 @@
title: Frequently Asked Questions
createTime: 2025/10/08 08:47:36
permalink: /en/faq/
article: false
---
This document primarily covers common issues and solutions you might encounter while using the theme.
@ -86,104 +85,3 @@ files (like `package-lock.json` or `pnpm-lock.yaml`) might be corrupted.
Please directly delete the dependency lock files (`package-lock.json`, `pnpm-lock.yaml`, etc.)
and the `node_modules` directory, then reinstall the dependencies.
## How to hide the page footer?
You can hide the footer by adding `footer: false` in the frontmatter of the Markdown file.
```md title="post.md"
---
footer: false
---
content
```
[Configuration Documentation: **frontmatter > Footer**](../config/frontmatter/basic.md#footer){.read-more}
Or you can hide the footer for all pages on the main site by adding `footer: false` in the theme configuration file.
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
footer: false, // [!code ++]
})
})
```
[Configuration Documentation: **Theme Configuration**](../config/theme.md#footer){.read-more}
## Build error: `JavaScript heap out of memory`
When executing `npm run docs:build`, you encounter an error similar to:
```sh
<--- Last few GCs --->
[69161:0x7fe63aa00000] 137006 ms: xxxxxx
[69161:0x7fe63aa00000] 139327 ms: xxxxxxxx
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----
1: 0x107ce7c84 xxxxxxxxxxxx
...
```
This is due to insufficient Node.js memory.
Modify the Node.js memory limit by adding the following environment variables:
**Method 1: In the current terminal session**:
```sh
export NODE_OPTIONS="--max_old_space_size=8192"
npm run docs:build
```
==Note that this method is only effective for the current terminal session.=={.warning}
**Method 2: In the local environment**:
If you need to keep this environment variable long-term, you can modify the Node.js memory limit in your local environment:
:::: steps
- Install `cross-env` in your project
::: npm-to
```sh
npm install -D cross-env
```
:::
- Add `scripts` in `package.json`:
```json
{
"scripts": {
"docs:build-local": "cross-env NODE_OPTIONS=\"--max_old_space_size=8192\" vuepress build docs --clean-cache --clean-temp"
}
}
```
::::
When building locally, use `npm run docs:build-local` to build the package.
**Method 3: In GitHub Actions**:
Modify the `.github/workflows/deploy.yml` file and add the following environment variables:
```yaml
# ...
- name: Build VuePress site
env: # [!code ++:2]
NODE_OPTIONS: --max_old_space_size=8192
run: npm run docs:build
# ...
```

View File

@ -51,7 +51,7 @@ export default defineUserConfig({
:::
````
表配置请查看 [chart.js] 文档
标配置请查看 [chart.js] 文档
## 示例

View File

@ -342,6 +342,6 @@ e=>end: End:>http://www.yahoo.com
如果要在流程图中强调特定路径,则可以另外定义它,如下所示:
```md
```
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
```

View File

@ -260,7 +260,7 @@ object NewYork
map CapitalCity {
UK *-> London
USA*--> Washington
USA *--> Washington
Germany *---> Berlin
}
@ -427,9 +427,9 @@ rectangle "Investigate" as I <<$bProcess>><<behavior>> #Business
rectangle "Pay" as P <<$bProcess>><<behavior>> #Business
HC *-down- CI
HC*-down- NAS
HC *-down- NAS
HC *-down- V
HC*-down- I
HC *-down- I
HC *-down- P
CI -right->> NAS
@ -574,16 +574,16 @@ caption figure 1
title My super title
* <&flag>Debian
**<&globe>Ubuntu
***Linux Mint
** <&globe>Ubuntu
*** Linux Mint
*** Kubuntu
***Lubuntu
*** Lubuntu
*** KDE Neon
** <&graph>LMDE
**<&pulse>SolydXK
** <&pulse>SolydXK
** <&people>SteamOS
** <&star>Raspbian with a very long name
***<s>Raspmbc</s> => OSMC
*** <s>Raspmbc</s> => OSMC
*** <s>Raspyfi</s> => Volumio
header
@ -630,9 +630,9 @@ endlegend
```md
@startjson
# highlight "lastName"
# highlight "address" / "city"
# highlight "phoneNumbers" / "0" / "number"
#highlight "lastName"
#highlight "address" / "city"
#highlight "phoneNumbers" / "0" / "number"
{
"firstName": "John",
"lastName": "Smith",

View File

@ -7,7 +7,7 @@ permalink: /guide/code/group/
## 概述
代码组Code Tabs是主题中用于并排展示多个相关代码片段的强大功能。
代码组Code Tabs 主题 中用于并排展示多个相关代码片段的强大功能。
通过标签页形式组织代码,您可以清晰对比不同技术栈、配置方案或语言版本的实现差异。
## 基础语法

View File

@ -48,7 +48,7 @@ export default defineUserConfig({
**输入:**
````md
````
```ts:line-numbers
// 启用行号
const line2 = 'This is line 2'
@ -94,7 +94,7 @@ const line4 = 'This is line 4'
**输入:**
````md
````
```js{4}
export default {
data () {
@ -126,7 +126,7 @@ export default {
**输入:**
````md
````
```js{1,4,6-8}
export default { // Highlighted
data () {
@ -162,10 +162,10 @@ export default { // Highlighted
**输入:**
````md
````
```js
export default {
data() {
data () {
return {
msg: 'Highlighted!' // [\!code highlight]
}
@ -194,10 +194,10 @@ export default {
**输入:**
````md
````
```js
export default {
data() {
data () {
return {
msg: 'Focused!' // [\!code focus]
}
@ -241,10 +241,10 @@ pnpm install
**输入:**
````md
````
```js
export default {
data() {
data () {
return {
error: 'Removed', // [\!code --]
warning: 'Added' // [\!code ++]
@ -288,10 +288,10 @@ mkdir hello && cd hello # [!code ++]
**输入:**
````md
````
```js
export default {
data() {
data () {
return {
error: 'Error', // [\!code error]
warning: 'Warning' // [\!code warning]
@ -333,7 +333,7 @@ mkdir hello && cd hello # [!code warning]
**输入:**
````md
````
```ts
export function foo() { // [\!code word:Hello]
const msg = 'Hello World'
@ -355,7 +355,7 @@ export function foo() { // [!code word:Hello]
**输入:**
````md
````
```ts
// [\!code word:options:2]
const options = { foo: 'bar' }

View File

@ -641,7 +641,7 @@ str = 'Hello'
你应该能够在控制台中查看到相关的错误信息,然后在错误信息的 `description` 中找到对应的错误码。
然后再将错误码添加到 `@errors` 中。
不用担心编译失败会终止进程,主题会在编译失败时显示错误信息,同时在代码块中输出未编译的代码。
不用担心变异失败会终止进程,主题会在编译失败时显示错误信息,同时在代码块中输出未编译的代码。
:::
### `@noErrors`

View File

@ -7,7 +7,7 @@ permalink: /guide/components/card-masonry/
## 概述
瀑布流容器是一个通用的容器组件,你可以把任何内容放到 `<CardMasonry>` 里面,容器会自动计算每一个 **项** 的高度,
瀑布流容器是一个 通用的容器组件,你可以把任何内容放到 `<CardMasonry>` 里面,容器会自动计算每一个 **项** 的高度,
然后将它们按照瀑布流的方式进行排列。
::: details 什么是项
@ -59,7 +59,7 @@ permalink: /guide/components/card-masonry/
``` md
::: card-masonry cols="3" gap="16" <!-- [!code hl]-->
![alt text](/images/1.png)
![](/images/1.png)
<!-- 更多内容 -->
@ -77,19 +77,17 @@ permalink: /guide/components/card-masonry/
``` md
::: card-masonry
![alt text](/images/1.png)
![](image_url)
![alt text](/images/2.png)
![](image_url)
![alt text](image_url)
![](image_url)
![alt text](image_url)
![](image_url)
![alt text](image_url)
![](image_url)
![alt text](image_url)
![alt text](image_url)
![](image_url)
:::
```

View File

@ -7,7 +7,7 @@ permalink: /guide/components/home-box/
## 首页布局容器
自定义首页时,使用 `<HomeBox>` 提供给区域的包装容器。
自定义首页时,使用 `<HomeBox>` 提供给 区域 包装容器。
## Props

View File

@ -9,7 +9,7 @@ permalink: /guide/components/image-card/
使用 `<ImageCard>` 组件在页面中显示图片卡片。
图片卡片有别于 markdown 的普通插入图片方式,它展示与图片相关的更多信息,包括标题、描述、作者、链接等。
图片卡片 有别于 markdown 的 普通插入图片方式,它展示与图片相关的更多信息,包括标题、描述、作者、链接等。
适用于如 摄影作品、设计作品、宣传海报 等场景。
## Props

View File

@ -12,7 +12,7 @@ import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
## 概述
Npm 徽章组件用于显示 npm 包信息,并提供相关的链接。
Npm 徽章组件 用于显示 npm 包信息,并提供相关的链接。
徽章由 <https://shields.io> 提供支持。

View File

@ -1,5 +1,5 @@
---
title: “隐秘” 文本
title: “隐秘”文本
icon: lets-icons:hide-eye
createTime: 2024/08/18 23:02:39
permalink: /guide/components/plot/
@ -7,7 +7,7 @@ permalink: /guide/components/plot/
## 概述
使用 `<Plot>` 组件显示 ["隐秘"文本](../markdown/plot.md),能够更灵活地控制行为。
使用 `<Plot>` 组件显示 [“隐秘”文本](../markdown/plot.md) ,能够更灵活的控制行为。
该组件默认不启用,你需要在 theme 配置中启用。

View File

@ -11,7 +11,7 @@ import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
## 概述
Repo 卡片组件用于显示 GitHub / Gitee 仓库信息。
Repo 卡片组件 用于显示 GitHub / Gitee 仓库信息。
## 使用

View File

@ -8,8 +8,8 @@ badge: 新
## 概述
对于大多数的站点而言,一个 **炫酷好看** 的首页首屏,能够更容易地吸引用户停留下来。
但实现 **炫酷好看** 的效果往往需要比较复杂的技术成本,以及一些不错的灵感。
对于大多数的站点而言,一个 **炫酷好看** 首页首屏,能够更容易的吸引用户停留下来。
但实现 **炫酷好看** 往往需要比较复杂的技术成本,以及一些不错的灵感。
主题对 **首页****Hero** 部分,内置了一系列 **炫酷好看** 的背景效果,
通过简单的配置即可应用到你的站点首页中:

View File

@ -128,7 +128,7 @@ config:
**效果:**
:::window
:::demo-wrapper img no-padding
![banner](/images/custom-banner.jpg)
:::
@ -245,7 +245,7 @@ config:
**效果:**
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-doc-hero.jpg" alt="Theme Plume" />
:::
@ -358,7 +358,7 @@ config:
**效果:**
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-features.jpg" alt="custom-features" />
:::
@ -431,11 +431,11 @@ config:
**效果:**
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-image-text.jpg" alt="image-text" />
:::
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-text-image.jpg" alt="text-image" />
:::
@ -504,7 +504,7 @@ config:
**效果:**
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-profile.jpg" alt="profile" />
:::
@ -550,7 +550,7 @@ yarn add vuepress@next vuepress-theme-plume
**效果:**
:::window
:::demo-wrapper img no-padding
<img src="/images/custom-content.jpg" alt="content" />
:::

View File

@ -320,7 +320,7 @@ const {
公告板的唯一标识由 `bulletin.id` 配置。
唯一标识是用于区分公告板,并根据该标识决定 `bulletin.lifetime` 的有效期。
唯一标识是用于区分公告板,并根据 该表示 决定 `bulletin.lifetime` 的有效期。
```ts
export default defineUserConfig({

View File

@ -122,7 +122,7 @@ export default defineUserConfig({
贡献者信息列表。
用户在本地 git 服务中配置的用户名和邮箱可能与 git 托管服务(如 github、gitlab、gitee的用户信息不一致。
用户在本地 git 服务中配置的 用户名和邮箱 可能与 git 托管服务(如 github、gitlab、gitee的用户信息不一致。
可以在此预先配置贡献者信息。
(对于非 github 的其他 git 托管服务,诸如 gitlab、gitee由于不能通过用户名直接获取头像和用户地址请在此

View File

@ -16,7 +16,7 @@ permalink: /guide/features/icon/
在主题的以下功能中以相同的方式使用图标:
- [导航栏图标](../../config/navbar.md#配置)
- [侧边栏图标](../quick-start/sidebar.md#视觉增强功能)
- [侧边栏图标](../../guide/document.md#侧边栏图标)
- [文件树图标](../../guide/markdown/file-tree.md)
- [代码分组标题图标](../code/code-tabs.md#分组标题图标)

View File

@ -36,11 +36,11 @@ export default defineUserConfig({
可以通过 `no-view``ignore` 类名,或者 `no-view` 属性来忽略图片预览。
```md
![alt text](path/to/image){.no-view}
![alt text](path/to/image){.ignore}
![alt text](path/to/image){no-view}
![](path/to/image){.no-view}
![](path/to/image){.ignore}
![](path/to/image){no-view}
<img src="path/to/image" class="no-view" alt="alt text">
<img src="path/to/image" class="ignore" alt="alt text">
<img src="path/to/image" no-view alt="alt text">
<img src="path/to/image" class="no-view">
<img src="path/to/image" class="ignore">
<img src="path/to/image" no-view>
```

View File

@ -89,7 +89,7 @@ export default defineUserConfig({
```md
![foo](/images/foo.jpg)
<img src="/images/foo.jpg" alt="foo">
<img src="/images/foo.jpg">
```
`javascript` 中:

View File

@ -411,7 +411,7 @@ end tell
在代码块里面, `&``<``>` 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要复制粘贴,再加上缩进就可以了,剩下的 Markdown 都会帮你处理,例如:
````md
```html
```
<div class="footer">
&copy; 2004 Foo Corporation
</div>

View File

@ -1,23 +1,20 @@
---
title: 示例容器
createTime: 2024/09/30 14:47:12
icon: fxemoji:window
permalink: /guide/markdown/window/
icon: icon-park-outline:eyes
permalink: /guide/markdown/demo-wrapper/
outline: 2
badge:
text: 变更
type: warning
---
## 概述
有时候,你可能需要在 内容中补充一些 示例,但期望能与 其它内容 分隔开来呈现。
主题支持在 Markdown 文件中添加示例窗口容器。
主题支持在 Markdown 文件中添加示例容器。
## 语法
````md
::: window
::: demo-wrapper
添加你的示例
:::
````
@ -25,28 +22,29 @@ badge:
## 选项
- `title="xxx"`:标题
- `height="200px"`: 高度
- `gap="20px"`: 左右内边距
- `no-padding`:不添加内边距
- `img`: 仅包含图片时使用
- `height="xxx"`: 高度
## 示例
仅包含图片:
```md
::: window
::: demo-wrapper img no-padding
![hero](/images/custom-hero.jpg)
:::
```
**输出:**
::: window
::: demo-wrapper img no-padding
![hero](/images/custom-hero.jpg)
:::
包含 markdown 语法:
```md
::: window title="标题"
::: demo-wrapper title="标题"
### 三级标题
这是示例容器中的内容。
@ -54,7 +52,7 @@ badge:
```
**输出:**
::: window title="标题"
::: demo-wrapper title="标题"
### 三级标题
@ -64,8 +62,8 @@ badge:
包含 html /vue 代码:
```md
::: window
<h2 class="your-demo-title">这是标题</h2>
::: demo-wrapper
<h1 class="your-demo-title">这是标题</h1>
<p class="your-demo-paragraph">这是段落</p>
<style>
@ -80,9 +78,9 @@ badge:
```
**输出:**
::: window
::: demo-wrapper
<h2 class="your-demo-title">这是标题</h2>
<h1 class="your-demo-title">这是标题</h1>
<p class="your-demo-paragraph">这是段落</p>
<style>

View File

@ -26,15 +26,16 @@ tags:
内部和外部链接都会被特殊处理。
主题默认对每个 Markdown 文件自动生成一个新的链接,并保存在对应的 Markdown 文件的 frontmatter 的 `permalink` 中。您可以随时修改它们。您也可以通过 `theme.autoFrontmatter` 选项来禁用这个功能,这时会恢复为 VuePress 的默认行为。
主题默认对每个 md 文件自动生成一个新的 链接,并保存在对应的 md 文件的 frontmatter 的 `permalink` 中。
你可以随时修改它们。你也可以通过 `theme.autoFrontmatter` 选项来禁用这个功能,这时会恢复为 VuePress 的默认行为。
### 内部链接
有三种方式来使用内部链接:
- 使用生成的 `permalink` 作为内部链接的目标。
- 使用 Markdown 文件的相对路径作为内部链接的目标。
- 使用 Markdown 文件的绝对路径作为内部链接的目标,绝对路径 `/` 表示从 `${sourceDir}` 目录开始。
- 使用 生成的 `permalink` 作为内部链接的目标。
- 使用 md 文件的相对路径作为内部链接的目标。
- 使用 md 文件的绝对路径作为内部链接的目标, 绝对路径 `/` 表示从 `${sourceDir}` 目录开始。
```md
[Markdown](/guide/markdown/)

View File

@ -3,9 +3,6 @@ title: 文件树
createTime: 2024/09/30 14:41:57
icon: mdi:file-tree
permalink: /guide/markdown/file-tree/
badge:
text: 变更
type: warning
---
## 概述
@ -20,19 +17,12 @@ badge:
以下语法可用于自定义文件树的外观:
- 通过加粗文件名或目录名来突出显示,例如 `**README.md**`
- 通过在名称后添加`#` 开头的注释来为文件或目录添加注释,例如 `README.md # 这是一个 README 文件`
- 通过在名称后添加更多文本来为文件或目录添加注释
- 通过在名称前添加 `++``--` 来标记文件或目录为 **新增** 或 **删除**
- 使用 `...``…` 作为名称来添加占位符文件和目录。
- 在 `:::file-tree` 后添加 `icon="simple"` 或 添加 `icon="colored"` 可以切换为简单图标或彩色图标,默认为彩色图标。
- 在 `:::file-tree` 后添加 `title="xxxx"` 可以为文件树添加标题。
::: important `rc.193` 主题更新说明
过去 `file-tree` 使用 **空格** 来区分文件名和注释,这在某些情况下会导致问题,例如文件名中包含空格时。
为了解决这个问题,我们引入了 **# 号注释** 语法,您可以在文件名后添加以 `#` 开头的注释,例如 `README.md # 这是一个 README 文件`
**此修改为 ==破坏性更新=={.danger} 更新。**
:::
**输入:**
```md /++/ /--/
@ -43,7 +33,7 @@ badge:
- ++ config.ts
- -- page1.md
- README.md
- theme # 一个 **主题** 目录
- theme 一个 **主题** 目录
- client
- components
- **Navbar.vue**
@ -70,7 +60,7 @@ badge:
- ++ config.ts
- -- page1.md
- README.md
- theme # 一个 **主题** 目录
- theme 一个 **主题** 目录
- client
- components
- **Navbar.vue**

View File

@ -389,7 +389,7 @@ Fontawesome 的免费图标仅支持 `solid` 、部分 `regular` 以及 `brands`
[为 Fontawesome 添加更多样式支持](https://docs.fontawesome.com/web/style/styling){.read-more}
```md
```
::circle-user 2xl:: <!-- 2xl 为 fa-2xl 的缩写, 图标大小为 2em -->
::circle-user rotate-90:: <!-- 图标旋转 90 度 -->
::circle-user beat:: <!-- 图标动画 -->

View File

@ -144,18 +144,18 @@ export default defineUserConfig({
使用 `<!-- @include: ./foo.snippet.md -->` 导入文件:
:::: window title="Include by file"
:::: demo-wrapper title="Include by file"
<!-- @include: ../../snippet/include-2.snippet.md -->
::::
使用 `<!-- @include: ./foo.snippet.md{5-7} -->` 导入文件内的 5 到 7 行:
:::: window title="Include by lines"
:::: demo-wrapper title="Include by lines"
<!-- @include: ../../snippet/include-2.snippet.md{5-7} -->
::::
使用 `<!-- @include: ./foo.snippet.md#snippet -->` 导入 `snippet` 区域
:::: window title="Include by file region"
:::: demo-wrapper title="Include by file region"
<!-- @include: ../../snippet/include-2.snippet.md#snippet -->
::::

Some files were not shown because too many files have changed in this diff Show More