github readme 图片_踩坑总结:markdown实时显示github项目star数

一次偶然的机会,我看到githubdaily分享的github项目,在每个github项目后面都会显示这个项目的star数。

就像下面这样子的效果:

12a159931161f167e683491d609e5f79.png

这并没有什么,一开始以为这不就是显示一张图片而已,然而并非如此,当github项目的star数变化的时候,这个效果也会跟着实时改变!!!

558c1113b4fa03a2b2573f38d9e104e2.gif

可以啊

在进入主题之前,我们学习一波如何在markdown中显示图片,有助于后续的内容理解。

当然已经懂得小伙伴可以直接忽略哈!

3c02531a3bac674358182c43f1f94658.png

如何在markdown中显示一张图片

具体命令:![keyword](path)

方括号中的keyword用于填写描述图片的关键字,可以不写,方便搜索时根据keyword来进行图片搜索。最初的本意是当图片因为某种原因不能被显示时而出现的替代问题。

圆括号中的path,用于填写图片的路径(可以是本地路径或图床链接-网址)。这里需要注意的是,如果是本地路径,当时将markdown文件上传时,可能会出现显示异常,本人通常的做法是将需要显示的图片放在另一个文件下在,而且使用相对路径存放,在上传到github时,也可以实现正常的显示。

(1)显示本地图片(相对路径或绝对路径都行)

例如下面的文件结构

7a1876804ecc216130556a6ce0cbc73d.png

此时在README.md中显示AI_study.jpg的操作为:

![](./img/AI_study.jpg)
ps:在windows下路径的填写方式有所不同,可自行百度~

(2)显示网络上的图片

下面是我网络上搜索的科比的图片,但是安装上面的格式并不能正常显示出图片。

104b6fb53d89a139882d4df1007bda54.png
![](https://baike.baidu.com/pic/%E7%A7%91%E6%AF%94%C2%B7%E5%B8%83%E8%8E%B1%E6%81%A9%E7%89%B9/318773/0/9e3df8dcd100baa1a5fd20114d10b912c9fc2e42?fr=lemma&ct=single#aid=0&pic=9e3df8dcd100baa1a5fd20114d10b912c9fc2e42)

b0bc99d67956d3415e1e9331a4bfe5de.png

直接利用图片的网址是无法正常显示的,需要先将图片上传到图床上,并生成外链才行。

这里通过免费图床“路过图床”,可以实现在markdown中显示图片

08813fb3cbfb5b6b656e2f7f8678c893.png

可以看到第一个是最前面的是图片标志带了个斜杠,且不能正常显示,但是上传到图床之后便可以正常显示。

有很多免费的图床可以使用,不过有很多坑,比如 七牛云生成的外链只能30天,需要自己域名等等。

有了上面的铺垫,我们正式进入今天的主题

上面的内容很好理解,要么是显示本地的图片(也可以是gif),要么是显示上传到图床上的图片。存在两个疑问?

(1)可是首先github上面star的图片在哪里找?

我疯狂左右单击github上star图标,没有用,跳转到其他地方,并非是我想要的结果

4bd1c30b8b2fac104b039f4adac8294f.png

(2)如果是和我们之前显示的图片一样,那么难道要一直更换图片的链接才能实现star数实时变化吗?

带着这两个疑问,我开始去思考,幸运的是,github上的项目是可以下载下来的,同时也会保留原始的格式,通过对作者上传的README文件分析

可以看到作者显示star的操作是:

![Github stars](https://img.shields.io/github/stars/DWCTOD/interview.svg)

通过观察多个这样子示例的操作,可以发现其中的规律是:

圆括号的前面都是

https://img.shields.io/github/stars/

而后面的内容都是跟github项目相关的

例如本人的一个github项目网址是:https://github.com/DWCTOD/interview

去除掉最开头的https://github.com/,并在最结尾加上后缀 .svg

便可以实现我们需要的结果了

84ce27328935ac7df2dc0709b2083447.png

当然事情远没有那么简单,https://img.shields.io/这个网站到底是何方神圣。

通过百度和进入官网可以发现,原来这个神奇的网站,可以制作各类小标志,可以生成静态图也可以生成动态链接图

1f4882b8a6f42590b465a5996e746e41.png

a5e5b8cb4bf31e25307765abb673b4f6.png

静态图的生成方式很简单,
在https://img.shields.io/上找到这个地方

3ff836a87467cb3c457575726249de22.png

通过在label, message,color三个位置输入你想要的内容,然后点击Make Badge按钮即可顺序生成图片的外链接

318b8a28ed60f55ba0209d7d1cd11d79.png

生成结果

24dc181b29db3dc2304f9e0c63822a22.png

更多高逼格的操作,大家可以去探索和发现

3fca6890aff1ffb726975dedca715fac.png

7af69dab55d8412767773c7d02cb118e.png

ea5c39178956ee3814ae538d5f99d002.png
推荐两个供参考的链接: https://www. sohu.com/a/134390224_65 5394 https:// blog.csdn.net/lxxlxx888 /article/details/89791746

原文链接:https://mp.weixin.qq.com/s?__biz=MzU4NTY4Mzg1Mw==&mid=2247486111&idx=2&sn=4162e845341bedd85ff609464c8fcff1&chksm=fd878c7dcaf0056ba9ec2fa10f2063cdbaf337391c6e2e6dba6b3ca86b64f970f6ae88b5dbf0&token=1887521370&lang=zh_CN#rd

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值