居然在實現這張圖片效果過程中，我發現了一個寶藏級網站！
- 2019 年 11 月 23 日
- 筆記
一次偶然的機會，我看到githubdaily分享的github項目，在每個github項目後面都會顯示這個項目的star數。
就像下面這樣子的效果：
這並沒有什麼，一開始以為這不就是顯示一張圖片而已，然而並非如此，當github項目的star數變化的時候，這個效果也會跟着實時改變！！！
可以啊
在進入主題之前，我們學習一波如何在markdown中顯示圖片，有助於後續的內容理解。
當然已經懂得小夥伴可以直接忽略哈！
如何在markdown中顯示一張圖片
具體命令：
方括號中的keyword用於填寫描述圖片的關鍵字，可以不寫，方便搜索時根據keyword來進行圖片搜索。最初的本意是當圖片因為某種原因不能被顯示時而出現的替代問題。
圓括號中的path，用於填寫圖片的路徑（可以是本地路徑或圖床鏈接-網址）。這裡需要注意的是，如果是本地路徑，當時將markdown文件上傳時，可能會出現顯示異常，本人通常的做法是將需要顯示的圖片放在另一個文件下在，而且使用相對路徑存放，在上傳到github時，也可以實現正常的顯示。
（1）顯示本地圖片（相對路徑或絕對路徑都行）
例如下面的文件結構
此時在README.md中顯示AI_study.jpg的操作為：
ps:在windows下路徑的填寫方式有所不同，可自行百度～
（2）顯示網絡上的圖片
下面是我網絡上搜索的科比的圖片，但是安裝上面的格式並不能正常顯示出圖片。
直接利用圖片的網址是無法正常顯示的，需要先將圖片上傳到圖床上，並生成外鏈才行。
這裡通過免費圖床「路過圖床」，可以實現在markdown中顯示圖片
可以看到第一個是最前面的是圖片標誌帶了個斜杠，且不能正常顯示，但是上傳到圖床之後便可以正常顯示。
有很多免費的圖床可以使用，不過有很多坑，比如 七牛雲生成的外鏈只能30天，需要自己域名等等。
有了上面的鋪墊，我們正式進入今天的主題
上面的內容很好理解，要麼是顯示本地的圖片（也可以是gif），要麼是顯示上傳到圖床上的圖片。 存在兩個疑問？
（1）可是首先github上面star的圖片在哪裡找？
我瘋狂左右單擊github上star圖標，沒有用，跳轉到其他地方，並非是我想要的結果
（2）如果是和我們之前顯示的圖片一樣，那麼難道要一直更換圖片的鏈接才能實現star數實時變化嗎？
帶着這兩個疑問，我開始去思考，幸運的是，github上的項目是可以下載下來的，同時也會保留原始的格式，通過對作者上傳的README文件分析
可以看到作者顯示star的操作是：
通過觀察多個這樣子示例的操作，可以發現其中的規律是：
圓括號的前面都是
https://img.shields.io/github/stars/
而後面的內容都是跟github項目相關的
例如本人的一個github項目網址是：https://github.com/DWCTOD/interview
去除掉最開頭的https://github.com/，並在最結尾加上後綴 .svg
便可以實現我們需要的結果了
當然事情遠沒有那麼簡單，https://img.shields.io/這個網站到底是何方神聖。
通過百度和進入官網可以發現，原來這個神奇的網站，可以製作各類小標誌，可以生成靜態圖也可以生成動態鏈接圖。
靜態圖的生成方式很簡單，
在https://img.shields.io/上找到這個地方
通過在label， message，color三個位置輸入你想要的內容，然後點擊Make Badge按鈕即可順序生成圖片的外鏈接
生成結果
更多高逼格的操作，大家可以去探索和發現
推薦兩個供參考的鏈接： https://www.sohu.com/a/134390224_655394 https://blog.csdn.net/lxxlxx888/article/details/89791746
