主页profile美化

保姆级GitHub主页美化教程

image-omub.png

实际上这些都存在一个README文件里

下面我们来一步一步建设你的GitHub主页

GitHub中的初始操作

image-20241109134411796.png

image-20250203234004362.png

复制仓库地址

image-isgp.png

1
2
找一个你想要存储在本地的文件地址
右键Open Git Bash here

image-20241109140014319.png

1
git clone +Paste把刚才复制的地址粘贴过来    回车

image-20241109140335008.png

1
tip:如果有报错很多情况是梯子不稳定，没有连接到git仓库，多关闭刷新反复试试

image-20241109140636576.png

编译器

这里拿VS Code示范

需要安装的插件

image-20241109133836426.png

1
下载完插件之后

image-20241109134227028.png

1
所编写的组件是按顺序排列的

image-20241109135735804.png

代码结构详解

image-20241109141238195.png

一般格式模板

（可以先复制到自己的编译器里）

1
2
3
<p align="center">
  <img src="" />
</p>
1
下面我们来逐一实现组件的代码

组件

海浪效果边饰

网站

https://capsule-render.vercel.app/

image-20241108231511744.png

1
2
3
左侧选择完后
点击右侧“Copy”
复制到模板的“src”属性后

更多具体样式参考

https://github.com/kyechan99/capsule-render?tab=readme-ov-file#color

image-20241108231452249.png

打字机动画

网站

https://readme-typing-svg.demolab.com/demo/

image-20241108230812485.png

技术栈图标

网站（需要挂梯子）

https://marwin1991.github.io/profile-technology-icons/

image-20241108225831578.png

贡献热度表

网站

https://github-readme-streak-stats.herokuapp.com/demo/

image-20241109150452284.png

卡片

网站

https://tools.bugdesigner.cn/#/gen_card

个人指标模块

image-20241108231807726.png

更多主题

https://github.com/anuraghazra/github-readme-stats

image-20241109142125669.png

**主题修改详情见上文“**代码结构详解”

还是卡片的那个网站

https://tools.bugdesigner.cn/#/gen_card

常用语言模块

image-20241109142657266.png

1
注：复制代码需要保证username属性更改为自己的
1
theme属性可以自行添加，和个人指标模块可用的主题一致

仓库固定模块

1
可将某些仓库固定在README中展示

image-20241109143443105.png

image-20241109143412576.png

WakaTime 统计卡

1
根据以上操作，想必你已经收悉了大致流程，该WakaTime的部署方式与上述操作一致

image-20241109143646929.png

详情见 https://capsule-render.vercel.app/

贪吃蛇

参考视频：给Github主页加上贪吃蛇效果，让你的主页与众不同哔哩哔哩bilibili

不太好配置，建议每一步都跟着来

1
2
3
创建main.yml文件
文件路径:
.github/workflows/main.yml

image-20241109144506704.png

1
将以下内容复制到main.yml文件中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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:
      - main

jobs:
  generate:
    runs-on: ubuntu-latest
    timeout-minutes: 10

    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
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      # 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 }}

README.md贪吃蛇代码

1
注意更改用户名
1
2
3
4
5
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/用户名/用户名/output/github-contribution-grid-snake-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/用户名/用户名/output/github-contribution-grid-snake.svg">
  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/用户名/用户名/output/github-contribution-grid-snake.svg">
</picture>
1
此时你的预览中看不见贪吃蛇的组件，这是正常现象，我们接着下一步走
1
提交你的本地代码到GitHub仓库，详情见下文“提交本地代码至GitHub”
1
main.yml文件的本质会创建一个output分支并推送代码，但是执行此操作GitHub需要配置一定的权限

image-20241109145536992.png

1
2
以上方法授予工作流读写权限后
到Action目录，点击Re-run jobs的Re-run，重新执行失败的任务

image-20241109145648691.png

等待三五分钟之后即可完成贪吃蛇的部署

提交本地代码至GitHub

1
提一嘴Open Git Bash here的地址

image-20241109143924621.png

1
2
3
4
依次执行(对空格和英文双引号有严格要求)
git add .
git commit -m "init"
git push

更多

到此所有步骤就结束啦，还有一些没提到的组件网站放在这里，大家感兴趣的可以尝试尝试

https://shields.io/
https://quira.sh/
https://progvtblogo.asanatsa.cc/