Github Profile是什么
一般情况下,GitHub 个人主页会显示其仓库信息、提交信息。但是如果你拜访别人的github,会发现有些主页能够让你眼前一亮。这种定制的主页能够更加详细地介绍你的贡献、提交信息以及个人信息,远比默认主页包含了更多信息。当然,大家也可以照抄我Github中的配置然后修改,我的配置文件的地址如下。
我们先了解github中profile中设置方法,然后再进行美化。我们首先在 GitHub 上新建一个仓库,仓库名和自己 Github 用户名相同,然后添加一个 README.md 自述文件,在该文件里添加信息即可。该文件中的信息会自动添加到你的Github主页中。
侧边栏的定制
当然,在我们定制自己的github主页前,别忘了GitHub在侧边栏也可以添加自己的基本信息,包括名字、签名、公司、邮箱以及链接等。侧边栏也是个人信息中很重要的一部分。
所使用的组件
打字机
你可以以打字机的形式展示你的GitHub信息,可以产生如下效果:
该项目的地址如下
当然,你可以调整字体以及出现的位置和大小,例如我仓库中的配置是这样的。
[](https://git.io/typing-svg)徽章
你可以以徽章的形式简要地展示你的技术栈或者联系方式。博主所使用的是Shields.io进行生成徽章。 这些徽章可以是链接到你的个人信息页面,例如下面这些徽章。
[](https://github.com/QTH1225)[](mailto:1340356343@qq.com)[](https://qintianhao.com)These are the skills that I know and have mastered:当然,他们也可以仅作展示之用。
博客链接
如果你有自己的技术博客,且带有RSS功能,那么你可以在你的GitHub profile中链接到你博客的最新文章。
根据该仓库的说明,首先你需要将以下片段加到你的Markdown文件中,接下来创建的工作流会将<!-- BLOG-POST-LIST:START -->与<!-- BLOG-POST-LIST:END -->中的部分替换为你的最新博客。
### Blog postsHere is my blog. You can find some of my study and thinking records here.<!-- BLOG-POST-LIST:START --><!-- BLOG-POST-LIST:END -->然后创建一个workflow(例如 blog-post-workflow.yml ),内容如下。并改动最后一行的feed_list后的内容为你博客的RSS链接。
name: Latest blog post workflowon: schedule: # Run workflow automatically - cron: '0 * * * *' # Runs every hour, on the hour 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://www.qintianhao.com/rss.xml" # Replace this with your RSS link贪吃蛇数据贡献图
你可以在你的GitHub profile中以贪吃蛇的形式展示你的贡献图,就像这样
首先,我们需要创建一个workflow(例如 snk.yml ),内容如下,不需要进行任何提交或改动。
name: generate animation
on: # run automatically every 2 hours schedule: - cron: "0 */2 * * *"
# 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 }}然后,我们需要在Markdown文件中加入下面的HTML代码,将所有链接改为你自己的即可。
<picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/QTH1225/QTH1225/output/github-contribution-grid-snake-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/QTH1225/QTH1225/output/github-contribution-grid-snake.svg"><img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/QTH1225/QTH1225/output/github-contribution-grid-snake.svg"></picture>GitHub访客量统计
你可以直接在Markdown文件中插入以下代码统计你个人主页的访问量。使用Moe Counter!直接生成你需要插入的代码,然后插入你的Markdown文档中即可。这里使用的是moebooru主题,也可以替换为其他主题。
The number of views of this page is as follows.
<img src="https://count.getloli.com/@QTH1225?theme=moebooru"/>GitHub数据统计
在GitHub profile中也可以统计你GitHub的提交数据或者仓库数据。这里所使用的仓库如下。
你可以在该仓库中选择你喜欢的统计样式与数据(不限于展示这两种哦)。这里博主采用了仓库中的HTML语法进行卡片对齐操作,复制该代码并将用户名替换为你的用户名可以直接使用。
<a href="https://github.com/anuraghazra/github-readme-stats"> <img height=200 align="center" src="https://github-readme-stats.vercel.app/api?username=QTH1225&show_icons=true&theme=transparent" /></a><a href="https://github.com/anuraghazra/convoychat"> <img height=200 align="center" src="https://github-readme-stats.vercel.app/api/top-langs?username=QTH1225&layout=donut&langs_count=5&card_width=320&theme=transparent" /></a>GitHub提交月份统计图
你可以在你的GitHub profile中以折线图的形式展示你的贡献月度变化,如下所示。
博主所使用的仓库是这个,可以在仓库中自行选择喜欢的样式进行调整。
将这段代码加入到你的Markdown文件中并改为你自己的信息即可。
[](https://github.com/ashutosh00710/github-readme-activity-graph)GitHub Profile编辑器
如果你不想进行繁琐组件研究,那么你可以使用GitHub Profile编辑器。这是一个是一个可视化 profile 生成工具,使用者无需学习 Markdown 语法,仅需要在对应窗口中输入或者选择相应的内容,工具会自动生成 Markdown 脚本。脚本编辑完成以后,直接复制粘贴到自己的 Github 即可。
放在最后
再次感谢所有这些开源组件的创作者以及相关配置教程的撰写者,这些都在博主配置过程中给予了莫大的帮助。本文主要参考的是:
Some information may be outdated









