Markdown 美化 Github 个人主页

注:本文参考这篇博客 http://t.csdnimg.cn/KXhSw

目录

    • 1 效果展示
    • 2 创建仓库
    • 3 编写 Markdown
      • 3.1 动态波浪图
      • 3.2 打字机动图
      • 3.3 技术栈图标
      • 3.4 项目贡献统计
      • 3.5 连续贡献统计
      • 3.6 贡献统计图
      • 3.7 代码时长统计
      • 3.8 仓库代码占比

1 效果展示

先来看看效果:

动态效果,可以我的主页观看:https://github.com/YaoqxCN

那么,话不多说,正片开始——

2 创建仓库

首先,打开 Github。如果你还没有账号,先注册(不用教了吧?)。

然后,如图,新建仓库:

然后注意,仓库名必须和用户名完全一样,这样才能让 Markdown 内容呈现在你的主页上。如图设置:

由于我已经新建过仓库,所以报错,忽略。

3 编写 Markdown

接下来才是正片!打开你的仓库,进入 README.md,选择右上角的编辑:

之后就可以愉快的写 Markdown 了~

接下来的每个部分的动图,都是 github 上的开源项目,所以别忘去给他们一个 star !支持开源!

温馨提示:全部代码可以直接去我的主页上看

3.1 动态波浪图

开源地址:https://github.com/kyechan99/capsule-render

官方就有它的生成工具:https://capsule-render.vercel.app/

但是不太容易连接的上,除非你有魔法。那就直接看代码吧,其中大概只需要改 text 参数就行。更多内容可以去 Github 仓库上了解。

顺带一提,每次刷新页面这个动图的颜色都是不一样的呢。

页面顶部:

<p align="center">
<img src="https://capsule-render.vercel.app/api?type=waving&color=timeGradient&height=250&section=header&text=HI%20THERE!&fontSize=80&fontAlign=50&fontAlignY=30&animation=twinkling" />
</p>

页面底部:

<p align="center">
<img src="https://capsule-render.vercel.app/api?type=waving&color=timeGradient&height=250&&section=footer&text=BYE!&fontSize=80&fontAlign=50&fontAlignY=70&animation=twinkling" />
</p>

3.2 打字机动图

Typing SVG

开源地址:https://github.com/DenverCoder1/readme-typing-svg

官方也有生成工具,这次不用魔法!链接:https://readme-typing-svg.demolab.com/demo/

参考代码:

<p align="center">
<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com?font=Orbitron&size=40&pause=1000&center=true&width=800&height=70&lines=Welcom+to+my+Github+profile+page!" alt="Typing SVG" /></a>
</p>

3.3 技术栈图标

开源地址:https://github.com/tandpfun/skill-icons

这里的图标是真的特别多!包括各种编程语言、开发软件等等,更多可以去项目readme里了解。

代码中的技术栈名称用 , 分隔即可。

参考代码:

<p align="center">
<img align="center" src="https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fskillicons.dev%2Ficons%3Fi%3Dpy%2Cc%2Ccpp%2Ccss%2Chtml%2Cmd%2Cgithub%2Cvscode%26theme%3Ddark&pos_id=img-80Ab8X0D-1724494983912)" />
</p>

3.4 项目贡献统计

开源地址:https://github.com/anuraghazra/github-readme-stats

又是一个需要魔法的工具 :(

参照代码修改吧:

<img align="center" width="430" src="https://github-readme-stats.vercel.app/api?username=YaoqxCN&theme=github_dark&show_icons=true&show=reviews&hide_title=true&hide=contribs&hide_border=true" />

username 参数改成自己的 Github 用户名即可。

3.5 连续贡献统计

项目地址:https://github.com/DenverCoder1/github-readme-streak-stats

生成网站:https://streak-stats.demolab.com/demo/

参考代码:

<img align="center" width="400" src="https://streak-stats.demolab.com?user=YaoqxCN&theme=github-dark-blue&date_format=%5BY.%5Dn.j&hide_border=true" />

3.6 贡献统计图

项目地址:https://github.com/Ashutosh00710/github-readme-activity-graph

很简单,也是直接改成自己的用户名就行:

<img width="800" src="https://github-readme-activity-graph.vercel.app/graph?username=YaoqxCN&theme=github-compact&hide_border=true&area=true&custom_title=Contribution%20Graph" />

3.7 代码时长统计

这里需要用到 WakaTime,这个非常好用的代码时长统计工具。首先去它的 官网上注册一个账号,之后,去你的任意一个主流 IDE 中安装插件,按照指示输入 API 即可激活。

接着你就能在 WakaTime 网站上看到你写代码时长的统计了!

或说回来,项目地址:https://github.com/anuraghazra/github-readme-stats

<img align="center" src="https://github-readme-stats.vercel.app/api/wakatime?username=YaoqxCN&theme=transparent&hide_border=true&layout=compact&langs_count=22&range=all_time" />

一样,将 username 改成自己的用户名。

3.8 仓库代码占比

项目地址:https://github.com/anuraghazra/github-readme-stats

参考代码:

<img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=YaoqxCN&theme=transparent&hide_border=true&layout=donut-vertical&langs_count=6" />

一样改用户名。


OK,Github 个人主页的美化就结束了,如果对你有帮助的话,别忘点赞收藏!拜~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/408554.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OSPF路由配置--多区域

目录 不理解OSPF路由动态协议的可以回顾一下OSPF详解&#xff0c;下这一系列的实验都不再做解释,直接开始配置 一. 实验拓扑 二. 实验配置 (命令可以直接复制粘贴到CLI中) 三. 实验验证 不理解OSPF路由动态协议的可以回顾一下OSPF详解&#xff0c;下这一系列的实验都不…

C++ 设计模式——迭代器模式

迭代器模式 C 设计模式——迭代器模式1. 主要组成成分2. 迭代器模式范例2.1 抽象迭代器2.2 抽象容器2.3 具体的迭代器2.4 具体的容器2.5 主函数示例 3. 迭代器 UML 图3.1 迭代器 UML 图解析 4. 迭代器模式的优点5. 迭代器模式的缺点6. 迭代器模式的适用场景7. 现代C中的迭代器总…

【深度学习】使用Conda虚拟环境安装多个版本的CUDA和CUDNN方便切换

conda虚拟环境安装CUDA和CUDNN 官网教程 https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#conda-installation 1. 背景 深度学习用显卡训练的时候&#xff0c;需要安装与显卡对应的cuda和cudnn。但不同的项目所支持的pytorch版本是不一样的&#x…

Openssl Infinite Loop 漏洞(CVE-2022-0778)

Openssl Infinite Loop 漏洞&#xff08;CVE-2022-0778&#xff09; 1. 漏洞详情 在该漏洞中由于证书解析时使用的 BN_mod_sqrt() 函数存在一个错误&#xff0c;它会导致在非质数的情况下永远循环。可通过生成包含无效的显式曲线参数的证书来触发无限循环。由于证书解析是在验…

视频监控汇聚算法平台训练站车辆类型算法分析车辆类型检测应用方案

车辆类型检测算法是计算机视觉和深度学习技术在交通管理和智能车辆系统中的重要应用之一。这种算法通过自动分析和识别车辆图像&#xff0c;能够准确判断车辆的类型&#xff0c;如轿车、SUV、货车等。 运用方案 数据采集与预处理 采集包含车辆的图像或视频数据&#xff0c;包…

自学成才

软件只是一种工具&#xff0c;正如给你一张纸和一支笔&#xff0c;有人满纸疙瘩&#xff0c;有人行云流水唱成一曲绝唱&#xff0c;全在于笔头功夫。使用软件一样需要智慧&#xff0c;不光是懂了就行&#xff0c;还得创造性使用&#xff0c;才会成就别人望洋兴叹的绝活。 Core…

【实施】软件实施方案(word套用)

软件实施方案 二、 项目介绍 三、 项目实施 四、 项目实施计划 五、 人员培训 六、 项目验收 七、 售后服务 八、 项目保障措施 软件开发全套资料获取&#xff1a;&#xff08;本文末个人名片也可直接获取&#xff09; 软件产品&#xff0c;特别是行业解决方案软件产品不同于一…

【Electron】桌面应用开发electron-builder打包报错问题处理

Electron 桌面应用开发electron-builder打包过程中各种报错问题处理 前一篇有写过 Electron 桌面应用开发快速入门到打包Windows应用程序 在安装到打包的整个过程中&#xff0c;我们都会遇到很多诡异的问题&#xff0c;接下来我将介绍我遇到的几个问题的解决方案 一、拉包的时…

VBA技术资料MF191:将源文件夹所有文件移动到目标文件夹

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

iOS profiles文件过期如何更新

创建发布用的Certificates 首先进入到https://developer.apple.com/account页面选择【证书】进入【新建证书】页面 点击【新建证书】按钮&#xff1a; 根据需求选中对应的【证书类型】&#xff0c;我选的是【Apple Distribution】&#xff0c; 开发者证书选择【Apple Devel…

react antd TreeSelect实现自定义标签

<ProFormTreeSelectlabel"接收对象"name"receiverObjects"colProps{{ span: 16 }}labelCol{{span: 6,}}wrapperCol{{span: 18,}}rules{[{ required: true }]}fieldProps{{showSearch: true,multiple: true,// autoClearSearchValue: true,filterTreeNod…

探索条形码与二维码的秘密:pyzbar库的神奇之旅

文章目录 探索条形码与二维码的秘密&#xff1a;pyzbar库的神奇之旅背景&#xff1a;为什么选择pyzbar&#xff1f;pyzbar是什么&#xff1f;如何安装pyzbar&#xff1f;简单库函数使用方法场景应用常见Bug及解决方案总结 探索条形码与二维码的秘密&#xff1a;pyzbar库的神奇之…

数字化与进制转换

1.数字化是什么&#xff1f; 数字化是将事物的属性转化为计算机可处理对象的过程。 2.数字化的好处&#xff1f; 可以让我们的生活&#xff0c;学习和工作更加便捷&#xff0c;大大提升我们学习和工作的效率。 3.如何将采集到的数据进行数字化&#xff1f; 可以通过两种信…

爬取央视热榜并存储到MongoDB

1. 环境准备 在开始之前&#xff0c;确保你已经安装了以下Python库&#xff1a; pip install requests pymongo2. 爬取网页内容 首先&#xff0c;我们需要爬取央视热榜的网页内容。通过requests.get()方法&#xff0c;我们可以获取网页的HTML内容&#xff0c;并通过re.finda…

Linux--gdb的常用命令

目录 前言 一、gdb是什么&#xff1f; 二、常用命令 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 对于程序有两个版本&#xff0c;一个是debug版和release版&#xff0c;要想进行调试必须使用debug版本&#xff0c;再Linux上进行调试就要用到调试器…

实习手记(8):增删改查

上周又偷懒了没有按时写博客&#xff08;扣大分啊啊&#xff01;&#xff09;但是好像也没有人看呢~其实最开始也只是想着记录一下实习历程&#xff0c;怕自己之后回过头想关于实习的都想不起来了&#xff0c;个人还是喜欢记录有关自己的学习生活的&#xff0c;就算没啥人看但回…

Elasticsearch安装 Kibana安装

安装Elasticsearch 一、拉取镜像或者上传 docker pull Elasticsearch 二、将上传的镜像导入(在仓库拉取的这一步跳过) docker load -i es.tar docker load -i 三、创建容器 1.Elasticsearch 注意修改到自己的网络&#xff08;第八行&#xff09; docker run -d \--nam…

ES 支持乐观锁吗?如何实现的?

本篇主要介绍一下Elasticsearch的并发控制和乐观锁的实现原理&#xff0c;列举常见的电商场景&#xff0c;关系型数据库的并发控制、ES的并发控制实践。 并发场景 不论是关系型数据库的应用&#xff0c;还是使用Elasticsearch做搜索加速的场景&#xff0c;只要有数据更新&…

“Docker中部署Kibana:步骤与指南“

博主这篇文章是跟Elasticsearch那篇文章是有关系的&#xff0c;建议大家先去看&#xff1a; 轻松上手&#xff1a;Docker部署Elasticsearch&#xff0c;高效构建搜索引擎环境_docker 启动 es-CSDN博客 这篇博文&#xff0c;还有镜像下载不下来的情况&#xff0c;大家可以去看…

pikachu-ssrf_redis

目录 SSRF 1、SSRF漏洞介绍&#xff1a; 2、SSRF漏洞原理&#xff1a; 3、SSRF漏洞利用手段&#xff1a; 4、SSRF漏洞绕过方法&#xff1a; SSRF(curl)用法 1、通过网址访问链接 2、利用file协议查看本地文件 3、dict协议扫描内网主机开放端口 4.gopher&#xff1a;威…