Wang's blog
wangmings
2022-07-19
目录

vuepress-theme-vdoing简介

# vuepress-theme-vdoing简介

  1. 这个主题的初衷是打造一个好用的、面向程序员的知识管理工具

  2. 轻松构建一个结构化的知识库，让你的知识海洋像一本本书一样清晰易读。

  3. 博客功能提供一种知识的碎片化形态，并支持个性化博客配置。

  4. 简洁高效，以Markdown为中心的项目结构。内置自动化工具，以更少的配置完成更多的事。配合多维索引快速定位每个知识点。

# 安装

# 安装VuePress

  1. 创建并进入一个新目录

    mkdir blog && cd blog
    1

  2. 初始化

    yarn init # npm init
    1

  3. 将VuePress安装为本地依赖

    yarn add -D vuepress # npm install -D vuepress
    1

# 安装vuepress-theme-vdoing

  1. 安装vuepress-theme-vdoing主题包

    npm install vuepress-theme-vdoing -D
    1

  2. 在.vuepress/config.js中配置使用主题：

    // config.js
module.exports = {
    theme: 'vdoing'
}
    1
    2
    3
    4

# 主题版本升级

npm update vuepress-theme-vdoing
1

# vdoing主题目录结构

.
├── .github   (可选，GitHub 相关文件)
│   ├── workflows
│   │   ├── baiduPush.yml (可选，百度定时自动推送)
│   │   └── ci.yml (可选，自动部署)
├── docs (必须，不要修改文件夹名称)
│   ├── .vuepress （同官方，查看：https://vuepress.vuejs.org/zh/guide/directory-structure.html#目录结构）
│   ├── @pages (可选，自动生成的文件夹，存放分类页、标签页、归档页)
│   ├── _posts (可选，专门存放碎片化博客文章的文件夹)
│   ├── <结构化目录>
│   └── index.md (首页)
├── vdoing (可选，本地的vdoing主题)
├── utils  (可选，vdoing主题使用的node工具)
│   ├── modules
│   ├── config.yml (可选，批量操作front matter配置)
│   ├── editFrontmatter.js (可选，批量操作front matter工具)
├── baiduPush.sh (可选，百度推送命令脚本)
├── deploy.sh (可选，部署命令脚本)
│
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

  • docs文件夹名称请不要修改

  • docs/.vuepress用于存放全局的配置、样式、静态资源等，同官方，查看详情 (opens new window)

  • docs/@pages此文件夹是自动生成的，存放分类页、标签页、归档页对应的.md文件，一般不需要改动

  • docs/_posts专门用于存放碎片化博客文章，里面的.md文件不需要遵循命名约定，不会生成结构化侧边栏和目录页。

  • docs/<结构化目录>请查看《构建结构化站点的核心配置和约定》。

  • docs/index.md首页

  • vdoing存放在本地的vdoing主题文件，如果你想深度的修改主题，首先要在docs/.vuepress/config.js中配置使用的主题指向这个文件。

注意

主题的后续维护升级只对npm主题包负责，不建议使用本地主题包

# vdoing Markdown容器

# 信息框容器

# 输入

::: tip
这是一条提示
:::

::: warning
这是一条注意
:::

::: danger
这是一条警告
:::

::: note
这是笔记容器，在 <Badge text="v1.5.0 +" /> 版本才支持哦~
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 输出

提示

这是一条提示

注意

这是一条注意

警告

这是一条警告

笔记

这是笔记容器，在 v1.5.0 + 版本才支持哦~

以上容器均可自定义标题，如：

::: tip 我的提示
自定义标题的提示框
:::
1
2
3

我的提示

自定义标题的提示框

# 布局容器

# 输入

::: center
  ### 我是居中的内容
  （可用于标题、图片等的居中）
:::

::: right
  [我是右浮动的内容](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
```js
console.log('这是一个详情块')
```
:::

::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。
::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 输出

# 我是居中的内容

（可用于标题、图片等的居中）

我是右浮动的内容 (opens new window)

点击查看

这是一个详情块，在 IE / Edge 中不生效

console.log('这是一个详情块')
1

牛顿第一定律

假若施加于某物体的外力为零，则该物体的运动速度不变。

来自 维基百科 (opens new window)

# 普通卡片列表

普通卡片列表容器，可用于友情链接、项目推荐、诗词展示等。

先来看看效果：

不器blog

大道至简，知易行难

XAOXUU

#IOS #Volantis主题作者

不器blog

大道至简，知易行难

- name: 不器blog
  desc: 大道至简，知易行难
  avatar: https://avatars.githubusercontent.com/u/866409?v=4 # 可选
  link: https://xingcxb.github.io # 可选
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: XAOXUU
  desc: '#IOS #Volantis主题作者'
  avatar: https://fastly.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  link: https://xaoxuu.com
  bgColor: '#718971'
  textColor: '#fff'
- name: 不器blog
  desc: 大道至简，知易行难
  avatar: https://avatars.githubusercontent.com/u/866409?v=4 # 可选
  link: https://xingcxb.github.io # 可选
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上面效果在Markdown中的代码是这样的：

::: cardList
```yaml
- name: 不器blog
  desc: 大道至简，知易行难
  avatar: https://avatars.githubusercontent.com/u/866409?v=4 # 可选
  link: https://xingcxb.github.io # 可选
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: XAOXUU
  desc: '#IOS #Volantis主题作者'
  avatar: https://fastly.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  link: https://xaoxuu.com
  bgColor: '#718971'
  textColor: '#fff'
- name: 不器blog
  desc: 大道至简，知易行难
  avatar: https://avatars.githubusercontent.com/u/866409?v=4 # 可选
  link: https://xingcxb.github.io # 可选
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 卡片语法

::: cardList <每行显示数量>
``` yaml
- name: 名称
  desc: 描述
  avatar: https://xxx.jpg # 头像，可选
  link: https://xxx/ # 链接，可选
  bgColor: '#CBEAFA' # 背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
  textColor: '#6854A1' # 文本色，可选，默认var(--textColor)
```
:::
1
2
3
4
5
6
7
8
9
10
  • <每行显示数量>`` 数字，表示每行最多显示多少个，选值范围1~4，默认3`。在小屏时会根据屏幕宽度减少每行显示数量。
  • 代码块需指定语言为`yaml``
  • 代码块内是一个yaml格式的数组列表
  • 数组成员的属性有：
    • name名称
    • desc描述
    • avatar头像，可选
    • link链接，可选
    • bgColor背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
    • textColor文本色，可选，默认var(--textColor)

下面再来看另外一个示例：

# 输入

::: cardList 2
```yaml
- name: 《静夜思》
  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  bgColor: '#F0DFB1'
  textColor: '#242A38'
- name: 《蝶恋花》
  desc: 桃红柳绿，春来发几枝。愿君多采撷，此物最相思。
  link: https://xingcxb.github.io
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13

# 输出

《静夜思》

床前明月光，疑是地上霜。举头望明月，低头思故乡。

《蝶恋花》

桃红柳绿，春来发几枝。愿君多采撷，此物最相思。

- name: 《静夜思》
  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  bgColor: '#F0DFB1'
  textColor: '#242A38'
- name: 《蝶恋花》
  desc: 桃红柳绿，春来发几枝。愿君多采撷，此物最相思。
  link: https://xingcxb.github.io
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
1
2
3
4
5
6
7
8
9

# 图文卡片列表

图文卡片列表容器，可用于项目展示、产品展示等。

# 输出

不器小窝

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

不器

标题

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

不器

标题

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

不器
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
  link: https://xingcxb.github.io
  name: 不器小窝
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
  author: 不器 # 作者，可选
  avatar: https://avatars.githubusercontent.com/u/866409?v=4 # 头像，可选
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
  link: https://xingcxb.github.io
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: 不器
  avatar: https://avatars.githubusercontent.com/u/866409?v=4
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100257.jpg
  link: https://xingcxb.github.io
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: 不器
  avatar: https://avatars.githubusercontent.com/u/866409?v=4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 输入

::: cardImgList
```yaml
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
  link: https://xingcxb.github.io
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
  author: 不器 # 作者，可选
  avatar: https://avatars.githubusercontent.com/u/866409?v=4 # 头像，可选
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
  link: https://xingcxb.github.io
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: 不器 # 作者，可选
  avatar: https://avatars.githubusercontent.com/u/866409?v=4 # 头像，可选
- img: https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100257.jpg
  link: https://xingcxb.github.io
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: 不器 # 作者，可选
  avatar: https://avatars.githubusercontent.com/u/866409?v=4 # 头像，可选
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 语法

::: cardImgList <每行显示数量>
``` yaml
- img: https://xxx.jpg # 图片地址
  link: https://xxx.com # 链接地址
  name: 标题
  desc: 描述 # 可选
  author: 作者名称 # 可选
  avatar: https://xxx.jpg # 作者头像，可选
```
:::
1
2
3
4
5
6
7
8
9
10
  • <每行显示数量>数字，表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。
  • 代码块需指定语言为yaml
  • 代码块内是一个yaml格式的数组列表
  • 数组成员的属性有：
    • img图片地址
    • link链接地址
    • name标题
    • desc描述，可选
    • author作者名称，可选
    • avatar作者头像，可选

# 增强配置

为了适应更多需求场景，v1.9.0+版本的普通卡片和图文卡片容器添加了一些新的配置：

# 1. 普通卡片和图文卡片容器
# target

  • 链接的打开方式，默认_blank

    • _self当前页面

    • _blank新窗口打开

# 2. 图文卡片容器
# `imgHeight``

  • 设置图片高度，默认`auto``

    • 带单位
# objectFit

  • 设置图片的填充方式(object-fit``)，默认cover``

    • fill拉伸 (会改变宽高比)
    • contain缩放 (保持宽高比，会留空)
    • cover填充 (会裁剪)
    • none保持原有尺寸 (会留空或裁剪)
    • scale-down保证显示完整图片 (保持宽高比，会留空)
# lineClamp
  • 描述文本超出多少行显示省略号，默认1
# 配置示例
::: cardImgList
``` yaml
config:
    target: _blank
    imgHeight: auto
    objectFit: cover
    lineClamp: 1

data:
  - img: https://xxx.jpg
    link: https://xugaoyi.com/
    name: 标题
    desc: 描述内容
    author: Evan Xu
    avatar: https://xxx.jpg
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 组件

# 标记

  • Props:

    • text- string

    • type - string``, 可选值：tip | warning | error，默认：tip`

    • vertical - string, 可选值： top | middle，默认： top

  • Usage:

你可以在标题或其他内容中使用标记：

##### 《沁园春·雪》 <Badge text="摘"/>
北国风光<Badge text="注释" type="warning"/>，千里冰封，万里雪飘。

> <Badge text="译文" type="error" vertical="middle"/>: 北方的风光。
1
2
3
4

# 效果：

# 《沁园春·雪》 摘

北国风光注释，千里冰封，万里雪飘。

译文: 北方的风光。

# 代码块选项卡

在<code-group>中嵌套<code-block>来配合使用。在<code-block>标签添加title来指定tab标题，active指定当前tab：

<code-group>
  <code-block title="YARN" active>
  ```bash
  yarn add vuepress-theme-vdoing -D
  ```
  </code-block>

  <code-block title="NPM">
  ```bash
  npm install vuepress-theme-vdoing -D
  ```
  </code-block>
</code-group>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 效果：

    yarn add vuepress-theme-vdoing -D
    1
    npm install vuepress-theme-vdoing -D
    1
    // Make sure to add code blocks to your code group

    注意

    请在<code-group>标签与markdown内容之间使用空行隔开，否则可能会解析不出来。 该组件只适用于放置代码块，放其他内容在体验上并不友好。如您确实需要放置其他内容的选项卡，推荐使用vuepress-plugin-tabs (opens new window)插件。

    编辑 (opens new window)
    使用原生js来替换title属性的悬浮文字提示
    DOM

    ← DOM→

    最近更新
    01
    theme-vdoing-blog博客静态编译问题
    09-16
    02
    搜索引擎
    07-19
    03
    友情链接
    07-19
    更多文章>
    Theme by Vdoing | Copyright © 2019-2022 Evan Xu | MIT License