在个人主页展示今年的时间进度 | GitHub

简介: 在个人主页展示今年的时间进度 | GitHub

各位下午好。

今天给大家介绍一个稍微有点意思的小玩意——在 GitHub 个人主页显示今年的时间进度,大概效果如下图所示:

今年的时间进度为 68.77%

0326776c93e13edfeb12ed8a68ea6886_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

值得一提的是,这个时间进度条用到了 GitHub 的 Actions 功能,每隔 6 个小时会自动更新时间进度,它就像是个自动报时的机器人,全程无需人工干预。

下面简单讲一下实现的方法,有 GitHub 账号、且有兴趣的朋友,可以跟着操作一下:

创建一个和你的 GitHub ID 同名的 GitHub 仓库,例如我的 GitHub ID 是 phh95,创建的仓库名就为 phh95。

创建的同名仓库,它是一个特殊的仓库,会显示在 GitHub 个人主页的顶部。

1ebfa48968dc79cbc1ff27a76faf29fb_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

如果你之前创建了同名的仓库,这里就不需要再创建了。

我们需要在同名仓库中添加两个文件,一个是实现自动更新时间进度条的 workflows 文件,一个是设置生成的进度条样式的 index.js 文件。

daf5c7ecd65f5f718512c92080205bf0_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

点击仓库右上角的 Add file 按钮,选择 Create new file 创建一个新文件。

faadf716a39786233dcfbbcae3761ff9_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

首先对新创建的文件进行命名,输入 .github/workflows/main.yml,文件名就包含了文件所在的路径。

e85106cb954994f8f7763678a4b41ff1_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

接着在 yml 文件中添加如下的代码,

name: Progress Bar CI
on:
  workflow_dispatch:
  schedule:
    - cron: '0 */6 * * *'
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '14.x'
    - name: Update README.md
      run: node index.js > README.md
    - name: Commit change & Push
      run: |
          git config user.name 'github-actions[bot]'
          git config user.email '602646761+github-actions[bot]@users.noreply.github.com'
          git commit -am "bot: update README.md automatically"
          git push

其中要将第 24 行代码中的邮箱前缀 602646761 更换为你自己的 GitHub 邮箱前缀。

e974327d736fd58bdccb3ff5ea821514_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

接着在仓库中创建另外一个文件,文件名为 index.js

9d14bd5601e261a968639633e3bf80e2_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

在文件中粘贴下方的代码:

const thisYear = new Date().getFullYear()
const startTimeOfThisYear = new Date(`${thisYear}-01-01T00:00:00+00:00`).getTime()
const endTimeOfThisYear = new Date(`${thisYear}-12-31T23:59:59+00:00`).getTime()
const progressOfThisYear = (Date.now() - startTimeOfThisYear) / (endTimeOfThisYear - startTimeOfThisYear)
const progressBarOfThisYear = generateProgressBar()
function generateProgressBar() {
    const progressBarCapacity = 30
    const passedProgressBarIndex = parseInt(progressOfThisYear * progressBarCapacity)
    const progressBar =
      '█'.repeat(passedProgressBarIndex) +
      '▁'.repeat(progressBarCapacity - passedProgressBarIndex)
    return `{ ${progressBar} }`
}
const readme = `\
### Hi there 👋
⏳ Year progress ${progressBarOfThisYear} ${(progressOfThisYear * 100).toFixed(2)} %
---
⏰ Updated on ${new Date().toUTCString()}
---

在仓库中创建了这两个文件之后,你应该就可以在你的 GitHub Profile 页面看到今年的时间进度条了。

需要说明的是,这里用到的两段代码都不是我写的,这些代码来自 GitHub 上的一位用户 @liununu,作者的 GitHub 主页戳这里👉👉:https://github.com/liununu    

553d6759d788c0662863600f0660f6bc_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

除了本文介绍的「时间进度条」,你还可以在 GitHub 个人主页添加其他的小部件,例如你常用的编程语言、提交次数的统计以及你在使用的生产力工具


相关文章
|
JSON JavaScript 搜索推荐
Github 精选 #4 | 让 Github 帮你自动压缩图片!
Github 精选 #4 | 让 Github 帮你自动压缩图片!
Github 精选 #4 | 让 Github 帮你自动压缩图片!
|
前端开发 机器人 Swift
订阅服务:GitHub 开源库更新提醒
订阅服务:GitHub 开源库更新提醒
1541 0
订阅服务:GitHub 开源库更新提醒
|
18天前
|
前端开发 NoSQL Redis
开发指南071-进度展示
前端发起一个比较长时间的服务,需要在前端刷新实时进度,告诉用户进展
|
3月前
|
数据采集 数据可视化 算法
GitHub星标68K!Python数据分析入门手册带你从数据获取到可视化
Python作为一门优秀的编程语言,近年来受到很多编程爱好者的青睐。一是因为Python本身具有简捷优美、易学易用的特点;二是由于互联网的飞速发展,我们正迎来大数据的时代,而Python 无论是在数据的采集与处理方面,还是在数据分析与可视化方面都有独特的优势。我们可以利用 Python 便捷地开展与数据相关的项目,以很低的学习成本快速完成项目的研究。
|
5月前
|
开发工具 git
【笔记】十分钟学会正确的github工作流,和开源作者们使用同一套流程
【笔记】十分钟学会正确的github工作流,和开源作者们使用同一套流程
102 11
|
6月前
|
存储 移动开发 API
【GitHub】主页简历优化
【GitHub】主页简历优化
57 4
|
6月前
|
存储 JSON 前端开发
🔥基于GitHub的Electron自动发布与更新🔥
🔥基于GitHub的Electron自动发布与更新🔥
|
6月前
|
程序员 数据库
十一假期,分享几个好玩儿的GitHub项目
十一假期,分享几个好玩儿的GitHub项目
60 0
|
6月前
实时发现GitHub最热项目
实时发现GitHub最热项目
|
Java 开发工具 git
如何制作一个可以自动更新的Github个人主页
Github近期上线一个新的功能,就是你在自己账号下创建一个和自己用户名同名的仓库,并在仓库下创建一个README.md文件,这个文件就会被展示在你的Github个人主页。源于markdown的强大描述能力,你可以在你的Github首页展示各种各样的信息,甚至有人直接将自己个人简历挂上面,极大丰富了Github的可玩性。
127 0