如何自定义GitHub主页
这个问题也是废了一点时间，搜了各种资料后整理出来的，可以帮助想要装饰主页的小伙伴吧！
1 我的主页
先看看效果
查看我的GitHub主页，喜欢可以直接Fork：
2 配置方法
首先需要创建一个和自己github账号同名的仓库，例如forminio是我的github账号名，则创建forminio仓库
3 修改同名仓库Readme.md
当创建完仓库后，可以通过修改Readme.md文件，进行展示主页信息，这是一个支持HTML的Markdown解析器，所以可以通过一部分HTML语法创建更好看的排版布局，以我的为例
<div align="center">
<img src="https://readme-typing-svg.herokuapp.com/?lines=Welcome%20to%20my%20page!;热爱编程，热爱技术!&font=Roboto¢er=true&size=25&width=500&height=50&color=pink">
</div>
<h1 align="center">👋Hey!Nice To See You </h1>
<p align="center" style="font-size:1.2em;">
<em>Welcome to my page! I’m forminio, from 🇨🇳China,and I love exploring interesting things</em>
</p>
<div align="center">
<img src="https://img.shields.io/badge/后端开发-SpringBoot-green" />
<img src="https://img.shields.io/badge/前端-Vue-blue" />
<img src="https://img.shields.io/badge/爬虫-Python-yellow" />
<img src="https://img.shields.io/badge/数据库-MySQL-orange" />
<img src="https://img.shields.io/badge/缓存-Redis-red" />
<img src="https://img.shields.io/badge/消息队列-RabbitMQ-brightgreen" />
<img src="https://img.shields.io/badge/日志分析-ELK-blueviolet" />
<br/>
<img src="https://img.shields.io/badge/后端-java-cream" />
<img src="https://img.shields.io/badge/前端-HTML-red" />
<img src="https://img.shields.io/badge/前端-CSS-blue" />
<img src="https://img.shields.io/badge/前端-JS-yellow" />
<img src="https://img.shields.io/badge/python-Flask-tan" />
</div>
<br>
## 🚀 About Me
- 🧠 `while(alive) { learnNewTech(); solveProblems(); }`
- 💻 正在深入研究分布式系统和高可用架构 `System.out.println("Hello Microservices!")`
- 🔍 热衷于 `try { 后端开发 } catch(Exception e) { 解决它! } finally { 持续学习 }`
- 🛠️ 技术栈: `const stack = ['Java', 'Spring Boot', 'Vue', 'Redis', 'MySQL', 'RabbitMQ', 'Docker', 'Nginx']`
- 🔄 CI/CD爱好者: `git commit -m "持续集成，持续部署，持续改进"`
- 🐧 Linux命令行忠实粉丝: `chmod +x ./life.sh && ./life.sh`
- 💬 欢迎加入讨论: `SELECT * FROM knowledge WHERE topic IN ('Java', 'Spring Boot', '微服务', 'Vue', 'Docker')`
- 📫 联系方式: `const email = "3599017122@qq.com"`
- 🌟 个人特点: `function traits() { return ['热爱学习', '解决问题能手', '团队协作达人', '代码洁癖'] }`
- 🔎 主页访问量：<img src="https://profile-counter.glitch.me/forminio/count.svg" />
<div align="center">
<img src="https://github-profile-trophy.vercel.app/?username=forminio&theme=onedark" align="center" />
</div>
<br>
## 🛠️ Technologies
<div align="center">
<table>
<tr>
<td valign="top" width="33%">
<h3 align="center">Backend Development</h3>
<div align="center">
<img src="https://profilinator.rishav.dev/skills-assets/java-original-wordmark.svg" alt="Java" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/springio-icon.svg" alt="Spring" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/python-original.svg" alt="Python" height="50" />
<img src="https://www.vectorlogo.zone/logos/auth0/auth0-icon.svg" alt="JWT" height="50" />
<img src="https://www.vectorlogo.zone/logos/lua/lua-official.svg" alt="Lua" height="50" />
<img src="https://www.vectorlogo.zone/logos/palletsprojects_flask/palletsprojects_flask-icon.svg" alt="Flask" height="50" />
</div>
</td>
<td valign="top" width="33%">
<h3 align="center">Frontend Development</h3>
<div align="center">
<img src="https://profilinator.rishav.dev/skills-assets/vuejs-original-wordmark.svg" alt="Vue.js" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/javascript-original.svg" alt="JavaScript" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/html5-original-wordmark.svg" alt="HTML5" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/css3-original-wordmark.svg" alt="CSS3" height="50" />
<img src="https://www.vectorlogo.zone/logos/pocoo_jinja/pocoo_jinja-icon.svg" alt="Jinja" height="50" />
<img src="https://www.vectorlogo.zone/logos/elementio/elementio-icon.svg" alt="Element" height="50" />
<img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="Ant Design" height="50" />
</div>
</td>
<td valign="top" width="33%">
<h3 align="center">Middleware</h3>
<div align="center">
<img src="https://profilinator.rishav.dev/skills-assets/mysql-original-wordmark.svg" alt="MySQL" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/redis-original-wordmark.svg" alt="Redis" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/elasticsearch.png" alt="Elasticsearch" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/docker-original-wordmark.svg" alt="Docker" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/linux-original.svg" alt="Linux" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/rabbitmq-icon.svg" alt="RabbitMQ" height="50" />
</div>
</td>
</tr>
<tr>
<td valign="top" colspan="3">
<h3 align="center">Tools</h3>
<div align="center">
<img src="https://www.vectorlogo.zone/logos/nginx/nginx-icon.svg" alt="Nginx" height="50" />
<img src="https://profilinator.rishav.dev/skills-assets/git-scm-icon.svg" alt="Git" height="50" />
<img src="https://www.vectorlogo.zone/logos/apache_maven/apache_maven-icon.svg" alt="Maven" height="50" />
<img src="https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg" alt="Postman" height="50" />
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9c/IntelliJ_IDEA_Icon.svg" alt="IntelliJ IDEA" height="50" />
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Visual_Studio_Code_1.35_icon.svg" alt="VS Code" height="50" />
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/PyCharm_Icon.svg" alt="PyCharm" height="50" />
<img src="https://www.vectorlogo.zone/logos/traeai/traeai-icon.svg" alt="Trae" height="50" />
<img src="https://www.vectorlogo.zone/logos/hexoio/hexoio-icon.svg" alt="Hexo" height="50" />
<img src="https://www.halo.run/upload/2021/03/Adaptive256-463ca9b92e2d40268431018c07735842.png" alt="Halo" height="50" />
<img src="https://www.vectorlogo.zone/logos/minioio/minioio-icon.svg" alt="Minio" height="50" />
</div>
</div>
</td>
</tr>
</table>
</div>
<br>
## 📊 GitHub Stats
<div align="center" style="display: flex; justify-content: space-between; flex-wrap: wrap;">
<img src="https://github-readme-stats.vercel.app/api?username=forminio&show_icons=true&count_private=true&hide_border=true&theme=ambient_gradient&locale=cn" width="49%" />
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=forminio&layout=compact&locale=cn&theme=ambient_gradient" width="44%" />
</div>
<br>
## 📫 Contact Me
<div align="center">
<a href="mailto:3599017122@qq.com">
<img src="https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white" />
</a>
<a href="http://120.79.92.59/">
<img src="https://img.shields.io/badge/博客-forminio-blue?style=for-the-badge&logo=blogger&logoColor=white" />
</a>
<a href="https://github.com/forminio">
<img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white" />
</a>
</div>
<br>
<div align="center">
<!-- 矩阵数字雨效果 -->
<div style="margin-top: 20px;">
<img src="https://capsule-render.vercel.app/api?type=waving&color=gradient&height=100§ion=footer&text=Code%20Never%20Ends&fontSize=24&fontAlignY=80" width="100%" />
</div>
<!-- 代码注释风格的页脚 -->
<div style="background-color: #0d1117; border-radius: 6px; padding: 10px; width: 80%; margin: 20px auto; border: 1px solid #30363d;">
<p style="font-family: 'Courier New', monospace; color: #8b949e; text-align: left; margin: 0;">
</p>
</div>
<div align="center">
<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png" />
</div>
</div>
4 添加各种小玩意
通过添加各种在线生成图片，可以让他人迅速知道，你的github信息
4.1 滚动长条
效果：
代码：其中%20是空格
<div align="center">
<img src="https://readme-typing-svg.herokuapp.com/?lines=内容&font=Roboto¢er=true&size=25&width=500&height=50&color=pink">
</div>4.2 小徽标
效果：
代码：
<div align="center">
<img src="https://img.shields.io/badge/左边内容-右边内容-颜色" />
</div>4.3 奖杯
效果：
代码：
<div align="center">
<img src="https://github-profile-trophy.vercel.app/?username=github用户名&theme=onedark" align="center" />
</div>4.4 SVG图标
效果：
代码：
<img src="https://profilinator.rishav.dev/skills-assets/java-original-wordmark.svg" alt="Java" width="10%" height="10%" />4.5 github项目统计及语言统计
效果：
代码：
<div align="center" style="display: flex; justify-content: space-between; flex-wrap: wrap;"><img src="https://github-readme-stats.vercel.app/api?username=forminio&show_icons=true&count_private=true&hide_border=true&theme=ambient_gradient&locale=cn" width="49%"><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=forminio&layout=compact&locale=cn&theme=ambient_gradient" width="45%"></div>
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
Steam卡片
音乐天地