目录

背景

你在github上浏览时，是否看到过一些用户的主页不仅仅只是单调的仓库，而是十分炫酷的图片、动效？
在这里插入图片描述
在这里插入图片描述
本文就来简单介绍一下，这类效果是怎么实现的。

创建仓库

要在你的 GitHub 个人主页（即 github.com/你的用户名）显示一个漂亮的介绍，必须满足以下三个硬性条件：

  1. 新建仓库：仓库名必须与你的 GitHub 用户名 完全一致（注意大小写）。
    • 例如：如果你的用户名是 Alice，仓库名必须是 Alice。
  2. 公开属性：该仓库必须设置为 Public（公开）。
  3. 包含 README：仓库根目录下必须有一个 README.md 文件。
    当你在创建仓库输入名字时，如果匹配成功，GitHub 会弹出一个可爱的“小绿盒”提示你：

    “You found a secret! … This is a special repository.”

在这里插入图片描述
将该仓库创建成功后，可以发现，该仓库中的readme文件会在我们的github主页上置顶显示。因此，若我们使用md语言对readme文件进行美化，便是对我们github主页的美化，这便是美化主页的原理，其实是非常简单的，就像是给与用户的一个小彩蛋。
在这里插入图片描述

编辑美化（以个人为例）

其实本文重点已经结束了，没错因为美化的原理已经讲完了，剩下的工作就只剩在readme文件中的编辑了，也就是看各位读者markdown的用法如何，最终美化的效果也取决各位能利用markdown到什么地步。
剩下的内容主要是介绍我个人主页的美化代码，效果图是上方的图片，想看完整的可以自行访问我的github主页 github.com/C-KyS，我也会把完整代码放在后面，欢迎参考我的代码或者fork，记得留下Star喔~

波浪图标题

在这里插入图片描述
我的头部是一个波浪头图和 “Hi there…” 文字，来自capsule-render工具。

// 源代码如下
<div align="center">
  <img src="https://capsule-render.vercel.app/api?type=waving&color=gradient&height=300&section=header&text=HI%20THERE!👋&fontSize=90&animation=fadeIn&fontAlignY=38&desc=Welcome%20to%20my%20profile!&descAlignY=51&descAlign=62" />
</div>

各个字段的详细解释如下：

  • type=waving:
    图片形状。waving 表示底部是波浪形的。其他可选值还有 rect (矩形), rounded (圆角矩形), cylinder (圆柱形), slice (切片状) 等。
  • color=gradient:
    背景颜色。gradient 表示使用随机或默认的渐变色，这会让每次生成的颜色或者整体风格比较鲜艳。你也可以改成具体的颜色，如 blue, 000000 (黑色 hex 代码) 等。也可以指定双色渐变，例如 color=0:ff0000,100:0000ff。
  • height=300:
    图片高度。单位是像素 (px)。这里设置为 300 px，对于一个 Header 来说是比较大气的高度。
  • section=header:
    截取部分。由于我们选的是 waving (波浪)，这个参数决定了波浪是在顶部还是底部。
    • header: 只有底部有波浪（顶部是平的，适合放在页面最上方）。
    • footer: 只有顶部有波浪（底部是平的，适合放在页面最下方）。
  • text=HI%20THERE!👋:
    主标题文字。就是图片正中间那个大大的文字。%20 是 URL 编码中的空格。所以实际显示的是 “HI THERE!👋”。
  • fontSize=90:
    主标题字体大小。单位是像素。
  • animation=fadeIn:
    文字入场动画。fadeIn 表示文字会渐渐浮现出来。还有 scaleIn, twinkling 等其他动画效果，或者不写这个参数就没有动画。
  • fontAlignY=38:
    主标题垂直位置。这是一个百分比数值 (0-100)。38 表示文字中心位于图片高度上方 38% 的位置。数值越小，文字越靠上；数值越大，文字越靠下（可能会被波浪挡住）。
  • desc=Welcome%20to%20my%20profile!:
    副标题/描述文字。显示在主标题下方的小字。
  • descAlignY=51:
    副标题垂直位置。同上，51 表示位于图片垂直中间略偏下的位置。
  • descAlign=62:
    副标题水平位置。通常这是指水平方向的对齐微调坐标，单位通常是百分比。配合 fontAlign 使用，但在居中布局下有时候这个参数用来做细微偏移。默认大部分情况是居中的。

打字机效果的动态 SVG 图片

在这里插入图片描述

Typing SVG

这段代码使用了 Typing SVG 工具 (readme-typing-svg)，用于生成一个打字机效果的动态 SVG 图片。

// 源代码如下
<h3 align="center">
  <a href="https://git.io/typing-svg">
    <img src="https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=23F709&center=true&vCenter=true&width=600&lines=Hello%2C%20World!;Talk%20is%20cheap.%20Show%20me%20the%20code!;It%20works%20on%20my%20machine!&size=27" alt="Typing SVG" />
  </a>

</h3>
  • src=“https://readme-typing-svg.demolab.com?..”
    这是图片的来源 URL。浏览器加载这个 URL 时，服务器会动态生成一张包含动画的 SVG 图片返回回来。
  • font=Fira+Code
    字体。这里指定使用 Fira Code。这是一种非常受程序员欢迎的等宽字体（Monospace），带有编程连字特性（ligatures），看起来很有代码感。
  • pause=1000
    暂停时间。单位是毫秒 (ms)。当一句话完全打完后，光标会停顿多久才开始删除文字。1000 代表停顿 1 秒。
  • color=23F709
    文字颜色。这是一个十六进制颜色代码。23F709 是一个非常鲜艳的亮绿色，类似于经典的黑客终端（Terminal）字体颜色。
  • center=true (及 URL 中的 &center=true)
    水平居中。让文字在生成的图片画布中水平居中显示。
  • vCenter=true
    垂直居中。让文字在画布的高度方向上也居中。
  • width=600
    图片总宽度。单位是像素。这个非常重要。如果你的文字很长（比如 “Talk is cheap…”），你需要把这个宽度设得足够大，否则文字会超出画布边界而被截断。
  • lines=…
    要显示的文字内容。这是最核心的部分。
    • 不同的话之间用分号 ; 隔开。
    • URL 编码形式为：Hello%2C%20World!;Talk%20is%20cheap…。
    • 效果：打字机先打出第一句 -> 停顿 1 秒 -> 删除 -> 打出第二句 -> … -> 循环。
  • size=27
    字号大小。单位是像素。数字越大，字越大。

About me

在这里插入图片描述

该部分就是最简单的markdown语法，通过简单的语言和emoji告知访问者自己的兴趣爱好、个人主页等信息，当然这些根据你个人的安排来就行

// 源代码如下
### 👨‍💻 About Me

- 🔭 I’m interested on <kbd>Embodied AI</kbd> and <kbd>Multimodal LLMs</kbd>
- 🌱 I’m currently learning **VLA**, **Robot Foundation Model**, **Diffusion Policy**
- 💬 Ask me anything you want!
- 📫  My blog: [https://blog.csdn.net/cyh20041102](https://blog.csdn.net/cyh20041102)
- 🌐 My Gitee: [https://gitee.com/CYH-KennyS](https://gitee.com/CYH-KennyS)
- 📝 How to reach me: **Yuhan___Chen@163.com**

Languages and Tools

在这里插入图片描述

该部分主要介绍个人的技术栈或正在学习的技术栈，徽章图片的来源 img.shields.io，它是一个非常流行的生成元数据徽章的服务，GitHub 上随处可见的那些小牌子大多是它生成的。

// 源代码如下
### 🛠️ Languages and Tools

<div align="center">
  <!-- 根据实际技能栈进行增删 -->
  <img src="https://img.shields.io/badge/C-00599C?style=for-the-badge&logo=c&logoColor=white" />
  <img src="https://img.shields.io/badge/C%2B%2B-00599C?style=for-the-badge&logo=c%2B%2B&logoColor=white" />
  <img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" />
  <img src="https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=openjdk&logoColor=white" />
  <br />
  <img src="https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&logo=git&logoColor=white" />
  <img src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" />
  <img src="https://img.shields.io/badge/VSCode-007ACC?style=for-the-badge&logo=visualstudiocode&logoColor=white" />
</div>
  • C-00599C (示例：badge/名称-颜色)
    • C: 徽章左侧显示的文本内容（这里是编程语言的名字）。
    • 00599C: 徽章右侧背景的十六进制颜色代码。这通常是该语言或工具的官方品牌色。
  • style=for-the-badge
    徽章样式。Shields.io 提供了多种样式：
    • for-the-badge: 这种大号、全大写、扁平化的风格，非常适合放在 README 的标题或技能展示区域。
    • 其他常见样式还有 flat (默认扁平), plastic (立体), flat-square (方角) 等。
  • logo=c
    左侧图标。指定徽章最左边显示什么 Logo。Shields.io 使用 Simple Icons 的图库，所以这里的名字必须对应 Simple Icons 里的 slug（比如 c, python, visualstudiocode）。
  • logoColor=white
    图标颜色。指定左侧 Logo 的颜色。在深色背景下，通常设为 white 以保证清晰可见；在浅黄色的 JavaScript 徽章中，通常设为 black。
  • <br />
    HTML 换行标签。
    • Markdown 甚至 GitHub 的 README 本质上都支持 HTML。
    • 这个标签的作用是强制徽章换行显示，而不是让它们一直往右挤，从而实现更整齐的排版（例如把语言和工具分开，或者分几行展示）。
  • align=“center” (来自外层的 < div align=“center”>)居中对齐。将整个技术栈展示区域的内容（所有徽章）在页面水平居中。

GitHub Stats

在这里插入图片描述
该部分用于可视化你的github账号使用数据，如获取的star，commit次数，提交的PR，issue等等，同时还包括使用的语言分布。

// 源代码如下
### 📊 GitHub Stats

<div align="center">
  <img src="https://github-readme-stats.vercel.app/api?username=C-KyS&show_icons=true&theme=radical" height="180" alt="stats graph" />
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=C-KyS&layout=compact&theme=radical" height="180" alt="languages graph" />
</div>

<div align="center">
  <img src="https://github-readme-streak-stats.herokuapp.com/?user=C-KyS&theme=radical" alt="streak graph" />
</div>
  • src=“https://github-readme-stats.vercel.app/api?..”
    这是 GitHub Readme Stats 工具的 API 地址。它能动态抓取你的 GitHub 账号数据并生成实时的统计卡片。
  • username=C-KyS
    目标用户。指定要统计哪个用户的 GitHub 数据，这里填的是我的用户名 C-KyS。
  • show_icons=true
    显示图标。在统计卡片左侧（Stars, Commits, PRs, Issues 等文字旁边）显示可爱的圆形图标，让卡片看起来不那么单调。
  • theme=radical
    配色主题。
    • radical 是一种流行的深色背景、霓虹配色主题，看起来很有赛博朋克感。
    • 该工具支持几十种主题，如 default (默认白), dark (深色), onedark, dracula, tokyonight 等。
  • height=180
    图片高度。强制设定图片的显示高度为 180 像素，用于控制排版，使两张并排的卡片高度一致。
  • layout=compact (仅在语言统计卡片中出现)
    紧凑布局。
    • 如果不加这个参数，语言统计卡片会显示详细的进度条。
    • 加上 compact 后，会以更节省空间的列表形式展示语言占比，适合与左侧的综合统计卡片并排摆放。
  • alt=“stats graph”
    替代文本。当图片无法加载，或者使用屏幕阅读器时显示的文字描述。
  • top-langs (在第二个 URL …/api/top-langs/?.. 中)
    统计类型。
    • 第一个 URL 是 /api?，生成的是综合统计卡片（Stats Graph），包含总 Star 数、总提交数等。
    • 第二个 URL 是 /api/top-langs/?，生成的是常用语言统计卡片（Top Languages），显示你代码仓库中用得最多的语言排名。

访客计数

在这里插入图片描述

最后一项为访客计数器，记录并展示你的 README 页面被查看了多少次。

//源代码如下
<div align="center">
  <!-- 在这里添加你的社交链接，例如 Blog, Twitter, LinkedIn 等 -->
  <!-- <a href="LINK"><img src="https://img.shields.io/badge/Name-Color?style=for-the-badge&logo=logoName&logoColor=white" /></a> -->
  <img src="https://komarev.com/ghpvc/?username=C-KyS&style=flat-square&color=blueviolet" alt="Profile views" />
</div>
  • src=“https://komarev.com/ghpvc/?..”
    这是 GitHub Profile Views Counter 工具的地址。它的作用非常简单直接：记录并展示你的 README 页面被查看了多少次。
  • username=C-KyS
    计数标识。
    • 这个字段非常关键，它通过你的用户名来从数据库中检索唯一的计数。
    • 即使你把代码删了又加回来，只要 username 不变，之前的访问量数据通常会保留（取决于服务商的缓存策略，Komarev 通常是累积的）。
  • style=flat-square
    样式。
    • 这里设置为 flat-square（扁平直角），为了和上方那些 for-the-badge 风格的技能徽章保持视觉上的协调，看起来更干净。
  • color=blueviolet
    颜色。
    • 计数器背景色设为 blueviolet（蓝紫色），与之前 GitHub Stats 卡片的 radical 主题色呼应。

我的主页及完整代码

我的github主页：github.com/C-KyS
完整代码如下:

<div align="center">
  <img src="https://capsule-render.vercel.app/api?type=waving&color=gradient&height=300&section=header&text=HI%20THERE!👋&fontSize=90&animation=fadeIn&fontAlignY=38&desc=Welcome%20to%20my%20profile!&descAlignY=51&descAlign=62" />
</div>

<h3 align="center">
  <a href="https://git.io/typing-svg">
    <img src="https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=23F709&center=true&vCenter=true&width=600&lines=Hello%2C%20World!;Talk%20is%20cheap.%20Show%20me%20the%20code!;It%20works%20on%20my%20machine!&size=27" alt="Typing SVG" />
  </a>

</h3>

---

### 👨‍💻 About Me

- 🔭 I’m interested on <kbd>Embodied AI</kbd> and <kbd>Multimodal LLMs</kbd>
- 🌱 I’m currently learning **VLA**, **Robot Foundation Model**, **Diffusion Policy**
- 💬 Ask me anything you want!
- 📫  My blog: [https://blog.csdn.net/cyh20041102](https://blog.csdn.net/cyh20041102)
- 🌐 My Gitee: [https://gitee.com/CYH-KennyS](https://gitee.com/CYH-KennyS)
- 📝 How to reach me: **Yuhan___Chen@163.com**

---

### 🛠️ Languages and Tools

<div align="center">
  <!-- 根据实际技能栈进行增删 -->
  <img src="https://img.shields.io/badge/C-00599C?style=for-the-badge&logo=c&logoColor=white" />
  <img src="https://img.shields.io/badge/C%2B%2B-00599C?style=for-the-badge&logo=c%2B%2B&logoColor=white" />
  <img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" />
  <img src="https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=openjdk&logoColor=white" />
  <br />
  <img src="https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&logo=git&logoColor=white" />
  <img src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" />
  <img src="https://img.shields.io/badge/VSCode-007ACC?style=for-the-badge&logo=visualstudiocode&logoColor=white" />
</div>

---

### 📊 GitHub Stats

<div align="center">
  <img src="https://github-readme-stats.vercel.app/api?username=C-KyS&show_icons=true&theme=radical" height="180" alt="stats graph" />
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=C-KyS&layout=compact&theme=radical" height="180" alt="languages graph" />
</div>

<div align="center">
  <img src="https://github-readme-streak-stats.herokuapp.com/?user=C-KyS&theme=radical" alt="streak graph" />
</div>

---

<div align="center">
  <!-- 在这里添加你的社交链接，例如 Blog, Twitter, LinkedIn 等 -->
  <!-- <a href="LINK"><img src="https://img.shields.io/badge/Name-Color?style=for-the-badge&logo=logoName&logoColor=white" /></a> -->
  <img src="https://komarev.com/ghpvc/?username=C-KyS&style=flat-square&color=blueviolet" alt="Profile views" />
</div>
# github # 设计规范
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区