Easiest way to set up your Github profile page Setting up the repo Using images Headings and text in markdown Set up custom tech badges GitHub Stats Github Stats Card Top Languages Card Wakatime Week Stats Additional inspiration

2025-05-24

设置 Github 个人资料页面的最简单方法

设置 repo

使用图像

Markdown 中的标题和文本

设置自定义技术徽章

GitHub 统计信息

Github 统计卡

顶级语言卡

Wakatime 周统计数据

额外的灵感

如果你是一名开发者，你可能有一个 GitHub 账户，但如果你像我一样，你的个人资料页面可能空空如也。我甚至会说，简直是一片荒芜。毫无趣味？如果真是这样，那么你来对地方了，因为在本教程中，我将向你展示一些快速简便的技巧，让你的 GitHub 个人资料看起来至少还算美观。

如果您更喜欢视频版本，您可以观看我在 YouTube 上设置我的 GitHub 个人资料页面，然后您可以继续观看：

设置 repo

首先，你需要一个 GitHub 账户，我假设你已经拥有了。你还需要创建一个超级秘密类型的仓库，这个仓库的名称与你的 GitHub 账户名完全相同。你需要用一个 ReadMe 文件将其初始化为公开仓库，因为所有神奇的事情都在这里发生。

我们需要用 Markdown 编辑 readme 文件，提交修改后，所有修改都会显示在我们的个人资料页面上。您可以直接在 GitHub 的文件编辑器中进行所有这些编辑，也可以使用您常用的文本编辑器进行编辑，完成后再将修改上传到您的代码库。如果您不熟悉 Markdown 或需要快速复习，可以随时参考GitHub 上的Markdown 速查表。

使用图像

您可以在 ReadMe 文件中使用图片，就像在常规 Markdown/HTML 中一样。为了方便访问，您可以选择将图片上传到与个人资料 ReadMe 相同的仓库中，然后可以像这样访问它们：

![logo](BannerTransparent.png "banner")

// Logo is the image alt text
// BannerTransparent.png is the image we are showing (it needs to be on the same level as the ReadMe file)
// banner is the popup text you get on hover. Feel free to change these to fit your image.
Enter fullscreen mode Exit fullscreen mode

或者像这样：

<img src="/BannerTransparent.png" alt="banner" />

// Regular HTML works in markdown
Enter fullscreen mode Exit fullscreen mode

您还可以使用“align”属性（仅适用于 HTML 语法）将图像以及其他页面元素左对齐、右对齐或居中对齐：

<img src="/BannerTransparent.png" alt="banner" align="center" />

// Instead of "center" you can use "left" or "right"
Enter fullscreen mode Exit fullscreen mode

Markdown 中的标题和文本

要创建标题，您需要使用井号符号 - #。符号的数量决定了标题的级别。

# Hi there and welcome to my GitHub page 👋 - level 1

## Hi there and welcome to my GitHub page 👋 - level 2

### Hi there and welcome to my GitHub page 👋 - level 3

#### Hi there and welcome to my GitHub page 👋 - level 4

##### Hi there and welcome to my GitHub page 👋 - level 5

###### Hi there and welcome to my GitHub page 👋 - level 6
Enter fullscreen mode Exit fullscreen mode

个人资料的主要部分可以随意书写，无需特定的 Markdown 语法，GitHub 甚至会提供一些提示，例如“我目前正在从事……”、“我的兴趣是……”等等。您可以根据自己的喜好进行自定义，但我想重点介绍一些非常有用的工具，可以用来展示您的技能、工具、编程语言和其他 GitHub 数据。

设置自定义技术徽章

我们大多数人都希望展示日常工作中使用的技术。有两个很棒的工具可以为你使用的几乎所有技术创建非常漂亮且闪亮的徽章。这两个工具是Shields.io和SimpleIcons.org，以下是使用它们创建徽章的示例。

风格：徽章

反应
角度
JavaScript
萨斯
盖茨比
GraphQl

款式：平底

反应
角度
JavaScript
萨斯
盖茨比
GraphQl

款式：扁平方形

反应
角度
JavaScript
萨斯
盖茨比
GraphQl

款式：塑料

反应
角度
JavaScript
萨斯
盖茨比
GraphQl

语法非常简单，就像我说的，你可以为任何你能想到的技术、语言或工具创建自定义徽章。它看起来如下：

<img src="https://img.shields.io/badge/BadgeText-HexColor?logo=SimpleIconName&logoColor=ColorName&style=ShieldStyle" />
Enter fullscreen mode Exit fullscreen mode

让我们分解该 Url 的所有属性。

BadgeText 是你的标签或徽章文本。在我上面的例子中，这些文本包括 React、Angular、Gatsby 等。

HexColor 是您想要的徽章颜色的十六进制值。如果您想在徽章上使用技术/工具的官方徽标颜色，您可以在SimpleIcons.org上找到。只需在搜索栏中输入您的技术，即可获得徽标图像、徽标名称及其十六进制颜色值。这非常实用。同时，请确保同时获取徽标名称，因为您需要使用它来代替上面示例 URL 中的 SimpleIconName。

将 ColorName 替换为所需的徽标颜色。您可以在Shields.io上找到可用颜色名称的列表。

最后，您需要将 ShieldStyle 切换为我上面提到的四个值之一：plastic、flat、flat-square 或 for-the-badge。这将改变徽章的形状和外观，您可以参考上面的示例。

您可以更改一些我在这里没有使用的其他属性，您可以在官方网站上找到它们。

创建完徽章后，你可能需要将它们放在 GitHub ReadMe 的一行中。为此，你需要将所有图像标签包裹在一个段落标签中，这样效果会非常好。

以下是我在个人资料自述文件中使用的代码示例：

<p>
  <img alt="React" src="https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=white&style=for-the-badge" />
  <img alt="Angular" src="https://img.shields.io/badge/Angular-DD0031?logo=angular&logoColor=white&style=for-the-badge" />
  <img alt="JavaScript" src="https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=white&style=for-the-badge" />
  <img alt="HTML" src="https://img.shields.io/badge/HTML-E34F26?logo=html5&logoColor=white&style=for-the-badge" />
  <img alt="Css" src="https://img.shields.io/badge/CSS-1572B6?logo=css3&logoColor=white&style=for-the-badge" />
  <img alt="Sass" src="https://img.shields.io/badge/Sass-CC6699?logo=sass&logoColor=white&style=for-the-badge" />
  <img alt="Gatsby" src="https://img.shields.io/badge/Gatsby-663399?logo=gatsby&logoColor=white&style=for-the-badge" />
  <img alt="GraphQl" src="https://img.shields.io/badge/GraphQL-E10098?logo=graphql&logoColor=white&style=for-the-badge" />
  <img alt="C Sharp" src="https://img.shields.io/badge/C%23-239120?logo=c-sharp&logoColor=white&style=for-the-badge" />
  <img alt="Unity" src="https://img.shields.io/badge/Unity-000000?logo=unity&logoColor=white&style=for-the-badge" />
</p>
Enter fullscreen mode Exit fullscreen mode

如果您想创建联系卡/徽章，也可以用同样的方法制作。就像我说的，您不仅可以使用编程语言的徽标。如果您想让它们链接到您的电子邮件或社交媒体，则需要将它们包裹在 URL 标签中，如下所示：

<a href="https://www.youtube.com/channel/UCu3RVedqyL5o776xyQlbyAw">
  <img
    alt="Youtube"
    src="https://img.shields.io/badge/youtube-FF0000?logo=youtube&logoColor=white&style=for-the-badge"
  />
</a>
<a href="https://twitter.com/alekswritescode">
  <img
    alt="Twitter"
    src="https://img.shields.io/badge/Twitter-1DA1F2?logo=twitter&logoColor=white&style=for-the-badge"
  />
</a>
<a href="https://www.instagram.com/aleks.popovic/">
  <img
    alt="Instagram"
    src="https://img.shields.io/badge/Instagram-E4405F?logo=instagram&logoColor=white&style=for-the-badge"
  />
</a>
<a href="https://www.linkedin.com/in/alekspopovic/">
  <img
    alt="Linkedin"
    src="https://img.shields.io/badge/linkedin-0077B5?logo=linkedin&logoColor=white&style=for-the-badge"
  />
</a>
Enter fullscreen mode Exit fullscreen mode

GitHub 统计信息

如果你有兴趣在你的 GitHub 个人资料上设置各种不同的统计数据，你一定要看看这个很棒的仓库。我会向你展示如何使用那里面的几个很酷的小工具，分别是 GitHub 统计卡和热门语言卡。

Github 统计卡

有一个简单的方法可以使用这个简单的小部件来显示你所有的 GitHub 统计信息。你只需要在 markdown 或 HTML 中输入这行代码，输入你的 GitHub 用户名，然后粘贴到你的 ReadMe 文件中：

![github stats](https://github-readme-stats.vercel.app/api?username=YourUsername)
Enter fullscreen mode Exit fullscreen mode 
<img src="https://github-readme-stats.vercel.app/api?username=YourUsername" />
Enter fullscreen mode Exit fullscreen mode

除了输入用户名（这是查看统计数据的必需步骤）之外，您还可以输入其他参数来自定义显示卡。其中之一是主题，您可以使用它来设置现有的颜色主题之一。您可以在代码库中找到完整的颜色主题列表，但您也可以自行自定义所有颜色，甚至提交新的主题。

下面是一个示例，说明如何自定义卡片以显示私人存储库的统计信息、使用自定义卡片标题、显示每个统计信息的图标以及对文本、标题和图标使用自定义颜色：

<img
  src="https://github-readme-stats.vercel.app/api?username=alekspopovic&count_private=true&title_color=FD9047&icon_color=FD9047&text_color=0C2233&custom_title=Aleks+Popovic's+GitHub+Stats&show_icons=true"
/>
Enter fullscreen mode Exit fullscreen mode

您可以在 repo 中找到所有参数的列表以及它们的潜在值。

顶级语言卡

如果你想向访客展示你在你的代码库中最常用的编程语言，也有一个简单的方法。这是你需要在 ReadMe 中输入的代码，别忘了输入你自己的用户名：

![Top languages](https://github-readme-stats.vercel.app/api/top-langs/?username=alekspopovic)
Enter fullscreen mode Exit fullscreen mode

或者

<img
  src="https://github-readme-stats.vercel.app/api/top-langs/?username=alekspopovic"
/>
Enter fullscreen mode Exit fullscreen mode

至于附加参数，您可以使用 hide 来阻止显示一种或多种语言，使用 langs_count 来增加或减少显示的语言数量（默认值为 5），使用 layout=compact 来显示带有百分比列表的单行图形分布。

Wakatime 周统计数据

这个值得一提，因为我自己没用过 Wakatime，但它看起来很酷，所以我不能不提。如果你没听说过它——Wakatime 是一个“用于衡量你的编程水平的开源插件”。它可以衡量你的日常工作效率，并跟踪关于你的编程语言和一般编码习惯的各种统计数据。

要使用它，您需要在其官方网站上创建一个帐户，并按照您最喜欢的 IDE 或文本编辑器的设置说明进行操作。

之后，您可以按照与前两种类似的方式使用它，但这次您需要交换您的 Wakatime 用户名。

![Wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=USERNAME)
Enter fullscreen mode Exit fullscreen mode

或者

<img
  src="https://github-readme-stats.vercel.app/api/wakatime?username=USERNAME"
/>
Enter fullscreen mode Exit fullscreen mode

如果你正在使用 Wakatime，请告诉我你的使用感受，以及它是否提升了你的工作效率。我非常好奇，因为我自己也正在考虑开始使用它。

额外的灵感

就像我在介绍里说的，我的 GitHub 个人资料几天前还是空的。看到Jack Forge 的这条 Twitter 帖子后，我萌生了添加内容的想法。我浏览着海量的回复，点开各种个人资料，心想：我的天，这些人的 GitHub 个人资料看起来真酷。我也想做一个类似的。

完成之后，我想和大家分享我的发现和想法。你可以在那里找到一些非常不错的配置文件，但如果你想了解更多使用 Markdown 可以实现的功能示例，可以查看这个很棒的仓库，里面有很多很棒的 GitHub 配置文件。

如果您想查看我的 GitHub 个人资料，其中包含我在本教程中概述的大多数示例，您可以在这里找到它。

如果您有任何问题或意见，可以通过Twitter和Instagram联系我，我还会在那里发布有趣的代码花絮和设计。

我还定期将 React 和 Web 开发教程上传到 YouTube，因此如果您感兴趣的话，请随时通过订阅我的频道来支持我。

文章来源：https://dev.to/alekswritescode/easiest-way-to-set-up-your-github-profile-page-3gn8
Devto 翻译
PREV
10 个很棒的 SASS（SCSS）混合
NEXT
基于主干开发的 Git 技巧