Alanxxk Pixiv 83364535
3541 字
18 分钟
Github主页美化
Random Cover
0.目录
1.美化方法
- 简介：在Github个人主页的左侧栏，可以编辑自己的个人信息
- 创建：在Github创建仓库，输入与自己同名名称，可选输入描述，勾选“Public”,勾选“Add a README file”，点击“Create repository”按钮，在仓库Read.me编写内容即可显示在个人主页中，更高级功能还需配置仓库中的Github Action
- 快法：Metrics（备用网站:Profilinator 或 Profile-Readme-Generator 或 Profile-Readme-Generator）
- 格式：Markdown，HTML
2.简单调用（Markdown）
- 项目汇总：
2.1.波浪横幅
 #副标题Y轴- 示例：
- 横幅头：
- 横幅尾：
- 横幅头：
- 延伸：
- 分隔线：
- 分隔线：
2.2.打字机
- 官网：https://github.com/DenverCoder1/readme-typing-svg （自定义:https://readme-typing-svg.demolab.com/demo/）
- 属性：
 #随机播放行- 示例：
- 一般打字机：
- 自定义打字：
- 一般打字机：
2.3.图标
 #一行数量（1-50）<!-- 居中图标 --><p align="center"> <a href="https://skillicons.dev"> <img src="https://skillicons.dev/icons?i=git,kubernetes,docker,c,vim" /> </a></p>- 示例：
- 技能：
- 社交：
- 技能：
2.4.访客数量徽章
 #数量缩写- 示例：
2.5.各种徽章
- 官网：https://shields.io/ （可自定义,可静态动态） 或 https://badgen.net/ （可自定义,可静态动态）
- 属性：
右侧背景颜色style=flat& #主题选择logo=github& #最左侧Logo显示（可以用base64编码）logoColor=white& #Logo颜色logoSize=auto& #Logo大小label=git& #左侧文本（高优先级）labelColor=red& #左侧背景颜色color=green& #右侧背景颜色（高优先级）cacheSeconds=10& #更新时间（单位s）link=https%3A%2F%2Fshields.io%2Fbadges) #跳转链接（有些字符要转义） #按照要求输入 #最左侧Logo显示 #按照要求输入- 示例：
- shields静态徽章：
和
- shields动态徽章：
- badgen静态徽章：
和
- badgen动态徽章：
- shields静态徽章：
2.6.数据统计
- 官网：https://github.com/anuraghazra/github-readme-stats （自定义:https://gh-stats-gen.vercel.app/）
- 属性：转义字符网站:https://www.urlencoder.org/ 和 语言时间:https://wakatime.com/
#个人数据 #统计选定年份#仓库卡片 #同理上文大部分选项#编程语言 #统计格式（percentages,bytes）#语言时间 #禁用动画<!-- 并排对齐方法 --><a href="https://github.com/anuraghazra/github-readme-stats"> <img height=200 align="center" src="https://github-readme-stats.vercel.app/api?username=anuraghazra" /></a><a href="https://github.com/anuraghazra/convoychat"> <img height=200 align="center" src="https://github-readme-stats.vercel.app/api/top-langs?username=anuraghazra&layout=compact&langs_count=8&card_width=320" /></a>
<a href="https://github.com/anuraghazra/github-readme-stats"> <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats" /></a><a href="https://github.com/anuraghazra/convoychat"> <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=convoychat" /></a>- 示例：
- 个人数据：
- 仓库卡片：
- 编程语言：
和
和
- 语言时间：
- 个人数据：
2.7.连续贡献天数
- 官网：https://github.com/DenverCoder1/github-readme-streak-stats （自定义:https://streak-stats.demolab.com/demo/）
- 属性：
 #统计的起始年份- 示例：
- 一般贡献显示：
- 一般贡献显示：
2.8.Github活跃曲线
- 官网：https://github.com/Ashutosh00710/github-readme-activity-graph/ （快速:https://ashutosh00710.github.io/github-readme-activity-graph/）
- 属性：
- 示例：
- 一般图表：
- 自定义图表：
- 一般图表：
2.9.网站数据
 #中文语言 #徽章图标- 示例：
- 网站信息：
- 网站延迟：
- 网站信息：
2.10.Github仓库收藏曲线
- 官网：https://github.com/star-history/star-history?tab=readme-ov-file（自定义:https://www.star-history.com/）（可安装浏览器扩展）
- 备用：https://codetabs.com/github-stars/github-star-history.html
- 属性：
[](https://www.star-history.com/#bytebase/ #Github用户名称star-history& #Github仓库名称type=date&legend=top-left)- 示例：
- Star历史：
- Star历史：
2.11.访客数量图片
 #前缀数字- 示例：
- 3d-num：
- normal-1：
- capo0-2：
- asoul：
- rule34：
- moebooru：
- gelbooru：
- 3d-num：
2.12.访客旗帜（不推荐使用—因出现台湾旗）
- 官网：https://www.flagcounter.com/
- 格式：HTML
- 设置：旗帜显示或地图显示，选择显示方式和属性，无需登录
- 示例：
- 旗帜显示：
- 地图显示：
- 旗帜显示：
2.13.名言引用
 #显示边界- 示例：
- 引用文本：
- 自定义引用：
- 引用文本：
2.14.学习网站徽章
- 官网：无
- 属性：无
- 示例：
- 网络安全：（https://tryhackme.com/dashboard）
- **：
- 网络安全：（https://tryhackme.com/dashboard）
2.15.Github仓库图片显示
- 官网：无
- 属性：
https://raw.githubusercontent.com/ #或直接使用github.comcumany/ #Github用户名称cumany/ #仓库名称main/ #分支名称（注意直接复制网址要删除前面多出的blog）pic/ #文件夹名称202209192228895.png #图片名称- 示例：
2.16.图片存储
- 官网：https://www.jsdelivr.com/
- 属性：无
- 示例：
- jpg图片：
- gif动图：
- jpg图片：
2.17.HTML居中语法
- 官网：无
- 属性：
<div id="img" align=center>内容</div>- 示例：无
3.复杂调用（Github Action或其他）
3.1.贡献热力图—贪吃蛇视图（未完结）
- 官网：https://github.com/Platane/snk （预览:https://platane.github.io/snk/）
- 方法：Github Action和SVG
name: generate animation
on: # run automatically every 24 hours schedule: - cron: "0 */24 * * *"
# allows to manually run the job at any time workflow_dispatch:
# run on every push on the master branch push: branches: - master
jobs: generate: permissions: contents: write runs-on: ubuntu-latest timeout-minutes: 5
steps: # 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.svg uses: Platane/snk/svg-only@v3 with: github_user_name: ${{ github.repository_owner }} outputs: | dist/github-contribution-grid-snake.svg dist/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 branch uses: crazy-max/ghaction-github-pages@v3.1.0 with: target_branch: output build_dir: dist env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}<picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/platane/platane/output/github-contribution-grid-snake-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/platane/platane/output/github-contribution-grid-snake.svg"> <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/platane/platane/output/github-contribution-grid-snake.svg"></picture>- 示例：
- 明亮模式：
- 黑暗模式：
3.2.贡献热力图—2D+3D（未完结）
- 官网：https://github.com/yoshi389111/github-profile-3d-contrib
- 方法：Github Action（可以添加私有仓库贡献:
Settings→Public profile→Contributions&Activity→Include private contributions on my profile）
name: GitHub-Profile-3D-Contrib
on: schedule: # 03:00 JST == 18:00 UTC - cron: "0 18 * * *" workflow_dispatch:
permissions: contents: write
jobs: build: runs-on: ubuntu-latest name: generate-github-profile-3d-contrib steps: - uses: actions/checkout@v5 - uses: yoshi389111/github-profile-3d-contrib@latest env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} USERNAME: ${{ github.repository_owner }} - name: Commit & Push run: | git config user.name github-actions git config user.email github-actions@github.com git add -A . if git commit -m "generated"; then git push fi- 使用：
3.3.信息统计（未完结）
- 官网：https://github.com/vn7n24fzkq/github-profile-summary-cards （范例:https://github-profile-summary-cards.vercel.app/demo.html）
- 方法：Github Action
name: GitHub-Profile-Summary-Cards
on: schedule: # execute every 24 hours - cron: "* */24 * * *" workflow_dispatch:
jobs: build: runs-on: ubuntu-latest name: generate-github-profile-summary-cards
steps: - uses: actions/checkout@v4 - uses: vn7n24fzkq/github-profile-summary-cards@release env: # default use ${{ secrets.SUMMARY_GITHUB_TOKEN }}, you should replace with your personal access token GITHUB_TOKEN: ${{ secrets.SUMMARY_GITHUB_TOKEN }} with: USERNAME: ${{ github.repository_owner }} # BRANCH_NAME is optional, default to main, branch name to push cards BRANCH_NAME: "main" # UTC_OFFSET is optional, default to zero UTC_OFFSET: 8- 示例：
- 综合表格：
- 仓库语言：
- 提交语言：
- 个人数据：
- 提交时间：
- 综合表格：
3.4.编程时间（未完结）
- 官网：https://github.com/anmol098/waka-readme-stats
- 属性：Github Action
name: Waka Readmeon: schedule: # Runs at 12am IST - cron: '30 18 * * *' workflow_dispatch:jobs: update-readme: name: Update Readme with Metrics runs-on: ubuntu-latest steps: - uses: anmol098/waka-readme-stats@master with: WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }} GH_TOKEN: ${{ secrets.GH_TOKEN }}- 示例：
3.5.RSS同步显示标题（未完结）
name: Latest blog post workflowon: schedule: # Run workflow automatically - cron: '0 0 * * *' # Runs once a day at 00:00 UTC workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directlypermissions: contents: write # To write the generated contents to the readme
jobs: update-readme-with-blog: name: Update this repo's README with latest blog posts runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Pull in dev.to posts uses: gautamkrishnar/blog-post-workflow@v1 with: feed_list: "https://dev.to/feed/gautamkrishnar,https://www.gautamkrishnar.com/feed/"- 示例：
3.6.Github仓库贡献人员显示（未完结）
3.7.贡献热力图—3D打印（未完结）
- 官网：https://github.com/github/gh-skyline
- 设置：无
- 示例：无
3.8.赞助按钮（需有港澳或境外银行卡）（未完结）
- 官网：https://img.buymeacoffee.com/button-api 或 https://github.com/open-source/sponsors
- 设置：注册登录后，在个人信息界面的
Settings→Buttons&Graphics→Generate - 示例：无
4.模板
- 官网：
- 设置：
- 示例：
赞助支持
如果这篇文章对你有帮助，欢迎赞助支持！
最后更新于 2025-12-15，距今已过 3 天
部分内容可能已过时
