Github仓库与个人介绍界面美化

目录

前言

下面是一个个人经过美化过后的界面,您仅需根据我下方给出的操作顺序依次执行即可得到一个完美的个人主页!!!

当然,如果你实在不想看冗长的教学文字,那你可以直接复制下方的README.md文件内容,把里面的ZhillerDev替换为你的github用户名:

md 复制代码
## ZhillerDev's Profile Page

welcome here!!!

![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dgithub%26queryKey%3DZhillerDev&query=%24.data.totalSubs&label=ZhillerDev%20Followers)

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

具体操作

新建个人仓库

新建一个仓库,你需要关注下图中画红框的地方:

  1. 修改仓库名称和你的所有者(owner)名称完全一致,大小写也必须一样,当你填写正确后就会弹出下方的卡片,告诉你你可以通过修改readme.md文件实现自定义user profile
  2. 该仓库必须是公开的
  3. 最好初始化仓库的时候让系统创建一个README file,不然你手动创建会比较麻烦

添加徽标牌子

参考文献

https://sspai.com/post/59593

https://zhuanlan.zhihu.com/p/217540872

https://zhuanlan.zhihu.com/p/533850515

这里的徽标生成我们使用老牌的shield.io来完成,你可以去下面的网站直接借助其提供的生成器生成牌子,然后粘贴到README即可
shield 徽标牌子生成器

日常主要使用静态徽标和动态徽标,二者的工作原理如下:

  1. 静态徽标:渲染前向shield请求静态牌子,由其直接返回一个徽标的img图片链接即可使用
  2. 动态徽标:这里需要借助托管网站 substats 来完成此步骤,主要流程是先向shield请求后,再请求该托管网站,网站返回抓取的数据结果后返回shield,最终反馈给用户,显示img图标

你可以去这个网站看看示例包括对应的调用API,他一般是和shield生成器结合使用,下面会对其进行详细介绍: substats 用户数据抓取API

shield生成静态牌子示例

生成参数基本格式:
牌子主标题-牌子副标题-副标题颜色

最终生成结果如下:

substats 生成获取github followers的动态牌子

先去substats官网找到获取github follower的相关API
点击前往

根据提示,我们可以拼接出请求的API如下:

https://api.spencerwoo.com/substats/?source=github\&queryKey=ZhillerDev

同时根据substats官网的提示,返回数据获取(这是固定格式):$.data.totalSubs

添加个人信息卡片

参考文献与引用

https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md

这里使用github-readme-stats仓库实现个人统计信息卡片的展示;

使用方法很简单,直接去我上面给出的网站地址,去对应文档内找到URL直接复制粘贴然后修改用户名即可;

下面是该官方文档的介绍:

最终成品代码

最后可以简单的结合上面方法最终写出一个看起来还说得过去的个人主页;

把下面的代码复制到第一步新建的个人仓库的README.md文件内,然后修改里面的ZhillerDev为你的github用户名即可:

md 复制代码
## ZhillerDev's Profile Page

welcome here!!!

![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dgithub%26queryKey%3DZhillerDev&query=%24.data.totalSubs&label=ZhillerDev%20Followers)

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

主页刷新渲染后的效果:

相关推荐
逛逛GitHub1 小时前
自测会不会被 Claude Code 标记为中国用户,有人做了个网页。
github
逛逛GitHub1 小时前
终于有个非 AI 相关的项目登上 GitHub 热榜,高低得推荐一下。
github
Lion093 小时前
【04】50 行代码实现最小 Agent:不依赖任何框架
人工智能·github
狂炫冰美式5 小时前
凌晨睡不着,我给台风巴威写了个追踪网站
前端·后端·github
Maynor9967 小时前
GitHub 外链 / 自荐入口清单
github
oscar9998 小时前
3.4 Nginx 负载均衡——动态再平衡的反人性纪律
nginx·github·负载均衡·财富源代码
杨超越luckly8 小时前
Agent 应用指南:基于 OurAirports 的中国机场设施数据可视化
python·html·github·可视化·机场设施
Maynor在掘金8 小时前
憋了两个月,Gemini 3.5 Pro 终于要来了!前端代码一次生成,传闻 7 月 17 日亮相。
github
DogDaoDao1 天前
ShellGPT:当大语言模型遇见命令行——深度解析一个 CLI AI 生产力工具的设计与实现
人工智能·语言模型·自然语言处理·github·大语言模型·shellgpt·终端命令行
uhakadotcom1 天前
Python 中,`None` 不等于 `False`导致的问题
后端·面试·github