Compare commits

..

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

226 changed files with 5582 additions and 11243 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.191",
"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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,337 +0,0 @@
---
title: Obsidian 兼容
icon: simple-icons:obsidian
createTime: 2026/04/17 21:56:55
permalink: /guide/markdown/obsidian/
---
## 概述
主题通过 `vuepress-plugin-md-power` 插件提供对 Obsidian 官方 Markdown 扩展语法的兼容性支持,使 Obsidian 用户能够以熟悉的语法撰写文档。
当前已支持的 Obsidian 扩展语法包括:
- [Wiki 链接](#wiki-链接) - 页面间相互链接的语法
- [嵌入内容](#嵌入内容) - 将其他文件内容嵌入到当前页面
- [注释](#注释) - 添加仅在编辑时可见的注释
::: warning 不计划支持 Obsidian 社区第三方插件提供的扩展语法
:::
## Wiki 链接
Wiki 链接是 Obsidian 中用于链接到其他笔记的语法。使用双括号 `[[]]` 包裹内容来创建内部链接。
### 语法
```md
[[文件名]]
[[文件名#标题]]
[[文件名#标题#子标题]]
[[文件名|别名]]
[[文件名#标题|别名]]
[[https://example.com|外部链接]]
```
### 文件名搜索规则
当使用 Wiki 链接时,文件名会按照以下规则进行搜索匹配:
**匹配优先级:**
1. **完整路径** - 精确匹配文件路径
2. **模糊匹配** - 匹配路径结尾的文件名,优先匹配最短路径
**路径解析规则:**
- **相对路径**(以 `.` 开头):相对于当前文件所在目录解析
- **绝对路径**(不以 `.` 开头):在整个文档树中搜索,优先匹配最短路径
- **目录形式**(以 `/` 结尾):匹配该目录下的 `README.md`
**示例:**
假设文档结构如下:
```txt
docs/
├── README.md
├── guide/
│ ├── README.md
│ └── markdown/
│ └── obsidian.md
```
`docs/guide/markdown/obsidian.md` 中:
| 语法 | 匹配结果 |
| -------------- | -------------------------------------------------------- |
| `[[obsidian]]` | 匹配 `docs/guide/markdown/obsidian.md`(通过文件名检索) |
| `[[./]]` | 匹配 `docs/guide/markdown/README.md`(相对路径) |
| `[[../]]` | 匹配 `docs/guide/README.md`(上级目录) |
| `[[guide/]]` | 匹配 `docs/guide/README.md`(目录形式) |
### 示例
**外部链接:**
**输入:**
```md
[[https://example.com|外部链接]]
```
**输出:**
[[https://example.com|外部链接]]
**内部锚点链接:**
**输入:**
```md
[[npm-to]] <!-- 通过文件名检索 -->
[[guide/markdown/math]] <!-- 通过文件路径检索-->
[[#Wiki 链接]] <!-- 当前页面使用 heading -->
[[file-tree#配置]] <!-- 通过文件名检索,并链接到 heading -->
```
**输出:**
[[npm-to]]
[[guide/markdown/math]]
[[#Wiki 链接]]
[[file-tree#配置]]
[Obsidian 官方 - **Wiki Links**](https://obsidian.md/zh/help/links){.readmore}
## 嵌入内容
嵌入语法允许你将其他文件资源插入到当前页面中。
### 语法
```md
![[文件名]]
![[文件名#标题]]
![[文件名#标题#子标题]]
```
文件名搜索规则与 [Wiki 链接](#文件名搜索规则) 相同。
::: info 以 `/` 开头或 无路径前缀如 `./` 形式的,从 `public` 目录中加载资源
:::
### 图片嵌入
**语法:**
```md
![[图片]]
![[图片|宽度]]
![[图片|宽度x高度]]
```
支持格式:`jpg``jpeg``png``gif``avif``webp``svg``bmp``ico``tiff``apng``jfif``pjpeg``pjp``xbm`
**示例:**
::: demo markdown title="基础图片" expanded
```md
![[images/custom-hero.jpg]]
```
:::
::: demo markdown title="设置宽度" expanded
```md
![[images/custom-hero.jpg|300]]
```
:::
::: demo markdown title="设置宽度和高度" expanded
```md
![[images/custom-hero.jpg|300x200]]
```
:::
### PDF 嵌入
> [!NOTE]
> PDF 嵌入需要启用 `markdown.pdf` 插件才能正常工作。
**语法:**
```md
![[文档.pdf]]
![[文档.pdf#page=1]] <!-- #page=1 表示第一页 -->
![[文档.pdf#page=1#height=300]] <!-- #page=页码 #height=高度 -->
```
支持格式:`pdf`
---
### 音频嵌入
**语法:**
```md
![[音频文件]]
```
支持格式:`mp3``flac``wav``ogg``opus``webm``acc`
---
### 视频嵌入
> [!NOTE]
> 视频嵌入需要启用 `markdown.artPlayer` 插件才能正常工作。
**语法:**
```md
![[视频文件]]
![[视频文件#height=400]] <!-- 设置视频高度 -->
```
支持格式:`mp4``webm``mov`
---
### 内容片段嵌入
通过 `#标题` 可以嵌入指定标题下的内容片段:
**输入:**
```md
![[我的笔记]]
![[我的笔记#标题一]]
![[我的笔记#标题一#子标题]]
```
[Obsidian 官方 - 插入文件](https://obsidian.md/zh/help/embeds){.readmore}
[Obsidian 官方 - 文件格式](https://obsidian.md/zh/help/file-formats){.readmore}
## 注释
使用 `%%` 包裹的内容会被当作注释,不会渲染到页面中。
### 语法
**行内注释:**
```md
这是一个 %%行内注释%% 示例。
```
**块级注释:**
```md
%%
这是一个块级注释。
可以跨越多行。
%%
```
### 示例
**行内注释:**
**输入:**
```md
这是一个 %%行内注释%% 示例。
```
**输出:**
这是一个 %%行内注释%% 示例。
---
**块级注释:**
**输入:**
```md
注释之前的内容
%%
这是一个块级注释。
可以跨越多行。
%%
注释之后的内容
```
**输出:**
注释之前的内容
%%
这是一个块级注释。
%%
可以跨越多行。
[Obsidian 官方 - 注释](https://obsidian.md/zh/help/syntax#%E6%B3%A8%E9%87%8A){.readmore}
## 配置
Obsidian 兼容功能默认全部启用,你可以通过配置选择性地启用或禁用:
```ts title=".vuepress/config.ts"
export default defineUserConfig({
theme: plumeTheme({
plugins: {
mdPower: {
obsidian: {
wikiLink: true, // Wiki 链接
embedLink: true, // 嵌入内容
comment: true, // 注释
},
pdf: true, // PDF 嵌入功能
artPlayer: true, // 视频嵌入功能
}
}
})
})
```
### 配置项
:::: field-group
::: field name="wikiLink" type="boolean" default="true" optional
启用 Wiki 链接语法。
:::
::: field name="embedLink" type="boolean" default="true" optional
启用嵌入内容语法。
:::
::: field name="comment" type="boolean" default="true" optional
启用注释语法。
:::
::::
## 注意事项
- 这些插件提供的是 **兼容性支持**,并非完全实现 Obsidian 的全部功能
- 部分 Obsidian 特有的功能(如内部链接的图谱视图、双向链接等)不在支持范围内
- 嵌入内容时,被嵌入的页面也会参与主题的构建过程
- PDF 嵌入需要同时启用 `markdown.pdf` 插件
- 视频嵌入需要同时启用 `markdown.artPlayer` 插件
- 以 `/` 开头或使用 `./` 形式的嵌入资源会从 `public` 目录加载

View File

@ -83,7 +83,7 @@ interface PlotOptions {
在 Frontmatter 中使用 `plot` 选项来控制在当前页面中该功能的默认行为:
```md
```
---
plot:
trigger: hover

View File

@ -77,7 +77,7 @@ permalink: /guide/markdown/tabs/
**输入:**
````md
````
::: tabs
@tab npm

View File

@ -536,9 +536,9 @@ export default defineThemeConfig({
:::
[可以在这里查看 **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 源码字符串。
如果 **Iconify** 无法满足你的需求,可以传入 `{ svg: string, name?: string }`的格式,使用自定义图标,传入 svg 源码字符串。
## 文章封面配置
@ -589,7 +589,7 @@ title: 文章标题
cover: /images/cover.jpg
coverStyle:
layout: left
ratio: 16/9
ratio: 16:9
width: 300
---
```
@ -600,7 +600,7 @@ coverStyle:
<VPPostItem
:post="{ path: '/article/ecxnxxd0/', title: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
lang:'zh-CN', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', coverStyle: { layout: 'left', ratio: '16/9', width: 300 } }"
lang:'zh-CN', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', coverStyle: { layout: 'left', ratio: '16:9', width: 300 } }"
:index="1"
/>
</div>
@ -615,7 +615,7 @@ title: 文章标题
cover: /images/cover.jpg
coverStyle:
layout: left
ratio: 16/9
ratio: 16:9
width: 300
compact: true
---
@ -628,7 +628,7 @@ coverStyle:
:post="{ path: '/article/ecxnxxd0/', title: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
lang:'zh-CN', 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>
@ -644,7 +644,7 @@ title: 文章标题
cover: /images/cover.jpg
coverStyle:
layout: top
ratio: 16/9
ratio: 16:9
width: 300
---
```
@ -656,7 +656,7 @@ coverStyle:
:post="{ path: '/article/ecxnxxd0/', title: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
lang:'zh-CN', 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>
@ -678,7 +678,7 @@ export default defineUserConfig({
title: '博客',
postCover: {
layout: 'left',
ratio: '16/9',
ratio: '16:9',
width: 300,
compact: true
}
@ -695,27 +695,12 @@ type PostCoverLayout = 'left' | 'right' | 'odd-left' | 'odd-right' | 'top'
interface PostCoverStyle {
layout?: PostCoverLayout // 布局位置
ratio?: number | `${number}/${number}` | `${number}:${number}` // 宽高比,默认 '4/3'
ratio?: number | `${number}:${number}` // 宽高比,默认 '4:3'
width?: number // 宽度(左右布局生效),默认 240
compact?: boolean // 紧凑模式,默认 false
}
```
:::warning 已知问题: `ratio` 在 markdown frontmatter 下解析问题
在 markdown frontmatter 中定义 `ratio` 时,使用 `:` 分隔符会导致解析错误,建议使用 `/` 分隔符。
如果您依然期望使用 `:` ,可以使用 `''` 包裹起来。示例:
```md /'16:9'/
---
coverStyle:
ratio: '16:9' # 而不是 ratio: 16:9
---
```
:::
特殊布局模式:
- `odd-left` - 奇数项居左,偶数项居右
@ -728,21 +713,21 @@ coverStyle:
:post="{ path: '/article/ecxnxxd0/', title: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
lang:'zh-CN', 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: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
lang:'zh-CN', 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: '文章标题',
categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36',
lang:'zh-CN', 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>
@ -938,7 +923,9 @@ config:
更多自定义配置,请参考 [自定义首页](../custom/home.md)。
当使用以上两种方式将首页配置为文章列表页后,由于主题默认依然会生成文章列表页,这导致存在了重复功能的页面。为此,您可能需要在集合配置中**关闭自动生成博客文章列表页**
当使用以上两种方式 将首页配置为 文章列表页后,由于主题默认依然会生成 文章列表页,
这导致存在了重复功能的页面。为此,你可能需要在 集合配置中,
**关闭自动生成博客文章列表页**
(还可以重新修改 分类页/标签页/归档页的链接地址)

View File

@ -27,10 +27,10 @@ permalink: /guide/collection/
:::file-tree
- my-site
- docs # 源目录
- docs \# 源目录
- .vuepress/
- …
- README.md # 首页
- README.md \# 首页
- package.json
:::
@ -87,7 +87,7 @@ permalink: /guide/collection/
:::
`blog` 目录下的 Markdown 文章将被读取为文章列表,并自动生成列表页、分类页、标签页等页面。
`blog` 目录下的 markdown 文章,在 post 集合中读取为文章列表,并生成列表页、分类页、标签页等页面。
- **完成**
::::

View File

@ -12,22 +12,22 @@ permalink: /guide/project-structure/
::: file-tree
- .git/
- **docs** # 文档源目录
- .vuepress/ # VuePress 配置目录
- public/ # 静态资源
- client.ts # 客户端配置(可选)
- collections.ts # Collections 配置(可选)
- config.ts # VuePress 主配置
- navbar.ts # 导航栏配置(可选)
- plume.config.ts # 主题配置文件(可选)
- demo # `doc` 类型 collection
- **docs** \# 文档源目录
- .vuepress \# VuePress 配置目录
- public/ \# 静态资源
- client.ts \# 客户端配置(可选)
- collections.ts \# Collections 配置(可选)
- config.ts \# VuePress 主配置
- navbar.ts \# 导航栏配置(可选)
- plume.config.ts \# 主题配置文件(可选)
- demo \# `doc` 类型 collection
- foo.md
- bar.md
- blog # `post` 类型 collection
- preview # 博客分类
- markdown.md # 分类文章
- article.md # 博客文章
- README.md # 站点首页
- blog \# `post` 类型 collection
- preview \# 博客分类
- markdown.md \# 分类文章
- article.md \# 博客文章
- README.md \# 站点首页
- …
- package.json
- pnpm-lock.yaml

View File

@ -13,7 +13,7 @@ tags:
侧边栏是文档常见的页面导航方式,可以快速定位到文档内容。
主题提供了两种方式配置侧边栏
主题提供了两种方式配置侧边栏,包括:
- 通过主题配置的 `sidebar` 选项配置侧边栏
- 在 [类型为 `doc` 的集合](./collection-doc.md) 中配置侧边栏
@ -33,7 +33,7 @@ tags:
- rust # Rust 编程笔记
- tuple.md
- struct.md
- README.md # 站点首页
- README.md # 站点首页
:::
### 通过`sidebar` 配置

View File

@ -8,9 +8,11 @@ tags:
- 快速开始
---
VuePress 完整支持 [标准 Markdown 语法](../markdown/basic.md),同时允许通过 [YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) 格式的 Frontmatter 定义页面元数据(如标题、创建时间等)。
VuePress 完整支持 [标准 Markdown 语法](../markdown/basic.md),同时允许通过
[YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f)
格式的 Frontmatter 定义页面元数据(如标题、创建时间等)。
此外,主题还提供了丰富的 [Markdown 扩展语法](../markdown/extensions.md),您不仅可以在 Markdown 中直接编写 HTML还能使用 Vue 组件来增强内容表现力。
此外,主题还提供了丰富的 [Markdown 扩展语法](../markdown/extensions.md)您不仅可以在 Markdown 中直接编写 HTML还能使用 Vue 组件来增强内容表现力。
## Frontmatter 页面配置
@ -130,14 +132,14 @@ const dir = /\d+\.[\s\S]+/
::: file-tree
- docs
- blog # post 类型 collection
- blog \# post 类型 collection
- 1.前端
- 1.html/
- 2.css/
- 3.javascript/
- 2.后端/
- 运维/
- typescript # doc 类型 collection
- typescript \# doc 类型 collection
- 1.基础
- 1.变量.md
- 2.类型.md

View File

@ -369,8 +369,8 @@ const count = ref(0)
:::
:::::: warning
vue demo 容器语法虽然也支持使用 `.js/ts + css` 的方式来嵌入演示代码,
但主题不推荐这样做。因为样式无法被隔离,这可能导致样式污染。
vue demo 容器语法虽然也支持 使用 `.js/ts + css` 的方式来嵌入演示代码,
但主题不推荐这样做。因为 样式无法被隔离,这可能导致样式污染。
::::: details 参考示例
@ -522,8 +522,7 @@ export default defineComponent({
/* css 代码 */
```
:::
````
```
::::
还可以在 `::: demo` 中包裹 `::: code-tabs` 以获得更好的代码块展示效果:
@ -553,8 +552,7 @@ export default defineComponent({
```
:::
::::
````
```
:::::
---

View File

@ -98,7 +98,6 @@ search: false
| M*e | 2020-12-26 | 10.00 | 最近使用主题弄了个博客,简洁好用。作者回复也快,因为还是学生也就只能微博的支持了 |
| *纪 | 2026-01-03 | 9.90 | 新年快乐(,,>‿<,,),感谢佬 |
| J*n | 2026-01-22 | 10.00 | 用本开源主题搭了好几个网站了,作者耐心解答,添加合理功能需求,必须支持一下,辛苦了❤️ |
| *燧 | 2026-03-14 | 8.88 | 智齿主播,大佬加油 <br>(作者回复:啊?主播?我不是啊) |
</div>

View File

@ -1,6 +1,7 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/themes/*": ["./.vuepress/themes/*"],
"~/components/*": ["./.vuepress/themes/components/*"],

View File

@ -7,11 +7,8 @@ export default config({
},
ignores: [
'lib',
'skills',
'docs/snippet/code-block.snippet.md',
'docs/snippet/whitespace.snippet.md',
'docs/en/guide/markdown/obsidian.md',
'docs/guide/markdown/obsidian.md',
],
globals: {
__VUEPRESS_VERSION__: 'readonly',
@ -38,24 +35,4 @@ export default config({
'eslint-comments/no-unlimited-disable': 'off',
'antfu/no-top-level-await': 'off',
},
}, {
files: [
'docs/blog/1.示例/markdown基础.md',
'docs/blog/4.教程/frontmatter.md',
'docs/en/guide/markdown/basic.md',
'docs/en/guide/chart/plantuml.md',
'docs/en/blog/4.Tutorials/frontmatter.md',
'docs/en/guide/markdown/env.md',
'docs/guide/chart/plantuml.md',
'docs/guide/markdown/annotation.md',
'docs/guide/markdown/basic.md',
'docs/guide/markdown/env.md',
].map(file => [file, `${file}/*.md`]).flat(),
rules: {
'markdown/no-unused-definitions': 'off',
'markdown/no-duplicate-definitions': 'off',
'markdown/no-multiple-h1': 'off',
'markdown/no-space-in-emphasis': 'off',
'markdown/no-missing-atx-heading-space': 'off',
},
})

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