git-markdown-徽章图标生成

359次阅读
没有评论

在查看别人的项目文档时候,通常能看到好多开头的一排徽章,看起来就感觉高大上,如下图:

git-markdown-徽章图标生成

而且图标内的很多内容都是动态更新的,具体如何实现的呢?

通过对markdown的解析查看,发现都是引用了一个第三方的图标生成功能,具体网址如下:

Shields.io: Quality metadata badges for open source projects

打开之后,页面比较简单,可以直接通过页面顶部的输入框输入github仓库地址,系统会自动根据仓库信息生成基本的一些常用徽标,直接复制代码即可:

<a href="https://github.com/dongyao8/dycms/blob/master/LICENSE"><img alt="GitHub license" src="https://img.shields.io/github/license/dongyao8/dycms"></a>

该图标支持多种格式,也有markdown格式的,另外也可以自定义其他样式

https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg

另外还有其他多种样式参数:style, logo等等,随处可用。

以下就是DYCMS的一个简单案例:

DYcms – 内容导航平台

无插件,无广告,回归最纯净的导航体验

Release-Version GitHub license Laravel Gitee
Author QQ群

上方代码参考:

<div align="center">
    <h1>DYcms - 内容导航平台</h1>
    <p>无插件,无广告,回归最纯净的导航体验</p>
      <a href="https://github.com/dongyao8/dycms/releases"><img src="https://img.shields.io/github/v/release/dongyao8/dycms.svg?logo=git&" alt="Release-Version"></a>
      <a href="https://github.com/dongyao8/dycms/blob/master/LICENSE"><img alt="GitHub license" src="https://img.shields.io/github/license/dongyao8/dycms"></a>
    <a href="https://github.com/dongyao8/dycms"><img src="https://img.shields.io/badge/Laravel-V8.x+-ff2c1f.svg?logo=laravel" alt="Laravel"></a>
     <a href="https://gitee.com/dongyao/dycms"><img src="https://img.shields.io/badge/Gitee-码云-CC3333.svg?logo=gitee" alt="Gitee"></a>
    <br>
    <a href="https://www.dongyao.ren"><img src="https://img.shields.io/badge/author-clark-27c4f2.svg?logo=github" alt="Author"></a>
     <a href="https://weibo.com/u/21376252"><img src="https://img.shields.io/badge/微博-21376252-5a78b7.svg?logo=Sina Weibo" alt="微博"></a>
      
</div>

加入官方交流QQ群:778957856
post-qrcode
clark
版权声明:本站原创文章,由 clark 2021-12-13发表,共计1454字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码