吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 5608|回复: 66
收起左侧

[其他原创] 【Markdown】庆国诞72周年,分享我帖子中的链接小卡片是怎么做的

    [复制链接]
吾乃木易先生 发表于 2021-10-2 02:53
本帖最后由 吾乃木易先生 于 2021-10-10 00:14 编辑

之前我分享精品软件的时候用到了链接小卡片,有坛友问我怎么做,虽然我两三言简要回复过了,但没具体说。值此国诞72周年,特来分享。这大概是全网最详细的入门教程。


前排提醒:需要会写基本的 Markdown 语法(当然,如果只想学会链接小卡片的话会写图片和链接的语法就可以了)。如果不会 Markdown,可以参考论坛里的这篇帖子(点击即可传送):


§1 什么是链接小卡片

这玩意儿实际上叫 badge,翻译过来是徽标的意思。大概是因为我每次用这个都是用作链接,而这玩意儿长得有点像小卡片,所以坛友贴心地起名叫“链接小卡片”,就像这样:

Snipaste_2021-10-02_02-38-43.png

在论坛中发帖使用请确保使用的是 MD 编辑器,具体使用方法见此贴(点击传送):


§ 2 使用方法

链接小卡片本质上是借助 这个网站来实现的图片。所以会用到 Markdown 图片语法,如果想做成链接,还需用到 Markdown 链接语法。

所有参数值未加特殊说明均不可省略!

由于是通过其他网站实现显示图片,所以要想正常显示,必须确保有网。

前排提醒:本帖不是广告!此网站是开源、非商业、非盈利性网站,没有任何收费的项目!

2.1 单内容链接小卡片

我把只有一个内容项的称为 单内容链接小卡片。比如我的签名的第一个。

§ 2.1.1 语法

![](https://img.shields.io/badge/内容-防伪值?color=颜色值)

§ 2.1.2 示例

![](https://img.shields.io/badge/吾爱破解-吾乃木易先生?color=ff69b4)

效果:

§ 2.1.3 注意事项

  • 使用时替换语法代码部分中的汉字内容即可
  • 颜色值可省略(从 ? 开始省略)
  • 颜色值均指背景颜色,字体颜色会自动调整,无法自定义字体颜色
  • 颜色值若使用 16 进制,不要加 #
  • 默认的颜色是:
  • 防伪值只是我是这么叫的,因为它在这里不会显示
  • 只要出现防伪值,防伪值均不可省略,下同

§ 2.2 双内容链接小卡片

我把有两个内容项的称为 双内容链接小卡片

§ 2.2.1 语法

![](https://img.shields.io/badge/前内容-后内容-后内容颜色值)

§ 2.2.2 示例

![](https://img.shields.io/badge/52PoJie-吾爱破解-fff)

效果:

§ 2.2.3 注意事项

  • 所有内容均不可省略,包括颜色值
  • 这里的颜色值只能修改后内容的颜色值

§ 2.3 图标链接小卡片

我把带有小图标的称为 图标链接小卡片。比如我签名中后面几个。

图标链接小卡片又分为 内置图标链接小卡片自定义图标链接小卡片

§ 2.3.1 内置图标链接小卡片

内置图标可以直接使用。所有内置图标可以在这里找到(点击传送):

§ 2.3.1.1 语法

1. 单内容
![](https://img.shields.io/badge/内容-防伪值?color=颜色&logo=内置图标名)

;2. 双内容
![](https://img.shields.io/badge/前内容-后内容-后内容颜色值?logo=内置图标名)

§2.3.1.2 示例

1. 单内容
![](https://img.shields.io/badge/QQ-吾乃木易先生?color=4ab7f5&logo=tencentqq)

;2. 双内容
![](https://img.shields.io/badge/macOS-10.13+-367aff?logo=apple)

效果:

  1. 单内容:
  2. 双内容:

§ 2.3.1.3 修改内置图标颜色

  • 部分内置图标默认是白色的,比如上面的示例
  • 部分内置图标默认自带颜色,比如: 还有
  • 哪些默认带颜色,哪些默认不带,需要自己试
  • 内置图标的颜色可以修改
§ 2.3.1.3.1 语法
1. 单内容
![](https://img.shields.io/badge/内容-防伪值?color=颜色&logo=内置图标名&logoColor=内置图标颜色值)

;2. 双内容
![](https://img.shields.io/badge/前内容-后内容-后内容颜色值?logo=内置图标名&logoColor=内置图标颜色值)
§ 2.3.1.3.2 示例
1. 单内容
![](https://img.shields.io/badge/QQ-吾乃木易先生?color=fff&logo=tencentqq&logoColor=4ab7f5)

;2. 双内容
![](https://img.shields.io/badge/macOS-10.13+-367aff?logo=apple&logoColor=f9d694)

效果:

§ 2.3.2 自定义图标链接小卡片

自定义图标需将图片转换成 Base64 编码(这样的工具很多,论坛里也有人发过),同时需要原图片的长和宽均 ≥ 14px

§ 2.3.2.1 语法

1. 单内容
![](https://img.shields.io/badge/内容-防伪值?color=颜色值&logo=data:image/png;base64,一长串Base64编码)

;2. 双内容
![](https://img.shields.io/badge/前内容-后内容-防伪值?color=后内容颜色值&logo=data:image/png;base64,一长串Base64编码)

§ 2.3.2.2 示例

我把论坛的 Logo 转换成了 Base64 编码作为示例,不过编码太长了,放进来严重影响阅读,所以就省略不放了。

1. 单内容
![](https://img.shields.io/badge/吾乃木易先生-吾乃木易?color=fff&logo=data:image/png;base64,AAA...A==)

;2. 双内容
![](https://img.shields.io/badge/吾爱破解-吾乃木易先生-吾乃木易?color=fff&logo=data:image/png;base64,AAA...A==)

效果:

  1. 单内容:
  2. 双内容:

§ 2.4 双内容自定义颜色

前面提及双内容链接小卡片的语法和示例中可修改的颜色值都只能修改后内容的颜色。本小节将演示如何分别控制双内容的颜色。

§ 2.4.1 语法

![](https://img.shields.io/badge/后内容-防伪值?label=前内容&colorA=前内容颜色值&colorB=后内容颜色值)

§ 2.4.2 示例

![](https://img.shields.io/badge/macOS-吾乃木易先生?label=AppStore&colorA=fff&colorB=367aff&logo=appstore)

效果:

§ 2.4.3 注意事项

  • 注意图片语法链接中的“前内容”跑到后面去了,“后内容”跑到前面去了,不要搞反了
  • 如果要加上图标,比如上面的示例,直接在图片语法链接末尾加上 &logo=图标名 即可,注意 & 不要忘了
  • 如果还要修改图标颜色,再继续在链接末尾继续加上 &logoColor=图标颜色值 即可

§ 2.5 增加超链接

我的软件分享贴的链接小卡片是可以点的,本帖当中的部分也是,这是因为在 Markdown 图片语法外层又套娃了一层超链接语法。

§ 2.5.1 语法

[链接小卡片图片显示](超链接地址)

§ 2.5.2 示例

就是把 § 2.1 ~ § 2.4 学到的放在超链接语法的 [] 里就行。

[![](https://img.shields.io/badge/吾爱破解-吾乃木易先生?color=fff&logo=data:image/png;base64,AAA...A==)](https://www.52pojie.cn/)

效果:

其他的可以自行尝试。


§ 2.6 样式

有五种样式可供选择。

§ 2.6.1 立体胶质圆角矩形

示例:

![](https://img.shields.io/badge/style=plastic-吾乃木易先生?label=Git&colorA=fff&colorB=f14d28&logo=git&style=plastic)

效果:

§ 2.6.2 扁平圆角矩形(默认)

§ 2.6.2.1 语法

&style=flat

§ 2.6.2.2 示例

![](https://img.shields.io/badge/style=flat-吾乃木易先生?label=Git&colorA=fff&colorB=f14d28&logo=git&style=flat)

如果什么都不加,默认就相当于 &style=flat

效果:

§ 2.6.3 扁平直角矩形

§ 2.6.3.1 语法

&style=flat-square

§ 2.6.3.2 示例

![](https://img.shields.io/badge/style=flat--square-吾乃木易先生?label=Git&colorA=fff&colorB=f14d28&logo=git&style=flat-square)

效果:

§ 2.6.4 大扁平圆角矩形 - 字母全大写

§ 2.6.4.1 语法

&style=for-the-badge

§ 2.6.4.2 示例

![](https://img.shields.io/badge/style=for--the--badge-吾乃木易先生?label=Git&colorA=fff&colorB=f14d28&logo=git&style=for-the-badge)

效果:

§ 2.6.5 GitHub 交流样式

§ 2.6.5.1 语法

&style=social

§ 2.6.5.2 示例

![](https://img.shields.io/badge/style=social-吾乃木易先生?label=Git&colorA=fff&colorB=f14d28&logo=git&style=social)

效果:


§ 2.7 动态内容

动态内容即显示的内容为可变的,主要用于 GitHub 等网站的某些数据显示。

这里的动态内容只介绍与 GitHub 相关的一部分,想了解更多可以去官网查询。

以 Linux 之父林纳斯·托瓦斯的 Linux 源代码仓库 torvalds/linux 为示例。

§ 2.7.1 Watch

语法:

![](https://img.shields.io/github/watchers/用户名/仓库名?style=social&label=Watch)

示例:

![](https://img.shields.io/github/watchers/torvalds/linux?style=social&label=Watch)

效果:

§ 2.7.2 Star

语法:

![](https://img.shields.io/github/stars/用户名/仓库名?style=social)

示例:

![](https://img.shields.io/github/stars/torvalds/linux?style=social&label=star)

效果:

§ 2.7.3 Fork

语法:

![](https://img.shields.io/github/forks/用户名/仓库名?style=social&label=Fork)

示例:

![](https://img.shields.io/github/forks/torvalds/linux?style=social&label=Fork)

效果:

其他的可以自行尝试。


§ 3 特殊符号问题

有时候需要空格或者其他的特殊符号,直接打在链接里可能会导致结果不符合预期。

解决方法其实很简单,就是把特殊符号转换成 url 编码即可。

§ 3.1 空格示例

之前 App Store 那个示例中是没有空格的,现在添加空格(空格的 url 编码是 %20 ):

![](https://img.shields.io/badge/macOS-吾乃木易先生?label=App%20Store&colorA=fff&colorB=367aff&logo=appstore)

效果:

§ 3.2 短横 - 符号示例

短横符号 - 比较特殊,它没有 url 编码,或者说它的 url 编码就是它本身。 要想在小卡片中显示它也很简单,写两遍就行。

![](https://img.shields.io/badge/----everything--is--local-吾乃木易先生?label=git&colorA=fff&colorB=f14d28&logo=git)

效果:


§ 4. 写在最后

本帖内容的 .md 源文件也一并分享给大家,任何一款 Markdown 编辑器均支持以上所有操作和显示相关内容:

Snipaste_2021-10-02_02-49-26.png

纸上得来终觉浅,绝知此事要躬行。——陆游《冬夜读书示子聿》

看和听再多,也比不上自己动手试一遍。学习这件事儿,眼睛和耳朵告诉脑子会了,也要脑子能指挥手会才行。

祝各位学习愉快,技术大成!
祝祖国繁荣昌盛,国泰民安!

此国旗图案来源于中国政府网的“网络使用的国旗图案标准版本”,使用符合《中华人民共和国国旗法》。

链接小卡片的使用.zip

10.18 KB, 下载次数: 150, 下载积分: 吾爱币 -1 CB

解压即可得到 .md 源文件

免费评分

参与人数 34吾爱币 +46 热心值 +29 收起 理由
Pandolar + 3 + 1 我很赞同!
汪太恒 + 1 + 1 谢谢@Thanks!
聪本 + 2 + 1 我很赞同!
yht_99 + 1 谢谢@Thanks!
The-rapist + 2 + 1 用心讨论,共获提升!哈哈学会了!
如果我可以忘记 + 1 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!
初城 + 1 + 1 我很赞同!
abcbbb007 + 1 + 1 热心回复!
Crazykim + 1 用心讨论,共获提升!
Luox + 1 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!
江湖客偏锋 + 1 + 1 我很赞同!
Azad + 1 + 1 我很赞同!
mgc + 1 + 1 用心讨论,共获提升!
Megix + 1 + 1 用心讨论,共获提升!
VincentZ + 1 + 1 热心回复!
zhanyuezi + 1 用心讨论,共获提升!
第三世界 + 1 热心回复!
hez + 1 我很赞同!
李小天 + 1 + 1 谢谢@Thanks!
春又来人已去 + 1 + 1 鼓励转贴优秀软件安全工具和文档!
haoren6205 + 1 + 1 不明觉厉
tanghengvip + 2 + 1 感谢分享!MD!YYDS! 希望看到论坛更多排版精良的帖
信息安全 + 1 + 1 谢谢@Thanks!
_小白 + 1 + 1 我很赞同!
Gandalf + 1 谢谢@Thanks!
xxbuer + 2 + 1 热心回复!
茫茫狐 + 1 + 1 谢谢@Thanks!
涛之雨 + 4 热心回复!
wh2510 + 1 谢谢@Thanks!
苏紫方璇 + 7 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!
pwzx + 1 + 1 谢谢@Thanks!
sdaza + 1 用心讨论,共获提升!
vethenc + 2 + 1 谢谢@Thanks!
simple98 + 1 + 1 鼓励转贴优秀软件安全工具和文档!

查看全部评分

本帖被以下淘专辑推荐:

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

 楼主| 吾乃木易先生 发表于 2021-10-4 21:53
本帖最后由 吾乃木易先生 于 2021-10-4 21:56 编辑

我 Typora 用的是这个主题:


Megix 发表于 2021-10-26 16:07
吾乃木易先生 发表于 2021-10-15 22:15
我是装了黑苹果之后,键盘上空格旁边的 |\ 这个键直接就打出来 § 符号了,按住 Shift 的话打出来就是 ± ...

可惜我用的widnwos, 但是我可以用javascript在parse之前替换, 把`## \$/`统统替换为 `## §`
simple98 发表于 2021-10-2 03:13
咦,挺有用的小卡片,学废了,其实看不大懂,不过现成的语法真的很赞
 楼主| 吾乃木易先生 发表于 2021-10-2 03:18
simple98 发表于 2021-10-2 03:13
咦,挺有用的小卡片,学废了,其实看不大懂,不过现成的语法真的很赞

看不懂没关系,直接用你想呈现的替换我这里面语法部分的文字解释就能用
李佑辰 发表于 2021-10-2 03:52

pswmz 发表于 2021-10-2 06:15
学习到了,以后研究
tl;dr 发表于 2021-10-2 06:48
这样确实好看
逆劫古修 发表于 2021-10-2 06:51
受教了,感谢分享,国庆节快乐
vethenc 发表于 2021-10-2 07:11
感谢耐心详细的讲解,这么有趣的功能赶紧学起来
zhansh 发表于 2021-10-2 07:16
![](https://img.shields.io/badge/吾爱破解-吾乃木易先生?color=ff69b4)
lxj2004 发表于 2021-10-2 07:35
这个创意不错,挺好的
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2022-11-27 07:55

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表