Github个人主页个性化定制1.0

最新推荐文章于 2024-07-26 12:37:44 发布

SalvatorezZ

最新推荐文章于 2024-07-26 12:37:44 发布

阅读量1.1k

点赞数

分类专栏：所看文章标签： github html

本文链接：https://blog.csdn.net/TRillionZxY1/article/details/127130715

版权

所看专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Github「Your profile」个性化定制

Github「Your profile」个性化定制

花些时间，打造一个精致的有特点的 Github 个人主页。一方面可以增加自己经营 Github 账号的积极性，另一方面可以让访客眼前一亮。我只记录了我用到的组件和设置，还有很多酷炫的组件和设置，具体可以参考优秀案例，按照自己的喜好挑选。

个人成果展示

创建仓库

账号同名仓库就是用来打造个人主页的特殊仓库，在其中的 README.md 文件里配置信息和小组件。具体步骤：

Create a new repository；
Repository name 设置为 Owner 同名；
✅ Public；
✅ Add a README file；
Create repository。

基础内容

README.md 支持 Markdown 语法和 HTML 组件。个人建议内容主体使用 Markdown 语法构建，具体的布局排版使用 HTML 组件设置。常用的 HTML 组件有：

<!-- 布局设置 -->
<div align="center|left|right"></div>
<!-- 图片组件 -->
<img width=".." align="center|left|right" src="..." /></img>
<!-- 链接 -->
<a href=".."></a>
<!-- 文本 -->
<p></p>

特殊组件

动态打字特效

项目地址：Readme Typing SVG
可视化快速配置：Demo

Github 信息展示

项目地址：GitHub Readme Stats
shades-of-purple

最基础设置，把 ?username=username 替换成账户名：

<!-- Markdown -->
![Who's GitHub stats](https://github-readme-stats.vercel.app/api?username=username)
<!-- HTML -->
<img width="50%" align="right" src="https://github-readme-stats.vercel.app/api?username=username" />

根据个人喜好，可以在 ?username=username 后使用&间隔自定义设置，例如 &hide=（隐藏特定统计信息，以逗号间隔），&theme= （制定主题），等等。

该项目还提供了两种组件：Github代码语言统计和个性化置顶仓库展示，值得探索。

个性化徽章

项目地址： Shields.io
Shields被广泛地用于各种项目的 README.md 中。其中多种不同功能的徽章设置，我们主要使用的是自定义技能徽章。

Python Rust Shell MySQL Vue MongoDB Nodejs HTML5

<!-- Markdown -->
![](https://i-blog.csdnimg.cn/blog_migrate/d9ccf87267393a1cc2cb676ddb2b2570.png)
<!-- HTML -->
<img alt="Python" src="https://i-blog.csdnimg.cn/blog_migrate/5701a68685ee0fb7c4a9feaeb678acdf.png" />
<img alt="C" src="https://i-blog.csdnimg.cn/blog_migrate/197e91705675fbdcef0b236c7247876d.png" />
<img alt="Rust" src="https://i-blog.csdnimg.cn/blog_migrate/6681679a67c866dac3d3b1f2bf78b291.png" />
<img alt="Shell" src="https://i-blog.csdnimg.cn/blog_migrate/16b6bc14c8a44aca5e604b4482105f7b.png" />
<img alt="MySQL" src="https://i-blog.csdnimg.cn/blog_migrate/79380c387c45e7bd501653bba6d05532.png" />
<img alt="Vue" src="https://i-blog.csdnimg.cn/blog_migrate/cf02e2570f896548fe891948ea2ef5a4.png" />
<img alt="Go" src="https://i-blog.csdnimg.cn/blog_migrate/3662ac94a88c921e25b8cec2317b8a69.png" />
<img alt="MongoDB" src="https://i-blog.csdnimg.cn/blog_migrate/98bc2f8887e09ea056ed2220356bc179.png" />
<img alt="Nodejs" src="https://i-blog.csdnimg.cn/blog_migrate/9e4dad1ef2a965f21cd63c328e9076f0.png" />
<img alt="HTML5" src="https://i-blog.csdnimg.cn/blog_migrate/d9ccf87267393a1cc2cb676ddb2b2570.png" />

具体解析：

https://img.shields.io/badge/{徽章内容}-{徽章标题}-{徽章颜色}?{style}={参数值}&{logo}={参数值}&{logoColor}={参数值}

徽章内容自己填写(下图绿区显示)，徽章标题自己填写(下图黑区显示)，徽章颜色可以用取色器获取喜欢颜色的十六进制代码，style 有以下几种选择：
style
更多的设置可以参考官方文档。

访客数统计

page_id=username 替换成账户名。

<!-- Markdown -->
![](https://visitor-badge.glitch.me/badge?page_id=username)
<!-- HTML -->
<div align="left"> 
  <img src="https://visitor-badge.glitch.me/badge?page_id=username" />
</div>