github 个人主页配置

news/2025/1/10 21:18:44/

Guthub 个人主页 （官方称呼是 profile）可以展示很多有用的信息，例如添加一个首页被访问次数的计数器，一个被 Star 与 Commit 的概览信息，以及各种技能标签，设备标签等，还可以利用 wakatime 显示你最近编码各类语言的使用时长。

默认的主页会显示其仓库信息、提交信息，例如 Linux 之父 Linus 的 GitHub 主页 长这样：
在这里插入图片描述

Github 关于主页定制的说明文档：Setting up and managing your GitHub profile

1 原理

在 GitHub 上新建一个仓库，仓库名和自己 Github 用户名相同，然后添加一个 README.md 自述文件，在该文件里添加信息即可。

这是我的仓库：https://github.com/Taot-chen/Taot-chen

仓库建好后，添加一个 README.md 文件，此时可以看到右上角有个提示：

Taot-chen/Taot-chen is a special repository.Its README.md will appear on your public profile.

在这里插入图片描述

2 主页定制

接下来，就可以通过修改 README.md 来定制主页了。

首先可以找一个好看的模板，修改信息作为自己的主页。例如：

2.1 GitHub 统计卡片

  • 项目地址：github-readme-stats

  • 使用：在 README 文件中添加如下代码，?username=​ 的值修改为 GitHub 用户名：

![Taot's GitHub stats](https://github-readme-stats.vercel.app/api?username=Taot-chen)

显示图标、主题样式等配置可以参考官网文档。

  • 效果：

在这里插入图片描述

2.2 GitHub 使用语言统计
  • 项目地址：github-readme-stats
  • 使用：在 README 文件中添加如下代码，?username=​ 的值修改为 GitHub 用户名：
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=Taot-chen&size_weight=0.5&count_weight=0.5&langs_count=8)
  • 效果：

在这里插入图片描述

2.3 GitHub Gist Pins
  • 项目地址：github-readme-stats
  • 使用：在 README 文件中添加如下代码，?username=​ 的值修改为 GitHub 用户名，href 的值改为对应 github 项目的地址：
<a href="https://github.com/Taot-chen/Taot-chen.github.io"><img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=Taot-chen&repo=Taot-chen.github.io&theme=default" /><a href="https://github.com/Taot-chen/raspberrypi_dl"><img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=Taot-chen&repo=raspberrypi_dl&theme=default" />
  • 效果：

在这里插入图片描述

2.4 GitHub 资料奖杯

  • 项目地址：github-profile-trophy

  • 使用：在 README 文件中添加如下代码，?username=​ 的值修改为 GitHub 用户名：

[![trophy](https://github-profile-trophy.vercel.app/?username=Taot-chen&row=1&margin-w=10&theme=dark_lover)](https://github.com/ryo-ma/github-profile-trophy)
  • 效果：

在这里插入图片描述

2.5 GitHub 徽章

为 github 开源项目生成高质量小徽章图标，直接复制链接使用。

  • 项目地址：Shields.io

  • 使用：在 README 文件中添加如下代码:

<img src="https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" /> 
<img src="https://img.shields.io/badge/-CSS3-1572B6?style=flat-square&logo=css3" /> 
<img src="https://img.shields.io/badge/-JavaScript-oringe?style=flat-square&logo=javascript" />
  • 效果：

在这里插入图片描述

2.6 GitHub 访客徽章

这个徽章会实时改变，记录此页面被访问的次数。

  • 项目地址：visitor-badge.glitch.me

  • 使用：在 README 文件中添加如下代码，page_id=​ 的值修改为 GitHub 用户名：

![visitors](https://visitor-badge.glitch.me/badge?page_id=Taot-chen&left_color=green&right_color=red)
  • 效果：

在这里插入图片描述

2.7 GitHub 活动统计图

动态生成的活动图，用于显示过去 31 天的 GitHub 活动。

  • 项目地址：github-readme-activity-graph

  • 使用：在 README 文件中添加如下代码,?username=​ 的值修改为 GitHub 用户名：

![Taot's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=Taot-chen&theme=xcode)
  • 效果：

在这里插入图片描述

2.8 修仙系列统计卡片

一个以凡人修仙传境界为基础的 Github 统计卡片。等级分为：[‘道祖’, ‘大罗’, ‘太乙’, ‘金仙’, ‘真仙’, ‘大乘’, ‘合体’, ‘炼虚’, ‘化神’, ‘元婴’, ‘金丹’, ‘筑基’, ‘练气’]，对应区间：[1, 5, 10, 15, 20, 30,40,50,60, 70, 80, 90, 100]。

  • 项目地址：github-immortality

  • 使用：在 README 文件中添加如下代码,?username=​ 的值修改为 GitHub 用户名：

![Taot's GitHub stats](https://github-immortality.vercel.app/api?username=Taot-chen)
2.9 GitHub 连续打卡

在 README 中展示连续提交代码的次数。

  • 项目地址：github-readme-streak-stats

  • 使用：在 README 文件中添加如下代码,?username=​ 的值修改为 GitHub 用户名：

![GitHub Streak](https://streak-stats.demolab.com/?user=Taot-chen)
2.10 社交统计

在 README 中展示在一些流行的网站的数据，例如知乎，GitHub，B 站，LeetCode，掘金，CSDN，牛客。

  • 项目地址：stats-cards

  • 使用：在 README 文件中添加如下代码,username=​ 的值为那个网站的用户名：

![](https://stats.justsong.cn/api/csdn?username=Taot-chen&cn=true)
2.11 star 趋势

统计和展示自己某个项目的 star 趋势。

  • 项目地址：star-history.t9t.io

  • 使用：输入仓库名，就能自动生成 star 增长曲线。还能输入多个仓库查看项目对比。

2.12 GitHub Corners：分享角标

如果你的 GitHub 项目有一个对应的网站，并且想要用户通过网站跳转到 GitHub 项目页从而得到 star，不防试试这个。

  • 项目地址：github-corners

  • 使用：它可以帮你生成给网站添加 GitHub 角标的代码，只需要选择一个风格，复制代码到自己的项目主页文件中，将超链接替换为自己的仓库地址即可。

2.13 打字特效

让内容通过打字的特效来展示。

  • 项目地址：readme-typing-svg

  • 使用：复制代码到 Markdown 并替换 ?lines=​ 的值为你想要的内容，字与字之间用加号隔开：

![Typing SVG](https://readme-typing-svg.demolab.com/?lines=👋+Hi+there!+I'm+Chen+Taot.)
2.14 贪吃蛇

默认的提交信息是这样的：
在这里插入图片描述

可以将其变成一个动画：一只贪吃蛇挨个吃掉图里的绿点。

  • 新建一个 workflow 文件（名字随意），不需要任何改动，然后提交：
name: generate animationon:# run automatically every 2 hoursschedule:- cron: "0 */2 * * *" # allows to manually run the job at any timeworkflow_dispatch:# run on every push on the master branchpush:branches:- masterjobs:generate:permissions: contents: writeruns-on: ubuntu-latesttimeout-minutes: 5steps:# generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>- name: generate github-contribution-grid-snake.svguses: Platane/snk/svg-only@v3with:github_user_name: ${{ github.repository_owner }}outputs: |dist/github-contribution-grid-snake.svgdist/github-contribution-grid-snake-dark.svg?palette=github-dark# push the content of <build_dir> to a branch# the content will be available at https://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file> , or as github page- name: push github-contribution-grid-snake.svg to the output branchuses: crazy-max/ghaction-github-pages@v3.1.0with:target_branch: outputbuild_dir: distenv:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  • 将下列代码复制到 Markdown 内，将用户名部分替换成自己的，并提交
<picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Taot-chen/Taot-chen/output/github-contribution-grid-snake-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Taot-chen/Taot-chen/output/github-contribution-grid-snake.svg"><img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/Taot-chen/Taot-chen/output/github-contribution-grid-snake.svg">
</picture>

这段代码的目的是：加载贪吃蛇动画，且贪吃蛇的暗亮风格与你的 Github 的暗亮风格进行自动适配。

前面的 workflow 里面设置的是每隔 2 小时更新一次，可以先手动跑一次。点击 generate animation​，点击 Run workflow​：
在这里插入图片描述

稍等片刻，显示运行成功，再次回到仓库主页就会看到贪吃蛇动画已被加载。

2.15 博客文章同步

如果你有博客网站，且网站带有 RSS 功能，就可以配置此功能，它能在你的 GitHub 首页上显示最近更新的博客。

  • 原理：利用 blog-post-workflow 在自述文件上展示最近几篇博客文章。

  • 使用

    • 创建一个 workflow（例如 blog-post-workflow.yml​ ），需要改动最后一行的 feed_list​ 的内容为你自己网站的 RSS 链接。

      name: Latest blog post workflow
on:schedule: # Run workflow automatically- cron: '0 */2 * * *' # Runs every hour, on the hourworkflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
permissions:contents: write # To write the generated contents to the readmejobs:update-readme-with-blog:name: Update this repo's README with latest blog postsruns-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v3- name: Pull in blog's postsuses: gautamkrishnar/blog-post-workflow@v1with:feed_list: "https://taot-chen.github.io/rss.xml"

    • 然后在自述文件输入这些内容，程序会自动抓取文章标题、链接等并替换这两个注释：

    📕 &nbsp;**Latest Blog Posts**
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
    • 与贪吃蛇同理，此时是看不到文章列表的，得先手工运行一次 action，稍等片刻，显示运行成功，再次回到仓库主页就会看到生效了。
2.16 GitHub 3D 统计

使用 3D 图来展示信息。

  • 项目地址：github-profile-3d-contrib

  • 使用：用 GitHub Action。首先创建文件 .github/workflows/profile-3d.yaml​，内容如下：

name: GitHub-Profile-3D-Contribon:schedule: # 03:00 JST == 18:00 UTC- cron: "0 18 * * *"workflow_dispatch:jobs:build:runs-on: ubuntu-latestname: generate-github-profile-3d-contribsteps:- uses: actions/checkout@v3- uses: yoshi389111/github-profile-3d-contrib@0.7.1env:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}USERNAME: ${{ github.repository_owner }}- name: Commit & Pushrun: |git config user.name github-actionsgit config user.email github-actions@github.comgit add -A .git commit -m "generated"git push

  • 然后手动执行一次 action：Actions​ -> GitHub-Profile-3D-Contrib​ -> Run workflow​

  • 然后会生成这些文件（带路径，各种主题的都有）：

    • profile-3d-contrib/profile-green-animate.svg​
    • profile-3d-contrib/profile-green.svg​
    • profile-3d-contrib/profile-season-animate.svg​
    • profile-3d-contrib/profile-season.svg​
    • profile-3d-contrib/profile-south-season-animate.svg​
    • profile-3d-contrib/profile-south-season.svg​
    • profile-3d-contrib/profile-night-view.svg​
    • profile-3d-contrib/profile-night-green.svg​
    • profile-3d-contrib/profile-night-rainbow.svg​
    • profile-3d-contrib/profile-gitblock.svg​
      ‍

  • 最后在 Markdown 里添加即可

<picture><source media="(prefers-color-scheme: dark)" srcset="/profile-3d-contrib/profile-night-rainbow.svg" /><source media="(prefers-color-scheme: light)" srcset="/profile-3d-contrib/profile-gitblock.svg" /><img src="/profile-night-rainbow.svg" />
</picture>
  • 报错解决：
remote: Permission to mthsBelloni/mthsBelloni.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/Taot-chen/Taot-chen/': The requested URL returned error: 403
Error: Process completed with exit code 128.

大概率是因为没有配置 actions 的写权限，导致无​法写入 svg 文件。添加权限即可：

在这里插入图片描述

  • 效果

在这里插入图片描述

2.17 感谢参与者

每位开源项目的参与者都值得记录和感谢，传统方式是手工编辑，项目负责人一个一个地把参与者的名字记录到 README.md，非常低效。

可以使用一种更高效、自动化的方式来添加项目贡献者。

  • 项目地址：allcontributors.org
  • 使用：可以用命令行或者机器人的方式自动将项目的贡献者补充到项目文档中，并且生成排版精美的表格。

http://www.ppmy.cn/news/1562063.html

相关文章

Flink概念知识讲解之：Restart重启策略配置

Flink概念知识讲解之：Restart重启策略配置

Flink概念知识讲解之&#xff1a;Restart重启策略配置 当 Task 发生故障时&#xff0c;Flink 需要重启出错的 Task 以及其他受到影响的 Task &#xff0c;以使得作业恢复到正常执行状态。 Flink 通过重启策略和故障恢复策略来控制 Task 重启&#xff1a;重启策略决定是否可以…
阅读更多...
iOS - 数组的真实类型

iOS - 数组的真实类型

1. NSArray 类簇 // 1. __NSArray0 (空数组) NSArray *empty [];// 2. __NSArrayI (不可变数组) NSArray *immutable [1, 2, 3];// 3. __NSArrayM (可变数组) NSMutableArray *mutable [NSMutableArray array];// 4. __NSSingleObjectArrayI (单元素数组) NSArray *single …
阅读更多...
代码管理助手-Git

代码管理助手-Git

前言 Git 是一个版本控制系统&#xff0c;可以帮助你记录文件的每一次修改。这样&#xff0c;如果你在编程时不小心把代码写错了&#xff0c;可以很容易地回退到之前的版本。最重要的是&#xff0c;Git 是完全免费的&#xff0c;用户可以在自己的计算机上安装和使用 Git&#x…
阅读更多...
【形式篇】年终总结怎么写：PPT如何将内容更好地表现出来

【形式篇】年终总结怎么写：PPT如何将内容更好地表现出来

——细节满满&#xff0c;看完立马写出一篇合格的PPT 总述 形式服务于内容&#xff0c;同时合理的形式可以更好地表达和彰显内容 年终总结作为汇报型PPT&#xff0c;内容一定是第一位的&#xff0c;在内容篇(可点击查看)已经很详细地给出了提纲思路&#xff0c;那如何落实到…
阅读更多...
java-type-tool 轻量级java type工具类库

java-type-tool 轻量级java type工具类库

java-type-tool 轻量级java type工具类库.链接地址 https://github.com/joker-pper/java-type-tool https://gitee.com/joker-pper/java-type-tool 引入方式 <dependencies><dependency><groupId>io.github.joker-pper</groupId><artifactId>j…
阅读更多...
LabVIEW瞬变电磁接收系统

LabVIEW瞬变电磁接收系统

利用LabVIEW软件与USB4432采集卡开发瞬变电磁接收系统。系统通过改进硬件配置与软件编程&#xff0c;解决了传统仪器在信噪比低和抗干扰能力差的问题&#xff0c;实现了高精度的数据采集和处理&#xff0c;特别适用于地质勘探等领域。 ​ 项目背景&#xff1a; 瞬变电磁法是探…
阅读更多...
Java100道面试题

Java100道面试题

1.JVM内存结构 1. 方法区&#xff08;Method Area&#xff09; 方法区是JVM内存结构的一部分&#xff0c;用于存放类的相关信息&#xff0c;包括&#xff1a; 类的结构&#xff08;字段、方法、常量池等&#xff09;。字段和方法的描述&#xff0c;如名称、类型、访问修饰符…
阅读更多...
机器学习在智能外呼机器人中的作用

机器学习在智能外呼机器人中的作用

机器学习在智能外呼机器人中的作用 机器学习是智能外呼机器人实现智能化的核心技术。它赋予了机器人理解自然语言、学习用户行为、适应不同场景的能力&#xff0c;从而实现更加人性化、高效的交互。 具体应用场景 意图识别&#xff1a; 准确理解用户表达的意图&#xff0c;例…
阅读更多...
最新文章

Copyright @ 2022~2023