mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
feat: 全新的文档！
This commit is contained in:
pengzhanbo
parent
207efbd12a
commit
c56bae8d58
BIN
docs/.vuepress/public/favicon-16x16.png
Normal file
BIN
docs/.vuepress/public/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 714 B |
BIN
docs/.vuepress/public/favicon-32x32.png
Normal file
BIN
docs/.vuepress/public/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
docs/.vuepress/public/favicon.ico
Normal file
BIN
docs/.vuepress/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
docs/.vuepress/public/images/blogger-avatar.png
Normal file
BIN
docs/.vuepress/public/images/blogger-avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
docs/.vuepress/public/images/custom-banner.png
Normal file
BIN
docs/.vuepress/public/images/custom-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
BIN
docs/.vuepress/public/images/custom-content.png
Normal file
BIN
docs/.vuepress/public/images/custom-content.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
docs/.vuepress/public/images/custom-features.png
Normal file
BIN
docs/.vuepress/public/images/custom-features.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
docs/.vuepress/public/images/custom-hero.png
Normal file
BIN
docs/.vuepress/public/images/custom-hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
BIN
docs/.vuepress/public/images/custom-image-text.png
Normal file
BIN
docs/.vuepress/public/images/custom-image-text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
docs/.vuepress/public/images/custom-profile.png
Normal file
BIN
docs/.vuepress/public/images/custom-profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
docs/.vuepress/public/images/custom-text-image.png
Normal file
BIN
docs/.vuepress/public/images/custom-text-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
1
docs/.vuepress/public/images/plume-1.svg
Normal file
1
docs/.vuepress/public/images/plume-1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 218 KiB |
1
docs/.vuepress/public/images/plume-2.svg
Normal file
1
docs/.vuepress/public/images/plume-2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 405 KiB |
1
docs/.vuepress/public/images/plume-3.svg
Normal file
1
docs/.vuepress/public/images/plume-3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 322 KiB |
BIN
docs/.vuepress/public/plume.png
Normal file
BIN
docs/.vuepress/public/plume.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
8
docs/.vuepress/public/plume.svg
Normal file
8
docs/.vuepress/public/plume.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 72 72">
|
||||
<path fill="#5086a1" d="M42.334 49.147a29.945 29.945 0 0 1-19.338-8.151c-8.014-7.365-8.378-18.076-8.533-22.649l-.022-.627a2.904 2.904 0 0 1 3.457-2.951c17.005 3.355 21.695 16.324 22.056 17.4a49.543 49.543 0 0 1 3.574 15.922a1 1 0 0 1-.967 1.052c-.029.001-.106.004-.227.004" />
|
||||
<path fill="#8cccd5" d="M44.436 55.316c-11.646 0-17.376-6.974-17.653-7.354a1 1 0 0 1 .262-1.424a11.103 11.103 0 0 1 12.774-1.574c-1.465-9.078 1.877-13.568 2.031-13.77a.998.998 0 0 1 .75-.39a.97.97 0 0 1 .78.325c8.944 9.771 8.793 16.532 7.908 19.691c-.034.14-1.062 4.092-4.772 4.406c-.711.062-1.405.09-2.08.09" />
|
||||
<g fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
|
||||
<path d="M55.184 57.69S34.96 45.877 23.097 24.206m22.131 30.096c-11.93.46-17.628-6.88-17.628-6.88" />
|
||||
<path d="M40.528 42.483c-.56-7.195 2.116-10.679 2.116-10.679c8.834 9.654 8.406 16.162 7.681 18.747m-13.311-3.129a30.15 30.15 0 0 1-13.341-7.162c-8.072-7.419-8.067-18.241-8.232-22.577a1.903 1.903 0 0 1 2.264-1.932C34.694 19.103 39.02 32.528 39.02 32.528" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
15
docs/1.示例/加密文章.md
Normal file
15
docs/1.示例/加密文章.md
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: 加密文章，密码：123456
|
||||
author: pengzhanbo
|
||||
createTime: 2023/12/25 01:28:29
|
||||
permalink: /article/enx7c9s/
|
||||
tags:
|
||||
- 预览
|
||||
- 标签
|
||||
---
|
||||
|
||||
这是一篇 示例文章。
|
||||
|
||||
<!-- more -->
|
||||
|
||||
无内容。
|
||||
15
docs/1.示例/示例文章.md
Normal file
15
docs/1.示例/示例文章.md
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: 示例文章
|
||||
author: pengzhanbo
|
||||
createTime: 2023/12/25 01:28:29
|
||||
permalink: /article/xld23tu1/
|
||||
tags:
|
||||
- 预览
|
||||
- 标签
|
||||
---
|
||||
|
||||
这是一篇 示例文章。
|
||||
|
||||
<!-- more -->
|
||||
|
||||
无内容。
|
||||
8
docs/en/notes/theme/config/intro.md
Normal file
8
docs/en/notes/theme/config/intro.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Configuration
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/02 10:48:14
|
||||
permalink: /en/config/intro/
|
||||
---
|
||||
|
||||
Todo...
|
||||
9
docs/en/notes/theme/guide/intro.md
Normal file
9
docs/en/notes/theme/guide/intro.md
Normal file
@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Theme Introduction
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/04 11:06:24
|
||||
permalink: /en/guide/intro/
|
||||
---
|
||||
|
||||
|
||||
Todo...
|
||||
112
docs/notes/theme/config/frontmatter/basic.md
Normal file
112
docs/notes/theme/config/frontmatter/basic.md
Normal file
@ -0,0 +1,112 @@
|
||||
---
|
||||
title: 通用配置
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/02 20:01:09
|
||||
permalink: /config/frontmatter/basic/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
通用 Frontmatter 配置，适用于 所有的文章。
|
||||
|
||||
示例：
|
||||
|
||||
```md
|
||||
---
|
||||
title: 标题
|
||||
author: 作者
|
||||
createTime: 2024/03/02 20:01:09
|
||||
permalink: /config/frontmatter/basic/
|
||||
---
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### title
|
||||
|
||||
文章标题。
|
||||
|
||||
主题会在文件创建时，自动填充 当前文件名作为 文章标题。
|
||||
|
||||
### author
|
||||
|
||||
文章作者。
|
||||
|
||||
主题会在文件创建时，自动填充 `avatar.name || packageJson.author` 作为 文章作者。
|
||||
|
||||
### createTime
|
||||
|
||||
文章创建时间。
|
||||
|
||||
主题会在文件创建时，自动填充 当前时间作为 文章创建时间。
|
||||
|
||||
### permalink
|
||||
|
||||
文章永久链接。
|
||||
|
||||
主题会在文件创建时:
|
||||
|
||||
- 博客类型的文章，自动填充 `/article/` + `nanoid 生成的 6 位随机字符串` 作为 文章永久链接
|
||||
- notes 目录下的文章，会根据 notes 的配置，自动填充 文章永久链接
|
||||
|
||||
### externalLink
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
|
||||
当前文章内的 外部链接是否显示 外部链接图标， 即 “ <ExternalLinkIcon /> ” 图标
|
||||
|
||||
### backToTop
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
|
||||
当前文章是否 显示 回到顶部 的按钮。
|
||||
|
||||
### comments
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
|
||||
当前文章是否 可评论。 仅在启用了评论功能的情况下生效。
|
||||
|
||||
### prev
|
||||
|
||||
- 类型： `string | { text: string, link: string, icon?: string }`
|
||||
- 默认值： `''`
|
||||
|
||||
自定义当前文章的上一篇文章。
|
||||
|
||||
- 博客类型的文章，主题根据时间排序，自动填充上一篇文章的标题和链接。
|
||||
- notes 类型的文章，主题根据 note sidebar 配置，自动填充上一篇文章的标题和链接。
|
||||
|
||||
### next
|
||||
|
||||
- 类型： `string | { text: string, link: string, icon?: string }`
|
||||
- 默认值： `''`
|
||||
|
||||
自定义当前文章的下一篇文章。
|
||||
|
||||
- 博客类型的文章，主题根据时间排序，自动填充下一篇文章的标题和链接。
|
||||
- notes 类型的文章，主题根据 note sidebar 配置，自动填充下一篇文章的标题和链接。
|
||||
|
||||
### lastUpdated
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
|
||||
当前文章是否 显示 最后更新时间。 最后更新时间 根据 git 提交时间自动填充。
|
||||
|
||||
### contributors
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
|
||||
当前文章是否 显示 贡献者。 贡献者 根据 git 提交者自动填充。
|
||||
|
||||
### editLink
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
|
||||
当前文章是否 显示 文章编辑 按钮。
|
||||
75
docs/notes/theme/config/frontmatter/friend.md
Normal file
75
docs/notes/theme/config/frontmatter/friend.md
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
title: 友情链接页
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/03 18:00:52
|
||||
permalink: /config/frontmatter/friends/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
适用于友情链接页。
|
||||
|
||||
示例：
|
||||
|
||||
```md
|
||||
---
|
||||
friends: true
|
||||
title: 友情链接
|
||||
list:
|
||||
-
|
||||
name: pengzhanbo
|
||||
link: https://github.com/pengzhanbo
|
||||
avatar: https://github.com/pengzhanbo.png
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
---
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### friends
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `false`
|
||||
|
||||
当前页面是否为友情链接页。
|
||||
|
||||
### title
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `友情链接`
|
||||
|
||||
友情链接页的标题
|
||||
|
||||
### description
|
||||
|
||||
- 类型： `string`
|
||||
|
||||
友情链接页的描述
|
||||
|
||||
### list
|
||||
|
||||
- 类型： `FriendsItem[]`
|
||||
- 默认值: `[]`
|
||||
|
||||
友情链接列表
|
||||
|
||||
```ts
|
||||
interface FriendsItem {
|
||||
/**
|
||||
* 友情链接名
|
||||
*/
|
||||
name: string
|
||||
/**
|
||||
* 友情链接
|
||||
*/
|
||||
link: string
|
||||
/**
|
||||
* 友情链接头像
|
||||
*/
|
||||
avatar?: string
|
||||
/**
|
||||
* 友情链接描述
|
||||
*/
|
||||
desc?: string
|
||||
}
|
||||
```
|
||||
59
docs/notes/theme/config/frontmatter/home.md
Normal file
59
docs/notes/theme/config/frontmatter/home.md
Normal file
@ -0,0 +1,59 @@
|
||||
---
|
||||
title: 首页
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/03 15:00:43
|
||||
permalink: /config/frontmatter/home/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
仅适用于 首页。在 `{sourceDir}/README.md` 中进行配置。
|
||||
|
||||
示例：
|
||||
|
||||
```md
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
- type: banner
|
||||
- type: custom
|
||||
---
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### home
|
||||
|
||||
- 类型： `boolean`
|
||||
|
||||
声明是否为 首页
|
||||
|
||||
### config
|
||||
|
||||
- 类型： `PlumeHomeConfig[]`
|
||||
|
||||
定义 首页 区域
|
||||
|
||||
```ts
|
||||
interface PlumeHomeConfigBase {
|
||||
/**
|
||||
* 该区域的类型，根据类型应用不同的组件
|
||||
*/
|
||||
type: 'banner' | 'hero' | 'text-image' | 'image-text' | 'features' | 'profile' | 'custom' | string
|
||||
/**
|
||||
* 该区域是否占满全屏
|
||||
*/
|
||||
full?: boolean
|
||||
/**
|
||||
* 该区域的背景图片
|
||||
* 你可以定义在 浅色/暗色 模式下的背景图片
|
||||
*/
|
||||
backgroundImage?: string | { light: string, dark: string }
|
||||
/**
|
||||
* 该区域的背景 定位方式
|
||||
*/
|
||||
backgroundAttachment?: 'fixed' | 'local'
|
||||
}
|
||||
```
|
||||
|
||||
更多详细配置请参考 [自定义首页](/guide/custom-home/)
|
||||
46
docs/notes/theme/config/frontmatter/post.md
Normal file
46
docs/notes/theme/config/frontmatter/post.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: 博客文章
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/03 11:01:03
|
||||
permalink: /config/frontmatter/article/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
适用于 博客类型的文章。
|
||||
|
||||
示例：
|
||||
|
||||
```md
|
||||
---
|
||||
title: 文章标题
|
||||
tags:
|
||||
- tag1
|
||||
- tag2
|
||||
---
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### sticky
|
||||
|
||||
- 类型： `boolean \| number`
|
||||
- 默认值： `false`
|
||||
|
||||
是否在文章列表中，置顶当前文章。
|
||||
|
||||
如果为 `number` ，则数字越大，文章置顶的位置越靠前。
|
||||
|
||||
### article
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
|
||||
是否在文章列表中，显示当前文章。
|
||||
|
||||
### tags
|
||||
|
||||
- 类型： `string[]`
|
||||
- 默认值： `[]`
|
||||
|
||||
文章标签。
|
||||
8
docs/notes/theme/config/notes配置.md
Normal file
8
docs/notes/theme/config/notes配置.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: notes配置
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/02 14:00:06
|
||||
permalink: /config/notes/
|
||||
---
|
||||
|
||||
Todo...
|
||||
24
docs/notes/theme/config/plugins/README.md
Normal file
24
docs/notes/theme/config/plugins/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: 介绍
|
||||
author: Plume Theme
|
||||
createTime: 2024/03/06 8:26:44
|
||||
permalink: /config/plugins/
|
||||
---
|
||||
|
||||
主题内置的使用的插件，扩展了主题的众多功能，你可以在这个 字段中， 实现对内部使用的各个插件的自定义配置。
|
||||
|
||||
## 配置
|
||||
|
||||
所有主题内部使用的插件， 均在 `plugins` 字段中进行配置。
|
||||
``` js
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
// more options... // [!code ++]
|
||||
}
|
||||
}),
|
||||
})
|
||||
```
|
||||
50
docs/notes/theme/config/plugins/markdown增强.md
Normal file
50
docs/notes/theme/config/plugins/markdown增强.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: markdown增强
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 20:25:36
|
||||
permalink: /config/plugins/markdown-enhance/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
提供 Markdown 增强功能。
|
||||
|
||||
关联插件：[vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/)
|
||||
|
||||
默认配置：
|
||||
|
||||
```ts
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
hint: true,
|
||||
codetabs: true,
|
||||
tabs: true,
|
||||
align: true,
|
||||
mark: true,
|
||||
tasklist: true,
|
||||
attrs: true,
|
||||
sup: true,
|
||||
sub: true,
|
||||
alert: true,
|
||||
footnote: true,
|
||||
katex: true,
|
||||
}
|
||||
}
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
详见 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/config.html)
|
||||
|
||||
|
||||
:::tip 说明
|
||||
主题还未完全对 该插件提供的 所有 增强功能 进行 样式上的适配。
|
||||
如果你在使用过程中遇到样式上的问题，可以在 [issue](https://github.com/pengzhanbo/vuepress-theme-plume/issues) 里提出。
|
||||
:::
|
||||
69
docs/notes/theme/config/plugins/代码复制.md
Normal file
69
docs/notes/theme/config/plugins/代码复制.md
Normal file
@ -0,0 +1,69 @@
|
||||
---
|
||||
title: 代码复制
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 16:24:34
|
||||
permalink: /config/plugins/copy-code/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题内置的代码复制插件，在代码块中插入复制按钮。
|
||||
|
||||
关联插件： [@vuepress-plume/plugin-copy-code](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-copy-code)
|
||||
|
||||
默认配置：
|
||||
|
||||
```ts{7-9}
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
copyCode: {
|
||||
selector: '.page-content div[class*="language-"] pre',
|
||||
},
|
||||
}
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### selector
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'.page-content div[class*="language-"] pre'`
|
||||
|
||||
用于指定复制按钮应用的代码块选择器。
|
||||
|
||||
### duration
|
||||
|
||||
- 类型： `number`
|
||||
- 默认值： `1500`
|
||||
|
||||
用于置顶 提示消息显示时间。 设置为 `0` 将会禁用提示。
|
||||
|
||||
### showInMobile
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `false`
|
||||
|
||||
用于控制是否在移动端显示复制按钮。
|
||||
|
||||
## 禁用
|
||||
|
||||
你可以指定 `copyCode: false` 来禁用插件。
|
||||
|
||||
```ts{7}
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
copyCode: false,
|
||||
}
|
||||
}),
|
||||
})
|
||||
```
|
||||
95
docs/notes/theme/config/plugins/代码高亮.md
Normal file
95
docs/notes/theme/config/plugins/代码高亮.md
Normal file
@ -0,0 +1,95 @@
|
||||
---
|
||||
title: 代码高亮
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 10:21:47
|
||||
permalink: /config/plugins/code-highlight/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题内置的代码高亮插件， 对代码块进行代码高亮。
|
||||
|
||||
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
|
||||
Shiki 支持多种编程语言。
|
||||
|
||||
在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages) 。
|
||||
|
||||
关联插件： [@vuepress-plume/plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji)
|
||||
|
||||
默认配置：
|
||||
|
||||
```ts
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
shiki: {
|
||||
theme: { light: 'vitesse-light', dark: 'vitesse-dark' },
|
||||
},
|
||||
}
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### theme
|
||||
|
||||
- 类型: `string | { light: string, dark: string }`
|
||||
- 默认值: `{ light: 'vitesse-light', dark: 'vitesse-dark' }`
|
||||
|
||||
代码高亮主题，支持 浅色/暗色 双主题。
|
||||
|
||||
可在 支持的 [主题列表](https://shiki.style/themes) 中选择你喜欢的主题。
|
||||
|
||||
### languages
|
||||
|
||||
- 类型: `string[]`
|
||||
- 默认值: `[]`
|
||||
|
||||
|
||||
需要高亮的编程语言， 例如 `javascript`、`typescript`、`python`、`java`、`c++`、`c#`等。
|
||||
默认会根据代码块的语言自动识别。
|
||||
|
||||
在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages) 。
|
||||
|
||||
### defaultHighlightLang
|
||||
|
||||
- 类型: `string`
|
||||
- 默认值: `text`
|
||||
|
||||
默认高亮的编程语言。当代码块未指定语言时使用。
|
||||
|
||||
### codeTransformers
|
||||
|
||||
- 类型: `ShikiTransformer[]`
|
||||
- 默认值: `[]`
|
||||
|
||||
代码转换器， 查看 [shiki transformers](https://shiki.style/guide/transformers) 了解更多信息。
|
||||
|
||||
### twoslash <Badge type="tip" text="实验性" />
|
||||
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
|
||||
实验性功能，是否启用 对 `typescript` 和 `vue` 语言的 类型提示 支持。
|
||||
|
||||
查看 [twoslash](/guide/markdown/experiment/#twoslash) 了解更多信息。
|
||||
|
||||
### whitespace
|
||||
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
|
||||
将空白字符（Tab 和空格）渲染为单独的标签（具有 tab 或 space 类名）。
|
||||
|
||||
效果：
|
||||
|
||||
```ts whitespace
|
||||
function block( ) {
|
||||
space( )
|
||||
table( )
|
||||
}
|
||||
```
|
||||
98
docs/notes/theme/config/plugins/搜索.md
Normal file
98
docs/notes/theme/config/plugins/搜索.md
Normal file
@ -0,0 +1,98 @@
|
||||
---
|
||||
title: 搜索配置
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 09:19:26
|
||||
permalink: /config/plugins/search/
|
||||
---
|
||||
|
||||
## 本地搜索
|
||||
|
||||
### 概述
|
||||
|
||||
为站点添加本地搜索。
|
||||
|
||||
关联插件： [@vuepress-plume/plugin-search](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-search)
|
||||
|
||||
该插件使用 [minisearch](https://github.com/lucaong/minisearch) 进行内容搜索。
|
||||
|
||||
默认配置：
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
search: {
|
||||
// more options
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### 配置
|
||||
|
||||
```ts
|
||||
interface SearchOptions {
|
||||
/**
|
||||
* 本地搜索 国际化
|
||||
*/
|
||||
locales?: {
|
||||
[locale: string]: SearchBoxLocale
|
||||
}
|
||||
|
||||
/**
|
||||
* 文章是否可被搜索，默认为 `() => true`
|
||||
*/
|
||||
isSearchable?: (page: Page) => boolean
|
||||
}
|
||||
|
||||
interface SearchBoxLocale {
|
||||
placeholder: string
|
||||
buttonText: string
|
||||
resetButtonTitle: string
|
||||
backButtonTitle: string
|
||||
noResultsText: string
|
||||
footer: {
|
||||
selectText: string
|
||||
selectKeyAriaLabel: string
|
||||
navigateText: string
|
||||
navigateUpKeyAriaLabel: string
|
||||
navigateDownKeyAriaLabel: string
|
||||
closeText: string
|
||||
closeKeyAriaLabel: string
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Algolia DocSearch
|
||||
|
||||
### 概述
|
||||
|
||||
使用 [Algolia DocSearch](https://docsearch.algolia.com/) 提供支持的网站内容搜索插件
|
||||
|
||||
关联插件：[@vuepress/plugin-docsearch](https://ecosystem.vuejs.press/zh/plugins/docsearch.html)
|
||||
|
||||
查看 [Algolia DocSearch 参考](/guide/features/content-search/#algolia-docsearch) 获取更多信息。
|
||||
|
||||
### 启用
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
docsearch: {
|
||||
appId: 'YOUR_APP_ID',
|
||||
apiKey: 'YOUR_API_KEY',
|
||||
indexName: 'YOUR_INDEX_NAME',
|
||||
// more options
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
38
docs/notes/theme/config/plugins/百度统计.md
Normal file
38
docs/notes/theme/config/plugins/百度统计.md
Normal file
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 百度统计
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 12:22:57
|
||||
permalink: /config/plugins/baidu-tongji/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
为站点添加 百度统计。该插件默认不启用。
|
||||
|
||||
关联插件： [@vuepress-plume/plugin-baidu-tongji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-baidu-tongji)
|
||||
|
||||
## 配置
|
||||
|
||||
### key
|
||||
|
||||
- 类型：`string`
|
||||
- 默认值：`''`
|
||||
|
||||
配置百度统计的key
|
||||
|
||||
### 启用
|
||||
|
||||
```ts{7-9}
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
baiduTongji: {
|
||||
key: '你的百度统计key'
|
||||
}
|
||||
}
|
||||
}),
|
||||
})
|
||||
```
|
||||
68
docs/notes/theme/config/plugins/阅读统计.md
Normal file
68
docs/notes/theme/config/plugins/阅读统计.md
Normal file
@ -0,0 +1,68 @@
|
||||
---
|
||||
title: 阅读统计
|
||||
author: pengzhan
|
||||
createTime: 2024/03/06 15:23:39
|
||||
permalink: /config/plugins/reading-time/
|
||||
---
|
||||
|
||||
|
||||
## 概述
|
||||
|
||||
为每个页面生成字数统计与预计阅读时间。
|
||||
|
||||
关联插件： [@vuepress/plugin-reading-time](https://ecosystem.vuejs.press/zh/plugins/reading-time.html)
|
||||
|
||||
默认配置：
|
||||
|
||||
```ts
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
readingTime: {
|
||||
wordPerMinute: 300
|
||||
}
|
||||
}
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### wordPerMinute
|
||||
|
||||
- 类型：`number`
|
||||
- 默认值：`300`
|
||||
|
||||
每分钟阅读字数。
|
||||
|
||||
### locales
|
||||
|
||||
- 类型: `ReadingTimePluginLocaleConfig`
|
||||
|
||||
阅读时间插件的国际化配置。
|
||||
|
||||
```ts
|
||||
interface ReadingTimePluginLocaleData {
|
||||
/**
|
||||
* 字数模板，模板中 `$word` 会被自动替换为字数
|
||||
*/
|
||||
word: string
|
||||
|
||||
/**
|
||||
* 小于一分钟文字
|
||||
*/
|
||||
less1Minute: string
|
||||
|
||||
/**
|
||||
* 时间模板
|
||||
*/
|
||||
time: string
|
||||
}
|
||||
|
||||
interface ReadingTimePluginLocaleConfig {
|
||||
[localePath: string]: ReadingTimePluginLocaleData
|
||||
}
|
||||
```
|
||||
449
docs/notes/theme/config/主题配置.md
Normal file
449
docs/notes/theme/config/主题配置.md
Normal file
@ -0,0 +1,449 @@
|
||||
---
|
||||
title: 主题配置
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/02 18:07:03
|
||||
permalink: /config/basic/
|
||||
---
|
||||
|
||||
## 基础配置
|
||||
|
||||
### plugins
|
||||
|
||||
- 类型：`PlumeThemePluginOptions`
|
||||
- 默认值： `{}`
|
||||
- 详情： 对主题内部使用的插件进行自定义配置。
|
||||
|
||||
主题使用的插件默认已进行了配置，大多数情况下您不需要进行任何修改，如果需要使用到细致的定制化，请查阅
|
||||
[此文档](/vuepress-theme-plume/plugins-config/)
|
||||
|
||||
### locales
|
||||
|
||||
- 类型： `Record<string, PlumeThemeLocaleConfig>`
|
||||
- 默认值： `{}`
|
||||
- 详情： 多语言配置
|
||||
|
||||
多语言配置，参考 [此文档](/vuepress-theme-plume/locales/)
|
||||
|
||||
多语言配置支持以下 [Locale](#locale-配置) 所有配置选项
|
||||
|
||||
## Locale 配置
|
||||
|
||||
### home
|
||||
|
||||
- 类型： `false | string`
|
||||
- 默认值： `/`
|
||||
- 详情：
|
||||
首页的路径， 它将被用于：
|
||||
- 导航栏中 logo的链接；
|
||||
- 404页面的 *返回首页* 的链接；
|
||||
|
||||
### logo
|
||||
|
||||
- 类型: `false | string`
|
||||
- 默认值： `false`
|
||||
- 详情： 导航栏中的logo。
|
||||
|
||||
### logoDark
|
||||
|
||||
- 类型 `false | string`
|
||||
- 默认值： `false`
|
||||
- 详情： Dark模式下，导航栏中的logo。
|
||||
|
||||
### appearance
|
||||
|
||||
- 类型： `boolean | 'dark' | 'force-dark`
|
||||
- 默认值： `true`
|
||||
|
||||
是否启用 深色模式。
|
||||
|
||||
- 如果该选项设置为 `true`，则默认主题将由用户的首选配色方案决定。
|
||||
- 如果该选项设置为 `dark`，则默认情况下主题将是深色的，除非用户手动切换它。
|
||||
- 如果该选项设置为 `false`，用户将无法切换主题。
|
||||
- 如果该选项设置为 `force-dark`，则用户将无法切换主题，但会强制将主题更改为深色。
|
||||
|
||||
此选项注入一个内联脚本，从本地存储恢复用户设置。这确保在呈现页面之前应用 `.dark` 类以避免闪烁。
|
||||
|
||||
### appearanceText
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'Appearance'`
|
||||
- 详情： 导航栏中的主题切换按钮的文本。
|
||||
|
||||
### hostname
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
部署站点域名。
|
||||
|
||||
当 `hostname` 配置为有效域名时，主题将会生成 `sitemap` 和 `seo` 相关的内容。
|
||||
|
||||
### avatar
|
||||
|
||||
- 类型： `PlumeThemeAvatar`
|
||||
- 默认值： `{}`
|
||||
- 详情：配置站点博主的个人信息
|
||||
- `avatar.url`: 头像地址，用于右侧博主信息展示
|
||||
- `avatar.name`: 名称， 用于右侧博主信息展示
|
||||
- `avatar.description`: 个人描述，用于右侧博主信息展示
|
||||
- `avatar.circle`: 是否为圆形头像
|
||||
- 示例：
|
||||
``` ts
|
||||
export default {
|
||||
theme: themePlume({
|
||||
avatar: {
|
||||
url: '/avatar.jpg',
|
||||
name: '张三',
|
||||
description: '此处无银三百两，隔壁王二不曾偷',
|
||||
circle: true
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### social
|
||||
|
||||
- 类型： `false | SocialLink[]`
|
||||
- 默认值： `false`
|
||||
- 详情： 个人社交信息配置。
|
||||
|
||||
将作为 图标链接 展示在 导航栏最右侧。
|
||||
|
||||
图标可选值：`'discord' | 'facebook' | 'github' | 'instagram' | 'linkedin' | 'mastodon' | 'npm' | 'slack' | 'twitter' | 'x' | 'youtube' | 'qq' | 'weibo' | 'bilibili' | { svg: string }`
|
||||
|
||||
- 示例：
|
||||
``` ts
|
||||
export default {
|
||||
theme: themePlume({
|
||||
social: [{
|
||||
icon: 'github',
|
||||
link: 'https://github.com/zhangsan',
|
||||
}]
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### blog
|
||||
|
||||
- 类型： `false | BlogOptions`
|
||||
- 默认值： `{ link: '/blog/', include: ['**/*.md'], exclude: [] }`
|
||||
- 详情：
|
||||
|
||||
博客配置。
|
||||
|
||||
```ts
|
||||
interface BlogOptions {
|
||||
/**
|
||||
* blog list link
|
||||
*
|
||||
* @default '/blog/'
|
||||
*/
|
||||
link?: string
|
||||
|
||||
/**
|
||||
* 在 `blog.dir` 目录中，通过 glob string 配置包含文件
|
||||
*
|
||||
* @default - ['**\*.md']
|
||||
*/
|
||||
include?: string[]
|
||||
|
||||
/**
|
||||
* 在 `blog.dir` 目录中，通过 glob string 配置排除的文件
|
||||
*
|
||||
* README.md 文件一般作为主页或者某个目录下的主页，不应该被读取为 blog文章
|
||||
*
|
||||
* @default - ['.vuepress/', 'node_modules/', '{README,index}.md']
|
||||
*/
|
||||
exclude?: string[]
|
||||
|
||||
/**
|
||||
* 分页配置
|
||||
*/
|
||||
pagination?: false | {
|
||||
/**
|
||||
* 每页显示的文章数量
|
||||
* @default 10
|
||||
*/
|
||||
perPage?: number
|
||||
/**
|
||||
* 前一页的文本
|
||||
* @default 'Prev'
|
||||
*/
|
||||
prevPageText?: string
|
||||
/**
|
||||
* 后一页的文本
|
||||
* @default 'Next'
|
||||
*/
|
||||
nextPageText?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否启用标签页
|
||||
* @default true
|
||||
*/
|
||||
tags?: boolean
|
||||
/**
|
||||
* 是否启用归档页
|
||||
* @default true
|
||||
*/
|
||||
archives?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### article
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `/article/`
|
||||
- 详情： 文章链接前缀
|
||||
|
||||
|
||||
### navbar
|
||||
|
||||
- 类型： `NavItem[]`
|
||||
- 默认值： `[]`
|
||||
- 详情： 导航栏配置。
|
||||
|
||||
为了配置导航栏元素，你可以将其设置为 导航栏数组 ，其中的每个元素是 `NavItem` 对象、
|
||||
- `NavItem` 对象应该有一个 text 字段和一个 link 字段，还有一个可选的 `activeMatch` 字段。
|
||||
|
||||
``` ts
|
||||
type NavItem = string | {
|
||||
text: string
|
||||
link: string
|
||||
items?: NavItem[]
|
||||
/**
|
||||
* 支持 iconify 图标，直接使用 iconify name 即可自动加载
|
||||
*
|
||||
* @see https://icon-sets.iconify.design/
|
||||
*/
|
||||
icon: string
|
||||
/**
|
||||
* 控制元素何时被激活
|
||||
*/
|
||||
activeMatch?: string
|
||||
}
|
||||
```
|
||||
- 示例1：
|
||||
``` js
|
||||
export default {
|
||||
theme: plumeTheme({
|
||||
navbar: [
|
||||
// NavbarItem
|
||||
{ text: 'Foo', link: '/foo/' },
|
||||
// NavbarGroup
|
||||
{
|
||||
text: 'Group',
|
||||
item: ['/group/foo/', '/group/bar/'],
|
||||
},
|
||||
// 字符串 - 页面文件路径
|
||||
'/bar/',
|
||||
],
|
||||
}),
|
||||
}
|
||||
```
|
||||
- 示例2：
|
||||
``` js
|
||||
export default {
|
||||
theme: plumeTheme({
|
||||
navbar: [
|
||||
// 嵌套 Group - 最大深度为 2
|
||||
{
|
||||
text: 'Group',
|
||||
items: [
|
||||
{
|
||||
text: 'SubGroup',
|
||||
items: ['/group/sub/', '/group/sub/bar/'],
|
||||
},
|
||||
],
|
||||
},
|
||||
// 控制元素何时被激活
|
||||
{
|
||||
text: 'Group 2',
|
||||
items: [
|
||||
{
|
||||
text: 'Always active',
|
||||
link: '/',
|
||||
// 该元素将一直处于激活状态
|
||||
activeMatch: '/',
|
||||
},
|
||||
{
|
||||
text: 'Active on /foo/',
|
||||
link: '/not-foo/',
|
||||
// 该元素在当前路由路径是 /foo/ 开头时激活
|
||||
// 支持正则表达式
|
||||
activeMatch: '^/foo/',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
```
|
||||
|
||||
### footer
|
||||
|
||||
- 类型： `false | { message: string; copyright: string }`
|
||||
- 默认值： `false`
|
||||
- 详情：页脚配置。
|
||||
|
||||
### notes
|
||||
|
||||
- 类型： `false | PlumeThemeNotesOptions`
|
||||
- 默认值： `{ link: '/note', dir: 'notes', notes: [] }`
|
||||
- 详情： 笔记配置， 笔记中的文章默认不会出现在首页文章列表
|
||||
|
||||
你可以将配置的notes 配置到 navbar中，以便浏览查看
|
||||
|
||||
详细配置请查看 [此文档](/config/notes/)
|
||||
|
||||
### selectLanguageName
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
Locale 的语言名称。
|
||||
|
||||
该配置项 **仅能在主题配置的 [locales](#locales) 的内部生效** 。它将被用作 locale 的语言名称，展示在 _选择语言菜单_ 内。
|
||||
|
||||
### selectLanguageText
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
_选择语言菜单_ 的文字。
|
||||
|
||||
如果你在站点配置中设置了多个 [locales](#locales) ，那么 _选择语言菜单_ 就会显示在导航栏中仓库按钮的旁边。
|
||||
|
||||
|
||||
### selectLanguageAriaLabel
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
_选择语言菜单 的 `aria-label` 属性。_
|
||||
|
||||
它主要是为了站点的可访问性 (a11y) 。
|
||||
|
||||
### sidebarMenuLabel
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'Menu'`
|
||||
- 详情：
|
||||
|
||||
移动设备下的导航栏中 菜单选项的文字。
|
||||
|
||||
### returnToTopLabel
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'return to top'`
|
||||
- 详情：
|
||||
|
||||
移动设备下的导航栏中返回顶部的文字。
|
||||
|
||||
### outlineLabel
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'On this page'`
|
||||
- 详情：
|
||||
|
||||
移动设备下的导航栏中大纲标题的文字
|
||||
|
||||
### repo
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情： 仓库配置
|
||||
|
||||
### editLink
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
- 详情： 是否启用 编辑链接
|
||||
|
||||
### editLinkText
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'Edit this page'`
|
||||
- 详情： 编辑链接文字
|
||||
|
||||
### editLinkPattern
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情： 编辑链接的正则表达式
|
||||
|
||||
示例： `':repo/edit/:branch/:path'`
|
||||
|
||||
### docsRepo
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情： 文档仓库配置, 用于生成 `Edit this page` 链接，如果为空，默认使用 `repo` 配置的值
|
||||
|
||||
### docsBranch
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情： 文档仓库分支配置，用于生成 `Edit this page` 链接。
|
||||
|
||||
### docsDir
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情： 文档仓库目录配置，用于生成 `Edit this page` 链接。
|
||||
|
||||
### lastUpdated
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
- 详情： 是否显示最后更新时间
|
||||
|
||||
### lastUpdatedText
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'Last Updated'`
|
||||
- 详情： 最后更新时间的文字
|
||||
|
||||
### contributors
|
||||
|
||||
- 类型： `boolean`
|
||||
- 默认值： `true`
|
||||
- 详情： 是否显示贡献者
|
||||
|
||||
### contributorsText
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'Contributors'`
|
||||
- 详情： 贡献者的文字
|
||||
|
||||
### prevPageLabel
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'Previous Page'`
|
||||
- 详情： 上一页的文字
|
||||
|
||||
### nextPageLabel
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `'Next Page'`
|
||||
- 详情： 下一页的文字
|
||||
|
||||
### notFound
|
||||
|
||||
- 类型： `NotFound | undefined`
|
||||
- 默认值： `undefined`
|
||||
- 详情： 404 页面配置
|
||||
|
||||
```ts
|
||||
interface NotFound {
|
||||
code?: string
|
||||
title?: string
|
||||
quote?: string
|
||||
linkLabel?: string
|
||||
linkText?: string
|
||||
}
|
||||
```
|
||||
93
docs/notes/theme/config/多语言配置.md
Normal file
93
docs/notes/theme/config/多语言配置.md
Normal file
@ -0,0 +1,93 @@
|
||||
---
|
||||
title: 多语言
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/02 10:07:15
|
||||
permalink: /config/locales/
|
||||
---
|
||||
|
||||
## 设置语言 <Badge type="danger">重要</Badge>
|
||||
|
||||
你需要为每个语言设置 `lang` 选项。即使你只在使用单个语言，你也必须在 `.vuepress/config.{js,ts}` 中设置 `lang`。
|
||||
|
||||
::: tip 为什么要这样做?
|
||||
要提供正确的语言环境文本，主题需要知道根文件夹以及每个多语言文件夹正在使用哪种语言。
|
||||
:::
|
||||
|
||||
::: code-tabs
|
||||
@tab 单语言
|
||||
```ts
|
||||
import { defineUserConfig } from "vuepress";
|
||||
|
||||
export default defineUserConfig({
|
||||
// 设置正在使用的语言
|
||||
lang: "zh-CN",
|
||||
});
|
||||
```
|
||||
@tab 多语言
|
||||
```ts
|
||||
import { defineUserConfig } from "vuepress";
|
||||
|
||||
export default defineUserConfig({
|
||||
locales: {
|
||||
"/": {
|
||||
// 设置正在使用的语言
|
||||
lang: "zh-CN",
|
||||
},
|
||||
"/en/": {
|
||||
// 设置正在使用的语言
|
||||
lang: "en-US",
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
:::
|
||||
|
||||
## 多语言配置
|
||||
|
||||
`locales` 是一个对象，其键为每个语言的路径前缀，值为该语言的配置，可以包含 `title`, `description`, `lang` 等。
|
||||
|
||||
你应当为每个语言设置 `lang` 选项，以便主题和插件能够正确的处理它们。
|
||||
|
||||
如果站点和主题配置中的 `locales` 对象只包含 "/" 一个键，则主题不会显示语言切换菜单。当你通过 `locales` 设置多个键，即存在多个语言的时候，我们会在导航栏显示语言切换菜单。
|
||||
|
||||
## 语言适配
|
||||
|
||||
主题默认适配了以下语言
|
||||
|
||||
- 简体中文 (zh-CN)
|
||||
- 英文(美国) (en-US)
|
||||
|
||||
## 为每个语言设置主题选项
|
||||
|
||||
与站点配置和 `@vuepress/theme-default` 的主题配置相同，`vuepress-theme-plume` 也支持你在主题选项中设置 locale 选项，并为每种语言设置不同的配置。
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
locales: {
|
||||
'/': {
|
||||
lang: 'en-US',
|
||||
},
|
||||
'/zh/': {
|
||||
lang: 'zh-CN',
|
||||
},
|
||||
},
|
||||
|
||||
theme: plumeTheme({
|
||||
// 通用配置
|
||||
// ...
|
||||
locales: {
|
||||
'/': {
|
||||
// 英文配置
|
||||
// ...
|
||||
},
|
||||
'/zh/': {
|
||||
// 中文配置
|
||||
// ...
|
||||
},
|
||||
},
|
||||
}),
|
||||
})
|
||||
```
|
||||
185
docs/notes/theme/config/导航栏配置.md
Normal file
185
docs/notes/theme/config/导航栏配置.md
Normal file
@ -0,0 +1,185 @@
|
||||
---
|
||||
title: 导航栏配置
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/01 15:07:33
|
||||
permalink: /config/navigation/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题默认会自动生成最简单的导航栏配置，仅包括 **首页** 和 **博客文章列表页** 。
|
||||
|
||||
你也可以自己配置导航栏，覆盖默认的的导航栏配置。
|
||||
|
||||
默认配置如下：
|
||||
|
||||
::: code-tabs
|
||||
@tab default config
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
notes: [
|
||||
{ text: '首页', link: '/', icon: 'material-symbols:home-outline' },
|
||||
{ text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
|
||||
]
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
当开启了 多语言配置，则会生成对应语言的导航栏的默认配置：
|
||||
|
||||
::: code-tabs
|
||||
@tab default config
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
lang: 'zh-CN',
|
||||
locales: {
|
||||
'/': { lang: 'zh-CN', title: '博客' }, // 简体中文
|
||||
'/en/': { lang: 'en-US', title: 'Blog' }, // English
|
||||
}
|
||||
theme: plumeTheme({
|
||||
locales: {
|
||||
'/': {
|
||||
notes: [
|
||||
{ text: '首页', link: '/', icon: 'material-symbols:home-outline' },
|
||||
{ text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
|
||||
]
|
||||
},
|
||||
'/en/': {
|
||||
notes: [
|
||||
{ text: 'Home', link: '/en/', icon: 'material-symbols:home-outline' },
|
||||
{ text: 'Blog', link: '/en/blog/', icon: 'material-symbols:article-outline' },
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
但是，通常情况下，随着站点内容变得越来越丰富，包括了 博客文章列表、notes、友情链接、 外部链接等等，
|
||||
默认生成的导航栏配置满足不了您的需求。
|
||||
|
||||
这时候，您可以通过 `navbar` 字段来完全自定义导航栏，它将直接覆盖默认的导航栏配置。
|
||||
|
||||
## 配置
|
||||
|
||||
类型: `NavItem[]`
|
||||
|
||||
```ts
|
||||
type NavItem = string | {
|
||||
text: string
|
||||
link: string
|
||||
/**
|
||||
* 支持 iconify 图标，直接使用 iconify name 即可自动加载
|
||||
* @see https://icon-sets.iconify.design/
|
||||
*/
|
||||
icon?: string
|
||||
/**
|
||||
* 控制元素何时被激活
|
||||
*/
|
||||
activeMatch?: string
|
||||
/**
|
||||
* 最大深度为 2，生成嵌套的导航栏
|
||||
*/
|
||||
items?: NavItem[]
|
||||
}
|
||||
```
|
||||
|
||||
### 嵌套配置示例
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
notes: [
|
||||
{ text: '首页', link: '/', icon: 'material-symbols:home-outline' },
|
||||
{ text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
|
||||
{
|
||||
text: '技术文档',
|
||||
icon: 'mdi:idea',
|
||||
items: [
|
||||
{
|
||||
text: 'Vuepress Theme',
|
||||
icon: 'icon-park-solid:theme',
|
||||
items: [
|
||||
{
|
||||
text: 'vuepress-theme-plume',
|
||||
link: '/vuepress-theme-plume/',
|
||||
icon: 'mdi:paper-airplane',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Vuepress Plugin',
|
||||
icon: 'mingcute:plugin-2-fill',
|
||||
items: [
|
||||
{
|
||||
text: 'caniuse',
|
||||
link: '/vuepress-plugin/caniuse/',
|
||||
icon: 'pajamas:feature-flag',
|
||||
},
|
||||
{
|
||||
text: 'auto-frontmatter',
|
||||
link: '/vuepress-plugin/auto-frontmatter/',
|
||||
icon: 'material-symbols:move-selection-down-rounded',
|
||||
},
|
||||
{
|
||||
text: 'blog-data',
|
||||
link: '/vuepress-plugin/blog-data/',
|
||||
icon: 'ic:baseline-post-add',
|
||||
},
|
||||
{
|
||||
text: 'notes-data',
|
||||
link: '/vuepress-plugin/notes-data/',
|
||||
icon: 'material-symbols:note-alt-rounded',
|
||||
},
|
||||
{
|
||||
text: 'shikiji',
|
||||
link: '/vuepress-plugin/shikiji/',
|
||||
icon: 'material-symbols-light:code-blocks-outline-rounded',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### `activeMatch`
|
||||
|
||||
`activeMatch` 用于控制当前链接元素何时被激活。其值为一个类正则表达式的字符串。
|
||||
|
||||
**示例：** `activeMatch: '^/(blog|article)/'`
|
||||
|
||||
这表示，以 `/blog/` 或 `/article/` 开头的页面链接地址，该链接元素将被激活。
|
||||
|
||||
|
||||
## 配置帮助函数
|
||||
|
||||
主题提供了 `defineNavbar(config)` 函数，为主题使用者提供导航栏配置的类型帮助。
|
||||
便于将 `navbar` 配置分离到独立的配置文件中。
|
||||
|
||||
::: code-tabs
|
||||
@tab navbar.ts
|
||||
```ts
|
||||
import { defineNavbar } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineNavbar([
|
||||
{ text: '首页', link: '/' },
|
||||
{ text: '博客', link: '/blog/' },
|
||||
// ... more
|
||||
])
|
||||
```
|
||||
:::
|
||||
51
docs/notes/theme/config/配置说明.md
Normal file
51
docs/notes/theme/config/配置说明.md
Normal file
@ -0,0 +1,51 @@
|
||||
---
|
||||
title: 配置说明
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/02 10:48:14
|
||||
permalink: /config/intro/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
VuePress 站点的基本配置文件是 `.vuepress/config.js` ，但也同样支持 TypeScript 配置文件。
|
||||
你可以使用 `.vuepress/config.ts` 来得到更好的类型提示。
|
||||
|
||||
具体而言，VuePress 对于配置文件的路径有着约定（按照优先顺序）：
|
||||
|
||||
当前工作目录 `cwd` 下：
|
||||
|
||||
- `vuepress.config.ts`
|
||||
- `vuepress.config.js`
|
||||
- `vuepress.config.mjs`
|
||||
|
||||
源文件目录 `sourceDir` 下：
|
||||
|
||||
- `.vuepress/config.ts`
|
||||
- `.vuepress/config.js`
|
||||
- `.vuepress/config.mjs`
|
||||
|
||||
基础配置文件示例：
|
||||
|
||||
```ts
|
||||
import { viteBundler } from '@vuepress/bundler-vite'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
bundler: viteBundler(),
|
||||
theme: plumeTheme(),
|
||||
|
||||
lang: 'zh-CN',
|
||||
title: '你好， VuePress ！',
|
||||
description: '这是我的第一个 VuePress 站点',
|
||||
})
|
||||
```
|
||||
|
||||
## 类型
|
||||
|
||||
在 VuePress 中，有三种配置类型:
|
||||
|
||||
|
||||
- 站点配置: 这是你在 配置文件 中直接导出的对象
|
||||
- 主题配置: 传递给 `plumeTheme` 的对象参数
|
||||
- 页面配置: 由在页面顶部基于 YAML 语法的 Frontmatter 提供
|
||||
32
docs/notes/theme/guide/api-node.md
Normal file
32
docs/notes/theme/guide/api-node.md
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Node
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/07 21:59:13
|
||||
permalink: /guide/api/node/
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
```ts
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
```
|
||||
|
||||
## `plumeTheme(options)`
|
||||
|
||||
__options__ : `PlumeThemeOptions`
|
||||
|
||||
主题配置函数。
|
||||
|
||||
查看 [主题配置](/config/basic/) 了解更多。
|
||||
|
||||
## `defineNavbarConfig(options)`
|
||||
|
||||
主题导航栏配置函数。
|
||||
|
||||
查看 [主题配置](/config/navigation/) 了解更多。
|
||||
|
||||
## `definePlumeNotesConfig(options)`
|
||||
|
||||
主题 notes 配置函数
|
||||
|
||||
查看 [主题配置](/config/notes/) 了解更多。
|
||||
42
docs/notes/theme/guide/api-客户端.md
Normal file
42
docs/notes/theme/guide/api-客户端.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 客户端
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/07 21:58:48
|
||||
permalink: /guide/api/client/
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
```ts
|
||||
import { useDarkMode } from 'vuepress-theme-plume/client'
|
||||
```
|
||||
|
||||
|
||||
## `useDarkMode()`
|
||||
|
||||
- 类型： `() => Ref<boolean>`
|
||||
|
||||
Composable `useDarkMode()` 用于获取当前的 `dark` 状态。
|
||||
|
||||
|
||||
```ts
|
||||
import { useDarkMode } from 'vuepress-theme-plume/client'
|
||||
|
||||
const isDark = useDarkMode()
|
||||
```
|
||||
|
||||
## `<HomeBox />`
|
||||
|
||||
- 类型：`Component`
|
||||
|
||||
自定义首页时，提供给 区域 的 包装容器。
|
||||
|
||||
|
||||
### Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --------------------- | ------------------ | --------- | ---------------- |
|
||||
| type | string | `''` | 区域类型 |
|
||||
| full | boolean | `false` | 是否全屏 |
|
||||
| background-image | string | `''` | 区域背景图片 |
|
||||
| background-attachment | `'fixed'\|'local'` | `'local'` | 区域背景定位方式 |
|
||||
828
docs/notes/theme/guide/markdown-基础.md
Normal file
828
docs/notes/theme/guide/markdown-基础.md
Normal file
@ -0,0 +1,828 @@
|
||||
---
|
||||
title: 基础
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/05 11:10:39
|
||||
permalink: /guide/markdown/basic/
|
||||
---
|
||||
|
||||
Markdown 是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
|
||||
|
||||
Markdown 的目标是实现「易读易写」。
|
||||
|
||||
<!-- more -->
|
||||
|
||||
## 概述
|
||||
|
||||
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6]，然而最大灵感来源其实是纯文字的电子邮件格式。
|
||||
|
||||
因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像\*强调\*。Markdown 的列表看起来，嗯，就是列表。假如你有使用过电子邮件，引言写法看起来就真的像是引用一段文字。
|
||||
|
||||
Markdown 具有一系列衍生版本，用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ，这些功能原初的 Markdown 尚不具备，它们能让 Markdown 转换成更多的格式，例如 LaTeX，Docbook。Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具，如 Pandoc；要么基于网站，如 GitHub 和 Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。
|
||||
|
||||
## 用途
|
||||
|
||||
Markdown 的语法有个主要的目的: 用来作为一种网络内容的*写作*用语言。Markdown 的重点在于，它能让文件更容易阅读、编写。因此，Markdown 的格式语法只涵盖纯文字可以涵盖的范围。
|
||||
|
||||
Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。世界上最流行的博客平台 WordPress 能很好的支持 Markdown。
|
||||
|
||||
用于编写说明文档，并且以 `README.md` 的文件名保存在软件的目录下面。
|
||||
|
||||
除此之外，我们还可以快速将 Markdown 转化为演讲 PPT、Word 产品文档、LaTex 论文甚至是用非常少量的代码完成最小可用原型。在数据科学领域，Markdown 已经广泛使用，极大地推进了动态可重复性研究的历史进程。
|
||||
|
||||
### 行内 HTML
|
||||
|
||||
不在 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。
|
||||
|
||||
只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行，以利与内容区隔。而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `<p>` 标签。
|
||||
|
||||
举例来说，在 Markdown 文件里加上一段 HTML 表格:
|
||||
|
||||
```md
|
||||
This is a regular paragraph.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>Foo</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
This is another regular paragraph.
|
||||
```
|
||||
|
||||
请注意，Markdown 语法在 HTML 块标签中将不会被进行处理。例如，你无法在 HTML 块内使用 Markdown 形式的 `*强调*`。
|
||||
|
||||
### 特殊字元自动转换
|
||||
|
||||
在 HTML 文件中，有两个字元需要特殊处理: `<` 和 `&` 。 `<` 符号用于起始标签，`&` 符号则用于标记 HTML 实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是 `<` 和 `&`。
|
||||
|
||||
`&` 符号其实很容易让写作网络文件的人感到困扰，如果你要打「AT&T」 ，你必须要写成「`AT&T`」 ，还得转换网址内的 `&` 符号，如果你要链接到 `http://images.google.com/images?num=30&q=larry+bird`
|
||||
|
||||
你必须要把网址转成:
|
||||
|
||||
```html
|
||||
http://images.google.com/images?num=30&q=larry+bird
|
||||
```
|
||||
|
||||
才能放到链接标签的 `href` 属性里。不用说也知道这很容易忘记，这也可能是 HTML 标准检查所检查到的错误中，数量最多的。
|
||||
|
||||
Markdown 允许你直接使用这些符号，但是你要小心跳脱字元的使用，如果你是在 HTML 实体中使用 `&` 符号的话，它不会被转换，而在其它情形下，它则会被转换成 `&`。所以你如果要在文件中插入一个著作权的符号，你可以这样写:
|
||||
|
||||
```md
|
||||
©
|
||||
```
|
||||
|
||||
Markdown 将不会对这段文字做修改，但是如果你这样写:
|
||||
|
||||
```md
|
||||
AT&T
|
||||
```
|
||||
|
||||
Markdown 就会将它转为:
|
||||
|
||||
```html
|
||||
AT&T
|
||||
```
|
||||
|
||||
类似的状况也会发生在 `<` 符号上，因为 Markdown 支持 [行内 HTML](#行内-html) ，如果你是使用 `<` 符号作为 HTML 标签使用，那 Markdown 也不会对它做任何转换，但是如果你是写:
|
||||
|
||||
```md
|
||||
4 < 5
|
||||
```
|
||||
|
||||
Markdown 将会把它转换为:
|
||||
|
||||
```html
|
||||
4 < 5
|
||||
```
|
||||
|
||||
不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，你要把所有的 `<` 和 `&` 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
|
||||
|
||||
---
|
||||
|
||||
## 块元素
|
||||
|
||||
### 段落和换行
|
||||
|
||||
一个段落是由一个以上相连接的行句组成，而一个以上的空行则会切分出不同的段落 (空行的定义是显示上看起来像是空行，便会被视为空行。比方说，若某一行只包含空白和 tab，则该行也会被视为空行) ，一般的段落不需要用空白或断行缩进。
|
||||
|
||||
「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行，这个特性和其他大部分的 text-to-HTML 格式不一样 (包括 MovableType 的「Convert Line Breaks」选项) ，其它的格式会把每个断行都转成 `<br />` 标签。
|
||||
|
||||
<!-- markdownlint-disable MD038 -->
|
||||
|
||||
如果你*真的*想要插入 `<br />` 标签的话，在行尾加上两个以上的空格 (` `) 或斜线 (`/`)，然后按 Enter。
|
||||
|
||||
<!-- markdownlint-enable MD038 -->
|
||||
|
||||
是的，这确实需要花比较多功夫来插入 `<br />` ，但是「每个换行都转换为 `<br />`」的方法在 Markdown 中并不适合， Markdown 中 email 式的 [块引言][bq] 和多段落的 [列表][l] 在使用换行来排版的时候，不但更好用，还更好阅读。
|
||||
|
||||
### 标题
|
||||
|
||||
标题能显示出文章的结构。
|
||||
|
||||
Markdown 支持两种标题的语法，[Setext][1] 和 [atx][2] 形式。
|
||||
|
||||
Setext 形式是用底线的形式，利用 `=` (最高阶标题) 和 `-` (第二阶标题) ，例如:
|
||||
|
||||
```md
|
||||
# This is an H1
|
||||
|
||||
## This is an H2
|
||||
```
|
||||
|
||||
任何数量的 `=` 和 `-` 都可以有效果。
|
||||
|
||||
Atx (推荐)形式则是在行首插入 1 到 6 个 `#` ，对应到标题 1 到 6 阶，例如:
|
||||
|
||||
- H1: `# Header 1`
|
||||
- H2: `## Header 2`
|
||||
- H3: `### Header 3`
|
||||
- H4: `#### Header 4`
|
||||
- H5: `##### Header 5`
|
||||
- H6: `###### Header 6`
|
||||
|
||||
### Blockquotes
|
||||
|
||||
Markdown 使用 email 形式的块引言，如果你很熟悉如何在 email 信件中引言，你就知道怎么在 Markdown 文件中建立一个块引言，那会看起来像是你强迫断行，然后在每行的最前面加上 `>` :
|
||||
|
||||
```md
|
||||
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
|
||||
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
|
||||
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
|
||||
>
|
||||
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
||||
> id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
Markdown 也允许你只在整个段落的第一行最前面加上 `>` :
|
||||
|
||||
```md
|
||||
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
|
||||
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
|
||||
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
|
||||
|
||||
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
||||
> id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
块引言可以有阶层 (例如: 引言内的引言) ，只要根据层数加上不同数量的 `>` :
|
||||
|
||||
```md
|
||||
> This is the first level of quoting.
|
||||
>
|
||||
> > This is nested blockquote.
|
||||
>
|
||||
> Back to the first level.
|
||||
```
|
||||
|
||||
引言的块内也可以使用其他的 Markdown 语法，包括标题、列表、代码块等:
|
||||
|
||||
```md
|
||||
> ## This is a header.
|
||||
>
|
||||
> 1. This is the first list item.
|
||||
> 1. This is the second list item.
|
||||
>
|
||||
> Here's some example code:
|
||||
>
|
||||
> return shell_exec("echo $input | $markdown_script");
|
||||
```
|
||||
|
||||
任何标准的文字编辑器都能简单地建立 email 样式的引言，例如 BBEdit ，你可以选取文字后然后从选单中选择*增加引言阶层*。
|
||||
|
||||
### 列表
|
||||
|
||||
Markdown 支持有序列表和无序列表。
|
||||
|
||||
无序列表使用减号作为列表标记(也可使用星号、加号):
|
||||
|
||||
```md
|
||||
- Red
|
||||
- Green
|
||||
- Blue
|
||||
```
|
||||
|
||||
也可以(不建议):
|
||||
|
||||
```md
|
||||
- Red
|
||||
- Green
|
||||
- Blue
|
||||
|
||||
* Red
|
||||
* Green
|
||||
* Blue
|
||||
```
|
||||
|
||||
有序列表则使用数字接着一个英文句点:
|
||||
|
||||
```md
|
||||
1. Bird
|
||||
2. McHale
|
||||
3. Parish
|
||||
```
|
||||
|
||||
很重要的一点是，你在列表标记上使用的数字并不会影响输出的 HTML 结果，上面的列表所产生的 HTML 标记为:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Bird</li>
|
||||
<li>McHale</li>
|
||||
<li>Parish</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
如果你的列表标记写成:
|
||||
|
||||
```md
|
||||
1. Bird
|
||||
1. McHale
|
||||
1. Parish
|
||||
```
|
||||
|
||||
你都会得到完全相同的 HTML 输出。重点在于，你可以让 Markdown 文件的列表数字和输出的结果相同，或是你懒一点都写作 `1` 你可以完全不用在意数字的正确性。
|
||||
|
||||
列表项目标记通常是放在最左边，但是其实也可以缩进，最多三个空白，项目标记后面则一定要接着至少一个空白或 tab。
|
||||
|
||||
要让列表看起来更漂亮，你可以把内容用固定的缩进整理好:
|
||||
|
||||
```md
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
|
||||
viverra nec, fringilla in, laoreet vitae, risus.
|
||||
- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
|
||||
Suspendisse id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
但是如果你很懒，那也不一定需要:
|
||||
|
||||
```md
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
|
||||
viverra nec, fringilla in, laoreet vitae, risus.
|
||||
- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
|
||||
Suspendisse id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
如果列表项目间用空行分开， Markdown 会把项目的内容在输出时用 `<p>` 标签包起来，举例来说:
|
||||
|
||||
```md
|
||||
- Bird
|
||||
- Magic
|
||||
```
|
||||
|
||||
会被转换为:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Bird</li>
|
||||
<li>Magic</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
但是这个:
|
||||
|
||||
```md
|
||||
- Bird
|
||||
|
||||
- Magic
|
||||
```
|
||||
|
||||
会被转换为:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li><p>Bird</p></li>
|
||||
<li><p>Magic</p></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空白或是一个 tab :
|
||||
|
||||
```md
|
||||
1. This is a list item with two paragraphs. Lorem ipsum dolor
|
||||
sit amet, consectetuer adipiscing elit. Aliquam hendrerit
|
||||
mi posuere lectus.
|
||||
|
||||
Vestibulum enim wisi, viverra nec, fringilla in, laoreet
|
||||
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
|
||||
sit amet velit.
|
||||
|
||||
2. Suspendisse id sem consectetuer libero luctus adipiscing.
|
||||
```
|
||||
|
||||
如果你每行都有缩进，看起来会看好很多，当然，再次地，如果你很懒惰，Markdown 也允许:
|
||||
|
||||
```md
|
||||
- This is a list item with two paragraphs.
|
||||
|
||||
This is the second paragraph in the list item. You're
|
||||
only required to indent the first line. Lorem ipsum dolor
|
||||
sit amet, consectetuer adipiscing elit.
|
||||
|
||||
- Another item in the same list.
|
||||
```
|
||||
|
||||
如果要在列表项目内放进引言，那 `>` 就需要缩进:
|
||||
|
||||
```md
|
||||
- A list item with a blockquote:
|
||||
|
||||
> This is a blockquote
|
||||
> inside a list item.
|
||||
```
|
||||
|
||||
当然，项目列表很可能会不小心产生，像是下面这样的写法:
|
||||
|
||||
```md
|
||||
1986. What a great season.
|
||||
```
|
||||
|
||||
换句话说，也就是在行首出现*数字-句点-空白*，要避免这样的状况，你可以在句点前面加上反斜线。
|
||||
|
||||
```md
|
||||
1986\. What a great season.
|
||||
```
|
||||
|
||||
### 代码块
|
||||
|
||||
和代码相关的写作或是标签语言原始码通常会有已经排版好的代码块，通常这些块我们并不希望它以一般段落文件的方式去排版，而是照原来的样子显示，Markdown 会用 `<pre>` 和 `<code>` 标签来把代码块包起来。
|
||||
|
||||
要在 Markdown 中建立代码块很简单，只要简单地缩进 4 个空白或是 1 个 tab 就可以，例如，下面的输入:
|
||||
|
||||
```md
|
||||
This is a normal paragraph:
|
||||
|
||||
This is a code block.
|
||||
```
|
||||
|
||||
Markdown 会转换成:
|
||||
|
||||
```html
|
||||
<p>This is a normal paragraph:</p>
|
||||
|
||||
<pre>
|
||||
<code>This is a code block.</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
这里的缩进 (4 个空白或是 1 个 tab) ，都会被移除，例如:
|
||||
|
||||
```md
|
||||
Here is an example of AppleScript:
|
||||
|
||||
tell application "Foo"
|
||||
beep
|
||||
end tell
|
||||
```
|
||||
|
||||
会被转换为:
|
||||
|
||||
```html
|
||||
<p>Here is an example of AppleScript:</p>
|
||||
|
||||
<pre><code>tell application "Foo"
|
||||
beep
|
||||
end tell
|
||||
</code></pre>
|
||||
```
|
||||
|
||||
一个代码块会一直持续到没有缩进的那一行 (或是文件结尾) 。
|
||||
|
||||
在代码块里面， `&` 、 `<` 和 `>` 会自动转成 HTML 实体，这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码，只需要复制粘贴，再加上缩进就可以了，剩下的 Markdown 都会帮你处理，例如:
|
||||
|
||||
````md
|
||||
```
|
||||
<div class="footer">
|
||||
© 2004 Foo Corporation
|
||||
</div>
|
||||
```
|
||||
````
|
||||
|
||||
会被转换为:
|
||||
|
||||
```html
|
||||
<pre>
|
||||
<code><div class="footer">
|
||||
&copy; 2004 Foo Corporation
|
||||
</div></code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
代码块中，一般的 Markdown 语法不会被转换，像是星号便只是星号，这表示你可以很容易地以 Markdown 语法撰写 Markdown 语法相关的文件。
|
||||
|
||||
如果你想要在代码块里输入用 Markdown 表示的代码库，你可以进行嵌套。
|
||||
|
||||
`````md
|
||||
````md
|
||||
```js
|
||||
const a = 1;
|
||||
```
|
||||
````
|
||||
`````
|
||||
|
||||
会渲染为
|
||||
|
||||
````md
|
||||
```js
|
||||
const a = 1;
|
||||
```
|
||||
````
|
||||
|
||||
### 分隔线
|
||||
|
||||
你可以在一行中用三个或以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号中间插入空白。下面每种写法都可以建立分隔线:
|
||||
|
||||
```html
|
||||
---(建议) * * * *** ***** - - - ---------------------------------------
|
||||
```
|
||||
|
||||
## 行内元素
|
||||
|
||||
### 链接
|
||||
|
||||
Markdown 支持两种形式的链接语法: *行内*和*参考*两种形式。
|
||||
|
||||
不管是哪一种，链接的文字都是用 `[方括号]` 来标记。
|
||||
|
||||
要建立一个行内形式的链接，只要在方块括号后面马上接着括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如:
|
||||
|
||||
```html
|
||||
This is [an example](http://example.com/ "Title") inline link. [This
|
||||
link](http://example.net/) has no title attribute.
|
||||
```
|
||||
|
||||
会产生:
|
||||
|
||||
```html
|
||||
<p>
|
||||
This is <a href="http://example.com/" title="Title"> an example</a> inline
|
||||
link.
|
||||
</p>
|
||||
|
||||
<p><a href="http://example.net/">This link</a> has no title attribute.</p>
|
||||
```
|
||||
|
||||
如果你是要链接到同样主机的资源，你可以使用相对路径:
|
||||
|
||||
```md
|
||||
See my [About](/about/) page for details.
|
||||
```
|
||||
|
||||
参考形式的链接使用另外一个方括号接在链接文字的括号后面，而在第二个方括号里面要填入用以辨识链接的标签:
|
||||
|
||||
```md
|
||||
This is [an example][id] reference-style link.
|
||||
```
|
||||
|
||||
接着，在文件的任意处，你可以把这个标签的链接内容定义出来:
|
||||
|
||||
```md
|
||||
[id]: http://example.com/ "Optional Title Here"
|
||||
```
|
||||
|
||||
链接定义的形式为:
|
||||
|
||||
- 方括号，输入链接的标识 ID
|
||||
- 冒号
|
||||
- 一个以上的空白或 tab
|
||||
- 链接的网址
|
||||
- 选择性地添加 title 内容，可以用单引号、双引号或是括号包括
|
||||
|
||||
下面这三种链接的定义相同:
|
||||
|
||||
```md
|
||||
[foo]: http://example.com/ "Optional Title Here"
|
||||
[foo]: http://example.com/ "Optional Title Here"
|
||||
[foo]: http://example.com/ "Optional Title Here"
|
||||
```
|
||||
|
||||
**请注意:** 有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引号包起来的链接 title。
|
||||
|
||||
链接网址也可以用方括号包起来:
|
||||
|
||||
```md
|
||||
[id]: http://example.com/ "Optional Title Here"
|
||||
```
|
||||
|
||||
你也可以把 title 属性放到下一行，也可以加一些缩进，网址太长的话，这样会比较好看:
|
||||
|
||||
```md
|
||||
[id]: http://example.com/longish/path/to/resource/here "Optional Title Here"
|
||||
```
|
||||
|
||||
网址定义只有在产生链接的时候用到，并不会直接出现在文件之中。
|
||||
|
||||
链接辨识标签可以有字母、数字、空白和标点符号，但是并**不**区分大小写，因此下面两个链接是一样的:
|
||||
|
||||
```md
|
||||
[link text][a]
|
||||
[link text][a]
|
||||
```
|
||||
|
||||
*预设的链接标签*功能让你可以省略指定链接标签，这种情形下，链接标签和链接文字会视为相同，要用预设链接标签只要在链接文字后面加上一个空的方括号，如果你要让 "Google" 链接到 google.com，你可以简化成:
|
||||
|
||||
```md
|
||||
[Google][]
|
||||
```
|
||||
|
||||
然后定义链接内容:
|
||||
|
||||
```md
|
||||
[google]: http://google.com/
|
||||
```
|
||||
|
||||
由于链接文字可能包含空白，所以这种简化的标签内也可以包含多个文字:
|
||||
|
||||
```md
|
||||
Visit [Daring Fireball][] for more information.
|
||||
```
|
||||
|
||||
然后接着定义链接:
|
||||
|
||||
```md
|
||||
[daring fireball]: http://daringfireball.net/
|
||||
```
|
||||
|
||||
链接的定义可以放在文件中的任何一个地方，我比较偏好直接放在链接出现段落的后面，你也可以把它放在文件最后面，就像是注解一样。
|
||||
|
||||
下面是一个参考式链接的范例:
|
||||
|
||||
```md
|
||||
I get 10 times more traffic from [Google][1] than from
|
||||
[Yahoo][2] or [MSN][3].
|
||||
|
||||
[1]: http://google.com/ "Google"
|
||||
[2]: http://search.yahoo.com/ "Yahoo Search"
|
||||
[3]: http://search.msn.com/ "MSN Search"
|
||||
```
|
||||
|
||||
如果改成用链接名称的方式写:
|
||||
|
||||
```md
|
||||
I get 10 times more traffic from [Google][] than from
|
||||
[Yahoo][] or [MSN][].
|
||||
|
||||
[google]: http://google.com/ "Google"
|
||||
[yahoo]: http://search.yahoo.com/ "Yahoo Search"
|
||||
[msn]: http://search.msn.com/ "MSN Search"
|
||||
```
|
||||
|
||||
上面两种写法都会产生下面的 HTML。
|
||||
|
||||
```html
|
||||
<p>
|
||||
I get 10 times more traffic from
|
||||
<a href="http://google.com/" title="Google">Google</a> than from
|
||||
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
|
||||
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.
|
||||
</p>
|
||||
```
|
||||
|
||||
下面是用行内形式写的同样一段内容的 Markdown 文件，提供作为比较之用:
|
||||
|
||||
```md
|
||||
I get 10 times more traffic from [Google](http://google.com/ "Google")
|
||||
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
|
||||
[MSN](http://search.msn.com/ "MSN Search").
|
||||
```
|
||||
|
||||
参考式的链接其实重点不在于它比较好写，而是它比较好读，比较一下上面的范例，使用参考式的文章本身只有 81 个字元，但是用行内形式的链接却会增加到 176 个字元，如果是用纯 HTML 格式来写，会有 234 个字元，在 HTML 格式中，标签比文字还要多。
|
||||
|
||||
使用 Markdown 的参考式链接，可以让文件更像是浏览器最后产生的结果，让你可以把一些标记相关的资讯移到段落文字之外，你就可以增加链接而不让文章的阅读感觉被打断。
|
||||
|
||||
### 强调
|
||||
|
||||
Markdown 使用星号 (`*`) 和底线 (`_`) 作为标记强调字词的符号，被 `*` 或 `_` 包围的字词会被转成用 `<em>` 标签包围，用两个 `*` 或 `_` 包起来的话，则会被转成 `<strong>`，例如:
|
||||
|
||||
```md
|
||||
**double asterisks** (建议)
|
||||
|
||||
**double underscores** (建议)
|
||||
|
||||
_single asterisks_
|
||||
|
||||
_single underscores_
|
||||
```
|
||||
|
||||
会转成:
|
||||
|
||||
```html
|
||||
<em>single asterisks</em>
|
||||
|
||||
<em>single underscores</em>
|
||||
|
||||
<strong>double asterisks</strong>
|
||||
|
||||
<strong>double underscores</strong>
|
||||
```
|
||||
|
||||
你可以随便用你喜欢的样式，唯一的限制是，你用什么符号开启标签，就要用什么符号结束。
|
||||
|
||||
强调也可以直接插在文字中间:
|
||||
|
||||
```md
|
||||
un*frigging*believable
|
||||
```
|
||||
|
||||
但是如果你的 `*` 和 `_` 两边都有空白的话，它们就只会被当成普通的符号。
|
||||
|
||||
如果要在文字前后直接插入普通的星号或底线，你可以用反斜线:
|
||||
|
||||
```md
|
||||
\*this text is surrounded by literal asterisks\*
|
||||
```
|
||||
|
||||
### 代码
|
||||
|
||||
如果要标记一小段行内代码，你可以用反引号把它包起来 (`` ` ``) ，例如:
|
||||
|
||||
```md
|
||||
Use the `printf()` function.
|
||||
```
|
||||
|
||||
会产生:
|
||||
|
||||
```md
|
||||
<p>Use the <code>printf()</code> function.</p>
|
||||
```
|
||||
|
||||
如果要在代码内插入反引号，你可以用多个反引号来开启和结束行内代码:
|
||||
|
||||
```md
|
||||
``There is a literal backtick (`) here.``
|
||||
```
|
||||
|
||||
这段语法会产生:
|
||||
|
||||
```html
|
||||
<p><code>There is a literal backtick (`) here.</code></p>
|
||||
```
|
||||
|
||||
代码码区段的起始和结束端都可以放入一个空白，起始端后面一个，结束端前面一个，这样你就可以在区段的一开始就插入反引号:
|
||||
|
||||
```md
|
||||
A single backtick in a code span: `` ` ``
|
||||
|
||||
A backtick-delimited string in a code span: `` `foo` ``
|
||||
```
|
||||
|
||||
会产生:
|
||||
|
||||
```html
|
||||
<p>A single backtick in a code span: <code>`</code></p>
|
||||
|
||||
<p>A backtick-delimited string in a code span: <code>`foo`</code></p>
|
||||
```
|
||||
|
||||
在代码码区段内，`&` 和方括号都会被转成 HTML 实体，这样会比较容易插入 HTML 原始码，Markdown 会把下面这段:
|
||||
|
||||
```md
|
||||
Please don't use any `<blink>` tags.
|
||||
```
|
||||
|
||||
转为:
|
||||
|
||||
```html
|
||||
<p>Please don't use any <code><blink></code> tags.</p>
|
||||
```
|
||||
|
||||
你也可以这样写:
|
||||
|
||||
```md
|
||||
`—` is the decimal-encoded equivalent of `—`.
|
||||
```
|
||||
|
||||
以产生:
|
||||
|
||||
```html
|
||||
<p>
|
||||
<code>&#8212;</code> is the decimal-encoded equivalent of
|
||||
<code>&mdash;</code>.
|
||||
</p>
|
||||
```
|
||||
|
||||
### 图片
|
||||
|
||||
很明显地，要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。
|
||||
|
||||
Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式: _行内_ 和 _参考_。
|
||||
|
||||
行内图片的语法看起来像是:
|
||||
|
||||
```md
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
详细叙述如下:
|
||||
|
||||
- 一个惊叹号 `!`
|
||||
- 一个方括号，里面放上图片的替代文字
|
||||
- 一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上
|
||||
选择性的 title 文字。
|
||||
|
||||
参考式的图片语法则长得像这样:
|
||||
|
||||
```md
|
||||
![Alt text][id]
|
||||
```
|
||||
|
||||
「id」是图片参考的名称，图片参考的定义方式则和链接参考一样:
|
||||
|
||||
```md
|
||||
[id]: url/to/image "Optional title attribute"
|
||||
```
|
||||
|
||||
到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 `<img>` 标签。
|
||||
|
||||
### 其他文本样式
|
||||
|
||||
- 删除:`~~delete~~`
|
||||
- 段落: 段落之间空一行
|
||||
- 换行符: 一行结束时输入两个空格
|
||||
|
||||
---
|
||||
|
||||
## 其它
|
||||
|
||||
### 自动链接
|
||||
|
||||
Markdown 支持比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用方括号包起来， Markdown 就会自动把它转成链接，链接的文字就和链接位置一样，例如:
|
||||
|
||||
```md
|
||||
<http://example.com/>
|
||||
```
|
||||
|
||||
Markdown 会转为:
|
||||
|
||||
```html
|
||||
<a href="http://example.com/">http://example.com/</a>
|
||||
```
|
||||
|
||||
自动的邮件链接也很类似，只是 Markdown 会先做一个编码转换的过程，把文字字元转成 16 进位码的 HTML 实体，这样的格式可以混淆一些不好的信箱地址收集机器人，例如:
|
||||
|
||||
```md
|
||||
<address@example.com>
|
||||
```
|
||||
|
||||
Markdown 会转成:
|
||||
|
||||
```html
|
||||
<a
|
||||
href="mailto:address@example.com"
|
||||
>address@example.com</a
|
||||
>
|
||||
```
|
||||
|
||||
在浏览器里面，这段字串会变成一个可以点击的 <address@example.com> 链接。
|
||||
|
||||
(这种作法虽然可以混淆不少的机器人，但并无法全部挡下来，不过这样也比什么都不做好些。无论如何，公开你的信箱终究会引来广告信件的。)
|
||||
|
||||
### 转义字符
|
||||
|
||||
Markdown 可以利用反斜线来插入一些在语法中有其它意义的符号，例如: 如果你想要用星号加在文字旁边的方式来做出强调效果 (但不用 `<em>` 标签) ，你可以在星号的前面加上反斜线:
|
||||
|
||||
```md
|
||||
\*literal asterisks\*
|
||||
```
|
||||
|
||||
Markdown 支持在下面这些符号前面加上反斜线来帮助插入普通的符号:
|
||||
|
||||
- `\` 反斜线
|
||||
- `` ` `` 反引号
|
||||
- `*` 星号
|
||||
- `_` 底线
|
||||
- `{}` 大括号
|
||||
- `[]` 方括号
|
||||
- `()` 括号
|
||||
- `#` 井字号
|
||||
- `+` 加号
|
||||
- `-` 减号
|
||||
- `.` 英文句点
|
||||
- `!` 惊叹号
|
||||
|
||||
## 快捷键
|
||||
|
||||
| 输出后的效果 | Markdown | 快捷键 |
|
||||
| ------------- | ---------- | -------------- |
|
||||
| **Bold** | `**text**` | Ctrl/⌘ + B |
|
||||
| _Emphasize_ | `*text*` | Ctrl/⌘ + I |
|
||||
| `Inline Code` | \`code\` | 选中后 `` ` `` |
|
||||
|
||||
## 表格
|
||||
|
||||
| 居中 | 右对齐 | 左对齐 |
|
||||
| :-----------: | -------------: | :------------- |
|
||||
| 居中使用`:-:` | 右对齐使用`-:` | 左对齐使用`:-` |
|
||||
| b | aaaaaaaaa | aaaa |
|
||||
| c | aaaa | a |
|
||||
|
||||
[1]: http://docutils.sourceforge.net/mirror/setext.html
|
||||
[2]: http://www.aaronsw.com/2002/atx/
|
||||
[3]: http://textism.com/tools/textile/
|
||||
[4]: http://docutils.sourceforge.net/rst.html
|
||||
[5]: http://www.triptico.com/software/grutatxt.html
|
||||
[6]: http://ettext.taint.org/doc/
|
||||
[bq]: #blockquotes
|
||||
[l]: #列表
|
||||
746
docs/notes/theme/guide/markdown-扩展.md
Normal file
746
docs/notes/theme/guide/markdown-扩展.md
Normal file
@ -0,0 +1,746 @@
|
||||
---
|
||||
title: 扩展
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/05 23:29:07
|
||||
permalink: /guide/markdown/extensions/
|
||||
---
|
||||
|
||||
## 标题锚点
|
||||
|
||||
标题会自动应用锚点。
|
||||
|
||||
#### 自定义锚点
|
||||
|
||||
要为标题指定自定义锚点而不是使用自动生成的锚点，请向标题添加后缀：
|
||||
|
||||
```md
|
||||
# 使用自定义锚点 {#my-anchor}
|
||||
```
|
||||
|
||||
这允许将标题链接为 `#my-anchor`，而不是默认的 `#使用自定义锚点`。
|
||||
|
||||
## 链接
|
||||
|
||||
内部和外部链接都会被特殊处理。
|
||||
|
||||
主题默认对每个 md 文件自动生成一个新的 链接，并保存在对应的 md 文件的 frontmatter 的 `permalink` 中。
|
||||
你可以随时修改它们。
|
||||
|
||||
|
||||
#### 内部链接
|
||||
|
||||
建议使用 生成的 `permalink` 作为内部链接的目标。
|
||||
|
||||
```md
|
||||
[Markdown](/guide/markdown/)
|
||||
```
|
||||
|
||||
渲染为：
|
||||
|
||||
[Markdown](/guide/markdown/)
|
||||
|
||||
#### 外部链接
|
||||
|
||||
外部链接带有 `target="_blank" rel="noreferrer"` ：
|
||||
|
||||
[VuePress](https://v2.vuepress.vuejs.org/)
|
||||
|
||||
## Github风格的表格
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
| Tables | Are | Cool |
|
||||
| ------------- | :-----------: | ----: |
|
||||
| col 3 is | right-aligned | $1600 |
|
||||
| col 2 is | centered | $12 |
|
||||
| zebra stripes | are neat | $1 |
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
| Tables | Are | Cool |
|
||||
| ------------- | :-----------: | ----: |
|
||||
| col 3 is | right-aligned | $1600 |
|
||||
| col 2 is | centered | $12 |
|
||||
| zebra stripes | are neat | $1 |
|
||||
|
||||
## Emoji :tada:
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
:tada: :100:
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
:tada: :100:
|
||||
|
||||
这里可以找到 [所有支持的 emoji 列表](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs)。
|
||||
|
||||
## 目录表
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
[[TOC]]
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
[[TOC]]
|
||||
|
||||
## 自定义容器
|
||||
|
||||
自定义容器可以通过它们的类型、标题和内容来定义。
|
||||
|
||||
### 默认标题
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
::: note
|
||||
This is a note box
|
||||
:::
|
||||
|
||||
::: info
|
||||
This is an info box.
|
||||
:::
|
||||
|
||||
::: tip
|
||||
This is a tip.
|
||||
:::
|
||||
|
||||
::: warning
|
||||
This is a warning.
|
||||
:::
|
||||
|
||||
::: caution
|
||||
This is a dangerous warning.
|
||||
:::
|
||||
|
||||
::: details
|
||||
This is a details block.
|
||||
:::
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
::: note
|
||||
This is a note box
|
||||
:::
|
||||
|
||||
::: info
|
||||
This is an info box.
|
||||
:::
|
||||
|
||||
::: tip
|
||||
This is a tip.
|
||||
:::
|
||||
|
||||
::: warning
|
||||
This is a warning.
|
||||
:::
|
||||
|
||||
::: caution
|
||||
This is a dangerous warning.
|
||||
:::
|
||||
|
||||
::: details
|
||||
This is a details block.
|
||||
:::
|
||||
|
||||
### 自定义标题
|
||||
|
||||
可以通过在容器的 "type" 之后附加文本来设置自定义标题。
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
::: caution STOP
|
||||
危险区域，请勿继续
|
||||
:::
|
||||
|
||||
::: details 点我查看代码
|
||||
```js
|
||||
console.log('Hello, VitePress!')
|
||||
```
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
::: caution STOP
|
||||
危险区域，请勿继续
|
||||
:::
|
||||
|
||||
::: details 点我查看代码
|
||||
```js
|
||||
console.log('Hello, VitePress!')
|
||||
```
|
||||
:::
|
||||
|
||||
## GitHub 风格的警报
|
||||
|
||||
主题 同样支持以标注的方式渲染 [GitHub 风格的警报](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)。它们和[自定义容器](#自定义容器)的渲染方式相同。
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
> [!NOTE]
|
||||
> 强调用户在快速浏览文档时也不应忽略的重要信息。
|
||||
|
||||
> [!TIP]
|
||||
> 有助于用户更顺利达成目标的建议性信息。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 对用户达成目标至关重要的信息。
|
||||
|
||||
> [!WARNING]
|
||||
> 因为可能存在风险，所以需要用户立即关注的关键内容。
|
||||
|
||||
> [!CAUTION]
|
||||
> 行为可能带来的负面影响。
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
> [!NOTE]
|
||||
> 强调用户在快速浏览文档时也不应忽略的重要信息。
|
||||
|
||||
> [!TIP]
|
||||
> 有助于用户更顺利达成目标的建议性信息。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 对用户达成目标至关重要的信息。
|
||||
|
||||
> [!WARNING]
|
||||
> 因为可能存在风险，所以需要用户立即关注的关键内容。
|
||||
|
||||
> [!CAUTION]
|
||||
> 行为可能带来的负面影响。
|
||||
|
||||
## 代码块中的语法高亮
|
||||
|
||||
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
|
||||
Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
// ...
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
````
|
||||
```html
|
||||
<ul>
|
||||
<li v-for="todo in todos" :key="todo.id">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li v-for="todo in todos" :key="todo.id">
|
||||
{{ todo.text }}
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages)。
|
||||
|
||||
## 在代码块中实现行高亮
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js{4}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
除了单行之外，还可以指定多个单行、多行，或两者均指定：
|
||||
|
||||
- 多行：例如 `{5-8}`、`{3-10}`、`{10-17}`
|
||||
- 多个单行：例如 `{4,7,9}`
|
||||
- 多行与单行：例如 `{4,7-13,16,23-27,40}`
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js{1,4,6-8}
|
||||
export default { // Highlighted
|
||||
data () {
|
||||
return {
|
||||
msg: `Highlighted!
|
||||
This line isn't highlighted,
|
||||
but this and the next 2 are.`,
|
||||
motd: 'VitePress is awesome',
|
||||
lorem: 'ipsum'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
也可以使用 `// [!code highlight]` 注释实现行高亮。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!' // [\!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Highlighted!' // [!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中聚焦
|
||||
|
||||
在某一行上添加 `// [!code focus]` 注释将聚焦它并模糊代码的其他部分。
|
||||
|
||||
此外，可以使用 `// [!code focus:<lines>]` 定义要聚焦的行数。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Focused!' // [\!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Focused!' // [!code focus]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中的颜色差异
|
||||
|
||||
在某一行添加 `// [!code --]` 或 `// [!code ++]` 注释将会为该行创建 diff，同时保留代码块的颜色。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Removed' // [\!code --]
|
||||
msg: 'Added' // [\!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Removed' // [!code --]
|
||||
msg: 'Added' // [!code ++]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 高亮“错误”和“警告”
|
||||
|
||||
在某一行添加 `// [!code warning]` 或 `// [!code error]` 注释将会为该行相应的着色。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Error', // [\!code error]
|
||||
msg: 'Warning' // [\!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Error', // [!code error]
|
||||
msg: 'Warning' // [!code warning]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代码块中 词高亮
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```ts
|
||||
export function foo() { // [\!code word:Hello]
|
||||
const msg = 'Hello World'
|
||||
console.log(msg) // prints Hello World
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```ts
|
||||
export function foo() { // [!code word:Hello]
|
||||
const msg = 'Hello World'
|
||||
console.log(msg) // prints Hello World
|
||||
}
|
||||
```
|
||||
|
||||
你还可以指定高亮显示的次数，例如 `[!code word:options:2]` 会高亮显示近两个 `options`。
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
```ts
|
||||
// [\!code word:options:2]
|
||||
const options = { foo: 'bar' }
|
||||
options.foo = 'baz'
|
||||
console.log(options.foo) // 这个不会被高亮显示
|
||||
```
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
```ts
|
||||
// [!code word:options:2]
|
||||
const options = { foo: 'bar' }
|
||||
options.foo = 'baz'
|
||||
console.log(options.foo) // 这个不会被高亮显示
|
||||
```
|
||||
|
||||
## 代码组
|
||||
|
||||
可以像这样对多个代码块进行分组：
|
||||
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
::: code-tabs
|
||||
@tab config.js
|
||||
```js
|
||||
/**
|
||||
* @type {import('vuepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
@tab config.ts
|
||||
```ts
|
||||
import { type UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
::: code-tabs
|
||||
@tab config.js
|
||||
```js
|
||||
/**
|
||||
* @type {import('vuepress').UserConfig}
|
||||
*/
|
||||
const config = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
@tab config.ts
|
||||
```ts
|
||||
import { type UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
:::
|
||||
|
||||
你还可以通过 `@tab:active`
|
||||
|
||||
## 导入代码块
|
||||
|
||||
**输入**
|
||||
|
||||
你可以使用下面的语法，从文件中导入代码块：
|
||||
|
||||
```md
|
||||
@[code](../snippet/snippet-1.js)
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
@[code](../snippet/snippet-1.js)
|
||||
|
||||
如果你只想导入这个文件的一部分：
|
||||
|
||||
```md
|
||||
<!-- 仅导入第 1 行至第 10 行 -->
|
||||
@[code{1-10}](../snippet/snippet-1.js)
|
||||
```
|
||||
|
||||
代码语言会根据文件扩展名进行推断，但我们建议你显式指定：
|
||||
|
||||
```md
|
||||
<!-- 指定代码语言 -->
|
||||
@[code js](../snippet/snippet-1.js)
|
||||
|
||||
<!-- 行高亮 -->
|
||||
@[code js{2,4-5}](../foo.js)
|
||||
```
|
||||
|
||||
## 数学方程
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
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} $$
|
||||
|
||||
**Maxwell's equations:**
|
||||
|
||||
| equation | description |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
|
||||
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
|
||||
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
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} $$
|
||||
|
||||
**Maxwell's equations:**
|
||||
|
||||
| equation | description |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
|
||||
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
|
||||
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
|
||||
|
||||
## 标记
|
||||
|
||||
使用 `== ==` 进行标记。请注意两边需要有空格。
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
vuepress-theme-plume 是一个 ==简洁美观== 的 主题
|
||||
|
||||
## 上下角标
|
||||
|
||||
- 使用 `^ ^` 进行上角标标注。
|
||||
- 使用 `~ ~` 进行下角标标注。
|
||||
|
||||
**输入**
|
||||
|
||||
```md
|
||||
- 19^th^
|
||||
- H~2~O
|
||||
```
|
||||
|
||||
**输出**
|
||||
|
||||
- 19^th^
|
||||
- H~2~O
|
||||
|
||||
## 自定义对齐
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
::: left
|
||||
左对齐的内容
|
||||
:::
|
||||
|
||||
::: center
|
||||
居中的内容
|
||||
:::
|
||||
|
||||
::: right
|
||||
右对齐的内容
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
::: left
|
||||
左对齐的内容
|
||||
:::
|
||||
|
||||
::: center
|
||||
居中的内容
|
||||
:::
|
||||
|
||||
::: right
|
||||
右对齐的内容
|
||||
:::
|
||||
|
||||
## 属性支持
|
||||
|
||||
你可以使用特殊标记为 Markdown 元素添加属性。
|
||||
|
||||
**为图片添加属性**
|
||||
|
||||
这将为图片添加 一个 名为 `full-width` 的 class 属性，以及一个 `width` 属性，值为 `100%`。
|
||||
```md
|
||||
{.full-width width="100%"}
|
||||
```
|
||||
|
||||
同时也支持其他属性:
|
||||
|
||||
```md
|
||||
一个包含文字的段落。 {#p .a .b align=center customize-attr="content with spaces"}
|
||||
```
|
||||
|
||||
这将被渲染为：
|
||||
|
||||
```html
|
||||
<p id="p" class="a b" align="center" customize-attr="content with spaces">
|
||||
一个包含文字的段落。
|
||||
</p>
|
||||
```
|
||||
|
||||
## 任务列表
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
- [ ] 任务 1
|
||||
- [x] 任务 2
|
||||
- [ ] 任务 3
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
- [ ] 任务 1
|
||||
- [x] 任务 2
|
||||
- [ ] 任务 3
|
||||
|
||||
## 脚注
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
人生自古谁无死，留取丹心照汗青[^脚注1]。
|
||||
|
||||
[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
人生自古谁无死，留取丹心照汗青[^脚注1]。
|
||||
|
||||
[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**
|
||||
329
docs/notes/theme/guide/markdown-试验性.md
Normal file
329
docs/notes/theme/guide/markdown-试验性.md
Normal file
@ -0,0 +1,329 @@
|
||||
---
|
||||
title: 试验性
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 11:46:49
|
||||
permalink: /guide/markdown/experiment/
|
||||
---
|
||||
|
||||
## twoslash <Badge type="tip" text="实验性" />
|
||||
|
||||
为代码块添加支持 [TypeScript TwoSlash](https://www.typescriptlang.org/dev/twoslash/) 支持。
|
||||
在代码块内提供内联类型提示。
|
||||
|
||||
该功能由 [shiki](https://shiki.style/) 和 [@shikijs/twoslash](https://shiki.style/packages/twoslash) 提供支持，并整合在 [@vuepress-plume/plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji) 中。
|
||||
|
||||
> [!important]
|
||||
> 该功能当前仅在以下版本中通过可用性验证，在后续的所有的版本中均不能保证其可用性，请谨慎使用：
|
||||
> - [x] `vuepress@2.0.0-rc.0`
|
||||
> - [x] `vuepress@2.0.0-rc.2`
|
||||
> - [x] `vuepress@2.0.0-rc.7`
|
||||
> - [x] `vuepress@2.0.0-rc.8`
|
||||
|
||||
### 概述
|
||||
|
||||
[twoslash](https://shikijs.github.io/twoslash/) 是一种 `javascript` 和 `typescript` 标记语言。
|
||||
你可以编写一个代码示例来描述整个 `javascript` 项目。
|
||||
|
||||
`twoslash` 将 **双斜杠** 作为 代码示例的预处理器。
|
||||
|
||||
`twoslash` 使用与文本编辑器相同的编译器 API 来提供类型驱动的悬停信息、准确的错误和类型标注。
|
||||
|
||||
### 功能预览
|
||||
|
||||
````md
|
||||
```ts twoslash
|
||||
import { getHighlighterCore } from 'shiki/core'
|
||||
|
||||
const highlighter = await getHighlighterCore({})
|
||||
// ^?
|
||||
|
||||
|
||||
// @log: Custom log message
|
||||
const a = 1
|
||||
// @error: Custom error message
|
||||
const b = 1
|
||||
// @warn: Custom warning message
|
||||
const c = 1
|
||||
// @annotate: Custom annotation message
|
||||
```
|
||||
````
|
||||
|
||||
将鼠标悬停在 `highlighter` 变量上查看效果：
|
||||
|
||||
```ts twoslash
|
||||
import { getHighlighterCore } from 'shiki/core'
|
||||
|
||||
const highlighter = await getHighlighterCore({})
|
||||
// ^?
|
||||
|
||||
|
||||
// @log: Custom log message
|
||||
const a = 1
|
||||
// @error: Custom error message
|
||||
const b = 1
|
||||
// @warn: Custom warning message
|
||||
const c = 1
|
||||
// @annotate: Custom annotation message
|
||||
```
|
||||
|
||||
::: tip
|
||||
`twoslash` 仅支持 `typescript` 和 `vue` 的 代码块。
|
||||
:::
|
||||
|
||||
### 开启功能
|
||||
|
||||
> [!warning]
|
||||
> 启用该功能需要对 `@vuepress/markdown` 包的源码进行修改，此操作具有一定的风险。
|
||||
>
|
||||
> 由于需要通过 `pnpm patch` 对 `@vuepress/markdown` 包进行补丁。因此，你需要使用
|
||||
> `pnpm` 作为你的项目的包管理器。
|
||||
|
||||
#### 步骤一
|
||||
|
||||
在项目根目录下，通过 `pnpm patch` 命令对 `@vuepress/markdown` 包进行补丁:
|
||||
|
||||
```sh
|
||||
$ pnpm patch @vuepress/markdown --edit-dir _tmp/vuepress__markdown
|
||||
```
|
||||
|
||||
该命令将会在你的项目根目录下生成一个 `_tmp/vuepress__markdown` 目录，该目录将会包含 `@vuepress/markdown` 包的源码。
|
||||
|
||||
#### 步骤二
|
||||
|
||||
修改 `@vuepress/markdown` 包的源码, 打开 `_tmp/vuepress__markdown/dist/index.js` 文件，
|
||||
找到 `270` 行，其内容如下：
|
||||
|
||||
```ts
|
||||
const code = options.highlight?.(token.content, language.name, "") || md.utils.escapeHtml(token.content);
|
||||
```
|
||||
|
||||
对其进行修改：
|
||||
|
||||
```ts
|
||||
const code = options.highlight?.(token.content, language.name, "") || md.utils.escapeHtml(token.content); // [!code --]
|
||||
const code = options.highlight?.(token.content, language.name, info || "") || md.utils.escapeHtml(token.content); // [!code ++]
|
||||
```
|
||||
|
||||
你可以直接复制上面的代码内容，然后粘贴到 `_tmp/vuepress__markdown/dist/index.js` 文件中替换 `248` 行。
|
||||
|
||||
#### 步骤三
|
||||
|
||||
将源码修改进行 补丁提交，执行下面的命令：
|
||||
|
||||
```sh
|
||||
$ pnpm patch-commit '_tmp/vuepress__markdown'
|
||||
```
|
||||
|
||||
此命令将会在你的项目根目录下生成一个 `patch` 目录，该目录将会包含 `@vuepress/markdown` 包的补丁，
|
||||
并提供 `patchedDependencies` 字段注册到你的项目中。
|
||||
|
||||
之后你就可以选择 删除 `_tmp/vuepress__markdown` 目录了。
|
||||
|
||||
|
||||
#### 步骤四
|
||||
|
||||
在 主题配置中，将 `twoslash` 选项打开。
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
shiki: { twoslash: true },
|
||||
},
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
### 使用
|
||||
|
||||
启用该功能后，你只需要在 原有的 markdown 代码块语法中，在代码语言声明后添加 `twoslash` 关键词即可：
|
||||
|
||||
````md
|
||||
```ts twoslash // [!code highlight]
|
||||
const a = 1
|
||||
```
|
||||
````
|
||||
|
||||
主题仅会对有 `twoslash` 关键词的代码进行编译处理。
|
||||
|
||||
### 语法参考
|
||||
|
||||
完整语法请参考 [ts-twoslasher](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher) 和 [shikijs-twoslash](https://shikijs.github.io/twoslash/)
|
||||
|
||||
`twoslash` 将 **双斜杠** 视为代码示例的预处理器。
|
||||
因此，所有的标记都是在 `//` 之后添加的。
|
||||
|
||||
常用的 `twoslash` 标记：
|
||||
|
||||
#### `^?` {id=twoslash-hover}
|
||||
|
||||
`^?` 用于突出显示类型，而无需用户进行悬停交互：
|
||||
|
||||
````md
|
||||
```ts twoslash
|
||||
const a = 1
|
||||
// ^?
|
||||
```
|
||||
````
|
||||
|
||||
```ts twoslash
|
||||
const a = 1
|
||||
// ^?
|
||||
//
|
||||
```
|
||||
|
||||
**需要注意的是，`^`必须正确指向需要突出显示类型的变量**
|
||||
|
||||
#### `^|` {id=twoslash-list}
|
||||
|
||||
`^|` 可以将展示代码编辑过程中的内容预测列表，如编辑器中的自动完成功能：
|
||||
|
||||
````md
|
||||
```ts twoslash
|
||||
// @noErrors
|
||||
// @esModuleInterop
|
||||
import express from "express"
|
||||
const app = express()
|
||||
app.get("/", function (req, res) {
|
||||
res.sen
|
||||
// ^|
|
||||
})
|
||||
app.listen(3000)
|
||||
```
|
||||
````
|
||||
|
||||
```ts twoslash
|
||||
// @noErrors
|
||||
// @esModuleInterop
|
||||
import express from "express"
|
||||
const app = express()
|
||||
app.get("/", function (req, res) {
|
||||
res.sen
|
||||
// ^|
|
||||
})
|
||||
app.listen(3000)
|
||||
//
|
||||
//
|
||||
//
|
||||
```
|
||||
|
||||
**需要注意的是，`^`必须正确指向需要进行内容预测的位置**
|
||||
|
||||
这些类型提示并不是凭空而来的，它依赖于你的项目中的 `node_modules`。比如 `express`。
|
||||
你需要在项目中 安装 `@types/express` 才能使用这些类型提示。
|
||||
|
||||
#### `@errors` {id=twoslash-errors}
|
||||
|
||||
`@errors: <error code>` 显示代码是如何出现错误的：
|
||||
|
||||
````md
|
||||
```ts twoslash
|
||||
// @errors: 2339
|
||||
const welcome = "Tudo bem gente?"
|
||||
const words = welcome.contains(" ")
|
||||
```
|
||||
````
|
||||
```ts twoslash
|
||||
// @errors: 2339
|
||||
const welcome = "Tudo bem gente?"
|
||||
const words = welcome.contains(" ")
|
||||
```
|
||||
|
||||
你需要在 `@errors` 后面，声明对应的 `typescript` 错误码。
|
||||
|
||||
::: note
|
||||
如果你不知道应该添加哪个 错误码，你可以先尝试直接编写好代码，然后等待编译失败，
|
||||
你应该能够在控制台中查看到相关的错误信息，然后在错误信息的 `description` 中找到对应的错误码。
|
||||
然后再将错误码添加到 `@errors` 中
|
||||
:::
|
||||
|
||||
#### `---cut---` {id=twoslash-cut}
|
||||
|
||||
`---cut---` 用于将代码分割, 被 `---cut---` 标记的，在其之前的代码将被忽略，不会显示：
|
||||
|
||||
````md
|
||||
```ts twoslash
|
||||
const hi = 'hi'
|
||||
// ---cut---
|
||||
const msg = `${hi} words` as const
|
||||
// ^?
|
||||
```
|
||||
````
|
||||
|
||||
```ts twoslash
|
||||
const hi = 'hi'
|
||||
// ---cut---
|
||||
const msg = `${hi} words` as const
|
||||
// ^?
|
||||
//
|
||||
```
|
||||
|
||||
#### 自定义输出信息 {id=twoslash-custom-message}
|
||||
|
||||
`@log`, `@error`, `@warn` 和 `@annotate` 用于向用户输出不同级别的自定义信息
|
||||
|
||||
````md
|
||||
```ts twoslash
|
||||
// @log: Custom log message
|
||||
const a = 1
|
||||
// @error: Custom error message
|
||||
const b = 1
|
||||
// @warn: Custom warning message
|
||||
const c = 1
|
||||
// @annotate: Custom annotation message
|
||||
```
|
||||
````
|
||||
|
||||
```ts twoslash
|
||||
// @log: Custom log message
|
||||
const a = 1
|
||||
// @error: Custom error message
|
||||
const b = 1
|
||||
// @warn: Custom warning message
|
||||
const c = 1
|
||||
// @annotate: Custom annotation message
|
||||
```
|
||||
|
||||
|
||||
#### import_files {id=twoslash-import-files}
|
||||
|
||||
`@filename: <filename>` 用于声明后续的代码将来自哪个文件，
|
||||
你可以在其他部分的代码中通过 `import` 导入该文件。
|
||||
|
||||
````md
|
||||
```ts twoslash
|
||||
// @filename: sum.ts
|
||||
export function sum(a: number, b: number): number {
|
||||
return a + b
|
||||
}
|
||||
|
||||
// @filename: ok.ts
|
||||
import { sum } from "./sum"
|
||||
sum(1, 2)
|
||||
|
||||
// @filename: error.ts
|
||||
// @errors: 2345
|
||||
import { sum } from "./sum"
|
||||
sum(4, "woops")
|
||||
```
|
||||
````
|
||||
|
||||
```ts twoslash
|
||||
// @filename: sum.ts
|
||||
export function sum(a: number, b: number): number {
|
||||
return a + b
|
||||
}
|
||||
|
||||
// @filename: ok.ts
|
||||
import { sum } from "./sum"
|
||||
sum(1, 2)
|
||||
|
||||
// @filename: error.ts
|
||||
// @errors: 2345
|
||||
import { sum } from "./sum"
|
||||
sum(4, "woops")
|
||||
```
|
||||
|
||||
::: warning
|
||||
在本节中未提及的其他标记，由于未正式验证其是否可用，请谨慎使用。
|
||||
:::
|
||||
539
docs/notes/theme/guide/markdown-进阶.md
Normal file
539
docs/notes/theme/guide/markdown-进阶.md
Normal file
@ -0,0 +1,539 @@
|
||||
---
|
||||
title: 高阶
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/05 16:27:59
|
||||
permalink: /guide/markdown/advance/
|
||||
---
|
||||
|
||||
## 代码演示
|
||||
|
||||
代码演示 默认不启用，你可以通过配置来启用它。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
export default defineUserConfig{
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
demo: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### 语法
|
||||
|
||||
```` md
|
||||
::: [类型]-demo 可选的标题文字
|
||||
|
||||
```html
|
||||
<!-- ↑ 使用可用的语言 -->
|
||||
<!-- 在代码块中放置你对应语言的代码，一个语言不能出现多个块 -->
|
||||
<!-- 你可以有多个代码块，并且 html, js, css 都是视情况可选的 -->
|
||||
```
|
||||
|
||||
```json
|
||||
// json block 作为插件配置存放处
|
||||
{
|
||||
// 放置你的配置 (可选的)
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
::: tip 提示
|
||||
JSON 块是可选的，可用的配置详见[配置](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/config.html)
|
||||
:::
|
||||
|
||||
插件支持三种类型
|
||||
|
||||
- normal(默认)
|
||||
- vue
|
||||
- react
|
||||
|
||||
### 可用的语言
|
||||
|
||||
你可以在演示块中使用不同语言。
|
||||
|
||||
当你设置一些不能在浏览器上直接运行的语言时，由于插件无法解析它们，因此网页演示将被禁用。插件只显示代码。同时提供一个 "在 CodePen 中打开" 按钮允许用户直接在 CodePen 打开并浏览代码。
|
||||
|
||||
可用的 HTML 语言:
|
||||
|
||||
- `"html"` (默认)
|
||||
- `"slim"`
|
||||
- `"haml"`
|
||||
- `"markdown"`
|
||||
|
||||
可用的 JS 语言:
|
||||
|
||||
- `"javascript"` (default)
|
||||
- `"coffeescript"`
|
||||
- `"babel"`
|
||||
- `"livescript"`
|
||||
- `"typescript"`
|
||||
|
||||
> 你也可以在代码块中使用 `js`, `ts`, `coffee` 和 `ls。`
|
||||
|
||||
可用的 CSS 语言:
|
||||
|
||||
- `"css"` (default)
|
||||
- `"less"`
|
||||
- `"scss"`
|
||||
- `"sass"`
|
||||
- `"stylus"`
|
||||
|
||||
### 不支持的语言
|
||||
|
||||
::: normal-demo 一个使用浏览器不支持解析语言 Demo
|
||||
|
||||
```md
|
||||
# 标题
|
||||
|
||||
十分强大
|
||||
```
|
||||
|
||||
```ts
|
||||
const message: string = "VuePress Theme Hope";
|
||||
|
||||
document.querySelector("h1").innerHTML = message;
|
||||
```
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-style: italic;
|
||||
|
||||
+ p {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
```` md
|
||||
::: normal-demo 一个使用浏览器不支持解析语言 Demo
|
||||
|
||||
```md
|
||||
# 标题
|
||||
|
||||
十分强大
|
||||
```
|
||||
|
||||
```ts
|
||||
const message: string = "VuePress Theme Hope";
|
||||
|
||||
document.querySelector("h1").innerHTML = message;
|
||||
```
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-style: italic;
|
||||
|
||||
+ p {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
::::
|
||||
|
||||
|
||||
### 普通代码演示
|
||||
格式：
|
||||
```` md
|
||||
::: normal-demo 可选的标题文字
|
||||
|
||||
```html
|
||||
<!-- html code -->
|
||||
```
|
||||
|
||||
```js
|
||||
// js code
|
||||
```
|
||||
|
||||
```css
|
||||
/* css code */
|
||||
```
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
{
|
||||
"jsLib": [
|
||||
...
|
||||
],
|
||||
"cssLib":[
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
::: warning 注意事项
|
||||
我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document，请访问` `window.document`。
|
||||
:::
|
||||
|
||||
#### 例子
|
||||
|
||||
::: normal-demo Demo 演示
|
||||
|
||||
```html
|
||||
<h1>Hello Word!</h1>
|
||||
<p><span id="very">非常</span>强大!</p>
|
||||
```
|
||||
|
||||
```js
|
||||
document.querySelector("#very").addEventListener("click", () => {
|
||||
alert("非常强大");
|
||||
});
|
||||
```
|
||||
|
||||
```css
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
```` md
|
||||
::: normal-demo Demo 演示
|
||||
|
||||
```html
|
||||
<h1>Hello Word!</h1>
|
||||
<p><span id="very">非常</span>强大!</p>
|
||||
```
|
||||
|
||||
```js
|
||||
document.querySelector("#very").addEventListener("click", () => {
|
||||
alert("非常强大");
|
||||
});
|
||||
```
|
||||
|
||||
```css
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
::::
|
||||
|
||||
### Vue 代码演示
|
||||
|
||||
#### 格式
|
||||
```` md
|
||||
::: vue-demo 可选的标题文字
|
||||
|
||||
```vue
|
||||
<!-- ↑ 你也可以使用 html -->
|
||||
<template>
|
||||
<!-- vue 模板 -->
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
// vue 组件
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/* css 代码 */
|
||||
</style>
|
||||
```
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
- 你只能使用 `Vue3`。
|
||||
- 必须将组件通过 `export default` 默认导出
|
||||
- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
|
||||
:::
|
||||
|
||||
#### 演示
|
||||
|
||||
::: vue-demo 一个 Vue Composition 演示
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="box">
|
||||
<code>Hello Word</code> is
|
||||
<span @click="handler">{{ message }}</span
|
||||
>!
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const { ref } = Vue;
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const message = ref("powerful");
|
||||
|
||||
const handler = () => {
|
||||
message.value = "very " + message.value;
|
||||
};
|
||||
|
||||
return {
|
||||
message,
|
||||
handler,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.box span {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
```` md
|
||||
::: vue-demo 一个 Vue Composition 演示
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="box">
|
||||
<code>Hello Word</code> is
|
||||
<span @click="handler">{{ message }}</span
|
||||
>!
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const { ref } = Vue;
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const message = ref("powerful");
|
||||
|
||||
const handler = () => {
|
||||
message.value = "very " + message.value;
|
||||
};
|
||||
|
||||
return {
|
||||
message,
|
||||
handler,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.box span {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
::::
|
||||
|
||||
### React 代码演示
|
||||
|
||||
#### 格式
|
||||
|
||||
```` md
|
||||
::: react-demo 可选的标题文字
|
||||
|
||||
```js
|
||||
// 放置脚本，并通过 `export default` 导出你的 react 组件
|
||||
```
|
||||
|
||||
```css
|
||||
/* 你的 css 内容 */
|
||||
```
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
::: warning 注意事项
|
||||
- 使用 React 的时候，为了解析 JSX 必须引入 Babel，此过程由插件自动完成。
|
||||
- 必须将组件通过 `export default` 默认导出
|
||||
- 我们使用 `"ShadowDOM"` 进行样式隔离，并已经将 `document` 替换为了 `shadowRoot` 对象。如果需要访问页面的 `document`，请访问 `window.document`。
|
||||
:::
|
||||
|
||||
#### 演示
|
||||
|
||||
::: react-demo 一个函数式 React Demo
|
||||
|
||||
```js
|
||||
const { useState } = React;
|
||||
|
||||
export default () => {
|
||||
const [message, setMessage] = useState(" 强大");
|
||||
|
||||
const handler = () => {
|
||||
setMessage(`十分${message}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="box">
|
||||
<code>Hello Word !</code>
|
||||
<span id="powerful" onClick={handler}>
|
||||
{message}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
.box #powerful {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::: details 代码
|
||||
```` md
|
||||
::: react-demo 一个函数式 React Demo
|
||||
|
||||
```js
|
||||
const { useState } = React;
|
||||
|
||||
export default () => {
|
||||
const [message, setMessage] = useState(" 强大");
|
||||
|
||||
const handler = () => {
|
||||
setMessage(`十分${message}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="box">
|
||||
<code>Hello Word !</code>
|
||||
<span id="powerful" onClick={handler}>
|
||||
{message}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
.box #powerful {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
::::
|
||||
|
||||
## 选项组
|
||||
|
||||
让你的 Markdown 文件支持供选项卡。
|
||||
|
||||
你需要将选项卡包装在 `tabs` 容器中。
|
||||
|
||||
你可以在 `tabs` 容器中添加一个 id 后缀，该后缀将用作选项卡 id。
|
||||
所有具有相同 id 的选项卡将共享相同的切换事件。
|
||||
|
||||
```md
|
||||
::: tabs#fruit
|
||||
|
||||
<!-- 这里，fruit 将用作 id，它是可选的 -->
|
||||
|
||||
<!-- 选项卡内容 -->
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
在这个容器内，你应该使用 `@tab` 标记来标记和分隔选项卡内容。
|
||||
|
||||
在 `@tab` 标记后，你可以添加文本 `:active` 默认激活选项卡，之后的文本将被解析为选项卡标题。
|
||||
|
||||
```md
|
||||
::: tabs
|
||||
|
||||
@tab 标题 1
|
||||
|
||||
<!-- tab 1 内容 -->
|
||||
|
||||
@tab 标题 2
|
||||
|
||||
<!-- tab 2 内容 -->
|
||||
|
||||
@tab:active 标题 3
|
||||
|
||||
<!-- tab 3 将会被默认激活 -->
|
||||
|
||||
<!-- tab 3 内容 -->
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
默认情况下，标题将用作选项卡的值，但你可以使用 id 后缀覆盖它。
|
||||
|
||||
```md
|
||||
::: tabs
|
||||
|
||||
@tab 标题 1
|
||||
|
||||
<!-- 此处，选项卡 1 的标题“标题 1”将用作值。 -->
|
||||
|
||||
<!-- tab 1 内容 -->
|
||||
|
||||
@tab 标题 2#值 2
|
||||
|
||||
<!-- 这里，tab 2 的标题将是 “标题 2”，但它会使用 “值 2” 作为选项卡的值-->
|
||||
|
||||
<!-- tab 2 内容 -->
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
你可以在每个选项卡中使用 Vue 语法和组件，并且你可以访问 value 和 isActive，
|
||||
表示选项卡的绑定值和选项卡是否处于激活状态。
|
||||
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
::: tabs
|
||||
@tab npm
|
||||
|
||||
npm 应该与 Node.js 被一同安装。
|
||||
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
corepack enable
|
||||
corepack use pnpm@8
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
**输出**
|
||||
|
||||
::: tabs
|
||||
@tab npm
|
||||
|
||||
npm 应该与 Node.js 被一同安装。
|
||||
|
||||
@tab pnpm
|
||||
|
||||
```sh
|
||||
corepack enable
|
||||
corepack use pnpm@8
|
||||
```
|
||||
|
||||
:::
|
||||
81
docs/notes/theme/guide/seo.md
Normal file
81
docs/notes/theme/guide/seo.md
Normal file
@ -0,0 +1,81 @@
|
||||
---
|
||||
title: SEO
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/02 14:46:25
|
||||
permalink: /guide/seo/
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
主题提供了开箱即用的配置，为 站点 启用 SEO 优化功能。
|
||||
要启用它，需要进行以下配置：
|
||||
|
||||
```js
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
hostname: 'http://your_site_url',
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## 指南
|
||||
|
||||
主题会通过向网站 `<head>` 注入标签，让你的网站完全支持 [开放内容协议 OGP](https://ogp.me/)
|
||||
和 [JSON-LD 1.1](https://www.w3.org/TR/json-ld-api/)，以全面增强站点的搜索引擎优化性。
|
||||
|
||||
默认情况下，插件会读取站点配置、主题配置与页面的 frontmatter 来尽可能自动生成。
|
||||
诸如站点名称，页面标题，页面类型，写作日期，最后更新日期，文章标签均会自动生成。
|
||||
|
||||
## 默认的 OGP 生成逻辑
|
||||
|
||||
| 属性名称 | 值 |
|
||||
| :----------------------: | :------------------------------------------------------------------------------------------------: |
|
||||
| `og:url` | `options.hostname` + `path` |
|
||||
| `og:site_name` | `siteConfig.title` |
|
||||
| `og:title` | `page.title` |
|
||||
| `og:description` | `page.frontmatter.description` \|\| 自动生成 (当插件选项中的 `autoDescription` 为 `true` 时) |
|
||||
| `og:type` | `"article"` |
|
||||
| `og:image` | `options.hostname` + `page.frontmatter.image` \|\| 页面的第一张图片\|\| 插件选项的 `fallbackImage` |
|
||||
| `og:updated_time` | `page.git.updatedTime` |
|
||||
| `og:locale` | `page.lang` |
|
||||
| `og:locale:alternate` | `siteData.locales` 包含的其他语言 |
|
||||
| `twitter:card` | `"summary_large_image"` (仅在找到图片时) |
|
||||
| `twitter:image:alt` | `page.title` (仅在找到图片时) |
|
||||
| `article:author` | `page.frontmatter.author` \|\| `options.author` |
|
||||
| `article:tag` | `page.frontmatter.tags` \|\| `page.frontmatter.tag` |
|
||||
| `article:published_time` | `page.frontmatter.date` \|\| `page.git.createdTime` |
|
||||
| `article:modified_time` | `page.git.updatedTime` |
|
||||
|
||||
## 默认的 JSON-LD 生成逻辑
|
||||
|
||||
| 属性名 | 值 |
|
||||
| :-------------: | :------------------------------------------------------------: |
|
||||
| `@context` | `"https://schema.org"` |
|
||||
| `@type` | `"NewsArticle"` |
|
||||
| `headline` | `page.title` |
|
||||
| `image` | 页面中的图片\|\| `options.hostname` + `page.frontmatter.image` |
|
||||
| `datePublished` | `page.frontmatter.date` \|\| `page.git.createdTime` |
|
||||
| `dateModified` | `page.git.updatedTime` |
|
||||
| `author` | `page.frontmatter.author` \|\| `options.author` |
|
||||
|
||||
## SEO 介绍
|
||||
|
||||
搜索引擎优化 (**S**earch **E**ngine **O**ptimization)，是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。 所谓“针对搜索引擎作最优化的处理”，是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的资料比对，然后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。搜索引擎优化就是通过搜索引擎的规则进行优化，为用户打造更好的用户体验，最终的目的就是做好用户体验。
|
||||
|
||||
## 相关文档
|
||||
|
||||
- [开放内容协议 OGP](https://ogp.me/) (**O**pen **G**raph **Pr**otocal)
|
||||
|
||||
本插件完美支持该协议，会自动生成符合该协议的 `<meta>` 标签。
|
||||
|
||||
- [JSON-LD 1.1](https://www.w3.org/TR/json-ld-api/)
|
||||
|
||||
本插件会为文章类页面生成 NewsArticle 类标签。
|
||||
|
||||
- [RDFa 1.1](https://www.w3.org/TR/rdfa-primer/)
|
||||
|
||||
RDFa 主要标记 HTML 结构。
|
||||
|
||||
- [Schema.Org](https://schema.org/)
|
||||
|
||||
结构标记的 Schema 定义站点
|
||||
19
docs/notes/theme/guide/sitemap.md
Normal file
19
docs/notes/theme/guide/sitemap.md
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
title: 生成 sitemap
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/02 16:47:00
|
||||
permalink: /guide/sitemap/
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
主题提供了开箱即用的配置，为 站点生成 `sitemap.xml` 文件。
|
||||
要启用它，需要进行以下配置：
|
||||
|
||||
```js
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
hostname: 'http://your_site_url',
|
||||
})
|
||||
})
|
||||
```
|
||||
42
docs/notes/theme/guide/介绍.md
Normal file
42
docs/notes/theme/guide/介绍.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 主题介绍
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/04 11:06:24
|
||||
permalink: /guide/intro/
|
||||
---
|
||||
|
||||
## 介绍
|
||||
|
||||
vuepress-theme-plume 是一个基于 VuePress 的主题。适用于 博客、文档 和 知识笔记 。
|
||||
|
||||
VuePress 是一个 [静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) 。
|
||||
专为构建快速、以内容为中心的站点而设计。
|
||||
简而言之，VuePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
|
||||
|
||||
::: tip
|
||||
本主题 基于 [vuepress-next](https://github.com/vuepress/vuepress-next), 目前处于 RC 阶段。
|
||||
|
||||
功能和API 趋于稳定，但在未来的更新中仍有小概率出现破坏更改。
|
||||
:::
|
||||
|
||||
## 优势
|
||||
|
||||
与 vuepress 默认主题相比：
|
||||
- 大幅度优化了界面、交互，更具美观度，更好的用户体验。
|
||||
- 同时，还添加了大量的丰富实用的功能，如 代码分组、提示容器、任务列表、数学公式、代码演示、
|
||||
内容搜索、文章评论、加密 等。
|
||||
- 大幅度简化了配置，更易于使用，同时还保留了丰富灵活的配置项，满足个性化的需求。
|
||||
|
||||
`plume` 主题尽可能的内置你可能需要的功能，以及搭建站点所需要的一般性配置，您无需关注这些细节。
|
||||
目的是，让您更专注于 内容的创作，更好的表达你的想法，享受 Markdown 增强语法带来的便利。
|
||||
|
||||
## 功能
|
||||
|
||||
- 💻 响应式布局，适配不同的屏幕尺寸
|
||||
- 📖 博客 & 文档
|
||||
- 🔗 自动生成文章永久链接
|
||||
- ⚖ 支持多语言
|
||||
- 🔑 支持 全站加密、部分加密
|
||||
- 👀 支持 搜索、文章评论
|
||||
- 👨💻 支持 浅色/深色 主题 （包括代码高亮）
|
||||
- 📠 markdown 增强，支持 代码块分组、提示容器、任务列表、数学公式、代码演示 等
|
||||
42
docs/notes/theme/guide/代码复制.md
Normal file
42
docs/notes/theme/guide/代码复制.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 代码复制
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/04 09:59:29
|
||||
permalink: /guide/features/copy-code/
|
||||
---
|
||||
|
||||
## 使用
|
||||
|
||||
主题默认启用了代码复制功能。支持 一键复制 在 文章中 展示的代码。
|
||||
|
||||
默认情况下， 主题会为每一个 代码块 添加一个复制按钮。该按钮仅在桌面端显示。
|
||||
|
||||
当鼠标悬停在 代码块 上时，在右上角会出现一个复制按钮。
|
||||
|
||||
## 效果
|
||||
|
||||
### 代码块
|
||||
|
||||
```js
|
||||
const a = 1
|
||||
|
||||
export default a
|
||||
```
|
||||
|
||||
### 代码组
|
||||
|
||||
|
||||
::: code-tabs
|
||||
@tab foo.js
|
||||
```js
|
||||
const a = 1
|
||||
|
||||
export default a
|
||||
```
|
||||
@tab bar.js
|
||||
```js
|
||||
const b = 1
|
||||
|
||||
export default b
|
||||
```
|
||||
:::
|
||||
232
docs/notes/theme/guide/内容搜索.md
Normal file
232
docs/notes/theme/guide/内容搜索.md
Normal file
@ -0,0 +1,232 @@
|
||||
---
|
||||
title: 内容搜索
|
||||
author: Plume Theme
|
||||
createTime: 2024/03/04 09:58:39
|
||||
permalink: /guide/features/content-search/
|
||||
---
|
||||
|
||||
主题提供了两种方式支持 内容搜索。
|
||||
|
||||
- 本地内容搜索
|
||||
- Algolia DocSearch
|
||||
|
||||
注意，请勿同时配置使用两种方式，同时配置时，只有 本地内容搜索 生效。
|
||||
|
||||
## 本地内容搜索
|
||||
|
||||
本地内容搜索由 [@vuepress-plume/plugin-search](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-search) 插件提供支持。
|
||||
|
||||
该插件使用 [minisearch](https://github.com/lucaong/minisearch) 进行内容搜索。
|
||||
|
||||
### 启用
|
||||
|
||||
主题默认 启用 本地内容搜索 功能。您也可以对其进行自定义配置。
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
search: {
|
||||
// more options
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
该插件会根据你的页面，在本地生成搜索索引，然后在用户访问站点时加载搜索索引文件。
|
||||
换句话说，这是一个轻量级的内置搜索能力，不会进行任何外部请求。
|
||||
|
||||
然而，当你的站点包含大量页面时，搜索索引文件也会变得非常大，它可能会拖慢你的页面加载速度。在这种情况下，我们建议你使用更成熟的解决方案 - [Algolia DocSearch](#algolia-docsearch) 。
|
||||
|
||||
|
||||
## Algolia DocSearch
|
||||
|
||||
使用 [Algolia DocSearch](https://docsearch.algolia.com/) 提供支持的网站内容搜索插件
|
||||
|
||||
### 启用
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
docsearch: {
|
||||
// more options
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### 获取搜索索引
|
||||
|
||||
你需要 [提交你的网站 URL](https://docsearch.algolia.com/apply/) 来加入 DocSearch 项目。当你的索引成功创建后， DocSearch 团队会将 [apiKey](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#apikey) 和 [indexName](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#indexname) 发送到你的邮箱。接下来，你就可以配置该插件，在 VuePress 中启用 DocSearch 了。
|
||||
|
||||
或者，你也可以 [运行你自己的爬虫](https://docsearch.algolia.com/docs/run-your-own/) 来创建索引，然后使用你自己的 [appId](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#appId), [apiKey](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#apikey) 和 [indexName](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#indexname) 来配置该插件。
|
||||
|
||||
以下是本主题使用的 爬虫配置示例, 你可以前往 [Algolia Crawler](https://crawler.algolia.com/admin/crawlers/)
|
||||
根据你的需求进行修改:
|
||||
|
||||
```ts
|
||||
new Crawler({
|
||||
appId: 'YOUR_APP_ID', // [!code highlight]
|
||||
apiKey: 'YOUR_API_KEY', // [!code highlight]
|
||||
rateLimit: 8,
|
||||
startUrls: [
|
||||
// 这是 Algolia 开始抓取网站的初始地址
|
||||
// 如果你的网站被分为数个独立部分，你可能需要在此设置多个入口链接
|
||||
'https://YOUR_WEBSITE_URL/', // [!code highlight]
|
||||
],
|
||||
renderJavaScript: false,
|
||||
sitemaps: [
|
||||
// 主题默认会生成 sitemap，这里需要替换为你的域名链接
|
||||
'https://YOUR_WEBSITE_URL/sitemap.xml', // [!code highlight]
|
||||
],
|
||||
ignoreCanonicalTo: true,
|
||||
discoveryPatterns: [
|
||||
// 这是 Algolia 抓取 URL 的范围
|
||||
'https://YOUR_WEBSITE_URL/**', // [!code highlight]
|
||||
],
|
||||
// 爬虫执行的计划时间，可根据文档更新频率设置
|
||||
schedule: 'at 02:00 every 1 day',
|
||||
actions: [
|
||||
// 你可以拥有多个 action，特别是你在一个域名下部署多个文档时
|
||||
{
|
||||
// 使用适当的名称为索引命名
|
||||
indexName: 'YOUR_INDEX_NAME', // [!code highlight]
|
||||
// 索引生效的路径
|
||||
pathsToMatch: ['https://YOUR_WEBSITE_URL/**'], // [!code highlight]
|
||||
recordExtractor: ({ helpers }) => {
|
||||
// vuepress-theme-plume 的选项
|
||||
return helpers.docsearch({
|
||||
recordProps: { // [!code highlight]
|
||||
lvl1: '.plume-content h1', // [!code highlight]
|
||||
content: '.plume-content p, .plume-content li', // [!code highlight]
|
||||
lvl0: { // [!code highlight]
|
||||
selectors: [ // [!code highlight]
|
||||
'.sidebar-item.is-active p', // [!code highlight]
|
||||
'.content-container .page-title', // [!code highlight]
|
||||
], // [!code highlight]
|
||||
defaultValue: 'Documentation', // [!code highlight]
|
||||
}, // [!code highlight]
|
||||
lvl2: '.plume-content h2', // [!code highlight]
|
||||
lvl3: '.plume-content h3', // [!code highlight]
|
||||
lvl4: '.plume-content h4', // [!code highlight]
|
||||
lvl5: '.plume-content h5', // [!code highlight]
|
||||
}, // [!code highlight]
|
||||
indexHeadings: true, // [!code highlight]
|
||||
aggregateContent: true, // [!code highlight]
|
||||
recordVersion: 'v3', // [!code highlight]
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
initialIndexSettings: {
|
||||
// 控制索引如何被初始化，这仅当索引尚未生成时有效
|
||||
// 你可能需要在修改后手动删除并重新生成新的索引
|
||||
YOUR_INDEX_NAME: { // [!code highlight]
|
||||
attributesForFaceting: ['type', 'lang'], // [!code highlight]
|
||||
attributesToRetrieve: [
|
||||
'hierarchy',
|
||||
'content',
|
||||
'anchor',
|
||||
'url',
|
||||
'url_without_anchor',
|
||||
'type',
|
||||
],
|
||||
attributesToHighlight: ['hierarchy', 'hierarchy_camel', 'content'],
|
||||
attributesToSnippet: ['content:10'],
|
||||
camelCaseAttributes: ['hierarchy', 'hierarchy_radio', 'content'],
|
||||
searchableAttributes: [
|
||||
'unordered(hierarchy_radio_camel.lvl0)',
|
||||
'unordered(hierarchy_radio.lvl0)',
|
||||
'unordered(hierarchy_radio_camel.lvl1)',
|
||||
'unordered(hierarchy_radio.lvl1)',
|
||||
'unordered(hierarchy_radio_camel.lvl2)',
|
||||
'unordered(hierarchy_radio.lvl2)',
|
||||
'unordered(hierarchy_radio_camel.lvl3)',
|
||||
'unordered(hierarchy_radio.lvl3)',
|
||||
'unordered(hierarchy_radio_camel.lvl4)',
|
||||
'unordered(hierarchy_radio.lvl4)',
|
||||
'unordered(hierarchy_radio_camel.lvl5)',
|
||||
'unordered(hierarchy_radio.lvl5)',
|
||||
'unordered(hierarchy_radio_camel.lvl6)',
|
||||
'unordered(hierarchy_radio.lvl6)',
|
||||
'unordered(hierarchy_camel.lvl0)',
|
||||
'unordered(hierarchy.lvl0)',
|
||||
'unordered(hierarchy_camel.lvl1)',
|
||||
'unordered(hierarchy.lvl1)',
|
||||
'unordered(hierarchy_camel.lvl2)',
|
||||
'unordered(hierarchy.lvl2)',
|
||||
'unordered(hierarchy_camel.lvl3)',
|
||||
'unordered(hierarchy.lvl3)',
|
||||
'unordered(hierarchy_camel.lvl4)',
|
||||
'unordered(hierarchy.lvl4)',
|
||||
'unordered(hierarchy_camel.lvl5)',
|
||||
'unordered(hierarchy.lvl5)',
|
||||
'unordered(hierarchy_camel.lvl6)',
|
||||
'unordered(hierarchy.lvl6)',
|
||||
'content',
|
||||
],
|
||||
distinct: true,
|
||||
attributeForDistinct: 'url',
|
||||
customRanking: [
|
||||
'desc(weight.pageRank)',
|
||||
'desc(weight.level)',
|
||||
'asc(weight.position)',
|
||||
],
|
||||
ranking: [
|
||||
'words',
|
||||
'filters',
|
||||
'typo',
|
||||
'attribute',
|
||||
'proximity',
|
||||
'exact',
|
||||
'custom',
|
||||
],
|
||||
highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
|
||||
highlightPostTag: '</span>',
|
||||
minWordSizefor1Typo: 3,
|
||||
minWordSizefor2Typos: 7,
|
||||
allowTyposOnNumericTokens: false,
|
||||
minProximity: 1,
|
||||
ignorePlurals: true,
|
||||
advancedSyntax: true,
|
||||
attributeCriteriaComputedByMinProximity: true,
|
||||
removeWordsIfNoResults: 'allOptional',
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
`recordProps` 部分的配置选项用于本主题进行索引的爬取配置。
|
||||
|
||||
### 配置项
|
||||
|
||||
完整配置请查看 [文档](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#%E9%85%8D%E7%BD%AE%E9%A1%B9)
|
||||
|
||||
### 配置示例
|
||||
|
||||
以下是本主题使用的配置：
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
docsearch: {
|
||||
appId: 'YOUR_APP_ID', // [!code highlight]
|
||||
apiKey: 'YOUR_API_KEY', // [!code highlight]
|
||||
indexName: 'YOUR_INDEX_NAME', // [!code highlight]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
141
docs/notes/theme/guide/加密.md
Normal file
141
docs/notes/theme/guide/加密.md
Normal file
@ -0,0 +1,141 @@
|
||||
---
|
||||
title: 加密
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/04 15:58:48
|
||||
permalink: /guide/features/encryption/
|
||||
---
|
||||
|
||||
## 加密
|
||||
|
||||
在本主题中，支持 **全站加密** 和 **部分加密** 等多种灵活的加密方式。
|
||||
|
||||
::: warning 提示
|
||||
由于 `vuepress` 是静态站点，其自身限制的原因，**加密** 仅仅只是 看起来 看不到内容，
|
||||
并且在 编译时，不再将 内容 预渲染到 `html` 中，但实际上 还是能够从 站点源文件 中获取到内容。
|
||||
因此，不建议将 **加密** 功能 认为是 安全可靠的。
|
||||
|
||||
请尽量避免将 **加密功能** 应用于需要 **严格保密** 的内容 中。
|
||||
:::
|
||||
|
||||
**已解锁的文章，仅在当前会话中可见。**
|
||||
|
||||
## 启用加密功能
|
||||
|
||||
在 主题配置中，添加 `encrypt` 选项。
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { themePlume } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: themePlume({
|
||||
encrypt: {
|
||||
// more options...
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## 全站加密
|
||||
|
||||
有些情况下，你可能 需要对 全站进行加密。
|
||||
因此，你可以通过 `encrypt.global` 选项配置全站加密。
|
||||
然后，通过配置 `encrypt.admin` 选项，设置一个或多个密码。
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: themePlume({
|
||||
encrypt: {
|
||||
global: true,
|
||||
admin: ['123456'],
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## 部分加密
|
||||
|
||||
大多数情况下，你可能只需需要 加密 某一篇文章、某一个目录 等。
|
||||
因此，你可以通过 `encrypt.rules` 选项配置部分加密。
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: themePlume({
|
||||
encrypt: {
|
||||
rules: {
|
||||
// 可以是 md 文件的相对路径，对该文件加密
|
||||
'前端/基础.md': '123456',
|
||||
// 可以是 文件夹的路径，对该目录下所有文章加密
|
||||
'/notes/vuepress-theme-plume/': '123456',
|
||||
// 可以是 访问地址的请求路径，对该访问路径下所有文章加密
|
||||
'/vuepress-theme-plume/': '123456',
|
||||
// 可以是 具体的某个页面的请求路径，对该页面加密
|
||||
'/article/f8dnci3/': '123456',
|
||||
// 如果是 `^` 开头，则匹配该正则表达式的页面也会加密
|
||||
'^/(a|b)/': '123456',
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
`encrypt.rules` 的 **键** 将作为 匹配规则，**值** 将作为 该规则对应的密码，可以设置 一个或多个密码。
|
||||
|
||||
:::tip 说明
|
||||
- 密码 必须是 普通的字符串。
|
||||
- 如果是 加密的是 整个目录，解锁时也是解锁整个目录，而不是解锁该目录下的某个文章。
|
||||
- `encrypt.admin` 也可用于解锁 **部分加密** 的页面。
|
||||
- 使用 `encrypt.admin` 解锁后，被认为是管理员访问，其它未解锁页面也默认解锁。
|
||||
:::
|
||||
|
||||
## 相关配置
|
||||
|
||||
以下配置支持在多语言配置中使用。
|
||||
|
||||
### encryptGlobalText
|
||||
|
||||
- **类型**： `string`
|
||||
- **默认值**： `'Only password can access this site'`
|
||||
- **说明**：
|
||||
|
||||
全站加密时，提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式，你可能会需要这个配置。
|
||||
|
||||
### encryptPageText
|
||||
|
||||
- **类型**： `string`
|
||||
- **默认值**： `'Only password can access this page'`
|
||||
- **说明**：
|
||||
|
||||
部分加密时，提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式，你可能会需要这个配置。
|
||||
|
||||
### encryptButtonText
|
||||
|
||||
- **类型**： `string`
|
||||
- **默认值**： `'Confirm'`
|
||||
- **说明**： 确认按钮的文本
|
||||
|
||||
### encryptPlaceholder
|
||||
|
||||
- **类型**： `string`
|
||||
- **默认值**： `'Enter password'`
|
||||
- **说明**： 密码输入框的占位符
|
||||
|
||||
### 示例
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { themePlume } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: themePlume({
|
||||
locales: {
|
||||
'/': {
|
||||
encryptButtonText: 'Confirm',
|
||||
encryptPlaceholder: 'Enter password',
|
||||
encryptGlobalText: 'Only password can access this site',
|
||||
encryptPageText: 'Only password can access this page',
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
90
docs/notes/theme/guide/博客.md
Normal file
90
docs/notes/theme/guide/博客.md
Normal file
@ -0,0 +1,90 @@
|
||||
---
|
||||
title: 博客
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/04 19:16:40
|
||||
permalink: /guide/blog/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题默认启用 博客功能，通常您无需进行额外的配置。
|
||||
|
||||
主题默认会将 `{sourceDir}` 目录下的，除了一些特定的目录（如 `notes` 目录将作为笔记所在目录），
|
||||
所有 md 文件作为博客文章。
|
||||
|
||||
同时，主题会生成一个 链接地址为 `/blog/` 的 博客文章列表页。
|
||||
展示所有的博客文章，以及 博主的相关信息。
|
||||
|
||||
|
||||
## 国际化支持
|
||||
|
||||
如果启用了 国际化，那么博客列表页将会 根据 不同的语言，展示对应语言目录下的博客列表。
|
||||
即 每个语言下的 文章列表 都是保持独立的。
|
||||
|
||||
## 博主信息
|
||||
|
||||
主题允许你展示博主的基本信息。
|
||||
|
||||
::: center
|
||||
{style="max-width:250px;"}
|
||||
:::
|
||||
|
||||
### 配置
|
||||
|
||||
你可以通过 `avatar` 属性来设置博主头像等相关信息。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
avatar: {
|
||||
url: '/blogger.png',
|
||||
name: 'Your name',
|
||||
description: 'Your description',
|
||||
circle: true, // 是否为圆形头像
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
## 文章元数据
|
||||
|
||||
你可以配置展示博客文章的元数据，如标题、作者、日期、标签等。这些数据通过 `frontmatter` 配置。
|
||||
|
||||
```md
|
||||
---
|
||||
title: 文章标题
|
||||
createTime: 2024/01/01 00:00:00
|
||||
author: your name
|
||||
tags:
|
||||
- tag1
|
||||
- tag2
|
||||
---
|
||||
```
|
||||
|
||||
其中，`title` / `createTime` / `author` 会在新建 md 文件时由主题自动填充，你可以随意修改它们。
|
||||
|
||||
以下是在 博客文章中可用的 `frontmatter` 属性。
|
||||
|
||||
| 属性 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | ------------------- | -------------------------- | -------------------- |
|
||||
| title | `string` | 默认自动填入文件名 | 文章标题 |
|
||||
| createTime | `string` | 当前时间 | 文章创建时间 |
|
||||
| author | `string` | 默认自动填入 `avatar.name` | 文章作者 |
|
||||
| tags | `string[]` | `[]` | 文章标签 |
|
||||
| sticky | `boolean \| number` | false | 是否置顶, 如果为数字，则数字越大，置顶越靠前 |
|
||||
| article | `boolean` | true | 是否在列表页中显示 |
|
||||
|
||||
## 文章摘要
|
||||
|
||||
如果你想要为文章添加摘要，你可以使用 `<!-- more -->` 注释来标记它。任何在此注释之前的内容会被视为摘要。
|
||||
|
||||
## 标签页和归档页
|
||||
|
||||
主题除了自动生成 **博客文章列表页** 以外，还会自动生成 **标签页** 和 **归档页**。
|
||||
|
||||
标签页 可以根据 标签 筛选并展示 博客文章。
|
||||
|
||||
归档页根据文章的创建时间进行归档。
|
||||
44
docs/notes/theme/guide/友情链接页.md
Normal file
44
docs/notes/theme/guide/友情链接页.md
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
title: 友情链接页
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/03 22:44:28
|
||||
permalink: /guide/friend-links/
|
||||
---
|
||||
|
||||
## 友情链接
|
||||
|
||||
友情链接页 不会自动生成，但你可以根据需要，创建它。
|
||||
|
||||
在你的 `{sourceDir}/` 目录下，创建 任意 `*.md` 文件，比如 `friends.md` 文件。
|
||||
然后在这个文件中，通过 `frontmatter` 配置它。
|
||||
|
||||
::: code-tabs
|
||||
@tab friends.md
|
||||
```md
|
||||
---
|
||||
friends: true
|
||||
title: 友情链接
|
||||
description: 友情链接描述文本
|
||||
permalink: /friends/
|
||||
list:
|
||||
-
|
||||
name: pengzhanbo
|
||||
link: https://github.com/pengzhanbo
|
||||
avatar: https://github.com/pengzhanbo.png
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
-
|
||||
name: pengzhanbo
|
||||
link: https://github.com/pengzhanbo
|
||||
avatar: https://github.com/pengzhanbo.png
|
||||
desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
---
|
||||
```
|
||||
:::
|
||||
|
||||
主题会根据 配置信息 生成友情链接页。 如果未配置 `permalink` ，默认为 `/friends/`。
|
||||
|
||||
你需要自行将 友情链接页 的入口链接 配置到 `navbar` 的合适的位置中。
|
||||
|
||||
### 配置
|
||||
|
||||
查看 [文档](/config/frontmatter/friends/) 更多配置信息。
|
||||
75
docs/notes/theme/guide/国际化.md
Normal file
75
docs/notes/theme/guide/国际化.md
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
title: 国际化
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/05 10:01:26
|
||||
permalink: /guide/international/
|
||||
---
|
||||
|
||||
## 目录
|
||||
|
||||
要使用内置的 i18n (国际化) 功能，需要创建类似于下面的目录结构：
|
||||
|
||||
```
|
||||
docs/
|
||||
├─ es/
|
||||
│ ├─ foo.md
|
||||
├─ fr/
|
||||
│ ├─ foo.md
|
||||
├─ foo.md
|
||||
```
|
||||
|
||||
## vuepress 配置
|
||||
|
||||
在 `.vuepress/config.js` 中配置：
|
||||
|
||||
```js
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
// 声明默认的语言
|
||||
lang: 'en-US',
|
||||
// 多语言下支持的各种语言 locales
|
||||
locales: {
|
||||
// 配置 不同 path 下的语言
|
||||
'/': { lang: 'en-US', title: 'Blog' }, // default
|
||||
'/zh/': { lang: 'zh-CN', title: '博客' }, // 简体中文
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 主题配置
|
||||
|
||||
在本主题中，同样使用 `locales` 配置项进行多语言配置。
|
||||
|
||||
`locales` 支持 所有主题配置项。
|
||||
|
||||
```js
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
lang: 'en-US',
|
||||
locales: {
|
||||
'/': { lang: 'en-US', title: 'Blog' }, // default
|
||||
'/zh/': { lang: 'zh-CN', title: '博客' }, // 简体中文
|
||||
},
|
||||
theme: plumeTheme({
|
||||
locales: {
|
||||
'/': {
|
||||
selectLanguageName: 'English',
|
||||
navbar: [
|
||||
{ text: 'Home', link: '/' },
|
||||
{ text: 'Blog', link: '/blog/' },
|
||||
]
|
||||
},
|
||||
'/zh/': {
|
||||
selectLanguageName: "简体中文",
|
||||
navbar: [
|
||||
{ text: '首页', link: '/zh/' },
|
||||
{ text: '博客', link: '/zh/blog/' },
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
177
docs/notes/theme/guide/安装与使用.md
Normal file
177
docs/notes/theme/guide/安装与使用.md
Normal file
@ -0,0 +1,177 @@
|
||||
---
|
||||
title: 安装/使用
|
||||
author: Plume Theme
|
||||
createTime: 2024/03/04 09:50:07
|
||||
permalink: /guide/quick-start/
|
||||
---
|
||||
|
||||
## 依赖环境
|
||||
|
||||
- [Node.js v18.16.0+](https://nodejs.org/)
|
||||
- [pnpm 8+](https://pnpm.io/zh/) 或 [Yarn 2+](https://yarnpkg.com/)
|
||||
|
||||
::: info 提示
|
||||
- 使用 [pnpm](https://pnpm.io/zh/) 时，你需要安装 `vue` 作为 peer-dependencies 。
|
||||
- 使用 [Yarn 2+](https://yarnpkg.com/) 时，你需要在 `.yarnrc.yml` 文件中设置 `nodeLinker: 'node-modules'` 。
|
||||
:::
|
||||
|
||||
## 安装
|
||||
|
||||
使用本主题，你需要首先新建一个项目，并安装`vuepress@next`以及本主题
|
||||
|
||||
### 步骤 1
|
||||
|
||||
**创建一个新文件夹，并进入目录**
|
||||
|
||||
``` sh
|
||||
mkdir my-blog
|
||||
cd my-blog
|
||||
```
|
||||
|
||||
### 步骤 2
|
||||
|
||||
**初始化项目**
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
``` sh
|
||||
git init
|
||||
pnpm init
|
||||
```
|
||||
@tab yarn
|
||||
``` sh
|
||||
git init
|
||||
yarn init
|
||||
```
|
||||
@tab npm
|
||||
``` sh
|
||||
git init
|
||||
npm init
|
||||
```
|
||||
:::
|
||||
|
||||
### 步骤 3
|
||||
|
||||
**安装相关依赖**
|
||||
|
||||
安装 `vuepress@next` 和 `vuepress-theme-plume` 作为本地依赖。
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
```sh
|
||||
# 安装 vuepress
|
||||
pnpm add -D vuepress@next vue
|
||||
# 安装 主题和打包工具
|
||||
pnpm add -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
@tab yarn
|
||||
``` sh
|
||||
# 安装 vuepress
|
||||
yarn add -D vuepress@next
|
||||
# 安装 主题和打包工具
|
||||
yarn add -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
|
||||
@tab npm
|
||||
``` sh
|
||||
# 安装 vuepress
|
||||
npm i -D vuepress@next
|
||||
# 安装 主题和打包工具
|
||||
npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
:::
|
||||
|
||||
### 步骤 4
|
||||
|
||||
**在 `package.json` 中添加 `script`**
|
||||
|
||||
::: code-tabs
|
||||
@tab package.json
|
||||
``` json
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "vuepress dev docs",
|
||||
"build": "vuepress build docs"
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
`vuepress` 默认将文档源码放在 `docs` 目录下。
|
||||
|
||||
### 步骤 5
|
||||
|
||||
**将默认的临时目录和缓存目录添加到`.gitignore` 文件中**
|
||||
|
||||
::: code-tabs
|
||||
@tab .gitignore
|
||||
``` txt
|
||||
node_modules
|
||||
.temp
|
||||
.cache
|
||||
```
|
||||
@tab sh
|
||||
``` sh
|
||||
echo 'node_modules' >> .gitignore
|
||||
echo '.temp' >> .gitignore
|
||||
echo '.cache' >> .gitignore
|
||||
```
|
||||
:::
|
||||
|
||||
### 步骤 6
|
||||
|
||||
**在 `.vuepress/config.{js,ts}` 中配置主题**
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.js
|
||||
``` ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { viteBundler } from '@vuepress/bundler-vite'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
// 请不要忘记设置默认语言
|
||||
lang: 'zh-CN',
|
||||
theme: plumeTheme({
|
||||
// more...
|
||||
}),
|
||||
bundler: viteBundler(),
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
### 步骤 7
|
||||
|
||||
**在 `docs` 目录下新建 `README.md` 文件**
|
||||
|
||||
声明首页配置。
|
||||
::: code-tabs
|
||||
@tab README.md
|
||||
``` md
|
||||
---
|
||||
home: true
|
||||
---
|
||||
```
|
||||
:::
|
||||
|
||||
### 步骤 8
|
||||
|
||||
**在本地服务器启动你的文档站点**
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
@tab yarn
|
||||
``` sh
|
||||
yarn dev
|
||||
```
|
||||
|
||||
@tab npm
|
||||
``` sh
|
||||
npm run dev
|
||||
```
|
||||
:::
|
||||
|
||||
Vuepress 会在 [http://localhost:8080](http://localhost:8080) 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
|
||||
67
docs/notes/theme/guide/知识笔记.md
Normal file
67
docs/notes/theme/guide/知识笔记.md
Normal file
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: 文档/知识笔记
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/04 15:45:34
|
||||
permalink: /guide/document/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
在本主题满足了 Blog的基本功能后，期望能够 以 note 或者 book 的形式聚合文章，形式上类似于 vuepress 默认主题。
|
||||
同时也减少配置的复杂度。
|
||||
|
||||
它能够让你以更加友好的方式，组织管理你的文档，或者 知识笔记。
|
||||
|
||||
## 目录
|
||||
|
||||
文档/知识笔记 默认存放在 `{sourceDir}/notes` 目录下。
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
{sourceDir}/
|
||||
├─ notes/
|
||||
├─ typescript/
|
||||
│ ├─ foo.md
|
||||
├─ rust/
|
||||
│ ├─ foo.md
|
||||
```
|
||||
|
||||
其中，`typescript` 和 `rust` 为目录名，各自独立保存与之相关的 markdown 文件。
|
||||
|
||||
## 配置
|
||||
|
||||
```js
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { themePlume } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: themePlume({
|
||||
notes: {
|
||||
dir: '/notes/', // 声明所有笔记的目录
|
||||
link: '/', // 声明所有笔记默认的链接前缀， 默认为 '/'
|
||||
notes: [
|
||||
{
|
||||
dir: 'typescript', // 声明笔记的目录，相对于 `notes.dir`
|
||||
link: '/typescript/', // 声明笔记的链接前缀
|
||||
sidebar: [ // 配置侧边栏
|
||||
{
|
||||
text: '简介',
|
||||
items: ['foo'] // 简化写法，主题会自动补全为 `foo.md`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
dir: 'rust',
|
||||
link: '/rust/',
|
||||
sidebar: [
|
||||
{ text: '简介', items: ['foo'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
主题会根据配置，为对应目录中的 md 文件，生成 永久链接，以及侧边栏。
|
||||
63
docs/notes/theme/guide/组件.md
Normal file
63
docs/notes/theme/guide/组件.md
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
title: 组件
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/06 09:42:42
|
||||
permalink: /guide/features/component/
|
||||
---
|
||||
|
||||
## `<Badge />` <Badge type="tip" text="badge" />
|
||||
|
||||
### Props
|
||||
|
||||
- `type`
|
||||
- 类型： `'info' | 'tip' | 'warning' | 'danger'`
|
||||
- 默认值：`'tip'`
|
||||
- `text`
|
||||
- 类型：`string`
|
||||
- 默认值：`''`
|
||||
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
- VuePress - <Badge type="info" text="v2" />
|
||||
- VuePress - <Badge type="tip" text="v2" />
|
||||
- VuePress - <Badge type="warning" text="v2" />
|
||||
- VuePress - <Badge type="danger" text="v2" />
|
||||
```
|
||||
|
||||
**输出：**
|
||||
|
||||
- VuePress - <Badge type="info" text="v2" />
|
||||
- VuePress - <Badge type="tip" text="v2" />
|
||||
- VuePress - <Badge type="warning" text="v2" />
|
||||
- VuePress - <Badge type="danger" text="v2" />
|
||||
|
||||
## `<Iconify />`
|
||||
|
||||
支持 iconify 所有图标，支持通过 icon name 加载图标，可在 [iconify search](https://icon-sets.iconify.design/) 搜索图标使用。
|
||||
|
||||
### Props
|
||||
|
||||
- `name`
|
||||
- 类型：`string`
|
||||
- 默认值：`''`
|
||||
- `color`
|
||||
- 类型：`string`
|
||||
- 默认值：`'currentColor'`
|
||||
- `size`
|
||||
- 类型：`string`
|
||||
- 默认值：`'1em'`
|
||||
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
|
||||
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
|
||||
- twitter - <Iconify name="skill-icons:twitter" size="2em" />
|
||||
```
|
||||
|
||||
**输出：**
|
||||
|
||||
- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
|
||||
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
|
||||
- twitter - <Iconify name="skill-icons:twitter" size="2em" />
|
||||
51
docs/notes/theme/guide/编写文章.md
Normal file
51
docs/notes/theme/guide/编写文章.md
Normal file
@ -0,0 +1,51 @@
|
||||
---
|
||||
title: 编写文章
|
||||
author: Plume Theme
|
||||
createTime: 2024/03/04 10:06:06
|
||||
permalink: /guide/write/
|
||||
---
|
||||
|
||||
|
||||
::: info 提示
|
||||
以下内容中，以 `sourceDir` 表示 项目中用于保存 `Markdown` 文件的目录。
|
||||
|
||||
如 `package.json`的`scripts` 中配置的 `vuepress dev src`，则表示 `sourceDir` 为 `src` 目录
|
||||
:::
|
||||
|
||||
## 约定
|
||||
|
||||
使用本主题编写文章是一件很轻松的事情，你可以在 `sourceDir`目录中按照你的个人命名喜好新建任意名字的`Markdown`文件，
|
||||
主题将会自动帮你生成一个文章永久链接，并保存在文章的配置中，以便随时修改。
|
||||
|
||||
对于 `sourceDir` 中的文件夹命名，主题有一套简单的约定。
|
||||
|
||||
- 文件夹的名称将作为 `category` 即 __分类__。
|
||||
- 允许多级目录，子级目录将作为父目录对应的分类的子项。
|
||||
- 如果目录名称 在 [主题配置 notes](/vuepress-theme-plume/theme-config/#notes) 中声明用于 notes 文章管理，则默认不作为 分类目录。
|
||||
|
||||
### 文件夹命名约定
|
||||
|
||||
由于文件夹名称将作为分类名称，且不在主题配置中进行排序配置，对于有排序需要的场景，使用以下规则进行命名
|
||||
``` ts
|
||||
const dir = /\d+\.[^]+/
|
||||
// 即 数字 + . + 分类名称
|
||||
// 如： 1.前端
|
||||
```
|
||||
数字将作为 __排序__ 的依据。 如果不带数字，则以默认的规则进行排序。
|
||||
|
||||
__example:__
|
||||
``` txt
|
||||
.{sourceDir}
|
||||
- 1.前端
|
||||
- 1.html
|
||||
- 2.css
|
||||
- 3.javascript
|
||||
- 2.后端
|
||||
- 运维
|
||||
```
|
||||
|
||||
|
||||
## 文章写作
|
||||
|
||||
你可以使用 `markdown` 语法开始在 `sourceDir` 下新建 `Markdown` 文件，编写你自己的文章了，
|
||||
关于 markdown 扩展的功能支持，请查看 [这个文档](/guide/markdown/)。
|
||||
69
docs/notes/theme/guide/自定义样式.md
Normal file
69
docs/notes/theme/guide/自定义样式.md
Normal file
@ -0,0 +1,69 @@
|
||||
---
|
||||
title: 自定义样式
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/04 20:18:52
|
||||
permalink: /guide/custom-style/
|
||||
---
|
||||
|
||||
|
||||
## 主题定制
|
||||
|
||||
支持自定义样式。
|
||||
|
||||
该功能由 [@vuepress/plugin-palette](https://v2.vuepress.vuejs.org/zh/reference/plugin/palette.html) 提供支持。
|
||||
|
||||
主题使用 [SASS](https://sass-lang.com/) 作为 CSS 预处理器。
|
||||
|
||||
用户可以通过 [style 文件](#style-文件) 来添加额外的样式。
|
||||
|
||||
## Style 文件
|
||||
|
||||
Style 文件的路径是 `.vuepress/styles/index.scss` 。
|
||||
|
||||
你可以在这里添加额外的样式，或者覆盖默认样式：
|
||||
|
||||
``` scss
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
```
|
||||
|
||||
你也可以利用它来覆盖默认主题的预定义 CSS 变量。
|
||||
|
||||
以下是部分预定义变量， 完整列表请参考 [vars.scss](https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/theme/src/client/styles/vars.scss)
|
||||
```scss
|
||||
:root {
|
||||
/** 主题颜色 */
|
||||
--vp-c-brand-1: #5086a1;
|
||||
--vp-c-brand-2: #6aa1b7;
|
||||
--vp-c-brand-3: #8cccd5;
|
||||
--vp-c-brand-soft: rgba(131, 208, 218, 0.314);
|
||||
|
||||
/** 背景颜色 */
|
||||
--vp-c-bg: #ffffff;
|
||||
--vp-c-bg-alt: #f6f6f7;
|
||||
--vp-c-bg-elv: #ffffff;
|
||||
--vp-c-bg-soft: #f6f6f7;
|
||||
|
||||
/** 文本颜色 */
|
||||
--vp-c-text-1: rgba(60, 60, 67);
|
||||
--vp-c-text-2: rgba(60, 60, 67, 0.78);
|
||||
--vp-c-text-3: rgba(60, 60, 67, 0.56);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-brand-1: #8cccd5;
|
||||
--vp-c-brand-2: #6aa1b7;
|
||||
--vp-c-brand-3: #5086a1;
|
||||
--vp-c-brand-soft: rgba(131, 208, 218, 0.314);
|
||||
|
||||
--vp-c-bg: #1b1b1f;
|
||||
--vp-c-bg-alt: #161618;
|
||||
--vp-c-bg-elv: #202127;
|
||||
--vp-c-bg-soft: #202127;
|
||||
|
||||
--vp-c-text-1: rgba(255, 255, 245, 0.86);
|
||||
--vp-c-text-2: rgba(235, 235, 245, 0.6);
|
||||
--vp-c-text-3: rgba(235, 235, 245, 0.38);
|
||||
}
|
||||
```
|
||||
517
docs/notes/theme/guide/自定义首页.md
Normal file
517
docs/notes/theme/guide/自定义首页.md
Normal file
@ -0,0 +1,517 @@
|
||||
---
|
||||
title: 自定义首页
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/02 10:44:03
|
||||
permalink: /guide/custom-home/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题提供了十分灵活的方式来自定义首页。你可以根据你的需求来定制你的首页。
|
||||
|
||||
主题通过 `frontmatter` 来定义你的首页。在 `sourceDir` 的 `README.md` 文件中，编写 `frontmatter`。
|
||||
|
||||
::: code-tabs
|
||||
@tab README.md
|
||||
```md
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
- type: custom
|
||||
---
|
||||
```
|
||||
:::
|
||||
|
||||
主题 遵循 流式布局的方式来渲染首页，将 首页 在 垂直方向上划分为一个个独立的区域，每个区域应用不同的组件。
|
||||
|
||||
通过 `config` 属性，以 数组 的形式，可以定义多个区域。通过 `type` 字段，可以定义该区域的类型。
|
||||
主题内置了 `banner`， `hero`，`text-image`，`image-text`，`features`，`profile`，`custom` 等不同的类型，
|
||||
你可以随意组合使用它们，组装成你的自定义首页。
|
||||
如果它们均不满足你的需求，你也可以 编写自定义组件，来自定义你的首页。
|
||||
|
||||
## 配置
|
||||
|
||||
### home
|
||||
|
||||
- 类型： `boolean`
|
||||
|
||||
声明该页面是否为首页
|
||||
|
||||
### config
|
||||
|
||||
- 类型： `PlumeHomeConfig[]`
|
||||
- 默认值： `[]`
|
||||
|
||||
根据数组的顺序定义页面的区域内容。
|
||||
|
||||
```ts
|
||||
interface PlumeHomeConfigBase {
|
||||
/**
|
||||
* 该区域的类型，根据类型应用不同的组件
|
||||
*/
|
||||
type: 'banner' | 'hero' | 'text-image' | 'image-text' | 'features' | 'profile' | 'custom' | string
|
||||
/**
|
||||
* 该区域是否占满全屏
|
||||
*/
|
||||
full?: boolean
|
||||
/**
|
||||
* 该区域的背景图片
|
||||
* 你可以定义在 浅色/暗色 模式下的背景图片
|
||||
*/
|
||||
backgroundImage?: string | { light: string, dark: string }
|
||||
/**
|
||||
* 该区域的背景 定位方式
|
||||
*/
|
||||
backgroundAttachment?: 'fixed' | 'local'
|
||||
}
|
||||
```
|
||||
|
||||
## 区域类型
|
||||
|
||||
### banner
|
||||
|
||||
- 类型： `PlumeThemeHomeBanner`
|
||||
|
||||
大屏 banner， 适用于放置在 首页的 首位。
|
||||
|
||||
```ts
|
||||
interface PlumeThemeHomeBanner extends PlumeHomeConfigBase {
|
||||
type: 'banner'
|
||||
/**
|
||||
* 背景大图
|
||||
*/
|
||||
banner?: string
|
||||
/**
|
||||
* 取值范围： 0 - 1。配置首页 banner 大图的遮罩蒙版不透明度。
|
||||
* 支持配置 浅色/深色 模式下 的不同值。当值为 0 时，不显示遮罩蒙版。
|
||||
* 这在首页首屏大图比较亮时，可以适当使图片看起来暗一些。
|
||||
*/
|
||||
bannerMask?: number | { light?: number, dark?: number }
|
||||
|
||||
hero?: {
|
||||
name: string
|
||||
tagline?: string
|
||||
text?: string
|
||||
actions?: {
|
||||
theme?: 'brand' | 'alt'
|
||||
text: string
|
||||
link?: string
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**示例：**
|
||||
|
||||
```md
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
type: banner
|
||||
banner: https://file.mo7.cc/api/public/bz
|
||||
bannerMask:
|
||||
light: 0.1
|
||||
dark: 0.3
|
||||
hero:
|
||||
name: 鹏展博
|
||||
tagline: Front End Developer
|
||||
text: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
actions:
|
||||
-
|
||||
text: 我的博客
|
||||
link: /blog/
|
||||
theme: brand
|
||||
-
|
||||
text: Github
|
||||
link: https://github.com/pengzhanbo
|
||||
theme: alt
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-banner.png" />
|
||||
:::
|
||||
|
||||
### hero
|
||||
|
||||
- 类型： `PlumeThemeHomeHero`
|
||||
|
||||
适用于 文档 类型站点，放置于 首位。
|
||||
|
||||
```ts
|
||||
interface PlumeThemeHomeHero extends PlumeHomeConfigBase {
|
||||
type: 'hero'
|
||||
hero: {
|
||||
name: string
|
||||
tagline?: string
|
||||
text?: string
|
||||
actions?: {
|
||||
theme?: 'brand' | 'alt'
|
||||
text: string
|
||||
link?: string
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 背景图片，"filter-blur" 为预设效果
|
||||
*/
|
||||
background?: 'filter-blur' | string
|
||||
/**
|
||||
* 如果是非预设背景，可以设置背景图片的滤镜效果
|
||||
*/
|
||||
filter?: string
|
||||
}
|
||||
```
|
||||
|
||||
**示例**
|
||||
|
||||
```md
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
type: hero
|
||||
full: true
|
||||
background: filter-blur
|
||||
hero:
|
||||
name: Theme Plume
|
||||
tagline: Vuepress Next Theme
|
||||
text: 一个简约的，功能丰富的 vuepress 文档&博客 主题
|
||||
actions:
|
||||
-
|
||||
theme: brand
|
||||
text: 快速开始 →
|
||||
link: /
|
||||
-
|
||||
theme: alt
|
||||
text: Github
|
||||
link: https://github.com/pengzhanbo/vuepress-theme-plume
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-hero.png" />
|
||||
:::
|
||||
|
||||
### features
|
||||
|
||||
- 类型： `PlumeThemeHomeFeatures`
|
||||
|
||||
适用于展示 特性、功能、等。
|
||||
|
||||
```ts
|
||||
interface PlumeThemeHomeFeatures extends PlumeHomeConfigBase {
|
||||
type: 'features'
|
||||
title?: string
|
||||
description?: string
|
||||
features: PlumeThemeHomeFeature[]
|
||||
}
|
||||
|
||||
interface PlumeThemeHomeFeature {
|
||||
icon?: FeatureIcon
|
||||
title: string
|
||||
details?: string
|
||||
link?: string
|
||||
linkText?: string
|
||||
rel?: string
|
||||
target?: string
|
||||
}
|
||||
|
||||
type FeatureIcon = string | {
|
||||
src: string
|
||||
alt?: string
|
||||
width?: string
|
||||
height?: string
|
||||
wrap?: boolean
|
||||
} | {
|
||||
light: string
|
||||
dark: string
|
||||
alt?: string
|
||||
width?: string
|
||||
height?: string
|
||||
wrap?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
**示例**
|
||||
|
||||
```md
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
type: features
|
||||
features:
|
||||
-
|
||||
title: 响应式布局
|
||||
icon: 💻
|
||||
details: 适配移动设备，PC，平板
|
||||
-
|
||||
title: 博客 & 文档
|
||||
icon: 📖
|
||||
details: 无论是想写博客，或想写产品文档，或者两者兼顾
|
||||
-
|
||||
title: 开箱即用
|
||||
icon: 🚀
|
||||
details: 支持零配置即可使用，也支持丰富的自定义配置
|
||||
-
|
||||
title: 多语言
|
||||
icon: ⚖
|
||||
details: 内置了 中文/英文支持，还可以自定义添加更多的语言支持
|
||||
-
|
||||
title: 双色主题
|
||||
icon: 👨💻
|
||||
details: 支持 浅色/深色 主题，包括代码高亮
|
||||
-
|
||||
title: 插件
|
||||
icon: 📦
|
||||
details: 内置丰富的插件，一站式解决网站一般需求
|
||||
-
|
||||
title: 搜索、评论
|
||||
icon: 🔍
|
||||
details: 支持多种评论系统，支持本地搜索、Algolia搜索
|
||||
-
|
||||
title: 加密
|
||||
icon: 🔒
|
||||
details: 支持全站加密、部分加密（加密目录、加密文章）
|
||||
-
|
||||
title: Markdown 增强
|
||||
icon: 📝
|
||||
details: 支持 Markdown 语法，支持 代码块分组、提示容器、任务列表、数学公式、代码演示等
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-features.png" />
|
||||
:::
|
||||
|
||||
|
||||
### text-image | image-text
|
||||
|
||||
- 类型： `PlumeThemeHomeTextImage`
|
||||
|
||||
左右布局的 文本 和 图片。
|
||||
|
||||
```ts
|
||||
interface PlumeThemeHomeTextImage extends PlumeHomeConfigBase {
|
||||
type: 'text-image' | 'image-text'
|
||||
image: PlumeThemeImage
|
||||
width?: number | string
|
||||
title?: string
|
||||
description?: string
|
||||
list: (string | { title?: string, description?: string })[]
|
||||
}
|
||||
|
||||
type PlumeThemeImage =
|
||||
| string
|
||||
| { src: string, alt?: string }
|
||||
| { dark: string, light: string, alt?: string }
|
||||
```
|
||||
|
||||
**示例**
|
||||
|
||||
```md
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
type: image-text
|
||||
title: 功能
|
||||
description: 内置丰富的功能，满足网站一般需求。
|
||||
image: /images/plume-1.svg
|
||||
list:
|
||||
-
|
||||
title: 文章信息
|
||||
description: 为文章添加标签、分类、字数统计、阅读时间、写作日期等信息。
|
||||
-
|
||||
title: 评论
|
||||
description: 支持 4 种评论系统，你可以自由选择符合你的需求的评论系统。
|
||||
-
|
||||
title: 搜索
|
||||
description: 支持基于 minisearch 的本地搜索， 支持Algolia搜索。
|
||||
-
|
||||
title: 加密
|
||||
description: 支持全站加密、部分加密（加密目录、加密文章）。
|
||||
-
|
||||
title: 代码复制
|
||||
description: 一键复制代码块中的内容
|
||||
-
|
||||
type: text-image
|
||||
title: 博客
|
||||
description: 主题默认支持博客，生成你的个人博客。
|
||||
image: /images/plume-2.svg
|
||||
list:
|
||||
-
|
||||
title: 文章列表
|
||||
description: 通过文章写作日期，自动排序并生成博客文章列表页。
|
||||
-
|
||||
title: 博主信息
|
||||
description: 自定义名称、座右铭、头像，社交媒体链接。
|
||||
-
|
||||
title: 标签、归档
|
||||
description: 自动生成标签页，为文章根据年份进行归档。
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-image-text.png" />
|
||||
:::
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-text-image.png" />
|
||||
:::
|
||||
|
||||
### profile
|
||||
|
||||
- 类型： `PlumeThemeHomeProfile`
|
||||
|
||||
展示个人信息。
|
||||
|
||||
```ts
|
||||
interface PlumeThemeHomeProfile extends PlumeHomeConfigBase {
|
||||
type: 'profile'
|
||||
name?: string
|
||||
description?: string
|
||||
avatar?: PlumeThemeImage
|
||||
circle?: boolean
|
||||
}
|
||||
|
||||
type PlumeThemeImage =
|
||||
| string
|
||||
| { src: string, alt?: string }
|
||||
| { dark: string, light: string, alt?: string }
|
||||
```
|
||||
|
||||
**示例**
|
||||
|
||||
```md
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
type: profile
|
||||
name: pengzhanbo
|
||||
description: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
|
||||
avatar: /images/avatar.png
|
||||
---
|
||||
```
|
||||
|
||||
**效果**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-profile.png" />
|
||||
:::
|
||||
|
||||
### custom
|
||||
|
||||
- 类型： `PlumeThemeHomeCustom`
|
||||
|
||||
自定义内容，在 `README.md` 的 文件中，编写的 markdown 内容，将会被插入到 对应的区域。
|
||||
|
||||
```ts
|
||||
interface PlumeThemeHomeCustom extends PlumeHomeConfigBase {
|
||||
type: 'custom'
|
||||
}
|
||||
```
|
||||
|
||||
**示例**
|
||||
|
||||
````md
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
type: custom
|
||||
---
|
||||
|
||||
### 安装
|
||||
|
||||
:::code-tabs
|
||||
@tab pnpm
|
||||
```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
|
||||
```
|
||||
:::
|
||||
````
|
||||
|
||||
**效果**
|
||||
|
||||
:::demo-wrapper img no-padding
|
||||
<img src="/images/custom-content.png" />
|
||||
:::
|
||||
|
||||
## 自定义区域类型
|
||||
|
||||
当主题内置的区域类型不足以满足你的需求时，你可以自定义区域类型。
|
||||
|
||||
每一个自定义区域类型，本质上都是一个组件。
|
||||
|
||||
一个 简单的实例如下：
|
||||
|
||||
::: code-tabs
|
||||
@tab your-component.vue
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { HomeBox, type PlumeHomeConfigBase } from 'vuepress-theme-plume/client'
|
||||
|
||||
const props = defineProps<PlumeHomeConfigBase & {
|
||||
// 组件 props, frontmatter 中的属性将会传递给组件
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HomeBox
|
||||
:type="type"
|
||||
:background-image="backgroundImage"
|
||||
:background-attachment="backgroundAttachment"
|
||||
:full="full"
|
||||
>
|
||||
<!-- 自定义你的内容 -->
|
||||
<div>...</div>
|
||||
</HomeBox>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
在 `.vuepress/client.ts` 在 `enhance` 钩子中添加 组件
|
||||
::: code-tabs
|
||||
@tab .vuepress/client.ts
|
||||
```ts
|
||||
import { defineClientConfig } from 'vuepress/client'
|
||||
import YourComponent from 'your-component.vue'
|
||||
|
||||
export default defineClientConfig({
|
||||
enhance({ app }) {
|
||||
app.component('your-component', YourComponent)
|
||||
},
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
然后，你就可以在 `README.md` 中使用 `your-component` 了。
|
||||
|
||||
```md
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
type: 'your-component'
|
||||
# ...
|
||||
---
|
||||
```
|
||||
41
docs/notes/theme/guide/评论.md
Normal file
41
docs/notes/theme/guide/评论.md
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: 评论
|
||||
author: pengzhanbo
|
||||
createTime: 2024/03/04 11:58:59
|
||||
permalink: /guide/features/comments/
|
||||
---
|
||||
|
||||
|
||||
## 概述
|
||||
|
||||
文章评论由 [vuepress-plugin-comment2](https://vuepress-theme-hope.github.io/v2/comment2/zh) 提供支持。
|
||||
|
||||
在本主题中，通过以下字段进行配置：
|
||||
|
||||
```ts
|
||||
// .vuepress/config.ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
comment: {
|
||||
// comment options
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### 服务提供商
|
||||
|
||||
[vuepress-plugin-comment2](https://vuepress-theme-hope.github.io/v2/comment2/zh) 支持
|
||||
`"Artalk“ | "Giscus" | "Twikoo" | "Waline"` 等多种不同的评论服务提供商。
|
||||
|
||||
你可以根据自己的需求进行配置。
|
||||
|
||||
- `Giscus` 是一个基于 GitHub Discussion 的评论系统，启用简便。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/giscus.html)
|
||||
- `Waline` 是一个 需要后端的评论系统，安全性较高。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/waline.html)
|
||||
- `Twikoo` 一个简洁、安全、免费的静态网站评论系统，基于 腾讯云开发。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/twikoo.html)
|
||||
- `Artalk` 是一款简洁的自托管评论系统，你可以在服务器上轻松部署并置入前端页面中。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/artalk.html)
|
||||
1
docs/notes/theme/snippet/snippet-1.js
Normal file
1
docs/notes/theme/snippet/snippet-1.js
Normal file
@ -0,0 +1 @@
|
||||
export const a = 1
|
||||
9
netlify.toml
Normal file
9
netlify.toml
Normal file
@ -0,0 +1,9 @@
|
||||
# prevent Netlify npm install
|
||||
|
||||
[build]
|
||||
publish = "docs/.vuepress/dist"
|
||||
command = "pnpm install && pnpm build:package && pnpm docs:build"
|
||||
|
||||
[build.environment]
|
||||
NODE_VERSION = "18"
|
||||
NPM_FLAGS = "--version"
|
||||
8
preview/plume.svg
Normal file
8
preview/plume.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 72 72">
|
||||
<path fill="#5086a1" d="M42.334 49.147a29.945 29.945 0 0 1-19.338-8.151c-8.014-7.365-8.378-18.076-8.533-22.649l-.022-.627a2.904 2.904 0 0 1 3.457-2.951c17.005 3.355 21.695 16.324 22.056 17.4a49.543 49.543 0 0 1 3.574 15.922a1 1 0 0 1-.967 1.052c-.029.001-.106.004-.227.004" />
|
||||
<path fill="#8cccd5" d="M44.436 55.316c-11.646 0-17.376-6.974-17.653-7.354a1 1 0 0 1 .262-1.424a11.103 11.103 0 0 1 12.774-1.574c-1.465-9.078 1.877-13.568 2.031-13.77a.998.998 0 0 1 .75-.39a.97.97 0 0 1 .78.325c8.944 9.771 8.793 16.532 7.908 19.691c-.034.14-1.062 4.092-4.772 4.406c-.711.062-1.405.09-2.08.09" />
|
||||
<g fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
|
||||
<path d="M55.184 57.69S34.96 45.877 23.097 24.206m22.131 30.096c-11.93.46-17.628-6.88-17.628-6.88" />
|
||||
<path d="M40.528 42.483c-.56-7.195 2.116-10.679 2.116-10.679c8.834 9.654 8.406 16.162 7.681 18.747m-13.311-3.129a30.15 30.15 0 0 1-13.341-7.162c-8.072-7.419-8.067-18.241-8.232-22.577a1.903 1.903 0 0 1 2.264-1.932C34.694 19.103 39.02 32.528 39.02 32.528" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
preview/preview-blog.jpeg
Normal file
BIN
preview/preview-blog.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
preview/preview-home.jpeg
Normal file
BIN
preview/preview-home.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
preview/preview-note.jpeg
Normal file
BIN
preview/preview-note.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
preview/preview-post.jpeg
Normal file
BIN
preview/preview-post.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1017 KiB |
Loading…
x
Reference in New Issue
Block a user