文章说明
文章作者：鴻塵
文章链接：https://hwame.top/20220228/awesome-images-in-markdown.html
原文作者：吾乃木易先生
原文链接：https://www.52pojie.cn/thread-1522362-1-1.html
参考资料：
- 庆国诞72周年，分享我帖子中的链接小卡片是怎么做的
~2.6貌似有问题，style变成前内容了~- 【已更正】
~由于此前将Hexo默认CSS修改为图片居中了，故本文显示不太顺眼，可移步原文！~- 解决办法：在文章前添加样式即可，
!important不会被其他选择器覆盖掉
2
3
4
5
img {
display: inline ;
}
</style>
之前我分享精品软件的时候用到了链接小卡片，有坛友问我怎么做，虽然我两三言简要回复过了，但没具体说。值此国诞72周年，特来分享。
前排提醒：需要会写基本的
Markdown语法（当然，如果只想学会链接小卡片的话会写图片和链接的语法就可以了）。如果不会Markdown，可以参考论坛里的这篇帖子（点击即可传送）：
1 什么是链接小卡片
这玩意儿实际上叫 badge，翻译过来是徽标的意思。大概是因为我每次用这个都是用作链接，而这玩意儿长得有点像小卡片，所以坛友贴心地起名叫“链接小卡片”。
在论坛中发帖使用请确保使用的是 MD 编辑器，具体使用方法见此贴（点击传送）：
2 使用方法
链接小卡片本质上是借助 
Markdown 图片语法，如果想做成链接，还需用到 Markdown 链接语法。
所有参数值未加特殊说明均不可省略！
由于是通过其他网站实现显示图片，所以要想正常显示，必须确保有网。
前排提醒：本帖不是广告！此网站是开源、非商业、非盈利性网站，没有任何收费的项目！
2.1 单内容链接小卡片
我把只有一个内容项的称为 单内容链接小卡片。比如我的签名的第一个。
2.1.1 语法
1 |  |
2.1.2 示例
1 |  |
效果：
2.1.3 注意事项
- 使用时替换语法代码部分中的汉字内容即可
- 颜色值可省略（从
?开始省略） - 颜色值均指背景颜色，字体颜色会自动调整，无法自定义字体颜色
- 颜色值若使用 16 进制，不要加
#号 - 默认的颜色是：
- 防伪值只是我是这么叫的，因为它在这里不会显示
- 只要出现防伪值，防伪值均不可省略，下同
2.2 双内容链接小卡片
我把有两个内容项的称为 双内容链接小卡片。
2.2.1 语法
1 |  |
2.2.2 示例
1 |  |
效果：
2.2.3 注意事项
- 所有内容均不可省略，包括颜色值
- 这里的颜色值只能修改后内容的颜色值
2.3 图标链接小卡片
我把带有小图标的称为 图标链接小卡片。比如我签名中后面几个。
图标链接小卡片又分为 内置图标链接小卡片 和 自定义图标链接小卡片。
2.3.1 内置图标链接小卡片
内置图标可以直接使用。所有内置图标可以在这里找到（点击传送）：
2.3.1.1 语法
1 |
|
2.3.1.2 示例
1 | 1. 单内容 |
效果：
- 单内容：
- 双内容：
2.3.1.3 修改内置图标颜色
- 部分内置图标默认是白色的，比如上面的示例
- 部分内置图标默认自带颜色，比如：
还有
- 哪些默认带颜色，哪些默认不带，需要自己试
- 内置图标的颜色可以修改
2.3.1.3.1 语法
1 | 1. 单内容 |
2.3.1.3.2 示例
1 | 1. 单内容 |
效果：
2.3.2 自定义图标链接小卡片
自定义图标需将图片转换成 Base64 编码（这样的工具很多，论坛里也有人发过），同时需要原图片的长和宽均 ≥ 14px。
2.3.2.1 语法
1 | 1. 单内容 |
2.3.2.2 示例
我把论坛的 Logo 转换成了 Base64 编码作为示例，不过编码太长了，放进来严重影响阅读，所以就省略不放了。
1 | 1. 单内容 |
效果：
单内容：
双内容：
2.4 双内容自定义颜色
前面提及双内容链接小卡片的语法和示例中可修改的颜色值都只能修改后内容的颜色。本小节将演示如何分别控制双内容的颜色。
2.4.1 语法
1 |  |
2.4.2 示例
1 |  |
效果：
2.4.3 注意事项
- 注意图片语法链接中的“前内容”跑到后面去了，“后内容”跑到前面去了，不要搞反了
- 如果要加上图标，比如上面的示例，直接在图片语法链接末尾加上
&logo=图标名即可，注意&不要忘了 - 如果还要修改图标颜色，再继续在链接末尾继续加上
&logoColor=图标颜色值即可
2.5 增加超链接
我的软件分享贴的链接小卡片是可以点的，本帖当中的部分也是，这是因为在 Markdown 图片语法外层又套娃了一层超链接语法。
2.5.1 语法
1 | [链接小卡片图片显示](超链接地址) |
2.5.2 示例
就是把 2.1 ~ 2.4 学到的放在超链接语法的 [] 里就行。
1 | [](https://www.52pojie.cn/) |
效果：
其他的可以自行尝试。
2.6 样式
有五种样式可供选择。
2.6.1 默认
默认就是这种带立体感的圆角矩形样式。
示例：
1 |  |
效果：
默认实际上就是
&style=plastic。
2.6.2 扁平圆角矩形
2.6.2.1 语法
1 | &style=flat |
2.6.2.2 示例
1 |  |
效果：
2.6.3 扁平直角矩形
2.6.3.1 语法
1 | &style=flat-square |
2.6.3.2 示例
1 |  |
效果：
2.6.4 大扁平圆角矩形 - 字母全大写
2.6.4.1 语法
1 | &style=for-the-badge |
2.6.4.2 示例
1 |  |
效果：
2.6.5 GitHub 交流样式
2.6.5.1 语法
1 | &style=social |
2.6.5.2 示例
1 |  |
效果：
2.7 动态内容
动态内容即显示的内容为可变的，主要用于 GitHub 等网站的某些数据显示。
这里的动态内容只介绍与 GitHub 相关的一部分，想了解更多可以去官网查询。
以 Linux 之父林纳斯·托瓦斯的 Linux 源代码仓库 torvalds/linux 为示例。
2.7.1 Watch
语法：
1 |  |
示例：
1 |  |
效果：
2.7.2 Star
语法：
1 |  |
示例：
1 |  |
效果：
2.7.3 Fork
语法：
1 |  |
示例：
1 |  |
效果：
其他的可以自行尝试。
3 特殊符号问题
有时候需要空格或者其他的特殊符号，直接打在链接里可能会导致结果不符合预期。
解决方法其实很简单，就是把特殊符号转换成 url 编码即可。
3.1 空格示例
之前 App Store 那个示例中是没有空格的，现在添加空格（空格的 url 编码是 %20 ）：
1 |  |
效果：
3.2 短横 - 符号示例
短横符号 - 比较特殊，它没有 url 编码，或者说它的 url 编码就是它本身。 要想在小卡片中显示它也很简单，写两遍就行。
1 |  |
效果：
4. 写在最后
本帖内容的 .md 源文件也一并分享给大家，任何一款 Markdown 编辑器均支持以上所有操作和显示相关内容。
纸上得来终觉浅，绝知此事要躬行。——陆游《冬夜读书示子聿》
看和听再多，也比不上自己动手试一遍。学习这件事儿，眼睛和耳朵告诉脑子会了，也要脑子能指挥手会才行。
祝各位学习愉快，技术大成！
祝祖国繁荣昌盛，国泰民安！
此国旗图案来源于中国政府网的“网络使用的国旗图案标准版本”，使用符合《中华人民共和国国旗法》。