這樣的社群連結可以使用在 GitHub 上的 README.md 或是 blog 上的相關 social media 頁面,像是這樣
在想要插入 link 的地方貼上以下程式碼
<!-- https://github.com/joechang0113/socialpage -->
<!-- display the social media buttons in your README -->
[![alt text][1.1]][1]
[![alt text][2.1]][2]
[![alt text][3.1]][3]
[![alt text][4.1]][4]
[![alt text][5.1]][5]
[![alt text][6.1]][6]
<!-- links to social media icons -->
<!-- no need to change these -->
<!-- icons with padding -->
[1.1]: https://i.imgur.com/GmxhYO0.png (instagram icon with padding)
[2.1]: https://i.imgur.com/oFsAcMx.png (facebook icon with padding)
[3.1]: https://i.imgur.com/YCdR3o9.png (twitter icon with padding)
[4.1]: https://i.imgur.com/AYLF0go.png (weibo icon with padding)
[5.1]: https://i.imgur.com/5BWvIrF.png (github icon with padding)
[6.1]: https://i.imgur.com/UA7Oh6z.png (medium icon with padding)
<!-- links to your social media accounts -->
<!-- update these accordingly -->
[1]: https://www.instagram.com/joechang0113
[2]: http://www.facebook.com/joechang0113
[3]: https://twitter.com/joechang0113
[4]: http://weibo.com/7331813538/profile
[5]: https://github.com/joechang0113
[6]: https://medium.com/@joechang0113
<!-- https://github.com/joechang0113/socialpage -->
不要懷疑,請全部貼上,雖然這個在你的 .md
上會佔據一定的版面,但是為了效果就讓步吧!
這時候你的頁面應該已經有這些社群連結的圖案了
將相關連結替換為自己的
[1]: https://www.instagram.com/yourID
[2]: http://www.facebook.com/yourID
[3]: https://twitter.com/yourID
[4]: http://weibo.com/yourID/profile
[5]: https://github.com/yourID
[6]: https://medium.com/@yourID
將上述的 yourID
更改為自己的即可,如果不知道 name 也可以直接把對應的社群連結替換為您要跳轉的頁面,效果是一樣的!
替換後再試試看點擊這些 icon 就能成功連結到自己的 social media 囉!
注意事項,這個方法用在某些
.md
檔案會出現只有跳轉到圖片網址的問題,實測 README.md 可以呈現,如果有朋友知道為什麼或是怎麼解決的也請多指教了!