为您的 GitHub 个人资料创建一个精美的 README 文件
如果你经常访问其他人的 GitHub 个人资料,你可能最近注意到,有些人的个人资料里有一些精美的图片、描述和统计数据。这些就是全新的 GitHub 个人资料README。它们算是 GitHub 的一项隐藏功能,本文将向你展示如何创建个人资料,以及如何使用一些巧妙的技巧和工具让它脱颖而出!
如何创建自己的
创建 GitHub 个人资料README非常简单,但你可能不会自己找到它。要创建个人资料,请访问https://github.com/new,就像创建普通仓库一样。将仓库命名为你的用户名——在我的例子中是 `<username>` MartinHeinz/MartinHeinz。输入用户名后,你会看到一条消息,告诉你这个秘密/特殊仓库的存在:
这就是你需要做的全部,但我建议你在开发你的炫酷项目时将仓库设置为私有README,以免在你的个人资料中显示一些损坏的内容。
您还可以勾选“使用 README 文件初始化此仓库”,因为 README 文件是仓库显示在个人资料中的必要条件。此外,您还可以添加其他文件,例如代码、GIF、图片等等。说到这……
让它脱颖而出
我们有一个存储库README,但是内容呢?你可以简单地填入一些关于你自己的信息、你的电子邮件联系方式就完事了,但我们可以做得更好。
我建议添加一个漂亮的标题,让它更具个性化。你可以在标题中包含你的姓名或职位,内容则由你决定。有很多非常漂亮且富有创意的标题示例,例如:
- https://github.com/WaylonWalker/WaylonWalker
- https://github.com/stephenajulu/stephenajulu
- https://github.com/jh3y/jh3y
那么,如何将其添加到项目中呢README?首先,将页眉图片添加到您的代码仓库,使其公开托管。接下来,在项目顶部添加以下代码行README.md:
[](https://some-url.dev/)
这是一个基本的 Markdown 代码,用于嵌入图片。它还包含了 URL,因此您可以将图片链接到您的个人网站,例如。
GIF 和表情符号
让你的内容README更有趣、更吸引人的另一种方法是添加各种 GIF 或表情符号。我个人喜欢在每个标题开头添加表情符号,例如:
我发现获取相关表情符号最简单的方法是在https://emojipedia.org/emoji/上搜索表情符号名称,然后在https://www.fileformat.info/index.htm上查找其对应的 HTML 实体。这些 HTML 实体可以包含在 Markdown 中,您的浏览器应该能够正确渲染它们。
如果你觉得表情符号不够生动,想要为页面增添一些动态效果README,那么你还可以添加 GIF 动图。添加 GIF 动图时,你需要将.gif文件实际托管在自己的图库中(例如作为页眉图片),或者托管在外部网站(例如https://imgur.com/)。无论托管在哪里,你都需要使用以下代码将其插入:
<img src="https://raw.githubusercontent.com/<OWNER>/<OWNER>/master/<GIF_NAME>.gif" width="30px">
GitHub Markdown 中可以使用一些 HTML 标签,`<img>` 标签<img>就是其中之一。这使得在我的项目中添加图片和 GIF 变得非常容易,例如README:
# Hello, folks! <img src="https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/wave.gif" width="30px">
展示您的代码库
每个人的 GitHub 个人资料实际上就是一个展示你的代码仓库并突出你的活动/贡献的地方。借助 GitHub ReadmeREADME Stats ,你可以更好地展示这些信息。GitHub Readme Stats 是一款可以生成你的贡献和代码仓库的 GitHub 统计数据并将其附加到你的个人资料中的工具。如果你决定使用所有可用的统计数据卡片,你可能会得到类似这样的结果:README
每张卡片都提供了丰富的自定义选项,包括主题、图标和显示语言。您可以使用以下模式生成任何一张卡片:
<img align="center" src="https://github-readme-stats.vercel.app/api/<CARD_TYPE>/?username=<USERNAME>&theme=<THEME_NAME>" />
这里CARD_TYPE可以填写top-langs热门语言列表或pin置顶仓库。如果留空,则默认显示 GitHub 用户统计信息。要查看更多自定义选项,请参阅github-readme-stats 仓库中的文档,或者您可以参考我的设置(链接在此),因为我几乎使用了所有可用选项来使卡片样式与我的其他设置保持一致README。
突出你的技能
个人资料中经常会出现的另一项内容是他们的技能和常用技术列表。为了更好地展示这些信息,可以使用shields.io 的徽章。它们有很多样式,但我个人比较喜欢这种样式:
要创建这种徽章,您需要按照以下模式添加一行 Markdown 代码:

如果您不喜欢这种风格,可以访问shields.io尝试不同的颜色、格式和样式。如果您像我一样喜欢在徽章上使用图标,那么simpleicons.org或许能帮到您,因为它列出了许多可用于此的图标。如果这些图标没有直接包含在徽章中,您仍然可以手动下载并编码它们base64。Markdown 代码如下所示:

包括社交媒体
你的个人资料中一定要包含联系方式,无论是邮箱、推特账号、领英账号还是其他社交媒体账号。无论你选择哪种方式,都可以使用图标链接,方便他人查找/注意到你。
要将这些内容添加到文本中,您可以使用以下 Markdown 语法:
<!-- Actual text -->
You can find me on [![Twitter][1.2]][1], or on [![LinkedIn][3.2]][3].
<!-- Icons -->
[1.2]: http://i.imgur.com/wWzX9uB.png (twitter icon without padding)
[2.2]: https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/linkedin-3-16.png (LinkedIn icon without padding)
<!-- Links to your social media accounts -->
[1]: https://twitter.com/Martin_Heinz_
[2]: https://www.linkedin.com/in/heinz-martin/
渲染后,上面的 Markdown 代码看起来会像这样:
结论
力求简洁,富有创意和原创性,但最重要的是要体现你自己的风格。
希望这篇文章能给你创建自己的 GitHub 个人资料提供足够的灵感README。除了这篇文章,你可能还会发现我的源代码README很有用——你可以访问https://github.com/MartinHeinz/MartinHeinz查看。如果你需要更多示例来帮助你入门,我建议你阅读awesome-github-profile-readmeREADME中的一些示例。





