当前位置：首页 > news >正文

【GitHub小娱乐】GitHub个人主页ProFile美化

news 2025/8/10 6:36:36

一、前言

二、创建仓库

‍三、定制主页

页面顶部和底部的动图

Emoji

GitHub 统计卡片

‍GitHub 使用语言统计

‍Metrics 统计信息

GitHub 资料奖杯

‍GitHub 徽章

技术栈图标展示

‍GitHub 访客徽章

‍GitHub 活动统计图

‍修仙系列统计卡片

‍GitHub 连续打卡

‍社交统计

‍‍Star History

GitHub Star History

GitHub Corners：分享角标

打字特效

‍GitHub 3D 统计

‍四、我个人的效果

五、参考文章及Github示例

一、前言

这次我来介绍一下如何使用最简单的方式来美化你的 GitHub 主页（只需写几行 Markdown）

这篇文章不会让你去弄相对比较复杂的 GitHub Action 等来实现网上的那些炫酷的效果，这篇文章几乎只需要你复制粘贴加略微修改网页链接就能实现同样非常炫酷的效果。当然，能实现这些全都要依靠其他大佬的开源项目，认可他们就star一下。

二、创建仓库

自定义主页很简单。我们首先在 GitHub 上新建一个仓库，仓库名和自己 Github 用户名相同，然后添加一个 README.md 自述文件，在该文件里添加信息即可。

比如我的仓库名称就是3323223659（当然一定要设为Public）

可以看到右上角有个蓝色提示框：

3323223659/3323223659 is a special repository.

Its README.md will appear on your public profile.

翻译：

这是一个特殊的仓库。

它的 README.md 会出现在你的首页中。

‍三、定制主页

接下来，你就可以通过修改 README.md 来定制主页了。由于是 Markdown 文件，扩展性很高，并且全面支持 emoji，支持各种表情。

此外，人的创造力有限，如何短时间内拥有一个酷炫的个人主页呢？

答案是直接CV大法。看到好看的模板，可以直接 fork，修改下相关变量即可。

接下来讲讲一些常见的信息展示。

如果下面的有些你想自定义也可以发给AI让它帮你变（比如颜色）

页面顶部和底部的动图

页面顶部（section=header）

<p align="center">
<img src="https://capsule-render.vercel.app/api?type=waving&color=timeGradient&height=300&&section=header&text={TITLE}&fontSize=90&fontAlign=50&fontAlignY=30&desc={SUB_TITLE}&descAlign=50&descSize=30&descAlignY=60&animation=twinkling" />
</p>

其中，{TITLE} 替换成你想要的大标题，{SUB_TITLE} 替换成你想要的小标题。

页面底部（section=footer）

<p align="center">
<img src="https://capsule-render.vercel.app/api?type=waving&color=timeGradient&height=300&&section=footer&text={TITLE}&fontSize=90&fontAlign=50&fontAlignY=70&desc={SUB_TITLE}&descAlign=50&descSize=30&descAlignY=40&animation=twinkling" />
</p>

同上，此外，需要配置更多个性化的选项，见上方此开源项目的链接

Emoji

下面内容可以直接复制来用，emoji 不是图片，所以可以任意字号展示。

😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘😚😙😋😛😜🤪😝🤑🤗🤭🤫🤔🤐🤨😐😑😶😏😒🙄😬🤥😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵🤯🤠🥳😎🤓🧐😕😟🙁☹️😮😯😲😳🥺😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬

👶🧒👦👧🧑👱👨🧔👨‍🦰👨‍🦱👨‍🦳👨‍🦲👩👩‍🦰🧑👩‍🦱🧑👩‍🦳🧑👩‍🦲🧑👱‍♀️👱‍♂️🧓👴👵🙍🙍‍♂️🙍‍♀️🙎🙎‍♂️🙎‍♀️🙅🙅‍♂️🙅‍♀️🙆🙆‍♂️🙆‍♀️💁💁‍♂️💁‍♀️🙋🙋‍♂️🙋‍♀️🧏🧏‍♂️🧏‍♀️🙇🙇‍♂️🙇‍♀️🤦‍♂️🤦‍♀️🤷‍♀️👨‍⚕️👩‍⚕️👨‍🎓👩‍🎓🧑‍🏫

👋🤚🖐️✋🖖👌🤏✌️🤞🤟🤘🤙👈👉👆🖕👇☝️👍👎✊👊🤛🤜👏🙌👐🤲🤝🙏✍️💅🤳💪

👣👀👁️👄💋👂🦻👃👅🧠🦷🦴💪🦾🦿🦵🦶👓🕶️🥽🥼🦺👔👕👖🧣🧤🧥🧦👗👘🥻🩱🩲🩳👙👚👛👜👝🎒👞👟🥾🥿👠👡🩰👢👑👒🎩🎓🧢⛑️💄💅💍💼🌂☂️💈🛀🛌💥💫💦💨

⬆️➡️⬇️⬅️↩️↪️⤴️⤵️🔃🔄🔙🔚🔛🔜🔝🛐⚛️🕉️✡️️☯️✝️☦️☪️☮️🕎🔯♈♉♊♋♌♍♎♏♐♑♒♓⛎🔀🔁🔂▶️⏩⏭️⏯️◀️⏪⏮️🔼⏫🔽⏬⏸️⏹️⏺️⏏️🎦✖️➕➖➗♾️⁉️❓❔❕❗💱💲⚕️♻️️🔱📛🔰⭕✅☑️✔️❌❎➰➿✳️✴️❇️#️⃣*️⃣0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🅰️🆎🅱️🆑🉐🈚🈲🉑🈸🈴🈳㊗️㊙️🈺🈵🔴🟠🟡🟢🔵🟣🟤⚫⚪🟥🟧🟨🟩🟦🟪🟫⬛⬜◼️◻️◾◽▪️▫️🔶🔷🔸🔹🔺🔻💠🔘🔳🔲🏁🚩🎌🏴🏳️🏳️‍🌈🏳️‍⚧️🏴‍☠️

🙈🙉🙊💥💫💦💨🐵🐒🦍🦧🐶🐕🦮🐕‍🦺🐩🐺🦊🦝🐱🐈🐈‍⬛🦁🐯🐅🐆🐴🐎🦄🦓🦌🐮🐂🐃🐄🐷🐖🐗🐽🐏🐑🐐🐪🐫🦙🦒🐘🦏🦛🐭🐁🐀🐹🐰🐇🐿️🦔🦇🐻🐻‍❄️🐨🐼🦥🦦🦨🦘🦡🐾🦃🐔🐓🐣🐤🐥🐦🐧🕊️🦅🦆🦢🦉🦩🦚🦜🐸🐊🐢🦎🐍🐲🐉🦕🦖🐳🐋🐬🐟🐠🐡🦈🐙🐚🐌🦋🐛🐜🐝🐞🦗🕷️🕸️🦂🦟🦠🦀🦞🦐🦑

💐🌸💮🏵️🌹🥀🌺🌻🌼🌷🌱🌲🌳🌴🌵🌾🌿☘️🍀🍁🍂🍃

🌍🌎🌏🌐🌑🌒🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜☀️🌝🌞⭐🌟🌠☁️⛅⛈️🌤️🌥️🌦️🌧️🌨️🌩️🌪️🌫️🌬️🌈☂️☔⚡❄️☃️⛄☄️🔥💧🌊

🍇🍈🍉🍊🍋🍌🍍🥭🍎🍏🍐🍑🍒🍓🥝🍅🥥🥑🍆🥔🥕🌽🌶️🥒🥬🥦🧄🧅🍄🥜🌰🍞🥐🥖🥨🥯🥞🧇🧀🍖🍗🥩🥓🍔🍟🍕🌭🥪🌮🌯🥙🧆🥚🍳🥘🍲🥣🥗🍿🧈🧂🥫🍱🍘🍙🍚🍛🍜🍝🍠🍢🍣🍤🍥🥮🍡🥟🥠🥡🦪🍦🍧🍨🍩🍪🎂🍰🧁🥧🍫🍬🍭🍮🍯🍼🥛☕🍵🍶🍾🍷🍸🍹🍺🍻🥂🥃🥤🧃🧉🧊🥢🍽️🍴🥄

🧗‍♀️🤺🏇⛷️🏂🏌️🏌️‍♂️🏌️‍♀️🏄🏄‍♂️🏄‍♀️🚣‍♀️🏊‍♀️⛹️⛹️‍♂️⛹️‍♀️🏋️🏋️‍♂️🚴🚵‍♀️🤸🤼‍♀️🤽🤾‍♀️🤹🧘‍♀️🎪🛹🛼🛶🎗️🎟️🎫🎖️🏆🏅🥇🥈🥉⚽⚾🥎🏀🏐🏈🏉🎾🥏🎳🏏🏑🏒🥍🏓🏸🥊🥋🥅⛳⛸️🎣🎽🎿🛷🥌🎯🎱🎮🎰🎲🧩♟️🎭🎨🧵🧶🎼🎤🎧🎷🎸🎹🎺🎻🥁🎬🏹

😈👿👹👺💀☠👻👽👾💣

👣🎠🎡🎢🚣🏔️⛰️🌋🗻🏕️🏖️🏜️🏝️🏞️🏟️🏛️🏗️🏘️🏚️🏠🏡🏢🏣🏤🏥🏦🏨🏩🏪🏫🏬🏭🏯🏰💒🗼🗽⛪🕌🛕🕍⛩🕋⛲⛺🌁🌃🏙️🌄🌅🌆🌇🌉🎠🎡🎢🚂🚃🚄🚅🚆🚇🚈🚉🚊🚝🚞🚋🚌🚍🚎🚐🚑🚒🚓🚔🚕🚖🚗🚘🚙🚚🚛🚜🏎️🏍️🛵🛺🚲🛴🚏🛣️🛤️⛽🚨🚥🚦🚧⚓⛵🚤🛳️⛴️🛥️🚢✈️🛩️🛫🛬🪂💺🚁🚟🚠🚡🛰️🚀🛸🪐🌠🌌⛱️🎆🎇🎑💴💵💶💷🗿🛂🛃🛄🛅🧭

💌💎🔪💈🚪🚽🚿🛁⌛⏳⌚⏰🎈🎉🎊🎎🎏🎐🎀🎁📯📻📱📲☎📞📟📠🔋🔌💻💽💾💿📀🎥📺📷📹📼🔍🔎🔬🔭📡💡🔦🏮📔📕📖📗📘📙📚📓📃📜📄📰📑🔖💰💴💵💶💷💸💳✉📧📨📩📤📥📦📫📪📬📭📮📝📁📂📅📆📇📈📉📊📋📌📍📎📏📐✂🔒🔓🔏🔐🔑🔨🔫🔧🔩🔗💉💊🚬🔮🚩🎌💦💨

💘❤💓💔💕💖💗💙💚💛💜💝💞💟

GitHub 统计卡片

官网：github.com/anuraghazra/github-readme-stats

效果：

使用方法很简单，将如下代码复制到你的 markdown 文件中，更改 ?username= 的值为你的 GitHub 用户名：

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=3323223659)

‍这个是默认样式，很简陋，可以配置显示图标、主题样式等，具体请看官网文档。

‍GitHub 使用语言统计

官网：github.com/anuraghazra/github-readme-stats

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=3323223659)

‍同理，这个也可以配置主题和布局（参考文档）。

‍Metrics 统计信息

会展示 GitHub 上的一些统计信息，效果：

这个项目也是开源在 GitHub 上的：github.com/lowlighter/metrics，并且还有其他的功能参考。

GitHub 资料奖杯

官网：github.com/ryo-ma/github-profile-trophy

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![trophy](https://github-profile-trophy.vercel.app/?username=3323223659)

‍同理，这个也可以配置主题。

‍GitHub 徽章

为你的开源项目生成高质量小徽章图标，直接复制链接使用。

官网：Shields.io

效果：

示例代码：

<img src="https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" /> 
<img src="https://img.shields.io/badge/-CSS3-1572B6?style=flat-square&logo=css3" /> 
<img src="https://img.shields.io/badge/-JavaScript-oringe?style=flat-square&logo=javascript" />

技术栈图标展示

效果：

示例代码：

<img align="center" src="https://skillicons.dev/icons?i=java&theme=light" />

将上述代码中的 {YOUR_TECH_STACK} 改成你想要的，多个以逗号方式间隔，支持的图标以及更多的配置选项见开源项目的自述文件。

‍GitHub 访客徽章

这个徽章会实时改变，记录此页面被访问的次数。

官网：visitor-badge.glitch.me

效果：

使用方法：复制如下代码到 Markdown 并替换 page_id 的值为用户名

![visitors](https://visitor-badge.glitch.me/badge?page_id=page.id&left_color=green&right_color=red)

可以配置颜色，参数为：left_color，right_color

‍GitHub 活动统计图

动态生成的活动图，用于显示您过去 31 天的 GitHub 活动。

官网：github.com/Ashutosh00710/github-readme-activity-graph

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=3323223659)

可以配置主题。

‍修仙系列统计卡片

一个以凡人修仙传境界为基础的 Github 统计卡片。等级分为：['道祖', '大罗', '太乙', '金仙', '真仙', '大乘', '合体', '炼虚', '化神', '元婴', '金丹', '筑基', '练气']，对应区间：[1, 5, 10, 15, 20, 30,40,50,60, 70, 80, 90, 100]。

官网：IceEnd/github-immortality

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![IceEnd's GitHub stats](https://github-immortality.vercel.app/api?username=3323223659)

‍GitHub 连续打卡

在 README 中展示您连续提交代码的次数。

官网：github.com/DenverCoder1/github-readme-streak-stats

效果：

使用方法同上，复制如下代码，更改 ?username= 的值：

![GitHub Streak](https://streak-stats.demolab.com/?user=3323223659)

同理，支持主题、样式等配置。

‍社交统计

在 README 中展示你在一些流行的网站的数据，例如知乎，GitHub，B 站，LeetCode，掘金，CSDN，牛客。

官网：github.com/songquanpeng/stats-cards

效果：

使用方法：复制代码到 Markdown 并替换 username 的值为那个网站的用户名

![](https://stats.justsong.cn/api/leetcode?username=quanpeng&cn=true)

‍‍Star History

官网：https://star-history.tt.io

输入仓库名，就能自动生成 star 增长曲线。还能输入多个仓库查看项目对比：

GitHub Star History

官网：GitHub/Gitlab Star History

用法和上一个工具完全一样，就是样式有点不同：

GitHub Corners：分享角标

如果你的 GitHub 项目有一个对应的网站，并且想要用户通过网站跳转到 GitHub 项目页从而得到 star，不防试试这个。

官网：GitHub Corners

它可以帮你生成给网站添加 GitHub 角标的代码，只需要选择一个风格，复制代码到自己的项目主页文件中，将超链接替换为自己的仓库地址即可。

打字特效

让内容通过打字的特效来展示，炫酷。

官网：github.com/DenverCoder1/readme-typing-svg

使用方法：复制代码到 Markdown 并替换 ?lines= 的值为你想要的内容，字与字之间用分号隔开

![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)

‍GitHub 3D 统计

使用 3D 图来展示信息。

官网：github.com/yoshi389111/github-profile-3d-contrib

效果：

‍四、我个人的效果

Read.me内容

<!-- 顶部波浪欢迎区 - 修正中文显示问题 -->
<p align="center"><img src="https://capsule-render.vercel.app/api?type=waving&color=0:00c9ff,50:00dbde,100:92fe9d&height=300&section=header&text=Welcome%20%20to%20%20my%20%20profile!&fontSize=75&fontAlignY=20&desc=构建高性能后端系统%20•%20探索前沿技术&descSize=40&descAlignY=60&animation=twinkling&fontColor=ffffff" />
</p>
<!-- 个人简介卡片 - 优化显示 -->
<div align="center"><h1 align="center">👨‍💻 基本信息</h1>**计算机科学与技术专业大三在读学生**
</br>
**专注于Java为主的后端开发,热爱钻研新技术**[![CSDN博客](https://img.shields.io/badge/CSDN博客-2302_79380280-red?style=flat-square)](https://blog.csdn.net/2302_79380280)
[![Email](https://img.shields.io/badge/Email-3323223659@qq.com-blue?style=flat-square&logo=email)](https://mail.qq.com/)
</div>
<!-- 工具与语言组合展示区 -->
<div align="center">
<h1 align="center">🛠️ 开发工具、技术</h1><!-- 工具并排展示 --><div style="display: flex; justify-content: center; gap: 50px; margin: 30px 0"><div><p align="center"><a href="https://skillicons.dev"><img src="https://skillicons.dev/icons?i=idea,pycharm,vscode,mysql,mongodb,redis,elasticsearch,rabbitmq,kafka,git,linux,docker,jenkins,postman" /></a></p></div>
</div>
<h1 align="center">💻 常用语言、框架</h1>
<!-- 语言展示区 -->
<div align="center"><!-- 语言并排展示 --><div style="display: flex; justify-content: center; gap: 50px; margin: 30px 0"><div><p align="center"><a href="https://skillicons.dev"><img src="https://skillicons.dev/icons?i=java,py,js,ts,html,css,spring,vue" /></a></p></div>
</div>
<!-- 核心项目展示 -->
<h1 align="center">🌟 代表性项目</h1>
<p align="center"><a href="https://github.com/3323223659?tab=repositories"><img src="https://github-readme-stats.vercel.app/api/pin/?username=3323223659&repo=WeChat-backEnd&theme=default&show_owner=true" /></a><a href="https://github.com/3323223659?tab=repositories"><img src="https://github-readme-stats.vercel.app/api/pin/?username=3323223659&repo=YClub&theme=default&show_owner=true" /></a>
</p><h1 align="center">📊 语言使用分布</h1><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=3323223659&layout=compact&hide_border=true&langs_count=8&theme=default" alt="语言统计" />
</div><h1 align="center">🔥 开发活跃度</h1>![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=3323223659&bg_color=ffffff)
</div>
<!-- 底部波浪区 -->
<p align="center"><img src="https://capsule-render.vercel.app/api?type=waving&color=0:92fe9d,50:00dbde,100:00c9ff&height=200&section=footer&text=代码铸就世界、技术创造未来&fontSize=60&fontAlign=50&fontAlignY=70&animation=twinkling" />
</p>