mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
docs: update docs
This commit is contained in:
pengzhanbo
parent
1df3505d89
commit
bea5c8b524
@ -2,6 +2,7 @@
|
||||
title: 更多
|
||||
author: pengzhanbo
|
||||
icon: ic:outline-auto-fix-high
|
||||
outline: 2
|
||||
createTime: 2024/03/05 16:27:59
|
||||
permalink: /guide/markdown/advance/
|
||||
---
|
||||
@ -198,9 +199,82 @@ interface PlotOptions {
|
||||
力量！于是，!!我在床上翻了个身!! ！
|
||||
:::
|
||||
|
||||
## 步骤容器
|
||||
|
||||
在 Markdown 中支持 步骤容器。
|
||||
|
||||
有时候，你需要将内容 划分为递进的步骤展示，你可以使用 `steps` 容器 实现。
|
||||
|
||||
### 语法
|
||||
|
||||
在 `steps` 容器内，使用 有序列表 （或无序列表） 来表示步骤。你可以在 容器内使用 任意 markdown 语法。
|
||||
|
||||
````md
|
||||
::: steps
|
||||
|
||||
1. 步骤 1
|
||||
|
||||
相关内容
|
||||
|
||||
2. 步骤 2
|
||||
|
||||
相关内容
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
### 示例
|
||||
|
||||
输入：
|
||||
|
||||
````md
|
||||
:::: steps
|
||||
1. 步骤 1
|
||||
|
||||
```ts
|
||||
console.log('Hello World!')
|
||||
```
|
||||
|
||||
2. 步骤 2
|
||||
|
||||
这里是步骤 2 的相关内容
|
||||
|
||||
3. 步骤 3
|
||||
|
||||
::: tip
|
||||
提示容器
|
||||
:::
|
||||
|
||||
4. 结束
|
||||
::::
|
||||
````
|
||||
|
||||
输出：
|
||||
|
||||
:::: steps
|
||||
|
||||
1. 步骤 1
|
||||
|
||||
```ts
|
||||
console.log('Hello World!')
|
||||
```
|
||||
|
||||
2. 步骤 2
|
||||
|
||||
这里是步骤 2 的相关内容
|
||||
|
||||
3. 步骤 3
|
||||
|
||||
::: tip
|
||||
提示容器
|
||||
:::
|
||||
|
||||
4. 结束
|
||||
::::
|
||||
|
||||
## 选项组
|
||||
|
||||
让你的 Markdown 文件支持选项卡。
|
||||
在 Markdown 中支持选项卡。
|
||||
|
||||
你需要将选项卡包装在 `tabs` 容器中。
|
||||
|
||||
|
||||
@ -97,14 +97,14 @@ export default defineUserConfig({
|
||||
| mask | `string \| { light: string, dark: string }` | `#000` | 遮罩颜色 |
|
||||
| color | `string \| { light: string, dark: string }` | `#fff` | 文本颜色 |
|
||||
|
||||
输入：
|
||||
**输入：**
|
||||
|
||||
```md
|
||||
- 鼠标悬停 - <Plot>悬停时可见</Plot>
|
||||
- 点击 - <Plot trigger="click">点击时可见</Plot>
|
||||
```
|
||||
|
||||
输出：
|
||||
**输出：**
|
||||
|
||||
- 鼠标悬停 - <Plot>悬停时可见</Plot>
|
||||
- 点击 - <Plot trigger="click">点击时可见</Plot>
|
||||
|
||||
@ -21,195 +21,185 @@ permalink: /guide/quick-start/
|
||||
|
||||
使用本主题，你需要首先新建一个项目，并安装`vuepress@next`以及本主题
|
||||
|
||||
### 步骤 1
|
||||
:::: steps
|
||||
|
||||
**创建一个新文件夹，并进入目录：**
|
||||
- ### 新建文件夹并进入目录
|
||||
|
||||
``` sh
|
||||
mkdir my-blog
|
||||
cd my-blog
|
||||
```
|
||||
``` sh
|
||||
mkdir my-blog
|
||||
cd my-blog
|
||||
```
|
||||
|
||||
### 步骤 2
|
||||
- ### 初始化项目
|
||||
|
||||
**初始化项目：**
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
``` sh
|
||||
git init
|
||||
pnpm init
|
||||
```
|
||||
|
||||
``` sh
|
||||
git init
|
||||
pnpm init
|
||||
```
|
||||
@tab yarn
|
||||
|
||||
@tab yarn
|
||||
``` sh
|
||||
git init
|
||||
yarn init
|
||||
```
|
||||
|
||||
``` sh
|
||||
git init
|
||||
yarn init
|
||||
```
|
||||
@tab npm
|
||||
|
||||
@tab npm
|
||||
``` sh
|
||||
git init
|
||||
npm init
|
||||
```
|
||||
|
||||
``` sh
|
||||
git init
|
||||
npm init
|
||||
```
|
||||
:::
|
||||
|
||||
:::
|
||||
- ### 安装相关依赖
|
||||
|
||||
### 步骤 3
|
||||
安装 `vuepress@next` 和 `vuepress-theme-plume` 作为本地依赖。
|
||||
|
||||
**安装相关依赖：**
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
|
||||
安装 `vuepress@next` 和 `vuepress-theme-plume` 作为本地依赖。
|
||||
```sh
|
||||
# 安装 vuepress
|
||||
pnpm add -D vuepress@next vue
|
||||
# 安装 主题和打包工具
|
||||
pnpm add -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
@tab yarn
|
||||
|
||||
```sh
|
||||
# 安装 vuepress
|
||||
pnpm add -D vuepress@next vue
|
||||
# 安装 主题和打包工具
|
||||
pnpm add -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
``` sh
|
||||
# 安装 vuepress
|
||||
yarn add -D vuepress@next
|
||||
# 安装 主题和打包工具
|
||||
yarn add -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
|
||||
@tab yarn
|
||||
@tab npm
|
||||
|
||||
``` sh
|
||||
# 安装 vuepress
|
||||
yarn add -D vuepress@next
|
||||
# 安装 主题和打包工具
|
||||
yarn add -D vuepress-theme-plume @vuepress/bundler-vite@next
|
||||
```
|
||||
``` sh
|
||||
# 安装 vuepress
|
||||
npm i -D vuepress@next
|
||||
# 安装 主题和打包工具
|
||||
npm i -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
|
||||
```
|
||||
:::warning
|
||||
主题当前版本 已适配至 `vuepress@2.0.0-rc.13`，你应该安装这个版本的 VuePress。
|
||||
高于或低于这个版本，可能会存在潜在的兼容性问题。
|
||||
:::
|
||||
|
||||
:::
|
||||
- ### 在 `package.json` 中添加 `script`
|
||||
|
||||
:::warning
|
||||
主题当前版本 已适配至 `vuepress@2.0.0-rc.13`，你应该安装这个版本的 VuePress。
|
||||
高于或低于这个版本，可能会存在潜在的兼容性问题。
|
||||
:::
|
||||
::: code-tabs
|
||||
@tab package.json
|
||||
|
||||
### 步骤 4
|
||||
|
||||
**在 `package.json` 中添加 `script`**
|
||||
|
||||
::: code-tabs
|
||||
@tab package.json
|
||||
|
||||
``` json
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "vuepress dev docs",
|
||||
"build": "vuepress build docs"
|
||||
``` json
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "vuepress dev docs",
|
||||
"build": "vuepress build docs"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
`vuepress` 默认将文档源码放在 `docs` 目录下。
|
||||
`vuepress` 默认将文档源码放在 `docs` 目录下。
|
||||
|
||||
### 步骤 5
|
||||
- ### 将默认的临时目录和缓存目录添加到`.gitignore` 文件中
|
||||
|
||||
**将默认的临时目录和缓存目录添加到`.gitignore` 文件中**
|
||||
::: code-tabs
|
||||
@tab .gitignore
|
||||
|
||||
::: code-tabs
|
||||
@tab .gitignore
|
||||
``` txt
|
||||
node_modules
|
||||
.temp
|
||||
.cache
|
||||
```
|
||||
|
||||
``` txt
|
||||
node_modules
|
||||
.temp
|
||||
.cache
|
||||
```
|
||||
@tab sh
|
||||
|
||||
@tab sh
|
||||
``` sh
|
||||
echo 'node_modules' >> .gitignore
|
||||
echo '.temp' >> .gitignore
|
||||
echo '.cache' >> .gitignore
|
||||
```
|
||||
|
||||
``` sh
|
||||
echo 'node_modules' >> .gitignore
|
||||
echo '.temp' >> .gitignore
|
||||
echo '.cache' >> .gitignore
|
||||
```
|
||||
:::
|
||||
|
||||
:::
|
||||
- ### 在 `docs/.vuepress/config.{js,ts}` 中配置主题
|
||||
|
||||
### 步骤 6
|
||||
::: code-tabs
|
||||
@tab docs/.vuepress/config.js
|
||||
|
||||
**在 `docs/.vuepress/config.{js,ts}` 中配置主题**
|
||||
``` ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { viteBundler } from '@vuepress/bundler-vite'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
::: code-tabs
|
||||
@tab docs/.vuepress/config.js
|
||||
export default defineUserConfig({
|
||||
// 请不要忘记设置默认语言
|
||||
lang: 'zh-CN',
|
||||
theme: plumeTheme({
|
||||
// more...
|
||||
}),
|
||||
bundler: viteBundler(),
|
||||
})
|
||||
```
|
||||
|
||||
``` 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(),
|
||||
})
|
||||
```
|
||||
:::warning
|
||||
无论是否需要使用 **多语言** ，你都应该为 VuePress 配置 正确 `lang` 选项值。
|
||||
主题需要根据 `lang` 选项来确定语言环境文本。
|
||||
:::
|
||||
|
||||
:::
|
||||
- ### 在 `docs` 目录下新建 `README.md` 文件
|
||||
|
||||
:::warning
|
||||
无论是否需要使用 **多语言** ，你都应该为 VuePress 配置 正确 `lang` 选项值。
|
||||
主题需要根据 `lang` 选项来确定语言环境文本。
|
||||
:::
|
||||
声明首页配置。
|
||||
::: code-tabs
|
||||
@tab README.md
|
||||
|
||||
### 步骤 7
|
||||
``` md
|
||||
---
|
||||
home: true
|
||||
---
|
||||
```
|
||||
|
||||
**在 `docs` 目录下新建 `README.md` 文件**
|
||||
:::
|
||||
|
||||
声明首页配置。
|
||||
::: code-tabs
|
||||
@tab README.md
|
||||
- ### 在本地服务器启动你的文档站点
|
||||
|
||||
``` md
|
||||
---
|
||||
home: true
|
||||
---
|
||||
```
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
|
||||
:::
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### 步骤 8
|
||||
@tab yarn
|
||||
|
||||
**在本地服务器启动你的文档站点：**
|
||||
``` sh
|
||||
yarn dev
|
||||
```
|
||||
|
||||
::: code-tabs
|
||||
@tab pnpm
|
||||
@tab npm
|
||||
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
``` sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
@tab yarn
|
||||
:::
|
||||
|
||||
``` sh
|
||||
yarn dev
|
||||
```
|
||||
Vuepress 会在 [http://localhost:8080](http://localhost:8080) 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
|
||||
|
||||
@tab npm
|
||||
- ### 完成
|
||||
|
||||
``` sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Vuepress 会在 [http://localhost:8080](http://localhost:8080) 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
|
||||
::::
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user