使用小部件创建 GitHub 个人资料 README.md

2025-05-25

使用小部件创建 GitHub 个人资料 README.md

自从 GitHub 发布了允许用户添加个人资料级别的 Readme 文件来展示自己的兴趣、个人简介、贡献等功能后,我就一直想在我的GitHub 个人资料中添加一个。在实现这个功能的同时,我想为什么不把它记录下来呢?还有什么比写一篇博文更好的方式呢? 

我该怎么办?

  1. 使用带有自述文件的 github 网络界面创建一个新的存储库。
  2. 使用 markdown 将内容添加到该自述文件中。
  3. 添加一些小工具来增强 GitHub 个人资料的功能。例如GitHub 统计信息GitHub StreakStackOverflow 声誉热门语言等。

创建 Readme GitHub 个人资料

步骤 1:转到https://github.com/,在最右上角单击 + 图标,然后单击新建存储库。

步骤 2:输入仓库名称。它应该与你的 GitHub 用户名相同。我的 GitHub 用户名是kritika-pattalam,所以我输入了这个。

步骤3:确保选择“公开”选项。(PS:只有当存储库公开时,其他人才能查看 Github 配置文件。)

步骤 4:选择使用 README 初始化此存储库。

步骤 5:单击“创建存储库”

使用用户名创建一个新的存储库

您的 github 个人资料自述文件已创建,其中包含虚拟内容,可供您开始使用。

创建新存储库后的虚拟 Markdown 部分

将 Markdown 添加到 Readme.md 文件

Markdown 是一种轻量级标记语言,可用于向纯文本文档添加格式化元素。它可用于向自述文件添加任何内容。
虽然 Markdown 是一种标记语言,但它不接受 CSS 类,因此可以使用普通的 HTML 属性(例如图像的 width 和段落标签的 align="center" )来对齐布局。了解更多关于 Markdown 的信息,请访问Markdown 速查表。

小部件

您可以将以下代码添加到您的 Markdown 文件中,并将 {username} 替换为您的 GitHub 个人资料用户名。此外,您还可以选择其他选项,例如选择您自己的主题、
是否显示图标等。要了解更多选项,请参阅Github Widgets。

#### Github Stats
<img src="https://github-readme-stats.vercel.app/api?username={username}&show_icons=true&theme=gotham" alt="github stats" width="45%" align="right"/>
Enter fullscreen mode Exit fullscreen mode
### Github Streaks
<img src="https://github-readme-streak-stats.herokuapp.com/?user=kritika-pattalam&theme=dark" width="48%" >
Enter fullscreen mode Exit fullscreen mode
### Top Languages
 ![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=kritika-pattalam&layout=compact)
Enter fullscreen mode Exit fullscreen mode

使用 Flair 进行 Stackoverflow 声誉

如果您有 stackoverflow 帐户,则可将其添加到您的 github 个人资料中以反映您的 SO 声誉,这很简单。

步骤 1:前往你的 Stackoverflow 帐户,点击“编辑个人资料和设置”。
步骤 2:向下滚动到网站设置下的Flair 。
步骤 3:将代码片段复制粘贴到你的 Readme 文件中。

Stackoverflow 个人资料 - 关于如何获得天赋

最后,完成所有修改后,提交 readme.md 文件,然后你就应该能看到你的 Readme.md GitHub 个人资料了。我的可以在Kritika 的 Github 个人资料中查看。

请在下方评论区留言,告诉我你的想法。欢迎反馈和建议!

参考:

让我们在Twitter | LinkedIn上联系,进行更多与 Web 开发相关的聊天。

文章来源:https://dev.to/kritikapattalam/create-a-github-profile-readme-md-with-widgets-47j7
PREV
如何成为一名成功的开发人员
NEXT
用于创建 JavaScript/React App 的 API 列表