Compare commits

...

72 Commits

Author SHA1 Message Date
pengzhanbo
d69e0b9765 ci: update workflow permissions 2026-04-22 17:07:34 +08:00
pengzhanbo
02038f2df0 build: publish v1.0.0-rc.196 2026-04-19 14:37:52 +08:00
pengzhanbo
e5126663ef fix: fix security 2026-04-19 14:34:47 +08:00
pengzhanbo
402f259086
refactor(plugin-md-power): refactor obsidian plugins (#893) 2026-04-19 14:10:54 +08:00
pengzhanbo
58ea2fc8cb
fix(theme): remove cwd options from picomatch (#892) 2026-04-19 14:10:40 +08:00
pengzhanbo
6ebb1bda6e
fix(plugin-md-power): fix cell display issue caused by colspan in table (#891) 2026-04-19 14:10:22 +08:00
pengzhanbo
68f39695c4 chore: update tsconfig 2026-04-19 14:09:52 +08:00
pengzhanbo
76787f6530 build: publish v1.0.0-rc.195 2026-04-18 17:13:48 +08:00
pengzhanbo
e2b47da532 chore: tweak 2026-04-18 17:09:26 +08:00
pengzhanbo
035d521e96 chore: update deps to latest 2026-04-18 17:07:12 +08:00
pengzhanbo
bfd0c8409c
feat(plugin-md-power): compat obsidian official markdown syntax (#890)
* feat(plugin-md-power): compat obsidian official markdown syntax

* chore: tweak

* chore: tweak

* chore: tweak

* chore: tweak
2026-04-18 17:01:41 +08:00
pengzhanbo
e11c7a8fcd build: publish v1.0.0-rc.194 2026-04-14 15:37:37 +08:00
pengzhanbo
1329051536 chore: tweak 2026-04-14 15:36:15 +08:00
pengzhanbo
0677f6749e chore: update deps to latest 2026-04-14 15:31:38 +08:00
pengzhanbo
28963eb419
fix(plugin-search): fix search index race condition on pageUpdated, close #888 (#889) 2026-04-14 15:29:58 +08:00
pengzhanbo
cfc89adab8 chore: update security deps 2026-04-04 16:35:48 +08:00
pengzhanbo
e0ba59a6f9 build: update changelog 2026-04-03 02:56:28 +08:00
pengzhanbo
352874b29a build: publish v1.0.0-rc.193 2026-04-03 02:25:46 +08:00
pengzhanbo
c824ad85f4 chore: update gitignore 2026-04-03 02:18:23 +08:00
pengzhanbo
db2eda82f3 build: update clean scripts 2026-04-03 02:18:01 +08:00
pengzhanbo
e9fe35bc4f
fix(theme): fix sidebar items prefix not handled correctly, close #876 (#885) 2026-04-03 02:13:18 +08:00
pengzhanbo
709ade741c chore: improve comment 2026-04-03 02:06:32 +08:00
pengzhanbo
d8b79e89e8
refactor(plugin-search): improve search index update (#884) 2026-04-03 01:58:25 +08:00
pengzhanbo
dbc6f0be0f
fix(theme): fix auto-sidebar group icon error inherit, close #873 (#883) 2026-04-02 22:05:54 +08:00
pengzhanbo
9fe294b9dd fix(theme): fix MarkdownOptions types 2026-04-02 21:15:33 +08:00
pengzhanbo
ecf100cfc6 docs: update security.md 2026-04-02 21:15:08 +08:00
pengzhanbo
b7ee45642e docs: update contributing.md 2026-04-02 21:14:51 +08:00
pengzhanbo
54c05c8cea docs: add claude.md 2026-04-02 21:14:34 +08:00
pengzhanbo
86cb872ce6 refactor: migrate onWatched to onPageUpdated 2026-04-02 21:14:16 +08:00
pengzhanbo
a6cb3820b1 refactor: remove deprecated enhancement 2026-04-02 21:12:59 +08:00
pengzhanbo
184d1aee76 build: improve tsdown bundle config 2026-04-02 20:59:23 +08:00
pengzhanbo
cbc5c55891 perf: update deps to latest 2026-04-02 20:57:51 +08:00
mcenahle
4f40f8441d
docs: add "mcenahle Docs" to demo page (#882)
* Update demos.md

* chore: fix URLs for 哦麦 MC logo and preview images

Updated logo and preview image URLs for 哦麦 MC in demos.md.

---------

Co-authored-by: pengzhanbo <volodymyr@foxmail.com>
2026-04-02 20:54:47 +08:00
pengzhanbo
fe0d4bbc92
feat: improve accessibility features (#869) 2026-04-02 20:49:20 +08:00
pengzhanbo
39a76a35d7
feat(plugin-md-power)!: use # as the comment delimiter (#870) 2026-04-02 20:48:55 +08:00
pengzhanbo
a01bc13c66
fix(plugin-md-power): fix tsdown icon (#878) 2026-04-02 20:48:34 +08:00
pengzhanbo
1b213d4c28
fix(theme): add bulletin to outline ignores (#879) 2026-04-02 20:48:10 +08:00
pengzhanbo
aede6f5d87
fix(theme): twoslash comment error (#881)
* fix(theme): fix incorrect auto-sidebar-link parse

* fix(theme): twoslash comment error
2026-04-02 16:38:33 +08:00
pengzhanbo
7febfbf237
fix(theme): fix incorrect auto-sidebar-link parse (#880) 2026-04-02 16:37:58 +08:00
suixinio
7ce4e40521
docs: update ohmymc img (#877)
docs: update ohmymc img
2026-04-02 14:34:49 +08:00
zhenghaoyang24
12c4f5b39e
docs: fix icon documentation links (#874)
- Update relative paths in markdown config documentation to point
  to correct guide location
- Change sidebar icons link from document.md to quick-start/sidebar.md
  for proper navigation structure
2026-04-02 14:34:14 +08:00
pengzhanbo
aa54090b5d docs: update sponsor 2026-03-19 02:09:31 +08:00
逸燧Esyka
192b260d2b
docs: update repository url for Esyka's blog (#872) 2026-03-15 16:41:38 +08:00
逸燧Esyka
75df783295
docs: add Esyka's Blog to demos (#871)
Added Esyka's Blog with relevant details.
2026-03-14 23:39:00 +08:00
pengzhanbo
97a5ba20c3 docs: fix typo 2026-03-08 21:55:27 +08:00
pengzhanbo
896c7e22df chore: improve theme code comments 2026-03-08 16:59:50 +08:00
pengzhanbo
77856e36c5 chore: improve plugin-md-power code comments 2026-03-08 16:35:52 +08:00
pengzhanbo
552f0f5c32 chore: improve plugin-search code comments 2026-03-08 16:16:04 +08:00
pengzhanbo
7751e4c798 chore: improve cli code comments 2026-03-08 16:15:26 +08:00
pengzhanbo
17646708b1 docs: update skills usage doc 2026-03-06 16:40:02 +08:00
pengzhanbo
f14d663bb5 docs: update skills 2026-03-06 15:54:30 +08:00
pengzhanbo
50fa747ec1 docs: update agent skills 2026-03-06 00:44:21 +08:00
pengzhanbo
f6da09df54 build: publish v1.0.0-rc.192 2026-03-05 15:35:45 +08:00
pengzhanbo
9b9f8f3f77 style: lint fix 2026-03-05 15:34:11 +08:00
pengzhanbo
aa19049f5b perf: update deps to latest 2026-03-05 14:56:16 +08:00
pengzhanbo
fd1dd7c695
feat(theme): add lang switch to update html lang attr (#867) 2026-03-05 14:42:48 +08:00
pengzhanbo
916e9141d9
fix(plugin-md-power): fix potential null pointer exceptions when parsing collapse containers (#866) 2026-03-05 14:41:47 +08:00
pengzhanbo
ca51a345fb
fix(theme): fix the calculation error in the post cover ratio and add link to cover, close #863 (#865) 2026-03-05 14:41:30 +08:00
pengzhanbo
f11e8501d0
fix(theme): fix missing attribute for <VPHomePosts> (#864) 2026-03-05 14:41:11 +08:00
pengzhanbo
3f047914d5 build: publish v1.0.0-rc.191 2026-02-25 22:14:10 +08:00
pengzhanbo
0a3810be2b chore: tweak 2026-02-25 22:12:38 +08:00
pengzhanbo
c541e05997 perf: update deps to latest 2026-02-25 22:04:15 +08:00
pengzhanbo
feb69a282e build: update target Node.js version to 20.19.0 in tsdown.config.mjs files 2026-02-25 22:03:51 +08:00
pengzhanbo
c109d54961
feat: rewrite app.writeTemp to resolve IO race conditions (#862) 2026-02-25 21:50:50 +08:00
pengzhanbo
948c31779b
fix(plugin-search): fix temporary file IO race condition (#861) 2026-02-25 21:50:31 +08:00
pengzhanbo
09a95b7597
fix(plugin-md-power): fix timeout when retrieving remote image size (#860) 2026-02-25 21:50:08 +08:00
pengzhanbo
ce32605aee
feat(plugin-md-power): rename demo-wrapper container to window (#858) 2026-02-25 21:48:39 +08:00
𝙁𝙡𝙖𝙨𝙝
f7d3546962
docs: update 【haipeng-lin】demo (#859) 2026-02-20 00:44:33 +08:00
pengzhanbo
5980fd81f3 build: publish v1.0.0-rc.190 2026-02-15 12:33:55 +08:00
pengzhanbo
f2fe79f923 fix(plugin-md-power): fix timeout issue when retrieving image size 2026-02-15 12:32:33 +08:00
pengzhanbo
7234eebe7e fix(plugin-search): fix incorrect prepare search index 2026-02-15 12:31:46 +08:00
pengzhanbo
479680bba6 docs: update docs 2026-02-15 12:24:31 +08:00
249 changed files with 12359 additions and 5863 deletions

View File

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

View File

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

View File

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

View File

@ -5,6 +5,10 @@ on:
tags:
- v*
permissions:
contents: write
id-token: write
jobs:
lint:
uses: ./.github/workflows/lint.yaml
@ -16,9 +20,6 @@ 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,6 +8,9 @@ on:
branches: [main]
workflow_call:
permissions:
contents: read
jobs:
unit-test:
runs-on: ubuntu-latest

3
.gitignore vendored
View File

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

File diff suppressed because it is too large Load Diff

111
CLAUDE.md Normal file
View File

@ -0,0 +1,111 @@
# 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.6.0+
- [Node.js](http://nodejs.org/) version 20.19.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.6.0+
- [Node.js](http://nodejs.org/) version 20.19.0+
- [pnpm](https://pnpm.io/zh/) version 9+
克隆代码仓库,并安装依赖:

View File

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

View File

@ -1,7 +1,7 @@
{
"name": "create-vuepress-theme-plume",
"type": "module",
"version": "1.0.0-rc.189",
"version": "1.0.0-rc.196",
"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"
"build": "tsdown --config-loader unrun"
},
"dependencies": {
"@clack/prompts": "catalog:prod",
@ -40,8 +40,8 @@
"sort-package-json": "catalog:prod"
},
"plume-deps": {
"vuepress": "2.0.0-rc.26",
"vue": "^3.5.26",
"vuepress": "2.0.0-rc.28",
"vue": "^3.5.32",
"http-server": "^14.1.1",
"typescript": "^5.9.3"
},

View File

@ -1,3 +1,15 @@
/**
* 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,5 +1,10 @@
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,6 +2,15 @@ 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,5 +1,10 @@
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,6 +5,14 @@ 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'],
@ -111,12 +119,29 @@ 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,6 +78,15 @@ 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,6 +1,19 @@
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**
::: demo-wrapper title="Demo" no-padding height="200px"
::: window title="Demo" 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**
**示例容器**
::: demo-wrapper title="示例" no-padding height="200px"
::: window title="示例" height="200px"
<style scoped>
.open-door {
display: flex;

View File

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

View File

@ -69,6 +69,7 @@ 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: '',
badge: 'New',
items: [
{ text: 'Changelog', link: '/en/changelog/' },
{ text: 'Contributing', link: '/en/contributing/' },

View File

@ -58,6 +58,7 @@ 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,7 +349,7 @@ export default { // Highlighted
**输入:**
````
````md
```js
export default {
data() {
@ -381,7 +381,7 @@ export default {
**输入:**
````
````md
```js
export default {
data() {
@ -411,7 +411,7 @@ export default {
**输入:**
````
````md
```js
export default {
data() {
@ -443,7 +443,7 @@ export default {
**输入:**
````
````md
```js
export default {
data() {
@ -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
![](/plume.png){.full-width width="100%"}
![alt text](/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**
**示例容器**
::: demo-wrapper title="示例" no-padding height="200px"
::: window title="示例" height="200px"
<style scoped>
.open-door {
display: flex;

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** 使用说明](../../theme/guide/features/icon.md){.read-more}
[查看 **icon** 使用说明](../guide/features/icon.md){.read-more}
### plot

View File

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

View File

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

View File

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

View File

@ -14,8 +14,7 @@ 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 已经在一个配置文件中进行配置的字段,尽量不要在另一个配置文件中重复配置
:::
@ -441,9 +440,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://static.ohmymc.com/img/minecraft-154749_1280.png?max_width=1920&max_height=1920
logo: https://s.xc.life/img/img/minecraft-154749_1280.png
url: https://ohmymc.com/
preview: https://static.ohmymc.com/img/20241228225159139.png?max_width=1920&max_height=1920
preview: https://s.xc.life/img/img/20241228225159139.png
-
name: NcatBotDocs
desc: NcatBot一个 QQ 机器人框架项目的使用文档。
@ -93,6 +93,12 @@ 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:
-
@ -218,9 +224,9 @@ blog:
name: 𝙁𝙡𝙖𝙨𝙝
desc: 路漫漫其修远兮,吾将上下而求索
logo: https://haipeng-lin.cn/images/avatar.jpg
url: https://haipeng-lin.cn
url: https://blog.haipeng-lin.cn
repo: https://gitee.com/linhaipengg
preview: https://img.haipeng-lin.cn/1768622018580.png
preview: https://img.haipeng-lin.cn/index.webp
-
name: PinkDopeyBug
desc: 山难现浮槎,心易陷镜花。
@ -269,6 +275,13 @@ 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,5 +1,6 @@
---
pageLayout: home
title: Vuepress Theme Plume
config:
-
type: hero
@ -37,7 +38,7 @@ config:
-
title: Multi-language
icon: twemoji:balance-scale
details: Built-in support for Chinese/English, and you can customize and add more language support
details: Built-in support for 7 languages including Chinese and English, and you can customize and add more language support
-
title: Dual Color Theme
icon: twemoji:cityscape
@ -57,7 +58,7 @@ config:
-
title: Markdown Enhancement
icon: twemoji:writing-hand-light-skin-tone
details: Supports Markdown syntax, code block grouping, hint containers, task lists, mathematical formulas, code demonstrations, etc.
details: Based on regular markdown syntax, adds dozens of enhanced syntaxes such as custom containers, file trees, code groups, etc.
-
type: image-text
title: Features
@ -69,7 +70,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.
@ -81,7 +82,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: Chartschart.js/ECharts/Mermaid/flowchart<br>VideosBilibili/Youtube/ArtPlayer<br>PDF, 200K+ Iconify icons
description: "Charts: chart.js/ECharts/Mermaid/flowchart<br>Videos: Bilibili/Youtube/ArtPlayer<br>PDF, 200K+ Iconify icons"
-
type: text-image
title: Blog
@ -116,64 +117,48 @@ 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)
![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)
![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}
:::
### Installation
### Usage
:::code-tabs
@tab pnpm
Use the following command to quickly create a new ==VuePress== project using this theme.
:::npm-to
```sh
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
npm create vuepress-theme-plume@latest
```
:::
### Configuration
### Start the project
::: code-tabs
@tab .vuepress/config.ts
::: npm-to
```ts :no-line-numbers
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
// vuepress config...
theme: plumeTheme({
// theme config...
})
})
```sh
npm run docs:dev
```
:::
### Update Log
### Changelog
[Changelog](../changelog)
[Changelog](./changelog)
### Contributors
Thanks to all contributors!
<Contributors :contributors="data" />
</div>

View File

@ -124,8 +124,8 @@ export default defineUserConfig({
'/': {
// Chinese collection configuration // [!code focus:4]
collections: [
{ type: 'post', dir: 'blog', title: '博客' },
{ type: 'doc', dir: 'typescript', title: 'TypeScript笔记', sidebar: 'auto' }
{ type: 'post', dir: 'blog', title: 'Blog' },
{ type: 'doc', dir: 'typescript', title: 'TypeScript Notes', sidebar: 'auto' }
],
},
'/en/': {
@ -150,8 +150,8 @@ export default defineThemeConfig({
'/': {
// Chinese collection configuration // [!code focus:4]
collections: [
{ type: 'post', dir: 'blog', title: '博客' },
{ type: 'doc', dir: 'typescript', title: 'TypeScript笔记', sidebar: 'auto' }
{ type: 'post', dir: 'blog', title: 'Blog' },
{ type: 'doc', dir: 'typescript', title: 'TypeScript Notes', 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](../../theme/guide/features/icon.md){.read-more}
[View **icon** usage instructions](../guide/features/icon.md){.read-more}
### plot

View File

@ -82,6 +82,7 @@ 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,6 +13,7 @@ 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'

294
docs/en/demos.md Normal file
View File

@ -0,0 +1,294 @@
---
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: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
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.
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
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.
socials:
-
icon: github
@ -96,7 +96,7 @@ list:
avatar: https://github.com/pengzhanbo.png
location: GuangZhou
organization: PengZhanBo
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
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.
socials:
-
icon: github
@ -110,17 +110,17 @@ list:
avatar: https://github.com/pengzhanbo.png
location: GuangZhou
organization: PengZhanBo
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
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.
groups:
-
title: 分组 1
desc: 自定义颜色
title: Group 1
desc: Custom colors
list:
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
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.
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: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
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.
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: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
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.
backgroundColor: rgb(0,153,204)
color: rgb(153,238,255)
nameColor: rgb(153,255,255)
-
title: 分组 2
desc: 这里是分组 2 的描述文字
title: Group 2
desc: Description for Group 2
list:
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
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.
-
name: pengzhanbo
link: https://github.com/pengzhanbo
avatar: https://github.com/pengzhanbo.png
desc: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
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.
---

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/zh/guide/configuration.html##使用脚本) to customize ECharts:
[client configuration file](https://vuejs.press/guide/configuration.html#client-config-file) 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

@ -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,7 +163,7 @@ You can also use the `// [!code highlight]` comment to enable line highlighting.
**Input:**
````
````md
```js
export default {
data() {
@ -195,7 +195,7 @@ Additionally, you can use `// [!code focus:<lines>]` to define the number of lin
**Input:**
````
````md
```js
export default {
data() {
@ -242,7 +242,7 @@ Adding `// [!code --]` or `// [!code ++]` comments to a line will create a diff
**Input:**
````
````md
```js
export default {
data() {
@ -289,7 +289,7 @@ Adding `// [!code warning]` or `// [!code error]` comments to a line will apply
**Input:**
````
````md
```js
export default {
data() {
@ -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]-->
![](/images/1.png)
![alt text](/images/1.png)
<!-- More content -->
@ -79,17 +79,17 @@ Masonry layout is particularly suitable for displaying images. You can directly
``` md
::: card-masonry
![](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)
![alt text](image_url)
:::
```

View File

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

View File

@ -129,8 +129,7 @@ config:
**Result:**
:::demo-wrapper img no-padding
::: window
![banner](/images/custom-banner.jpg)
:::
@ -246,7 +245,7 @@ config:
**Result:**
:::demo-wrapper img no-padding
::: window
<img src="/images/custom-doc-hero.jpg" alt="Theme Plume" />
:::
@ -359,7 +358,7 @@ config:
**Result:**
:::demo-wrapper img no-padding
:::window
<img src="/images/custom-features.jpg" alt="custom-features" />
:::
@ -432,11 +431,11 @@ config:
**Result:**
:::demo-wrapper img no-padding
:::window
<img src="/images/custom-image-text.jpg" alt="image-text" />
:::
:::demo-wrapper img no-padding
:::window
<img src="/images/custom-text-image.jpg" alt="text-image" />
:::
@ -505,7 +504,7 @@ config:
**Result:**
:::demo-wrapper img no-padding
:::window
<img src="/images/custom-profile.jpg" alt="profile" />
:::
@ -551,7 +550,7 @@ yarn add vuepress@next vuepress-theme-plume
**Result:**
:::demo-wrapper img no-padding
:::window
<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
'前端/基础.md': '123456',
'frontend/basics.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/document.md#sidebar-icons)
- [Sidebar Icons](../../guide/quick-start/sidebar.md#visual-enhancement-features)
- [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
![](path/to/image){.no-view}
![](path/to/image){.ignore}
![](path/to/image){no-view}
![alt text](path/to/image){.no-view}
![alt text](path/to/image){.ignore}
![alt text](path/to/image){no-view}
<img src="path/to/image" class="no-view">
<img src="path/to/image" class="ignore">
<img src="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">
```

View File

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

View File

@ -1,9 +1,12 @@
---
title: Demo Container
createTime: 2025/10/08 14:47:12
icon: icon-park-outline:eyes
permalink: /en/guide/markdown/demo-wrapper/
icon: fxemoji:window
permalink: /en/guide/markdown/window/
outline: 2
badge:
text: Change
type: warning
---
## Overview
@ -14,7 +17,7 @@ separately from other content. The theme supports adding demo containers in Mark
## Syntax
````md
::: demo-wrapper
::: window
Add your demo here
:::
````
@ -31,20 +34,20 @@ Add your demo here
Containing only images:
```md
::: demo-wrapper img no-padding
::: window
![hero](/images/custom-hero.jpg)
:::
```
**Output:**
::: demo-wrapper img no-padding
::: window
![hero](/images/custom-hero.jpg)
:::
Containing markdown syntax:
```md
::: demo-wrapper title="Title"
::: window title="Title"
### Level 3 Heading
This is content inside the demo container.
@ -52,7 +55,7 @@ This is content inside the demo container.
```
**Output:**
::: demo-wrapper title="Title"
::: window title="Title"
### Level 3 Heading
@ -62,7 +65,7 @@ This is content inside the demo container.
Containing HTML/Vue code:
```md
::: demo-wrapper
::: window
<h1 class="your-demo-title">This is a heading</h1>
<p class="your-demo-paragraph">This is a paragraph</p>
@ -78,7 +81,7 @@ Containing HTML/Vue code:
```
**Output:**
::: demo-wrapper
::: window
<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,6 +3,9 @@ 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
@ -18,7 +21,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 adding additional text after the name
- Add comments to files or directories by appending a comment starting with `#` after the name, for example, `README.md This is a README file`
- 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.
@ -34,7 +37,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**
@ -61,7 +64,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:
:::: demo-wrapper title="Include by file"
:::: window 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:
:::: demo-wrapper title="Include by lines"
:::: window title="Include by lines"
<!-- @include: ../../snippet/include-2.snippet.md{5-7} -->
::::
Using `<!-- @include: ./foo.snippet.md#snippet -->` to include the `snippet` region:
:::: demo-wrapper title="Include by file region"
:::: window title="Include by file region"
<!-- @include: ../../snippet/include-2.snippet.md#snippet -->
::::

View File

@ -0,0 +1,337 @@
---
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:
:::demo-wrapper
:::window
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**:
:::demo-wrapper
:::window
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**:
:::demo-wrapper
:::window
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: '指南',
title: 'Guide',
// autoFrontmatter: true, // Theme built-in configuration
autoFrontmatter: {
title: true, // Auto-generate title
@ -117,7 +117,7 @@ export default defineThemeConfig({
{
type: 'doc',
dir: 'guide',
title: '指南',
title: 'Guide',
// autoFrontmatter: true, // Theme built-in configuration
autoFrontmatter: {
title: true, // Auto-generate title
@ -297,23 +297,23 @@ Example:
::: code-tree
```md title="docs/blog/服务.md"
```md title="docs/blog/service.md"
---
title: 服务
permalink: /blog/wu-fu/
title: Service
permalink: /blog/service/
---
```
```md title="docs/blog/都城.md"
```md title="docs/blog/capital.md"
---
title: 都城
permalink: /blog/dou-cheng/
title: Capital
permalink: /blog/capital/
---
```
:::
You probably noticed that in the example, the permalink for the `都城.md` file is `/blog/dou-cheng/`,
You probably noticed that in the example, the permalink for the `capital.md` file is `/blog/capital/`,
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/都城.md"
```md title="docs/blog/capital.md"
---
title: 都城
permalink: /blog/du-cheng/
title: Capital
permalink: /blog/capital/
---
```

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,12 +701,28 @@ type PostCoverLayout = 'left' | 'right' | 'odd-left' | 'odd-right' | 'top'
interface PostCoverStyle {
layout?: PostCoverLayout // Layout position
ratio?: number | `${number}:${number}` // Aspect ratio, default '4:3'
ratio?: number | `${number}/${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
@ -719,21 +735,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>
@ -744,8 +760,6 @@ 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**:
@ -763,7 +777,7 @@ export default defineUserConfig({
{
type: 'post',
dir: 'blog',
title: '博客',
title: 'Blog',
// [!code hl:11]
meta: {
tags: true, // Whether to display labels
@ -792,7 +806,7 @@ export default defineThemeConfig({
{
type: 'post',
dir: 'blog',
title: '博客',
title: 'Blog',
// [!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

@ -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.d/) providing access to
- **Icon System**: Integration with [iconify](https://icon-sets.iconify.design/) 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

@ -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](../../../../4.教程/frontmatter.md) for the complete syntax specification.
It is recommended to read the [Frontmatter Detailed Guide](../auto-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,7 +532,8 @@ 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:
@ -562,7 +563,8 @@ 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
主题提供了 Kotlin 代码演示,支持 在线运行 Kotlin 代码。
The theme provides Kotlin code demonstrations, supporting online execution of Kotlin code.
::: 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
使用 `::: kotlin-repl` 容器语法 将 kotlin 代码块包裹起来。主题会检查代码块并添加执行按钮。
Use the `::: kotlin-repl` container syntax to wrap Kotlin code blocks. The theme will inspect the code block and add an execution button.
### 只读代码演示
### Read-Only Code Demo
kotlin 代码演示默认是只读的,不可编辑。
Kotlin code demos are read-only by default and cannot be edited.
````md
::: kotlin-repl title="自定义标题"
::: kotlin-repl title="Custom Title"
```kotlin
// your kotlin code
```
:::
````
### 可编辑代码演示
### Editable Code Demo
如果需要在线编辑并执行,需要将代码块包裹在 `::: kotlin-repl editable` 容器语法中
If you need online editing and execution, wrap the code block in the `::: kotlin-repl editable` container syntax.
````md
::: kotlin-repl editable title="自定义标题"
::: kotlin-repl editable title="Custom 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,6 +2,7 @@
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.
@ -85,3 +86,104 @@ 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

@ -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,7 +162,7 @@ export default { // Highlighted
**输入:**
````
````md
```js
export default {
data() {
@ -194,7 +194,7 @@ export default {
**输入:**
````
````md
```js
export default {
data() {
@ -241,7 +241,7 @@ pnpm install
**输入:**
````
````md
```js
export default {
data() {
@ -288,7 +288,7 @@ mkdir hello && cd hello # [!code ++]
**输入:**
````
````md
```js
export default {
data() {
@ -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

@ -59,7 +59,7 @@ permalink: /guide/components/card-masonry/
``` md
::: card-masonry cols="3" gap="16" <!-- [!code hl]-->
![](/images/1.png)
![alt text](/images/1.png)
<!-- 更多内容 -->
@ -77,17 +77,19 @@ permalink: /guide/components/card-masonry/
``` md
::: card-masonry
![](image_url)
![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)
:::
```

View File

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

View File

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

View File

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

@ -16,7 +16,7 @@ permalink: /guide/features/icon/
在主题的以下功能中以相同的方式使用图标:
- [导航栏图标](../../config/navbar.md#配置)
- [侧边栏图标](../../guide/document.md#侧边栏图标)
- [侧边栏图标](../quick-start/sidebar.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
![](path/to/image){.no-view}
![](path/to/image){.ignore}
![](path/to/image){no-view}
![alt text](path/to/image){.no-view}
![alt text](path/to/image){.ignore}
![alt text](path/to/image){no-view}
<img src="path/to/image" class="no-view">
<img src="path/to/image" class="ignore">
<img src="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">
```

View File

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

View File

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

View File

@ -3,6 +3,9 @@ title: 文件树
createTime: 2024/09/30 14:41:57
icon: mdi:file-tree
permalink: /guide/markdown/file-tree/
badge:
text: 变更
type: warning
---
## 概述
@ -17,12 +20,19 @@ permalink: /guide/markdown/file-tree/
以下语法可用于自定义文件树的外观:
- 通过加粗文件名或目录名来突出显示,例如 `**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 /++/ /--/
@ -33,7 +43,7 @@ permalink: /guide/markdown/file-tree/
- ++ config.ts
- -- page1.md
- README.md
- theme 一个 **主题** 目录
- theme # 一个 **主题** 目录
- client
- components
- **Navbar.vue**
@ -60,7 +70,7 @@ permalink: /guide/markdown/file-tree/
- ++ 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 -->` 导入文件:
:::: demo-wrapper title="Include by file"
:::: window title="Include by file"
<!-- @include: ../../snippet/include-2.snippet.md -->
::::
使用 `<!-- @include: ./foo.snippet.md{5-7} -->` 导入文件内的 5 到 7 行:
:::: demo-wrapper title="Include by lines"
:::: window title="Include by lines"
<!-- @include: ../../snippet/include-2.snippet.md{5-7} -->
::::
使用 `<!-- @include: ./foo.snippet.md#snippet -->` 导入 `snippet` 区域
:::: demo-wrapper title="Include by file region"
:::: window title="Include by file region"
<!-- @include: ../../snippet/include-2.snippet.md#snippet -->
::::

View File

@ -0,0 +1,337 @@
---
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

@ -12,7 +12,7 @@ permalink: /guide/markdown/plot/
为了满足这种小小的心思,主题提供了一个 **“隐秘”文本** 的有趣小功能。它看起来像这样:
:::demo-wrapper
:::window
你知道吗, !!鲁迅!! 曾说过:“ !!我没说过这句话!!! ” 令我醍醐灌顶,深受启发,浑身迸发出无可匹敌的
力量!于是,!!我在床上翻了个身!!
:::
@ -83,7 +83,7 @@ interface PlotOptions {
在 Frontmatter 中使用 `plot` 选项来控制在当前页面中该功能的默认行为:
```
```md
---
plot:
trigger: hover
@ -102,7 +102,7 @@ plot:
**输出**
:::demo-wrapper
:::window
你知道吗, !!鲁迅!! 曾说过:“ !!我没说过这句话!!!” 令我醍醐灌顶,深受启发,浑身迸发出无可匹敌的
力量!于是,!!我在床上翻了个身!!
:::
@ -118,7 +118,7 @@ plot:
**输出**
:::demo-wrapper
:::window
遮罩层效果 + 鼠标悬停:!!鼠标悬停看到我了!!{.mask .hover}
遮罩层效果 + 点击:!!点击看到我了!!{.mask .click}

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,12 +695,27 @@ type PostCoverLayout = 'left' | 'right' | 'odd-left' | 'odd-right' | 'top'
interface PostCoverStyle {
layout?: PostCoverLayout // 布局位置
ratio?: number | `${number}:${number}` // 宽高比,默认 '4:3'
ratio?: number | `${number}/${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` - 奇数项居左,偶数项居右
@ -713,21 +728,21 @@ interface PostCoverStyle {
: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>
@ -923,9 +938,7 @@ 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 文章,在 post 集合中读取为文章列表,并生成列表页、分类页、标签页等页面。
`blog` 目录下的 Markdown 文章将被读取为文章列表,并自动生成列表页、分类页、标签页等页面。
- **完成**
::::

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) 中配置侧边栏

View File

@ -8,11 +8,9 @@ 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 页面配置
@ -132,14 +130,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

@ -522,7 +522,8 @@ export default defineComponent({
/* css 代码 */
```
:::
```
````
::::
还可以在 `::: demo` 中包裹 `::: code-tabs` 以获得更好的代码块展示效果:
@ -552,7 +553,8 @@ export default defineComponent({
```
:::
::::
```
````
:::::
---

View File

@ -98,6 +98,7 @@ 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,7 +1,6 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/themes/*": ["./.vuepress/themes/*"],
"~/components/*": ["./.vuepress/themes/components/*"],

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