星光闪耀有点酷
星光闪耀
2022-12-03
目录

Markdown学习笔记优质

# 一、Markdown

# 简介

md_logo

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

# 应用

当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、简书、知乎等

# 编辑器

推荐使用Typora，官网：https://typora.io/ (opens new window)

# 二、徽章

# 什么是徽章

徽章是一种小巧精美的小图标，一般配有相关文字进行辅助说明，可对数据进行监控，链接跳转等，富有表现力。

常见于github项目主页，但其不仅出现于 github 项目主页，凡是能够表现图片的地方都可以出现徽章，本质上是一种 svg 格式的矢量图标。

svg 是矢量图形，png 是标量图形，两者均能实现类似效果,只不过矢量图形不论怎么方法都能保持原样，并不会像 png 那样会失真而已。

svg 无论放大多少倍，依然保持原样，清晰度保持不变。png 一旦放大，立马变得模糊不清。

大多数徽章都是 svg 格式，当然也不排除某些徽章是 png 格式，不论怎么说，一律当成图标使用就可以了。

# 徽章的使用

# 内置

官方自带。详细使用可前往官网 Badge (opens new window)。

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

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

  • type 有三个参数：tip、warning、error。默认是 tip

  • vertical 有两个参数：top、middle。默认是 top

直接在 markdown 文件使用，效果如下：

# 《沁园春·雪》 摘

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

译文: 北方的风光。
# 外置

在markdown中使用

格式:
[![图片文字说明](图片源地址)](超链接地址)  # 即超链接内部嵌套图片

语法：
[![星光闪耀](https://img.shields.io/badge/%E9%97%AA%E4%BA%AE%E9%85%B7%E7%82%AB-%E6%98%9F%E5%85%89%E9%97%AA%E8%80%80%E6%9C%89%E7%82%B9%E9%85%B7-orange)](https://www.kirakira.cool/)
1
2
3
4
5

星光闪耀 (opens new window)

徽章生成网站：https://shields.io/ (opens new window)

本文档主要介绍markdown，不对徽章做过多介绍，详细介绍请 戳我 (opens new window) 了解。

不论是什么语法,最核心最根本的获得到徽章链接，至于不同语言有着各自的语法,按照语言规则手动拼接就好。

如果以徽章的格式为标准，那么可以分为svg 和 png 两类。

如果以徽章的样式为标准，那么可以分为默认样式和自定义样式两类。

如果以徽章的内容数据是否动态为标准，那么可以分为静态数据和动态数据两类。

静态数据意味着数据本身是不变的，只要在线链接不变，那么生成的徽章永远不会改变，而动态数据意味着生成徽章的数据是动态变化的，即使在线链接不变，当数据本身发现变化时,徽章自然随之更新。

# 在线生成徽章的网站

# 三、设置目录

设置之后会根据分级标题来自动生成目录。

[[TOC]]
1

注：github暂未支持。

在github生成TOC的方法：https://github.com/ekalinin/github-markdown-toc (opens new window)

windows系统需要基于golang实现的工具：https://github.com/ekalinin/github-markdown-toc.go (opens new window)

如果你有GO语言的编译环境，可以尝试自己编译，如果没有，可以直接下载编译好的二进制文件。

如windows系统64位 下载：gh-md-toc.windows.amd64.tgz （386 是32位，amd64是64位）

下载解压后，发现没有后缀名无法识别，实际上这是个exe文件，所以只需要暴力地在后面加上.exe就可以开始愉快使用了。

使用方法：

  1. 首先将.md文档复制到gh-md-toc.exe的根目录下
  2. 在该目录下打开系统命令行，输入命令：gh-md-toc.exe README.MD 生成目录
  3. 把生成的目录复制到.md文件即可。

这是gh-md-toc生成的目录：

# 四、标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
1
2
3
4
5
6

口诀：几级标题就是几个#

# 一级标题

# 二级标题

# 三级标题

# 四级标题

# 五级标题
# 六级标题

# 五、文本

# 段落

Markdown 段落没有特殊的格式，直接编写文字，需要段落缩进时使用2个Tab

口诀：段落缩进 2 tab

# 字体

*斜体文本*
或 _斜体文本_
**粗体文本**
或  __粗体文本__
***粗斜体文本***
或 ___粗斜体文本___
1
2
3
4
5
6

口诀：一星斜，两星粗，三星粗斜。

斜体文本

斜体文本

粗体文本

粗体文本

粗斜体文本

粗斜体文本

# 删除线

如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线 ~~ 即可，实例如下：

~~BAIDU.COM~~
1

口诀：删除线两波浪

BAIDU.COM

# 下划线

下划线可以通过 HTML 的<u> 标签来实现：

<u>带下划线的文本</u>
1

口诀：下划线u标签

带下划线的文本

# 文字高亮

文字高亮能使行内部分文字高亮，使用一对反引号。

`html` `css` `javascript`
1

口诀：文本高亮反引号

html css javascript

# 分隔线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

***

*****

- - -

----------
1
2
3
4
5
6
7

口诀：分割线三个以上星减底

# 脚注

脚注是对文本的补充说明。

[^变量]
在文档结尾或其他位置给变量赋值：
[^变量]: 注明框内显示的内容

鼠标移到这里> [^哈喽]
[^哈喽]: 注明框内显示的内容
1
2
3
4
5
6

注：在部分线上预览未支持

鼠标移到这里> ^哈喽

# 六、列表

# 无序列表

使用星号*、加号+或是减号-作为列表标记：

* 第一项
* 第二项

+ 第一项
+ 第二项

- 第一项
- 第二项
1
2
3
4
5
6
7
8

口诀：无序列表星加减

  • 第一项
  • 第二项

使用数字并加上. 号来表示

1. 第一项
2. 第二项
1
2

口诀：有序列表数字加点

  1. 第一项
  2. 第二项

# 折叠列表

<details>
<summary>点我打开关闭折叠</summary>
 折叠内容
 <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
 </ul>
</details>
1
2
3
4
5
6
7
8
9

口诀：折叠列表details可放summary、ul>li、table

注意：<details> 标签内写markdown代码无效，可写html代码，如ul>li、table等

点我打开关闭折叠 折叠内容
  • 1
  • 2
  • 3
包含table的折叠
分类 例词
人称代词-主格 I我，you你，he他，she她，they他们， we我们
人称代词-宾格 me我， you你， him他， her她， them他们， us我们
物主代词 my我的， his他的， your你的（your你们的）， their他们的， hers她的
指示代词 this这， that那， these这些， those 那些
反身代词 myself我自己， himself他自己， themselves他们自己， yourself你(们)自己，herself她自己
疑问代词 who谁， what什么， which哪个
不定代词 some一些， many许多， both两个、两个都， any许多
关系代词 which……的物， who……的人， that……的人或物， who谁， that引导定语从句
相互代词 each other 互相， one another互相
连接代词 who,whom,whose,what,which,whatever,whichever,whoever,whomever
替代词 one（单数），ones（复数）

# 带复选框列表

* [x] 第一项
* [ ] 第二项
* [ ] 第三项
1
2
3

注：在部分线上预览未支持

  • [x] 第一项

  • [ ] 第二项

  • [ ] 第三项

# 列表嵌套

1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项：
    - 第二项嵌套的第一个元素
       - 第三层嵌套
1
2
3
4
5
6
  1. 第一项
    • 嵌套1
    • 嵌套2
  2. 第二项
    • 嵌套1 - 嵌套2

# 七、区块引用

区块引用是在段落开头使用 >符号 ，然后后面紧跟一个空格符号：

> 区块引用
1

区块引用

Typora中回车键自动延伸区块

# 区块嵌套

> 第一层
> > 第二层
> > > 第三层
1
2
3

第一层

第二层

第三层

# 区块中使用列表

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> * 111
> * 222
1
2
3
4
5

区块中使用列表

  1. 第一项
  2. 第二项
    • 111
    • 222

# 列表中使用区块

* 第一项
    > 区块
* 第二项
1
2
3

  • 第一项

    区块

    区块

  • 第二项

# 八、代码

如果是段落上的一个代码片段可以用反引号把它包起来（`），示例：

`alert()`
1

alert()

# 代码区块

用三个反引号 ``` 包裹一段代码，并指定一种语言（也可以不指定），指定代码语言后会有代码的颜色高亮

本代码区块为示例说明：

```javascript
function test() {
	alert('test')
}
```
1
2
3
4
5

效果：

function test() {
	alert('test')
}
1
2
3

# 代码高亮

突出代码块的某些行，使用 {行数-行数}、{行数,行数} 格式，如

输入：

``` js {2,5-7,13}
return {
      // 数据
      options,
      activeKey,
      sourceLabels,
      sourceForm,
      addForm,
      addRules,
      sourceRules,
      // 函数
      displayRender,
      submitProdoce,
      onAddClose,
};
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

输出：


 


 
 
 





 


return {
      // 数据
      options,
      activeKey,
      sourceLabels,
      sourceForm,
      addForm,
      addRules,
      sourceRules,
      // 函数
      displayRender,
      submitProdoce,
      onAddClose,
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 行数区间: 例如 {5-8}, {3-10}, {10-17}
  • 多个单行: 例如 {4,7,9}
  • 行数区间与多个单行: 例如 {4,7-13,16,23-27,40}

# 九、链接

格式：

[链接名称](链接地址)

[链接名称](链接地址 "可选的超链接title")

或

<链接地址>
1
2
3
4
5
6
7

示例：

[百度](https://www.baidu.com/ "百度123")
1

百度 (opens new window)

直接显示链接地址：

<https://www.baidu.com/>
1

https://www.baidu.com/ (opens new window)

# 变量链接

链接可以用变量来代替，文档末尾或其他位置附带变量地址：

这个链接用 1 作为网址变量 [Google][1]
这个链接用 baidu 作为网址变量 [Baidu][baidu]

然后在文档的结尾或其他位置给变量赋值（网址）
  [1]: https://www.google.com/
  [baidu]: https://www.baidu.com/
1
2
3
4
5
6

这个链接用 1 作为网址变量 Google (opens new window)

这个链接用 baidu 作为网址变量 Baidu (opens new window)

# Github仓库中使用内部链接

可使用相对路径（前提是有该路径下的文件）
[test](test.md)
1
2

test

# 锚点链接

本文件中每一个标题都是一个锚点，和HTML的锚点（#）类似

[Markdown](#Markdown)
1

注： github对含有标点符号的标题进行锚点时会忽略掉标点符号， 本页中，如果这样写则无法跳转：[链接](#九、链接) 正确写法：[链接](#九链接)

Markdown

链接

流程图

# 十、图片

和链接的区别是前面多一个感叹号!

![图片名](图片链接)
1

当然，你也可以像链接那样对图片地址使用变量:

这里链接用 img 作为图片地址变量
然后在文档的结尾或其他位置给变量赋值（图片地址）
![RUNOOB][img]
[img]: https://jsd.cdn.zzko.cn/gh/kiraoss/images@main/md_logo.5gv27wwkxr80.webp
1
2
3
4

RUNOOB

# 图片宽高

如下想设置图片宽高，可以使用 <img> 标签。

<img src="https://jsd.cdn.zzko.cn/gh/kiraoss/images@main/md_logo.5gv27wwkxr80.webp" width="50px" height="30px">
1

# 相对路径以及Github中使用图片

不管是在本地还是在github同一个仓库中，如果图片存在，可以使用相对路径。

相对路径图片：

![头像图片](./md-img/test.jpg)
1

github上如果引用其他github仓库中的图片则要注意地址格式：仓库地址/raw/分支名/图片路径 或 https://raw.githubusercontent.com/用户名/仓库名/分支名/图片路径

![其他仓库的图片1](https://github.com/test/vue-music/raw/master/src/common/image/default.png)
或
![其他仓库的图片2](https://raw.githubusercontent.com/test/image_store/master/blog/md_logo.png)
1
2
3
4

其他仓库的图片

其他仓库的图片2

# 十一、表格

制作表格使用 |来分隔不同的单元格，使用-来分隔表头和其他行。

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |
1
2
3
4
表头 表头
单元格 单元格
单元格 单元格

对齐方式

  • -: 设置内容和标题栏居右对齐
  • :- 设置内容和标题栏居左对齐
  • :-: 设置内容和标题栏居中对齐
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
1
2
3
4
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

# 十二、Emoji表情包

Emoji表情英文名的前后加冒号，Typora上先输入冒号再输入首字母有表情提示

:smirk:
1

💋 😸🙈🐴 😏😊😃😄 ☀️

windows 系统下按 Win + . 快速打开表情选择框（不是右侧小键盘的 .）

emoji 网站分享：

# 十三、其他技巧

# 笔记区块

::: note
这个是笔记区块的方法哦:smile_cat:
::: right
2023-01-29 @星光闪耀有点酷
:::
1
2
3
4
5

笔记

这个是笔记区块的方法哦😸

2023-01-29 @星光闪耀有点酷

# 支持的 HTML 元素

不在 Markdown 语法涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等等 ，如：

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
1

使用 Ctrl+Alt+Del 重启电脑

我是使用b标签的加粗字体

# 转义

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用反斜杠转义字符：

**未转义星号显示加粗**
\*\* 转义显示星号 \*\*
1
2

未转义星号显示加粗 ** 转义显示星号 **

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号
1
2
3
4
5
6
7
8
9
10
11
12

*** 以下部分在Github或其他在线预览中暂未支持 ***

# 数学公式

当你需要在编辑器中插入数学公式时，可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如：

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$
1
2
3
4
5
6
7
8

$$ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \ \end{vmatrix} $$

# 图表

```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,

type: pie
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```
```mermaid
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注：在Typora中未支持

# 流程图

语法：
```mermaid
graph TD
A[模块A] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D[模块D]
C -->|条件C2| E[模块E]
C -->|条件C3| F[模块F]
```
1
2
3
4
5
6
7
8
9

流程图相关文章：

https://www.jianshu.com/p/b421cc723da5 (opens new window)

http://www.imooc.com/article/292708 (opens new window)

# 时序图

```mermaid
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
```
1
2
3
4
5

# 甘特图

```mermaid
gantt
title 甘特图
dateFormat  YYYY-MM-DD
section 项目A
任务1           :a1, 2018-06-06, 30d
任务2     :after a1  , 20d
section 项目B
任务3      :2018-06-12  , 12d
任务4      : 24d
```
1
2
3
4
5
6
7
8
9
10
11

# 信息框容器

以下一些内容是 Vdoing 主题提供，并非官方提供。

输入：

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

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

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

::: note
这是笔记容器，主题自带，官方没有
:::

::: tip 我的自定义标题
自定义标题的提示框
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输出：

提示

这是一条提示

注意

这是一条注意

警告

这是一条警告

笔记

这是笔记容器，主题自带，官方没有

我的自定义标题

自定义标题的提示框

如果想要折叠的容器，如下：也可以自定义标题

::: details
这是一个详情块，在 IE / Edge 中不生效
```js
console.log('这是一个详情块')
```
:::
1
2
3
4
5
6
点击查看

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

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

# 布局容器

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

::: right
  [我是右浮动的内容](https://jsd.cdn.zzko.cn/gh/kiraoss/images@main/kira2018071108385834467.72122xd2hik0.webp)
:::

::: theorem VuePress
Vue 驱动的静态网站生成器
::: right
来自 [官网](https://vuepress.vuejs.org/zh/)
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 我是居中的内容

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

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

VuePress

Vue 驱动的静态网站生成器

来自 VuePress官网 (opens new window)

提示

没有 left 和 top、bottom

# 代码块选项卡v1.8.0+

在 <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 内容之间使用空行隔开，否则可能会解析不出来。

    提示

    Vdoing 解释该组件仅适用于放置代码块，放其他内容在体验上并不友好。经过测试，我放入文字也是可以的。

    而且 <code-block> 放在 <code-group> 里时，首行需要缩进两个空格，经过测试，四个空格出问题。

    如果你喜欢 ::: tabs 代替 <code-group>，那么我们可以下载 vuepress-plugin-tabs 插件。点击跳到 Tabs 插件安装 (opens new window)。

    # 普通卡片列表

    如果想使用 友链 功能，但是 vdoing 主题并没有直接在首页实现该功能，要么使用 卡片列表，要么自己手动实现html。而 卡片列表 目前只能使用在 markdown 文档里，下方介绍。

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

    输入：

    ::: cardList
```yaml
- name: George Chan
  desc: 让我给你讲讲他的传奇故事吧
  avatar: https://z3.ax1x.com/2021/09/30/4oKMVI.jpg
  link: https://cyc0819.top/
  bgColor: '#FFB6C1' # 可选，默认 var(--bodyBg)。颜色值有 # 号时请添加单引号
  textColor: '#621529' # 可选，默认 var(--textColor)
  
- name: butcher2000
  desc: 即使再小的帆，也能远航
  avatar: https://jsd.cdn.zzko.cn/gh/Kele-Bingtang/static@master/user/20211029181901.png
  link: https://blog.csdn.net/weixin_46827107
  bgColor: '#CBEAFA' 
  textColor: '#6854A1' 
  
- name: Evan's blog
  desc: 前端的小学生
  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/20200103123203.jpg
  link: https://www.kirakira.cool/
  bgColor: '#B9D59C'
  textColor: '#3B551F'
```
:::
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    输出：

    George Chan

    让我给你讲讲他的传奇故事吧

    butcher2000

    即使再小的帆，也能远航

    Evan's blog

    前端的小学生

    - name: George Chan
  desc: 让我给你讲讲他的传奇故事吧
  avatar: https://z3.ax1x.com/2021/09/30/4oKMVI.jpg
  link: https://cyc0819.top/
  bgColor: '#FFB6C1' # 可选，默认 var(--bodyBg)。颜色值有 # 号时请添加单引号
  textColor: '#621529' # 可选，默认 var(--textColor)
  
- name: butcher2000
  desc: 即使再小的帆，也能远航
  avatar: https://jsd.cdn.zzko.cn/gh/Kele-Bingtang/static@master/user/20211029181901.png
  link: https://blog.csdn.net/weixin_46827107
  bgColor: '#CBEAFA' 
  textColor: '#6854A1' 
  
- name: Evan's blog
  desc: 前端的小学生
  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/20200103123203.jpg
  link: https://www.kirakira.cool/
  bgColor: '#B9D59C'
  textColor: '#3B551F'
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    # 语法

    ::: 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: Vdoing
  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
  link: https://github.com/xugaoyi/vuepress-theme-vdoing
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
```
:::
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    《静夜思》

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

    Vdoing

    🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题

    - name: 《静夜思》
  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  
- name: Vdoing
  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
  link: https://github.com/xugaoyi/vuepress-theme-vdoing
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
    1
    2
    3
    4
    5
    6
    7
    8

    # 图文卡片列表v1.1.0 +

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

    先看效果：

    标题

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

    星光闪耀

    标题

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

    星光闪耀

    标题

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

    星光闪耀
    - img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/20200529162253.jpg
  link: https://www.kirakira.cool/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
  author: 星光闪耀 # 作者，可选
  avatar: https://jsd.cdn.zzko.cn/gh/kiraoss/images@main/kira2018071108385834467.72122xd2hik0.webp # 头像，可选
  
- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/20200530100256.jpg
  link: https://www.kirakira.cool/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: 星光闪耀
  avatar: https://jsd.cdn.zzko.cn/gh/kiraoss/images@main/kira2018071108385834467.72122xd2hik0.webp
  
- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/20200530100257.jpg
  link: https://www.kirakira.cool/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: 星光闪耀
  avatar: https://jsd.cdn.zzko.cn/gh/kiraoss/images@main/kira2018071108385834467.72122xd2hik0.webp
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    ::: cardImgList
```yaml
- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/20200529162253.jpg
  link: https://www.kirakira.cool/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
  author: 星光闪耀 # 作者，可选
  avatar: https://jsd.cdn.zzko.cn/gh/kiraoss/images@main/kira2018071108385834467.72122xd2hik0.webp # 头像，可选
  
- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/20200530100256.jpg
  link: https://www.kirakira.cool/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: 星光闪耀
  avatar: https://jsd.cdn.zzko.cn/gh/kiraoss/images@main/kira2018071108385834467.72122xd2hik0.webp
  
- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store@master/blog/20200530100257.jpg
  link: https://www.kirakira.cool/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: 星光闪耀
  avatar: https://jsd.cdn.zzko.cn/gh/kiraoss/images@main/kira2018071108385834467.72122xd2hik0.webp
```
:::
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    # 语法

    ::: 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：作者头像，可选

    参考资料：

    上次更新: 2023/11/11, 14:53:26
    vuepress-theme-vdoing学习笔记
    Markdown写作排版技巧

    ← Markdown写作排版技巧→

    最近更新
    01
    高效学习的方法
    11-20
    02
    学习计划
    11-13
    03
    Nginx配置SSL证书 curl (60) Peer's Certificate issuer is not recognized
    05-10
    更多文章>
    Theme by Vdoing | Copyright © 2013-2024 星光闪耀有点酷 | MIT License
    苏公网安备 32072402010152号 | 苏ICP备2022047659号-1