学会这几招,轻松让你的Github脱颖而出

开源
今天分享的内容我想每一位对开源感兴趣的朋友都或多或少的知道, 也是我在做开源项目中用到的一些强大的工具, 可以让我们的开源项目和 github 主页更加富有展现力, 最后会分享一个我自己的 github 主页的 readme.md, 大家可以参考学习一下.

[[417939]]

今天分享的内容我想每一位对开源感兴趣的朋友都或多或少的知道, 也是我在做开源项目中用到的一些强大的工具, 可以让我们的开源项目和 github 主页更加富有展现力, 最后会分享一个我自己的 github 主页的 readme.md, 大家可以参考学习一下。

在读完本文之后大家可以收获:

  • 使用 readme-md-generator 快速美化你的 README.md
  • 使用 gitHub-readme-stats 自动生成个人统计分析报表
  • 使用 git-emoji 让你的代码提交记录可视化

一. 如何让你的开源项目有个漂亮的README.md ?

逛了一圈社区之后小夕发现了 readme-md-generator.

readme-md-generator 通过扫描我们的 package.json 和 git 配置来帮助我们生成对应的 readme 结构。

产生的 README.md 类似如下展现:

另外, 一个优秀的 package.json 应该包含如下几个元数据:

  1.   "name""H5-Dooring"
  2.   "version""1.1.3"
  3.   "description""H5-Dooring是一款功能强大,开源免费的H5可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主, 后台采用nodejs开发。"
  4.   "author""作者信息"
  5.   "license""开源协议"
  6.   "homepage""主页地址"
  7.   "repository": { 
  8.     "type""git"
  9.     "url""git仓库地址" 
  10.   }, 
  11.   "bugs": { 
  12.     "url""供他人提issue的地址" 
  13.   }, 
  14.   "engines": { 
  15.     "npm"">=5.5.0"
  16.     "node"">=9.3.0" 
  17.   } 

大家在做开源项目的时候也可以参考如上规范, 让自己的开源项目更健壮美观, 接下来分享一个我用这个工具生成的 readme.md 效果:

地址: mitu-editor | 轻量且强大的图片编辑器

二. 使用 github-readme-stats 自动生成个人统计分析报表

我们都知道 github 的个人主页默认的配置很单调, 但是我们看很多大佬的 github主页, 展现非常漂亮, 比如这位大大:

这是为什么呢? 实不相瞒, 上图大佬就是发明美化 github个人主页 工具的作者, 我们可以看到他的个人主页有非常漂亮的统计图, 而生成这种动态统计图的工具就是 github-readme-stats. 它可以在我们的 README 中获取动态生成的 GitHub 统计信息, 而我们的使用方法也很简单, 只需要在自己 github 主页的 README 中加入如下代码:

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

我们只需要更改 ?username= 的值为我们自己的 GitHub 用户名即可。

定制自己的统计数据主题

同时, 我们还可以轻松定制统计卡片的主题, 该工具默认提供的主题如下:

同样, 我们只需要在 README 中加入如下代码:

  1. ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical) 

这样就能轻松选择自己喜欢的主题, 更强大的是我们还可以自定义主题颜色, 大家可以在 github 上亲自体验一下.

添加自己项目的热门语言卡片

热门语言卡片显示了我们在 GitHub 上的开源项目常用的编程语言,展示如下:

当然也可以设置成紧凑型布局:

要实现这样的效果也很简单, 只需要配置如下代码:

  1. [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats) 

更多的配置大家可以在 github 慢慢挖掘, 该项目的 github 地址如下:

  1. github-readme-stats 

这里也展示一下我通过配置之后的 github 个人主页的界面效果:

三. 使用 git-emoji 让你的代码提交可视化

git-emoji 是 git 提交信息的 emoji 指南, 我们按照它的规范提交 log 日志, 将会生成形象易懂的提交表情, 如下:

我们看到的比较有名的开源项目提交都会有形象的 emoji, 也都是遵循了对应的提交规范. 下面是它的介绍网站:

在线地址: https://gitmoji.js.org/

我们可以使用它的指南来轻松优化我们开源的提交 log, 赶紧来试试吧~

最后 

这里分享一个我配置好的 github README模版, 大家可以参考一下: 美化你的github个人主页, 后期我会在数据可视化和工程化上输出更多实用的开源项目和框架,如果有其他问题或需求,可以和笔者交流学习。

本文转载自微信公众号「趣谈前端」,可以通过以下二维码关注。转载本文请联系趣谈前端公众号。

 

责任编辑:武晓燕 来源: 趣谈前端
相关推荐

2014-02-24 13:55:47

简历简历技巧

2016-05-12 13:51:05

IBM大型机混合云

2009-04-13 10:52:03

视频面试求职技巧

2015-03-06 09:21:41

APP

2013-03-25 16:39:42

华为BYOD解决方案

2015-08-06 10:03:03

云计算云计算认证云迁移

2013-08-27 15:45:37

App应用商店ASO应用商店优化App营销推广

2023-11-04 12:08:40

Flutter事件

2023-11-06 15:04:07

Flutter开发技巧

2011-12-27 15:02:37

云计算

2012-08-08 10:00:17

面试技术

2018-10-19 08:40:33

GitHub开源代码库

2015-10-27 10:13:42

初创公司脱颖而出

2014-09-02 15:25:10

国产操作系统

2018-06-03 00:16:36

阿里巴巴技术面试

2021-11-22 23:42:02

Go监控程序

2022-03-04 00:08:00

数据数据安全安全

2020-03-13 13:45:41

前端面试Web

2018-01-11 23:07:07

构建生态垂直落地AIoT

2009-09-10 09:48:25

IT职场
点赞
收藏

51CTO技术栈公众号