GitHuh 主页配置
Intro
昨天偶然看到的LufsXGitHub的首页, 感觉很不错, 所以想花点时间把自己的主页也”装饰”一下(最近工作上花了好多时间, 好久没整这种花活了)
建库
想要更改GitHub的首页很简单, 只需要创建一个和自己用户名一样的仓库既可. 这个仓库里的README.md 文件会自动被添加到GitHub主页
标签
第一步先给页面加上下面这样的小标签
这里我们用到的是一个叫Shields的开源项目, 其实很简单, 就是在README.md文件中引入该网站生成的图片, 以达到添加标签的效果
自定义一个Badge
根据官方的文档制作一个自定义的Badge以做出我们想要的标签
静态 Static
静态Badge的格式为https://img.shields.io/badge/ + 标签 + 信息 + 颜色, 中间用Dash - 间隔开
比如https://img.shields.io/badge/macOS-%20Monterey%2012.4-%230057a3就是下面这样的效果, 实测支持多种格式颜色
或者也可以使用搜索参数实现
https://img.shields.io/static/v1?label=macOS&message=Monterey%2012.4&color=%230057a3
实现与上面一样的效果
动态 Dynamic
可以通过qurey条件在JSON文件中寻找信息条目, 格式如下. 但是我没有这样的需求, 所以跳过这部分
https://img.shields.io/badge/dynamic/json?url=<URL>&label=<LABEL>&query=<$.DATA.SUBDATA>&color=<COLOR>&prefix=<PREFIX>&suffix=<SUFFIX>
样式 Styles
可以通过添加style, logo, color等字段改变Badge的样式
| Property | Info |
|---|---|
| label | 标签内容 |
| logo | Logo |
| logoColor | Logo的颜色 |
| logoWidth | Logo的宽度 |
| link | 添加左边/右边的链接🔗 |
| labelColor | 标题颜色 |
| color | 信息颜色 |
| cacheSeconds | cache liftime |
Style
| Style | Badge |
|---|---|
| plastic |  |
| flat |  |
| flat-square |  |
| for-the-badge |  |
| social |  |
Logo
在后缀中添加logo=<Logo>可以向Badge中添加Logo, 可以添加自定义的图片文件, 或者Simple-Icons中的图标, 或者slugs.mf 文件中列出的Logo
经过各种自定义, 现在我们可以得到自己想要的Badges啦
