docs: lint fix
This commit is contained in:
parent
ed48677397
commit
ca097146cf
@ -3,7 +3,7 @@ title: 加密文章,密码:123456
|
||||
author: pengzhanbo
|
||||
createTime: 2023/12/25 01:28:29
|
||||
permalink: /article/enx7c9s/
|
||||
tags:
|
||||
tags:
|
||||
- 预览
|
||||
- 标签
|
||||
---
|
||||
|
||||
@ -3,7 +3,7 @@ title: 示例文章
|
||||
author: pengzhanbo
|
||||
createTime: 2023/12/25 01:28:29
|
||||
permalink: /article/xld23tu1/
|
||||
tags:
|
||||
tags:
|
||||
- 预览
|
||||
- 标签
|
||||
---
|
||||
|
||||
@ -4,7 +4,7 @@ author: pengzhanbo
|
||||
createTime: 2023/12/25 01:28:29
|
||||
permalink: /article/0lk24ty5/
|
||||
sticky: true
|
||||
tags:
|
||||
tags:
|
||||
- 预览
|
||||
- 标签
|
||||
---
|
||||
@ -27,7 +27,6 @@ tags:
|
||||
|
||||
#### 标题4 Badge <Badge type="danger" text="Badge" />
|
||||
|
||||
|
||||
正文内容。
|
||||
|
||||
`@property` CSS at-rule是 [CSS Houdini API](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Houdini) 的一部分,它允许开发者显式地定义他们的 [CSS 自定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*), 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
|
||||
@ -88,7 +87,6 @@ H~2~O
|
||||
|
||||

|
||||
|
||||
|
||||
**Badge**
|
||||
|
||||
- <Badge type="info" text="info badge" />
|
||||
@ -96,17 +94,14 @@ H~2~O
|
||||
- <Badge type="warning" text="warning badge" />
|
||||
- <Badge type="danger" text="danger badge" />
|
||||
|
||||
|
||||
**图标**
|
||||
|
||||
- home - <Icon 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" />
|
||||
|
||||
|
||||
**demo wrapper**
|
||||
|
||||
|
||||
::: demo-wrapper title="示例" no-padding height="200px"
|
||||
<style scoped>
|
||||
.open-door {
|
||||
@ -139,7 +134,7 @@ const obj = {
|
||||
deep: {
|
||||
deep: {
|
||||
deep: {
|
||||
value: 'this is to long text. this is to long text. this is to long text. this is to long text.', // [!code highlight]
|
||||
value: 'this is to long text. this is to long text. this is to long text. this is to long text.', // [!code highlight]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -151,14 +146,14 @@ const obj = {
|
||||
|
||||
```ts twoslash
|
||||
// @errors: 2339
|
||||
const welcome = "Tudo bem gente?"
|
||||
const words = welcome.contains(" ")
|
||||
const welcome = 'Tudo bem gente?'
|
||||
const words = welcome.contains(' ')
|
||||
```
|
||||
|
||||
```ts twoslash
|
||||
import express from "express"
|
||||
import express from 'express'
|
||||
const app = express()
|
||||
app.get("/", function (req, res) {
|
||||
app.get('/', (req, res) => {
|
||||
res.send
|
||||
})
|
||||
app.listen(3000)
|
||||
@ -193,8 +188,8 @@ todo.title = 'Hello'
|
||||
Number.parseInt('123', 10)
|
||||
// ^|
|
||||
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
```
|
||||
|
||||
```vue twoslash
|
||||
@ -230,15 +225,15 @@ const c: number = a + b
|
||||
|
||||
```ts
|
||||
function foo() {
|
||||
const a = 1 // [!code highlight]
|
||||
const a = 1 // [!code highlight]
|
||||
|
||||
console.log(a)
|
||||
|
||||
const b = 2 // [!code ++]
|
||||
const c = 3 // [!code --]
|
||||
const b = 2 // [!code ++]
|
||||
const c = 3 // [!code --]
|
||||
|
||||
console.log(a + b + c) // [!code error]
|
||||
console.log(a + b) // [!code warning]
|
||||
console.log(a + b + c) // [!code error]
|
||||
console.log(a + b) // [!code warning]
|
||||
}
|
||||
```
|
||||
|
||||
@ -246,7 +241,7 @@ function foo() {
|
||||
|
||||
```ts
|
||||
function foo() {
|
||||
const a = 1 // [!code focus]
|
||||
const a = 1 // [!code focus]
|
||||
}
|
||||
```
|
||||
|
||||
@ -334,9 +329,9 @@ const c = a + b
|
||||
```
|
||||
|
||||
```js
|
||||
document.querySelector("#very").addEventListener("click", () => {
|
||||
alert("非常强大");
|
||||
});
|
||||
document.querySelector('#very').addEventListener('click', () => {
|
||||
alert('非常强大')
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
@ -1,112 +1,112 @@
|
||||
---
|
||||
home: true
|
||||
externalLink: false
|
||||
config:
|
||||
-
|
||||
config:
|
||||
-
|
||||
type: hero
|
||||
full: true
|
||||
background: filter-blur
|
||||
hero:
|
||||
hero:
|
||||
name: Theme Plume
|
||||
tagline: Vuepress Next Theme
|
||||
text: 一个简约的,功能丰富的 vuepress 文档&博客 主题
|
||||
actions:
|
||||
-
|
||||
actions:
|
||||
-
|
||||
theme: brand
|
||||
text: 快速开始 →
|
||||
link: /
|
||||
-
|
||||
-
|
||||
theme: alt
|
||||
text: Github
|
||||
link: https://github.com/pengzhanbo/vuepress-theme-plume
|
||||
-
|
||||
-
|
||||
type: features
|
||||
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 语法,支持 代码块分组、提示容器、任务列表、数学公式、代码演示等
|
||||
-
|
||||
-
|
||||
type: image-text
|
||||
title: 功能
|
||||
description: 内置丰富的功能,满足网站一般需求。
|
||||
image: /images/plume-1.svg
|
||||
list:
|
||||
-
|
||||
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:
|
||||
-
|
||||
list:
|
||||
-
|
||||
title: 文章列表
|
||||
description: 通过文章写作日期,自动排序并生成博客文章列表页。
|
||||
-
|
||||
-
|
||||
title: 博主信息
|
||||
description: 自定义名称、座右铭、头像,社交媒体链接。
|
||||
-
|
||||
-
|
||||
title: 标签、归档
|
||||
description: 自动生成标签页,为文章根据年份进行归档。
|
||||
-
|
||||
-
|
||||
type: image-text
|
||||
title: 文档
|
||||
image: /images/plume-3.svg
|
||||
description: 主题默认支持文档,生成你的产品文档,或归纳你的知识体系。
|
||||
list:
|
||||
-
|
||||
list:
|
||||
-
|
||||
title: 侧边栏
|
||||
description: 根据文档目录自动生成侧边栏,也可以手动配置,主题提供了更简单的配置方式。
|
||||
-
|
||||
-
|
||||
title: 文档分类归纳
|
||||
description: 可以文档的不同,归纳到不同的目录,更好的管理文档结构。
|
||||
-
|
||||
-
|
||||
type: custom
|
||||
---
|
||||
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
---
|
||||
home: true
|
||||
externalLink: false
|
||||
config:
|
||||
-
|
||||
config:
|
||||
-
|
||||
type: hero
|
||||
full: true
|
||||
background: filter-blur
|
||||
hero:
|
||||
hero:
|
||||
name: Theme Plume
|
||||
tagline: Vuepress Next Theme
|
||||
text: A simple, feature-rich vuepress document & blog theme
|
||||
actions:
|
||||
-
|
||||
actions:
|
||||
-
|
||||
theme: brand
|
||||
text: Quick Start →
|
||||
link: /
|
||||
-
|
||||
-
|
||||
theme: alt
|
||||
text: Github
|
||||
link: https://github.com/pengzhanbo/vuepress-theme-plume
|
||||
-
|
||||
-
|
||||
type: custom
|
||||
---
|
||||
|
||||
|
||||
@ -5,5 +5,4 @@ createTime: 2024/03/04 11:06:24
|
||||
permalink: /en/guide/intro/
|
||||
---
|
||||
|
||||
|
||||
Todo...
|
||||
|
||||
@ -3,38 +3,38 @@ friends: true
|
||||
title: 友情链接
|
||||
description: 这里是友情链接的描述文字
|
||||
permalink: /friends/
|
||||
list:
|
||||
-
|
||||
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: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
|
||||
-
|
||||
-
|
||||
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: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
|
||||
-
|
||||
-
|
||||
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: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
|
||||
-
|
||||
-
|
||||
name: pengzhanbo
|
||||
link: https://github.com/pengzhanbo
|
||||
avatar: https://github.com/pengzhanbo.png
|
||||
|
||||
@ -43,7 +43,6 @@ export default defineUserConfig({
|
||||
|
||||
详见 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/config.html)
|
||||
|
||||
|
||||
:::tip 说明
|
||||
主题还未完全对 该插件提供的 所有 增强功能 进行 样式上的适配。
|
||||
如果你在使用过程中遇到样式上的问题,可以在 [issue](https://github.com/pengzhanbo/vuepress-theme-plume/issues) 里提出。
|
||||
|
||||
@ -9,7 +9,7 @@ permalink: /config/plugins/code-highlight/
|
||||
|
||||
主题内置的代码高亮插件, 对代码块进行代码高亮。
|
||||
|
||||
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
|
||||
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
|
||||
Shiki 支持多种编程语言。
|
||||
|
||||
在 Shiki 的代码仓库中,可以找到 [合法的编程语言列表](https://shiki.style/languages) 。
|
||||
@ -49,7 +49,6 @@ export default defineUserConfig({
|
||||
- 类型: `string[]`
|
||||
- 默认值: `[]`
|
||||
|
||||
|
||||
需要高亮的编程语言, 例如 `javascript`、`typescript`、`python`、`java`、`c++`、`c#`等。
|
||||
默认会根据代码块的语言自动识别。
|
||||
|
||||
@ -88,8 +87,8 @@ export default defineUserConfig({
|
||||
效果:
|
||||
|
||||
```ts whitespace
|
||||
function block( ) {
|
||||
space( )
|
||||
table( )
|
||||
function block() {
|
||||
space()
|
||||
table()
|
||||
}
|
||||
```
|
||||
|
||||
@ -11,7 +11,7 @@ permalink: /config/plugins/search/
|
||||
|
||||
为站点添加本地搜索。
|
||||
|
||||
关联插件: [@vuepress-plume/plugin-search](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-search)
|
||||
关联插件: [@vuepress-plume/plugin-search](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-search)
|
||||
|
||||
该插件使用 [minisearch](https://github.com/lucaong/minisearch) 进行内容搜索。
|
||||
|
||||
@ -87,8 +87,8 @@ export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
docsearch: {
|
||||
appId: 'YOUR_APP_ID',
|
||||
apiKey: 'YOUR_API_KEY',
|
||||
appId: 'YOUR_APP_ID',
|
||||
apiKey: 'YOUR_API_KEY',
|
||||
indexName: 'YOUR_INDEX_NAME',
|
||||
// more options
|
||||
}
|
||||
|
||||
@ -5,7 +5,6 @@ createTime: 2024/03/06 15:23:39
|
||||
permalink: /config/plugins/reading-time/
|
||||
---
|
||||
|
||||
|
||||
## 概述
|
||||
|
||||
为每个页面生成字数统计与预计阅读时间。
|
||||
|
||||
@ -12,7 +12,7 @@ permalink: /config/basic/
|
||||
- 类型:`PlumeThemePluginOptions`
|
||||
- 默认值: `{}`
|
||||
- 详情: 对主题内部使用的插件进行自定义配置。
|
||||
|
||||
|
||||
主题使用的插件默认已进行了配置,大多数情况下您不需要进行任何修改,如果需要使用到细致的定制化,请查阅
|
||||
[此文档](/vuepress-theme-plume/plugins-config/)
|
||||
|
||||
@ -36,7 +36,7 @@ permalink: /config/basic/
|
||||
首页的路径, 它将被用于:
|
||||
- 导航栏中 logo的链接;
|
||||
- 404页面的 *返回首页* 的链接;
|
||||
|
||||
|
||||
### logo
|
||||
|
||||
- 类型: `false | string`
|
||||
@ -101,13 +101,13 @@ permalink: /config/basic/
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### social
|
||||
|
||||
- 类型: `false | SocialLink[]`
|
||||
- 默认值: `false`
|
||||
- 详情: 个人社交信息配置。
|
||||
|
||||
|
||||
将作为 图标链接 展示在 导航栏最右侧。
|
||||
|
||||
图标可选值:`'discord' | 'facebook' | 'github' | 'instagram' | 'linkedin' | 'mastodon' | 'npm' | 'slack' | 'twitter' | 'x' | 'youtube' | 'qq' | 'weibo' | 'bilibili' | { svg: string }`
|
||||
@ -128,55 +128,55 @@ permalink: /config/basic/
|
||||
|
||||
- 类型: `false | BlogOptions`
|
||||
- 默认值: `{ link: '/blog/', include: ['**/*.md'], exclude: [] }`
|
||||
- 详情:
|
||||
|
||||
- 详情:
|
||||
|
||||
博客配置。
|
||||
|
||||
```ts
|
||||
interface BlogOptions {
|
||||
/**
|
||||
* blog list link
|
||||
*
|
||||
* @default '/blog/'
|
||||
*/
|
||||
link?: string
|
||||
/**
|
||||
* blog list link
|
||||
*
|
||||
* @default '/blog/'
|
||||
*/
|
||||
link?: string
|
||||
|
||||
/**
|
||||
* 在 `blog.dir` 目录中,通过 glob string 配置包含文件
|
||||
*
|
||||
* @default - ['**\*.md']
|
||||
*/
|
||||
include?: 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[]
|
||||
/**
|
||||
* 在 `blog.dir` 目录中,通过 glob string 配置排除的文件
|
||||
*
|
||||
* README.md 文件一般作为主页或者某个目录下的主页,不应该被读取为 blog文章
|
||||
*
|
||||
* @default - ['.vuepress/', 'node_modules/', '{README,index}.md']
|
||||
*/
|
||||
exclude?: string[]
|
||||
|
||||
/**
|
||||
* 分页配置
|
||||
*/
|
||||
pagination?: false | {
|
||||
/**
|
||||
* 分页配置
|
||||
* 每页显示的文章数量
|
||||
* @default 10
|
||||
*/
|
||||
pagination?: false | {
|
||||
/**
|
||||
* 每页显示的文章数量
|
||||
* @default 10
|
||||
*/
|
||||
perPage?: number
|
||||
/**
|
||||
* 前一页的文本
|
||||
* @default 'Prev'
|
||||
*/
|
||||
prevPageText?: string
|
||||
/**
|
||||
* 后一页的文本
|
||||
* @default 'Next'
|
||||
*/
|
||||
nextPageText?: string
|
||||
}
|
||||
perPage?: number
|
||||
/**
|
||||
* 前一页的文本
|
||||
* @default 'Prev'
|
||||
*/
|
||||
prevPageText?: string
|
||||
/**
|
||||
* 后一页的文本
|
||||
* @default 'Next'
|
||||
*/
|
||||
nextPageText?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否启用标签页
|
||||
@ -197,14 +197,13 @@ interface BlogOptions {
|
||||
- 默认值: `/article/`
|
||||
- 详情: 文章链接前缀
|
||||
|
||||
|
||||
### navbar
|
||||
|
||||
- 类型: `NavItem[]`
|
||||
- 默认值: `[]`
|
||||
- 详情: 导航栏配置。
|
||||
|
||||
为了配置导航栏元素,你可以将其设置为 导航栏数组 ,其中的每个元素是 `NavItem` 对象、
|
||||
|
||||
为了配置导航栏元素,你可以将其设置为 导航栏数组 ,其中的每个元素是 `NavItem` 对象、
|
||||
- `NavItem` 对象应该有一个 text 字段和一个 link 字段,还有一个可选的 `activeMatch` 字段。
|
||||
|
||||
``` ts
|
||||
@ -214,7 +213,7 @@ type NavItem = string | {
|
||||
items?: NavItem[]
|
||||
/**
|
||||
* 支持 iconify 图标,直接使用 iconify name 即可自动加载
|
||||
*
|
||||
*
|
||||
* @see https://icon-sets.iconify.design/
|
||||
*/
|
||||
icon: string
|
||||
@ -292,7 +291,7 @@ type NavItem = string | {
|
||||
- 类型: `false | PlumeThemeNotesOptions`
|
||||
- 默认值: `{ link: '/note', dir: 'notes', notes: [] }`
|
||||
- 详情: 笔记配置, 笔记中的文章默认不会出现在首页文章列表
|
||||
|
||||
|
||||
你可以将配置的notes 配置到 navbar中,以便浏览查看
|
||||
|
||||
详细配置请查看 [此文档](/config/notes/)
|
||||
@ -301,8 +300,8 @@ type NavItem = string | {
|
||||
|
||||
- 类型: `string`
|
||||
- 默认值: `''`
|
||||
- 详情:
|
||||
|
||||
- 详情:
|
||||
|
||||
Locale 的语言名称。
|
||||
|
||||
该配置项 **仅能在主题配置的 [locales](#locales) 的内部生效** 。它将被用作 locale 的语言名称,展示在 _选择语言菜单_ 内。
|
||||
@ -311,19 +310,18 @@ type NavItem = string | {
|
||||
|
||||
- 类型: `string`
|
||||
- 默认值: `''`
|
||||
- 详情:
|
||||
|
||||
- 详情:
|
||||
|
||||
_选择语言菜单_ 的文字。
|
||||
|
||||
如果你在站点配置中设置了多个 [locales](#locales) ,那么 _选择语言菜单_ 就会显示在导航栏中仓库按钮的旁边。
|
||||
|
||||
|
||||
### selectLanguageAriaLabel
|
||||
|
||||
- 类型: `string`
|
||||
- 默认值: `''`
|
||||
- 详情:
|
||||
|
||||
- 详情:
|
||||
|
||||
_选择语言菜单 的 `aria-label` 属性。_
|
||||
|
||||
它主要是为了站点的可访问性 (a11y) 。
|
||||
@ -332,16 +330,16 @@ type NavItem = string | {
|
||||
|
||||
- 类型: `string`
|
||||
- 默认值: `'Menu'`
|
||||
- 详情:
|
||||
|
||||
- 详情:
|
||||
|
||||
移动设备下的导航栏中 菜单选项的文字。
|
||||
|
||||
### returnToTopLabel
|
||||
|
||||
- 类型: `string`
|
||||
- 默认值: `'return to top'`
|
||||
- 详情:
|
||||
|
||||
- 详情:
|
||||
|
||||
移动设备下的导航栏中返回顶部的文字。
|
||||
|
||||
### outlineLabel
|
||||
@ -349,7 +347,7 @@ type NavItem = string | {
|
||||
- 类型: `string`
|
||||
- 默认值: `'On this page'`
|
||||
- 详情:
|
||||
|
||||
|
||||
移动设备下的导航栏中大纲标题的文字
|
||||
|
||||
### repo
|
||||
@ -375,7 +373,7 @@ type NavItem = string | {
|
||||
- 类型: `string`
|
||||
- 默认值: `''`
|
||||
- 详情: 编辑链接的正则表达式
|
||||
|
||||
|
||||
示例: `':repo/edit/:branch/:path'`
|
||||
|
||||
### docsRepo
|
||||
@ -445,5 +443,5 @@ interface NotFound {
|
||||
quote?: string
|
||||
linkLabel?: string
|
||||
linkText?: string
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -16,29 +16,29 @@ permalink: /config/locales/
|
||||
::: code-tabs
|
||||
@tab 单语言
|
||||
```ts
|
||||
import { defineUserConfig } from "vuepress";
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
// 设置正在使用的语言
|
||||
lang: "zh-CN",
|
||||
});
|
||||
lang: 'zh-CN',
|
||||
})
|
||||
```
|
||||
@tab 多语言
|
||||
```ts
|
||||
import { defineUserConfig } from "vuepress";
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
|
||||
export default defineUserConfig({
|
||||
locales: {
|
||||
"/": {
|
||||
'/': {
|
||||
// 设置正在使用的语言
|
||||
lang: "zh-CN",
|
||||
lang: 'zh-CN',
|
||||
},
|
||||
"/en/": {
|
||||
'/en/': {
|
||||
// 设置正在使用的语言
|
||||
lang: "en-US",
|
||||
lang: 'en-US',
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ export default defineUserConfig({
|
||||
locales: {
|
||||
'/': { lang: 'zh-CN', title: '博客' }, // 简体中文
|
||||
'/en/': { lang: 'en-US', title: 'Blog' }, // English
|
||||
}
|
||||
},
|
||||
theme: plumeTheme({
|
||||
locales: {
|
||||
'/': {
|
||||
@ -165,7 +165,6 @@ export default defineUserConfig({
|
||||
|
||||
这表示,以 `/blog/` 或 `/article/` 开头的页面链接地址,该链接元素将被激活。
|
||||
|
||||
|
||||
## 配置帮助函数
|
||||
|
||||
主题提供了 `defineNavbar(config)` 函数,为主题使用者提供导航栏配置的类型帮助。
|
||||
@ -177,9 +176,9 @@ export default defineUserConfig({
|
||||
import { defineNavbar } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineNavbar([
|
||||
{ text: '首页', link: '/' },
|
||||
{ text: '博客', link: '/blog/' },
|
||||
// ... more
|
||||
{ text: '首页', link: '/' },
|
||||
{ text: '博客', link: '/blog/' },
|
||||
// ... more
|
||||
])
|
||||
```
|
||||
:::
|
||||
|
||||
@ -45,7 +45,6 @@ export default defineUserConfig({
|
||||
|
||||
在 VuePress 中,有三种配置类型:
|
||||
|
||||
|
||||
- 站点配置: 这是你在 配置文件 中直接导出的对象
|
||||
- 主题配置: 传递给 `plumeTheme` 的对象参数
|
||||
- 页面配置: 由在页面顶部基于 YAML 语法的 Frontmatter 提供
|
||||
|
||||
@ -11,14 +11,12 @@ permalink: /guide/api/client/
|
||||
import { useDarkMode } from 'vuepress-theme-plume/client'
|
||||
```
|
||||
|
||||
|
||||
## `useDarkMode()`
|
||||
|
||||
- 类型: `() => Ref<boolean>`
|
||||
|
||||
Composable `useDarkMode()` 用于获取当前的 `dark` 状态。
|
||||
|
||||
|
||||
```ts
|
||||
import { useDarkMode } from 'vuepress-theme-plume/client'
|
||||
|
||||
@ -31,7 +29,6 @@ const isDark = useDarkMode()
|
||||
|
||||
自定义首页时,提供给 区域 的 包装容器。
|
||||
|
||||
|
||||
### Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
|
||||
@ -415,7 +415,7 @@ end tell
|
||||
`````md
|
||||
````md
|
||||
```js
|
||||
const a = 1;
|
||||
const a = 1
|
||||
```
|
||||
````
|
||||
`````
|
||||
@ -424,7 +424,7 @@ const a = 1;
|
||||
|
||||
````md
|
||||
```js
|
||||
const a = 1;
|
||||
const a = 1
|
||||
```
|
||||
````
|
||||
|
||||
|
||||
@ -26,7 +26,6 @@ permalink: /guide/markdown/extensions/
|
||||
主题默认对每个 md 文件自动生成一个新的 链接,并保存在对应的 md 文件的 frontmatter 的 `permalink` 中。
|
||||
你可以随时修改它们。
|
||||
|
||||
|
||||
#### 内部链接
|
||||
|
||||
建议使用 生成的 `permalink` 作为内部链接的目标。
|
||||
@ -354,7 +353,7 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Highlighted!' // [!code highlight]
|
||||
}
|
||||
@ -386,7 +385,7 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Focused!' // [!code focus]
|
||||
}
|
||||
@ -405,7 +404,7 @@ export default {
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Removed' // [\!code --]
|
||||
msg: 'Removed', // [\!code --]
|
||||
msg: 'Added' // [\!code ++]
|
||||
}
|
||||
}
|
||||
@ -417,9 +416,9 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Removed' // [!code --]
|
||||
msg: 'Removed', // [!code --]
|
||||
msg: 'Added' // [!code ++]
|
||||
}
|
||||
}
|
||||
@ -449,7 +448,7 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
msg: 'Error', // [!code error]
|
||||
msg: 'Warning' // [!code warning]
|
||||
@ -506,7 +505,6 @@ console.log(options.foo) // 这个不会被高亮显示
|
||||
|
||||
可以像这样对多个代码块进行分组:
|
||||
|
||||
|
||||
**输入**
|
||||
|
||||
````md
|
||||
@ -525,7 +523,7 @@ export default config
|
||||
|
||||
@tab config.ts
|
||||
```ts
|
||||
import { type UserConfig } from 'vuepress'
|
||||
import type { UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
@ -552,7 +550,7 @@ export default config
|
||||
```
|
||||
@tab config.ts
|
||||
```ts
|
||||
import { type UserConfig } from 'vuepress'
|
||||
import type { UserConfig } from 'vuepress'
|
||||
|
||||
const config: UserConfig = {
|
||||
// ..
|
||||
@ -562,7 +560,7 @@ export default config
|
||||
```
|
||||
:::
|
||||
|
||||
你还可以通过 `@tab:active`
|
||||
你还可以通过 `@tab:active`
|
||||
|
||||
## 导入代码块
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ permalink: /guide/markdown/experiment/
|
||||
> 该功能当前仅在以下版本中通过可用性验证,在后续的所有的版本中均不能保证其可用性,请谨慎使用:
|
||||
> - [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.7`
|
||||
> - [x] `vuepress@2.0.0-rc.8`
|
||||
|
||||
### 概述
|
||||
@ -37,7 +37,6 @@ import { getHighlighterCore } from 'shiki/core'
|
||||
const highlighter = await getHighlighterCore({})
|
||||
// ^?
|
||||
|
||||
|
||||
// @log: Custom log message
|
||||
const a = 1
|
||||
// @error: Custom error message
|
||||
@ -56,7 +55,6 @@ import { getHighlighterCore } from 'shiki/core'
|
||||
const highlighter = await getHighlighterCore({})
|
||||
// ^?
|
||||
|
||||
|
||||
// @log: Custom log message
|
||||
const a = 1
|
||||
// @error: Custom error message
|
||||
@ -94,14 +92,14 @@ $ pnpm patch @vuepress/markdown --edit-dir _tmp/vuepress__markdown
|
||||
找到 `270` 行,其内容如下:
|
||||
|
||||
```ts
|
||||
const code = options.highlight?.(token.content, language.name, "") || md.utils.escapeHtml(token.content);
|
||||
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 ++]
|
||||
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` 行。
|
||||
@ -119,7 +117,6 @@ $ pnpm patch-commit '_tmp/vuepress__markdown'
|
||||
|
||||
之后你就可以选择 删除 `_tmp/vuepress__markdown` 目录了。
|
||||
|
||||
|
||||
#### 步骤四
|
||||
|
||||
在 主题配置中,将 `twoslash` 选项打开。
|
||||
@ -169,7 +166,7 @@ const a = 1
|
||||
```ts twoslash
|
||||
const a = 1
|
||||
// ^?
|
||||
//
|
||||
//
|
||||
```
|
||||
|
||||
**需要注意的是,`^`必须正确指向需要突出显示类型的变量**
|
||||
@ -182,9 +179,9 @@ const a = 1
|
||||
```ts twoslash
|
||||
// @noErrors
|
||||
// @esModuleInterop
|
||||
import express from "express"
|
||||
import express from 'express'
|
||||
const app = express()
|
||||
app.get("/", function (req, res) {
|
||||
app.get('/', (req, res) => {
|
||||
res.sen
|
||||
// ^|
|
||||
})
|
||||
@ -195,16 +192,16 @@ app.listen(3000)
|
||||
```ts twoslash
|
||||
// @noErrors
|
||||
// @esModuleInterop
|
||||
import express from "express"
|
||||
import express from 'express'
|
||||
const app = express()
|
||||
app.get("/", function (req, res) {
|
||||
app.get('/', (req, res) => {
|
||||
res.sen
|
||||
// ^|
|
||||
})
|
||||
app.listen(3000)
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
```
|
||||
|
||||
**需要注意的是,`^`必须正确指向需要进行内容预测的位置**
|
||||
@ -219,14 +216,14 @@ app.listen(3000)
|
||||
````md
|
||||
```ts twoslash
|
||||
// @errors: 2339
|
||||
const welcome = "Tudo bem gente?"
|
||||
const words = welcome.contains(" ")
|
||||
const welcome = 'Tudo bem gente?'
|
||||
const words = welcome.contains(' ')
|
||||
```
|
||||
````
|
||||
```ts twoslash
|
||||
// @errors: 2339
|
||||
const welcome = "Tudo bem gente?"
|
||||
const words = welcome.contains(" ")
|
||||
const welcome = 'Tudo bem gente?'
|
||||
const words = welcome.contains(' ')
|
||||
```
|
||||
|
||||
你需要在 `@errors` 后面,声明对应的 `typescript` 错误码。
|
||||
@ -255,7 +252,7 @@ const hi = 'hi'
|
||||
// ---cut---
|
||||
const msg = `${hi} words` as const
|
||||
// ^?
|
||||
//
|
||||
//
|
||||
```
|
||||
|
||||
#### 自定义输出信息 {id=twoslash-custom-message}
|
||||
@ -284,7 +281,6 @@ const c = 1
|
||||
// @annotate: Custom annotation message
|
||||
```
|
||||
|
||||
|
||||
#### import_files {id=twoslash-import-files}
|
||||
|
||||
`@filename: <filename>` 用于声明后续的代码将来自哪个文件,
|
||||
@ -293,35 +289,35 @@ const c = 1
|
||||
````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)
|
||||
import { sum } from './sum'
|
||||
|
||||
// @filename: error.ts
|
||||
// @errors: 2345
|
||||
import { sum } from "./sum"
|
||||
sum(4, "woops")
|
||||
import { sum } from './sum'
|
||||
|
||||
export function sum(a: number, b: number): number {
|
||||
return a + b
|
||||
}
|
||||
sum(1, 2)
|
||||
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)
|
||||
import { sum } from './sum'
|
||||
|
||||
// @filename: error.ts
|
||||
// @errors: 2345
|
||||
import { sum } from "./sum"
|
||||
sum(4, "woops")
|
||||
import { sum } from './sum'
|
||||
|
||||
export function sum(a: number, b: number): number {
|
||||
return a + b
|
||||
}
|
||||
sum(1, 2)
|
||||
sum(4, 'woops')
|
||||
```
|
||||
|
||||
::: warning
|
||||
|
||||
@ -12,7 +12,7 @@ permalink: /guide/markdown/advance/
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
```ts
|
||||
export default defineUserConfig{
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
plugins: {
|
||||
markdownEnhance: {
|
||||
@ -20,7 +20,7 @@ export default defineUserConfig{
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
:::
|
||||
|
||||
@ -96,9 +96,9 @@ JSON 块是可选的,可用的配置详见[配置](https://vuepress-theme-hope
|
||||
```
|
||||
|
||||
```ts
|
||||
const message: string = "VuePress Theme Hope";
|
||||
const message: string = 'VuePress Theme Hope'
|
||||
|
||||
document.querySelector("h1").innerHTML = message;
|
||||
document.querySelector('h1').innerHTML = message
|
||||
```
|
||||
|
||||
```scss
|
||||
@ -124,9 +124,9 @@ h1 {
|
||||
```
|
||||
|
||||
```ts
|
||||
const message: string = "VuePress Theme Hope";
|
||||
const message: string = 'VuePress Theme Hope'
|
||||
|
||||
document.querySelector("h1").innerHTML = message;
|
||||
document.querySelector('h1').innerHTML = message
|
||||
```
|
||||
|
||||
```scss
|
||||
@ -143,7 +143,6 @@ h1 {
|
||||
````
|
||||
::::
|
||||
|
||||
|
||||
### 普通代码演示
|
||||
格式:
|
||||
```` md
|
||||
@ -165,10 +164,10 @@ h1 {
|
||||
// 配置 (可选)
|
||||
{
|
||||
"jsLib": [
|
||||
...
|
||||
// ...
|
||||
],
|
||||
"cssLib":[
|
||||
...
|
||||
"cssLib": [
|
||||
// ...
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -189,9 +188,9 @@ h1 {
|
||||
```
|
||||
|
||||
```js
|
||||
document.querySelector("#very").addEventListener("click", () => {
|
||||
alert("非常强大");
|
||||
});
|
||||
document.querySelector('#very').addEventListener('click', () => {
|
||||
alert('非常强大')
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
@ -212,9 +211,9 @@ span {
|
||||
```
|
||||
|
||||
```js
|
||||
document.querySelector("#very").addEventListener("click", () => {
|
||||
alert("非常强大");
|
||||
});
|
||||
document.querySelector('#very').addEventListener('click', () => {
|
||||
alert('非常强大')
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
@ -235,14 +234,17 @@ span {
|
||||
|
||||
```vue
|
||||
<!-- ↑ 你也可以使用 html -->
|
||||
<template>
|
||||
<!-- vue 模板 -->
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
// vue 组件
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- vue 模板 -->
|
||||
<div>demo</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* css 代码 */
|
||||
</style>
|
||||
@ -250,6 +252,7 @@ export default {
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
{}
|
||||
```
|
||||
|
||||
:::
|
||||
@ -266,31 +269,32 @@ export default {
|
||||
::: 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;
|
||||
const { ref } = Vue
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const message = ref("powerful");
|
||||
const message = ref('powerful')
|
||||
|
||||
const handler = () => {
|
||||
message.value = "very " + message.value;
|
||||
};
|
||||
message.value = `very ${message.value}`
|
||||
}
|
||||
|
||||
return {
|
||||
message,
|
||||
handler,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<code>Hello Word</code> is
|
||||
<span @click="handler">{{ message }}</span>!
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.box span {
|
||||
color: red;
|
||||
@ -305,31 +309,32 @@ export default {
|
||||
::: 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;
|
||||
const { ref } = Vue
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const message = ref("powerful");
|
||||
const message = ref('powerful')
|
||||
|
||||
const handler = () => {
|
||||
message.value = "very " + message.value;
|
||||
};
|
||||
message.value = `very ${message.value}`
|
||||
}
|
||||
|
||||
return {
|
||||
message,
|
||||
handler,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box">
|
||||
<code>Hello Word</code> is
|
||||
<span @click="handler">{{ message }}</span>!
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.box span {
|
||||
color: red;
|
||||
@ -358,6 +363,7 @@ export default {
|
||||
|
||||
```json
|
||||
// 配置 (可选)
|
||||
{}
|
||||
```
|
||||
|
||||
:::
|
||||
@ -374,14 +380,14 @@ export default {
|
||||
::: react-demo 一个函数式 React Demo
|
||||
|
||||
```js
|
||||
const { useState } = React;
|
||||
const { useState } = React
|
||||
|
||||
export default () => {
|
||||
const [message, setMessage] = useState(" 强大");
|
||||
const [message, setMessage] = useState(' 强大')
|
||||
|
||||
const handler = () => {
|
||||
setMessage(`十分${message}`);
|
||||
};
|
||||
setMessage(`十分${message}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box">
|
||||
@ -390,8 +396,8 @@ export default () => {
|
||||
{message}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
@ -407,14 +413,14 @@ export default () => {
|
||||
::: react-demo 一个函数式 React Demo
|
||||
|
||||
```js
|
||||
const { useState } = React;
|
||||
const { useState } = React
|
||||
|
||||
export default () => {
|
||||
const [message, setMessage] = useState(" 强大");
|
||||
const [message, setMessage] = useState(' 强大')
|
||||
|
||||
const handler = () => {
|
||||
setMessage(`十分${message}`);
|
||||
};
|
||||
setMessage(`十分${message}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box">
|
||||
@ -423,8 +429,8 @@ export default () => {
|
||||
{message}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
@ -443,7 +449,7 @@ export default () => {
|
||||
|
||||
你需要将选项卡包装在 `tabs` 容器中。
|
||||
|
||||
你可以在 `tabs` 容器中添加一个 id 后缀,该后缀将用作选项卡 id。
|
||||
你可以在 `tabs` 容器中添加一个 id 后缀,该后缀将用作选项卡 id。
|
||||
所有具有相同 id 的选项卡将共享相同的切换事件。
|
||||
|
||||
```md
|
||||
@ -503,7 +509,6 @@ export default () => {
|
||||
你可以在每个选项卡中使用 Vue 语法和组件,并且你可以访问 value 和 isActive,
|
||||
表示选项卡的绑定值和选项卡是否处于激活状态。
|
||||
|
||||
|
||||
**输入**
|
||||
|
||||
````
|
||||
|
||||
@ -20,7 +20,7 @@ export default defineUserConfig({
|
||||
|
||||
## 指南
|
||||
|
||||
主题会通过向网站 `<head>` 注入标签,让你的网站完全支持 [开放内容协议 OGP](https://ogp.me/)
|
||||
主题会通过向网站 `<head>` 注入标签,让你的网站完全支持 [开放内容协议 OGP](https://ogp.me/)
|
||||
和 [JSON-LD 1.1](https://www.w3.org/TR/json-ld-api/),以全面增强站点的搜索引擎优化性。
|
||||
|
||||
默认情况下,插件会读取站点配置、主题配置与页面的 frontmatter 来尽可能自动生成。
|
||||
|
||||
@ -25,7 +25,6 @@ export default a
|
||||
|
||||
### 代码组
|
||||
|
||||
|
||||
::: code-tabs
|
||||
@tab foo.js
|
||||
```js
|
||||
|
||||
@ -42,7 +42,6 @@ export default defineUserConfig({
|
||||
|
||||
然而,当你的站点包含大量页面时,搜索索引文件也会变得非常大,它可能会拖慢你的页面加载速度。在这种情况下,我们建议你使用更成熟的解决方案 - [Algolia DocSearch](#algolia-docsearch) 。
|
||||
|
||||
|
||||
## Algolia DocSearch
|
||||
|
||||
使用 [Algolia DocSearch](https://docsearch.algolia.com/) 提供支持的网站内容搜索插件
|
||||
@ -75,23 +74,23 @@ export default defineUserConfig({
|
||||
|
||||
```ts
|
||||
new Crawler({
|
||||
appId: 'YOUR_APP_ID', // [!code highlight]
|
||||
appId: 'YOUR_APP_ID', // [!code highlight]
|
||||
apiKey: 'YOUR_API_KEY', // [!code highlight]
|
||||
rateLimit: 8,
|
||||
startUrls: [
|
||||
// 这是 Algolia 开始抓取网站的初始地址
|
||||
// 如果你的网站被分为数个独立部分,你可能需要在此设置多个入口链接
|
||||
'https://YOUR_WEBSITE_URL/', // [!code highlight]
|
||||
'https://YOUR_WEBSITE_URL/', // [!code highlight]
|
||||
],
|
||||
renderJavaScript: false,
|
||||
sitemaps: [
|
||||
// 主题默认会生成 sitemap,这里需要替换为你的域名链接
|
||||
'https://YOUR_WEBSITE_URL/sitemap.xml', // [!code highlight]
|
||||
'https://YOUR_WEBSITE_URL/sitemap.xml', // [!code highlight]
|
||||
],
|
||||
ignoreCanonicalTo: true,
|
||||
discoveryPatterns: [
|
||||
// 这是 Algolia 抓取 URL 的范围
|
||||
'https://YOUR_WEBSITE_URL/**', // [!code highlight]
|
||||
'https://YOUR_WEBSITE_URL/**', // [!code highlight]
|
||||
],
|
||||
// 爬虫执行的计划时间,可根据文档更新频率设置
|
||||
schedule: 'at 02:00 every 1 day',
|
||||
@ -105,33 +104,33 @@ new Crawler({
|
||||
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]
|
||||
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]
|
||||
});
|
||||
}, // [!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]
|
||||
YOUR_INDEX_NAME: { // [!code highlight]
|
||||
attributesForFaceting: ['type', 'lang'], // [!code highlight]
|
||||
attributesToRetrieve: [
|
||||
'hierarchy',
|
||||
'content',
|
||||
@ -202,7 +201,7 @@ new Crawler({
|
||||
removeWordsIfNoResults: 'allOptional',
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
```
|
||||
|
||||
`recordProps` 部分的配置选项用于本主题进行索引的爬取配置。
|
||||
@ -222,9 +221,9 @@ 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]
|
||||
appId: 'YOUR_APP_ID', // [!code highlight]
|
||||
apiKey: 'YOUR_API_KEY', // [!code highlight]
|
||||
indexName: 'YOUR_INDEX_NAME', // [!code highlight]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -96,7 +96,7 @@ export default defineUserConfig({
|
||||
|
||||
- **类型**: `string`
|
||||
- **默认值**: `'Only password can access this site'`
|
||||
- **说明**:
|
||||
- **说明**:
|
||||
|
||||
全站加密时,提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式,你可能会需要这个配置。
|
||||
|
||||
@ -104,7 +104,7 @@ export default defineUserConfig({
|
||||
|
||||
- **类型**: `string`
|
||||
- **默认值**: `'Only password can access this page'`
|
||||
- **说明**:
|
||||
- **说明**:
|
||||
|
||||
部分加密时,提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式,你可能会需要这个配置。
|
||||
|
||||
|
||||
@ -15,7 +15,6 @@ permalink: /guide/blog/
|
||||
同时,主题会生成一个 链接地址为 `/blog/` 的 博客文章列表页。
|
||||
展示所有的博客文章,以及 博主的相关信息。
|
||||
|
||||
|
||||
## 国际化支持
|
||||
|
||||
如果启用了 国际化,那么博客列表页将会 根据 不同的语言,展示对应语言目录下的博客列表。
|
||||
@ -42,7 +41,7 @@ export default defineUserConfig({
|
||||
url: '/blogger.png',
|
||||
name: 'Your name',
|
||||
description: 'Your description',
|
||||
circle: true, // 是否为圆形头像
|
||||
circle: true, // 是否为圆形头像
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@ -20,13 +20,13 @@ friends: true
|
||||
title: 友情链接
|
||||
description: 友情链接描述文本
|
||||
permalink: /friends/
|
||||
list:
|
||||
-
|
||||
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
|
||||
|
||||
@ -63,7 +63,7 @@ export default defineUserConfig({
|
||||
]
|
||||
},
|
||||
'/zh/': {
|
||||
selectLanguageName: "简体中文",
|
||||
selectLanguageName: '简体中文',
|
||||
navbar: [
|
||||
{ text: '首页', link: '/zh/' },
|
||||
{ text: '博客', link: '/zh/blog/' },
|
||||
|
||||
@ -53,7 +53,7 @@ npm init
|
||||
### 步骤 3
|
||||
|
||||
**安装相关依赖**
|
||||
|
||||
|
||||
安装 `vuepress@next` 和 `vuepress-theme-plume` 作为本地依赖。
|
||||
|
||||
::: code-tabs
|
||||
@ -81,10 +81,10 @@ npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
:::
|
||||
|
||||
### 步骤 4
|
||||
### 步骤 4
|
||||
|
||||
**在 `package.json` 中添加 `script`**
|
||||
|
||||
|
||||
::: code-tabs
|
||||
@tab package.json
|
||||
``` json
|
||||
|
||||
@ -39,13 +39,13 @@ export default defineUserConfig({
|
||||
theme: themePlume({
|
||||
notes: {
|
||||
dir: '/notes/', // 声明所有笔记的目录
|
||||
link: '/', // 声明所有笔记默认的链接前缀, 默认为 '/'
|
||||
link: '/', // 声明所有笔记默认的链接前缀, 默认为 '/'
|
||||
notes: [
|
||||
{
|
||||
dir: 'typescript', // 声明笔记的目录,相对于 `notes.dir`
|
||||
link: '/typescript/', // 声明笔记的链接前缀
|
||||
sidebar: [ // 配置侧边栏
|
||||
{
|
||||
{
|
||||
text: '简介',
|
||||
items: ['foo'] // 简化写法,主题会自动补全为 `foo.md`
|
||||
}
|
||||
@ -55,7 +55,7 @@ export default defineUserConfig({
|
||||
dir: 'rust',
|
||||
link: '/rust/',
|
||||
sidebar: [
|
||||
{ text: '简介', items: ['foo'] }
|
||||
{ text: '简介', items: ['foo'] }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -5,7 +5,6 @@ createTime: 2024/03/04 10:06:06
|
||||
permalink: /guide/write/
|
||||
---
|
||||
|
||||
|
||||
::: info 提示
|
||||
以下内容中,以 `sourceDir` 表示 项目中用于保存 `Markdown` 文件的目录。
|
||||
|
||||
@ -44,7 +43,6 @@ __example:__
|
||||
- 运维
|
||||
```
|
||||
|
||||
|
||||
## 文章写作
|
||||
|
||||
你可以使用 `markdown` 语法开始在 `sourceDir` 下新建 `Markdown` 文件,编写你自己的文章了,
|
||||
|
||||
@ -5,12 +5,11 @@ createTime: 2024/03/04 20:18:52
|
||||
permalink: /guide/custom-style/
|
||||
---
|
||||
|
||||
|
||||
## 主题定制
|
||||
|
||||
支持自定义样式。
|
||||
|
||||
该功能由 [@vuepress/plugin-palette](https://v2.vuepress.vuejs.org/zh/reference/plugin/palette.html) 提供支持。
|
||||
该功能由 [@vuepress/plugin-palette](https://v2.vuepress.vuejs.org/zh/reference/plugin/palette.html) 提供支持。
|
||||
|
||||
主题使用 [SASS](https://sass-lang.com/) 作为 CSS 预处理器。
|
||||
|
||||
|
||||
@ -107,22 +107,22 @@ interface PlumeThemeHomeBanner extends PlumeHomeConfigBase {
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
-
|
||||
type: banner
|
||||
banner: https://file.mo7.cc/api/public/bz
|
||||
bannerMask:
|
||||
bannerMask:
|
||||
light: 0.1
|
||||
dark: 0.3
|
||||
hero:
|
||||
hero:
|
||||
name: 鹏展博
|
||||
tagline: Front End Developer
|
||||
text: 即使慢,驰而不息,纵会落后,纵会失败,但必须能够到达他所向的目标。
|
||||
actions:
|
||||
-
|
||||
actions:
|
||||
-
|
||||
text: 我的博客
|
||||
link: /blog/
|
||||
theme: brand
|
||||
-
|
||||
-
|
||||
text: Github
|
||||
link: https://github.com/pengzhanbo
|
||||
theme: alt
|
||||
@ -171,20 +171,20 @@ interface PlumeThemeHomeHero extends PlumeHomeConfigBase {
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
-
|
||||
type: hero
|
||||
full: true
|
||||
background: filter-blur
|
||||
hero:
|
||||
hero:
|
||||
name: Theme Plume
|
||||
tagline: Vuepress Next Theme
|
||||
text: 一个简约的,功能丰富的 vuepress 文档&博客 主题
|
||||
actions:
|
||||
-
|
||||
actions:
|
||||
-
|
||||
theme: brand
|
||||
text: 快速开始 →
|
||||
link: /
|
||||
-
|
||||
-
|
||||
theme: alt
|
||||
text: Github
|
||||
link: https://github.com/pengzhanbo/vuepress-theme-plume
|
||||
@ -243,42 +243,42 @@ type FeatureIcon = string | {
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
-
|
||||
type: features
|
||||
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 语法,支持 代码块分组、提示容器、任务列表、数学公式、代码演示等
|
||||
@ -291,7 +291,6 @@ config:
|
||||
<img src="/images/custom-features.png" />
|
||||
:::
|
||||
|
||||
|
||||
### text-image | image-text
|
||||
|
||||
- 类型: `PlumeThemeHomeTextImage`
|
||||
@ -320,40 +319,40 @@ type PlumeThemeImage =
|
||||
---
|
||||
home: true
|
||||
config:
|
||||
-
|
||||
-
|
||||
type: image-text
|
||||
title: 功能
|
||||
description: 内置丰富的功能,满足网站一般需求。
|
||||
image: /images/plume-1.svg
|
||||
list:
|
||||
-
|
||||
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:
|
||||
-
|
||||
list:
|
||||
-
|
||||
title: 文章列表
|
||||
description: 通过文章写作日期,自动排序并生成博客文章列表页。
|
||||
-
|
||||
-
|
||||
title: 博主信息
|
||||
description: 自定义名称、座右铭、头像,社交媒体链接。
|
||||
-
|
||||
-
|
||||
title: 标签、归档
|
||||
description: 自动生成标签页,为文章根据年份进行归档。
|
||||
---
|
||||
|
||||
@ -5,7 +5,6 @@ createTime: 2024/03/04 11:58:59
|
||||
permalink: /guide/features/comments/
|
||||
---
|
||||
|
||||
|
||||
## 概述
|
||||
|
||||
文章评论由 [vuepress-plugin-comment2](https://vuepress-theme-hope.github.io/v2/comment2/zh) 提供支持。
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import config from '@pengzhanbo/eslint-config-vue'
|
||||
|
||||
export default config({
|
||||
ignores: ['lib', 'docs/**/*.md'],
|
||||
ignores: ['lib'],
|
||||
globals: {
|
||||
__VUEPRESS_VERSION__: 'readonly',
|
||||
__VUEPRESS_BASE__: 'readonly',
|
||||
@ -16,4 +16,10 @@ export default config({
|
||||
rules: {
|
||||
'vue/no-v-text-v-html-on-component': 'off',
|
||||
},
|
||||
}, {
|
||||
files: ['**/*.md/*.ts'],
|
||||
rules: {
|
||||
'import/no-duplicates': 'off',
|
||||
'no-new': 'off',
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user