天天看點

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)

讓我們開始吧!

按照下面這個簡單演練中的步驟,在您的 GitHub 個人資料上自定義您的 Readme.md,使其看起來更有吸引力。我還提供了一些很酷的元素來增加趣味!

如果您的 GitHub 個人資料看起來像這樣 👇…

讀完本篇文章可以把它變成像我這樣 👇 甚至更酷!

https://github.com/wanghao221 (可以的話給個星星吧)
三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)
來跟我一起操作

1.建立一個新的存儲庫

去 👉

https://github.com/new

近入存儲庫名稱,該名稱應與您的使用者名相同。這将建立一個秘密存儲庫。

将存儲庫設為公開。

選中該框 - 添加自述檔案。

然後單擊建立存儲庫。

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)

2.更新README檔案

初始檔案看起來像這樣,帶有一條簡單的消息。

您可以通過單擊 右側的“編輯自述檔案”按鈕來編輯檔案。

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)

如您所見,該檔案提供了一個使用 Markdown 制作的模闆。

您可以根據自己的喜好對其進行編輯。

單擊Commit changes。您還可以添加送出消息。

3.✨美化您的個人資料!✨

有很多開源元素可用于實作漂亮的個人資料頁面。這是可供選擇的資源清單!

GitHub README 統計

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)

為您的 github 自述檔案動态生成的統計資訊:

github上檢視:

https://github.com/anuraghazra/github-readme-stats

GitHub 個人資料獎杯

🏆 在你的自述檔案中添加動态生成的 GitHub Trophy

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)
https://github.com/ryo-ma/github-profile-trophy

添加标題或封面圖檔

[![MasterHead](your image link)](your GitHub link)

自定義 HEADER 生成器

自定義橫幅生成器

添加浮動圖像或 GIF

<img align="right" alt="Coding" width="400" src="add your link here">

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)

社交圖示部分

<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/twitter.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/linkedin.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/instagram.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/youtube.svg" alt="" height="30" width="40" /></a>
</p>      

語言和工具部分

<h3 align="left">Languages and Tools:</h3>
<p align="left"> <a href="https://www.cprogramming.com/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg" alt="c" width="40" height="40"/> </a> <a href="https://www.w3schools.com/cpp/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg" alt="cplusplus" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://www.figma.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg" alt="figma" width="40" height="40"/> </a> <a href="https://flutter.dev" target="_blank"> <img src="https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg" alt="flutter" width="40" height="40"/> </a> <a href="https://git-scm.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/> </a> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.linux.org/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/linux/linux-original.svg" alt="linux" width="40" height="40"/> </a> <a href="https://www.photoshop.com/en" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg" alt="photoshop" width="40" height="40"/> </a> <a href="https://www.python.org" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg" alt="python" width="40" height="40"/> </a> </p>      

更多開發圖示

GitHub streak

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)

1.将下面的 markdown 複制粘貼到您的 GitHub 個人資料自述檔案中

1.将 ?user= 之後的值替換為您的 GitHub 使用者名

[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=DenverCoder1)](https://git.io/streak-stats)

1

在這裡定制👉點選我!

Spotify 播放

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)
https://github.com/JeffreyCA/spotify-recently-played-readme

徽章 - 盾牌

![badges1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n8fc8zw8pawxveffitx.png)

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)

語言、工具和社交圖示徽章

更多徽章

自述檔案輸入 SVG ⌨️

GitHub 倉庫

示範

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)

觀看次數計數器

GitHub 上檢視:

https://github.com/antonkomarev/github-profile-views-counter

部落格文章工作流程

三分鐘讓你也擁有一個很酷炫的GitHub展示頁面(保姆級教程01)
https://github.com/gautamkrishnar/blog-post-workflow