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

ops/2025/1/19 12:41:25/

目录

    • 前言
    • 具体操作
      • 新建个人仓库
      • 添加徽标牌子
      • 添加个人信息卡片
      • 最终成品代码

前言

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

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

## ZhillerDev's Profile Pagewelcome 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用户名即可:

## ZhillerDev's Profile Pagewelcome 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)

主页刷新渲染后的效果:
在这里插入图片描述


http://www.ppmy.cn/ops/151384.html

相关文章

ASP.NET Core中 JWT 实现无感刷新Token

在 Web 应用开发中,用户登录状态的管理至关重要。为了避免用户频繁遇到登录过期的问题,我们可以通过实现 JWT(JSON Web Token)刷新机制来提升用户体验 推荐: 使用 Refresh Token(双 Token 机制) 1. 生成和…

【JavaEE进阶】实现简单的加法计算器和用户登录

目录 🎍序言 🌳加法计算器 🚩准备工作 🚩约定前后端交互接口 🚩后端服务器代码的书写 🌴用户登录 🚩准备工作 🚩约定前后端交互接口 🏀需求分析 🏀…

Redis - 环境搭建

目录 在Ubuntu上安装Redis在Centos上安装RedisCentos7Centos8 版本:使用Redis5系列 操作系统:在Linux中进行安装(Redis官方不支持Windows版本) 在Ubuntu上安装Redis 更新软件包: sudo apt-get update搜索相关软件包…

清除前端缓存的方式

1.定义 浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面…

Objective-C语言的数据类型

Objective-C数据类型详解 Objective-C是一种面向对象的编程语言,主要用于macOS和iOS应用程序的开发。作为C语言的超集,Objective-C继承了C语言的基本数据类型,同时也引入了一些独特的特性。本文将对Objective-C的各种数据类型进行详细的介绍…

docker hello world

引言 Docker是一个容器化平台,能够把应用程序及其依赖打包在一个容器中,让容器在任意地方运行。最近刚了解了Docker,自己动手操作了下,做个记录,也希望可以帮助到刚学习Docker的小伙伴。 本文中已使用管理员模式&…

若依入门使用

若依使用 1.下载2.搭建环境2.1 若依框架的目录结构2.2 打开项目修改配置文件2.2.1 打开后端项目2.2.2 设置 Maven2.2.3 application-druid.yml文件2.2.4 application.yml文件 2.3 运行后台服务2.4 运行前台服务2.4.1 编译器打开前台项目2.4.2 项目初始化2.4.3 启动 3.使用3.1 菜…

LeetCode 383. 赎金信

在本篇博客中,我们将探讨LeetCode上的一个经典问题:383. 赎金信。这个问题考察了我们对字符串处理和字符计数的理解和应用。 问题描述 解题思路 这个问题可以通过字符计数的方法来解决。我们首先统计 magazine 中每个字符出现的次数,然后检…