网站建设 报告,淄博专业网站建设价格,网站建设的费用,网站开发组岗位Guthub 个人主页 #xff08;官方称呼是 profile#xff09;可以展示很多有用的信息#xff0c;例如添加一个首页被访问次数的计数器#xff0c;一个被 Star 与 Commit 的概览信息#xff0c;以及各种技能标签#xff0c;设备标签等#xff0c;还可以利用 wakatime 显示…Guthub 个人主页 官方称呼是 profile可以展示很多有用的信息例如添加一个首页被访问次数的计数器一个被 Star 与 Commit 的概览信息以及各种技能标签设备标签等还可以利用 wakatime 显示你最近编码各类语言的使用时长。
默认的主页会显示其仓库信息、提交信息例如 Linux 之父 Linus 的 GitHub 主页 长这样
Github 关于主页定制的说明文档Setting up and managing your GitHub profile
1 原理
在 GitHub 上新建一个仓库仓库名和自己 Github 用户名相同然后添加一个 README.md 自述文件在该文件里添加信息即可。
这是我的仓库https://github.com/Taot-chen/Taot-chen
仓库建好后添加一个 README.md 文件此时可以看到右上角有个提示
Taot-chen/Taot-chen is a special repository.Its README.md will appear on your public profile.2 主页定制
接下来就可以通过修改 README.md 来定制主页了。
首先可以找一个好看的模板修改信息作为自己的主页。例如
awesome-github-profile-readmeawesome-github-profilesbeautify-github-profile
2.1 GitHub 统计卡片 项目地址github-readme-stats 使用在 README 文件中添加如下代码?username 的值修改为 GitHub 用户名
显示图标、主题样式等配置可以参考官网文档。
效果 2.2 GitHub 使用语言统计
项目地址github-readme-stats使用在 README 文件中添加如下代码?username 的值修改为 GitHub 用户名
效果 2.3 GitHub Gist Pins
项目地址github-readme-stats使用在 README 文件中添加如下代码?username 的值修改为 GitHub 用户名href 的值改为对应 github 项目的地址
a hrefhttps://github.com/Taot-chen/Taot-chen.github.ioimg aligncenter srchttps://github-readme-stats.vercel.app/api/pin/?usernameTaot-chenrepoTaot-chen.github.iothemedefault /a hrefhttps://github.com/Taot-chen/raspberrypi_dlimg aligncenter srchttps://github-readme-stats.vercel.app/api/pin/?usernameTaot-chenreporaspberrypi_dlthemedefault /效果 2.4 GitHub 资料奖杯 项目地址github-profile-trophy 使用在 README 文件中添加如下代码?username 的值修改为 GitHub 用户名
[](https://github.com/ryo-ma/github-profile-trophy)效果 2.5 GitHub 徽章
为 github 开源项目生成高质量小徽章图标直接复制链接使用。 项目地址Shields.io 使用在 README 文件中添加如下代码:
img srchttps://img.shields.io/badge/-HTML5-E34F26?styleflat-squarelogohtml5logoColorwhite /
img srchttps://img.shields.io/badge/-CSS3-1572B6?styleflat-squarelogocss3 /
img srchttps://img.shields.io/badge/-JavaScript-oringe?styleflat-squarelogojavascript /效果 2.6 GitHub 访客徽章
这个徽章会实时改变记录此页面被访问的次数。 项目地址visitor-badge.glitch.me 使用在 README 文件中添加如下代码page_id 的值修改为 GitHub 用户名
效果 2.7 GitHub 活动统计图
动态生成的活动图用于显示过去 31 天的 GitHub 活动。 项目地址github-readme-activity-graph 使用在 README 文件中添加如下代码,?username 的值修改为 GitHub 用户名
效果 2.8 修仙系列统计卡片
一个以凡人修仙传境界为基础的 Github 统计卡片。等级分为[‘道祖’, ‘大罗’, ‘太乙’, ‘金仙’, ‘真仙’, ‘大乘’, ‘合体’, ‘炼虚’, ‘化神’, ‘元婴’, ‘金丹’, ‘筑基’, ‘练气’]对应区间[1, 5, 10, 15, 20, 30,40,50,60, 70, 80, 90, 100]。 项目地址github-immortality 使用在 README 文件中添加如下代码,?username 的值修改为 GitHub 用户名
2.9 GitHub 连续打卡
在 README 中展示连续提交代码的次数。 项目地址github-readme-streak-stats 使用在 README 文件中添加如下代码,?username 的值修改为 GitHub 用户名
2.10 社交统计
在 README 中展示在一些流行的网站的数据例如知乎GitHubB 站LeetCode掘金CSDN牛客。 项目地址stats-cards 使用在 README 文件中添加如下代码,username 的值为那个网站的用户名
2.11 star 趋势
统计和展示自己某个项目的 star 趋势。 项目地址star-history.t9t.io 使用输入仓库名就能自动生成 star 增长曲线。还能输入多个仓库查看项目对比。
2.12 GitHub Corners分享角标
如果你的 GitHub 项目有一个对应的网站并且想要用户通过网站跳转到 GitHub 项目页从而得到 star不防试试这个。 项目地址github-corners 使用它可以帮你生成给网站添加 GitHub 角标的代码只需要选择一个风格复制代码到自己的项目主页文件中将超链接替换为自己的仓库地址即可。
2.13 打字特效
让内容通过打字的特效来展示。 项目地址readme-typing-svg 使用复制代码到 Markdown 并替换 ?lines 的值为你想要的内容字与字之间用加号隔开
2.14 贪吃蛇
默认的提交信息是这样的
可以将其变成一个动画一只贪吃蛇挨个吃掉图里的绿点。
新建一个 workflow 文件名字随意不需要任何改动然后提交
name: generate animationon:# run automatically every 2 hoursschedule:- cron: 0 */2 * * * # allows to manually run the job at any timeworkflow_dispatch:# run on every push on the master branchpush:branches:- masterjobs:generate:permissions: contents: writeruns-on: ubuntu-latesttimeout-minutes: 5steps:# 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.svguses: Platane/snk/svg-onlyv3with:github_user_name: ${{ github.repository_owner }}outputs: |dist/github-contribution-grid-snake.svgdist/github-contribution-grid-snake-dark.svg?palettegithub-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 branchuses: crazy-max/ghaction-github-pagesv3.1.0with:target_branch: outputbuild_dir: distenv:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}将下列代码复制到 Markdown 内将用户名部分替换成自己的并提交
picturesource media(prefers-color-scheme: dark) srcsethttps://raw.githubusercontent.com/Taot-chen/Taot-chen/output/github-contribution-grid-snake-dark.svgsource media(prefers-color-scheme: light) srcsethttps://raw.githubusercontent.com/Taot-chen/Taot-chen/output/github-contribution-grid-snake.svgimg altgithub contribution grid snake animation srchttps://raw.githubusercontent.com/Taot-chen/Taot-chen/output/github-contribution-grid-snake.svg
/picture这段代码的目的是加载贪吃蛇动画且贪吃蛇的暗亮风格与你的 Github 的暗亮风格进行自动适配。
前面的 workflow 里面设置的是每隔 2 小时更新一次可以先手动跑一次。点击 generate animation点击 Run workflow
稍等片刻显示运行成功再次回到仓库主页就会看到贪吃蛇动画已被加载。
2.15 博客文章同步
如果你有博客网站且网站带有 RSS 功能就可以配置此功能它能在你的 GitHub 首页上显示最近更新的博客。 原理利用 blog-post-workflow 在自述文件上展示最近几篇博客文章。 使用 创建一个 workflow例如 blog-post-workflow.yml 需要改动最后一行的 feed_list 的内容为你自己网站的 RSS 链接。 name: Latest blog post workflow
on:schedule: # Run workflow automatically- cron: 0 */2 * * * # Runs every hour, on the hourworkflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
permissions:contents: write # To write the generated contents to the readmejobs:update-readme-with-blog:name: Update this repos README with latest blog postsruns-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkoutv3- name: Pull in blogs postsuses: gautamkrishnar/blog-post-workflowv1with:feed_list: https://taot-chen.github.io/rss.xml然后在自述文件输入这些内容程序会自动抓取文章标题、链接等并替换这两个注释 nbsp;**Latest Blog Posts**
!-- BLOG-POST-LIST:START --
!-- BLOG-POST-LIST:END --与贪吃蛇同理此时是看不到文章列表的得先手工运行一次 action稍等片刻显示运行成功再次回到仓库主页就会看到生效了。
2.16 GitHub 3D 统计
使用 3D 图来展示信息。 项目地址github-profile-3d-contrib 使用用 GitHub Action。首先创建文件 .github/workflows/profile-3d.yaml内容如下
name: GitHub-Profile-3D-Contribon:schedule: # 03:00 JST 18:00 UTC- cron: 0 18 * * *workflow_dispatch:jobs:build:runs-on: ubuntu-latestname: generate-github-profile-3d-contribsteps:- uses: actions/checkoutv3- uses: yoshi389111/github-profile-3d-contrib0.7.1env:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}USERNAME: ${{ github.repository_owner }}- name: Commit Pushrun: |git config user.name github-actionsgit config user.email github-actionsgithub.comgit add -A .git commit -m generatedgit push然后手动执行一次 actionActions - GitHub-Profile-3D-Contrib - Run workflow 然后会生成这些文件带路径各种主题的都有 profile-3d-contrib/profile-green-animate.svgprofile-3d-contrib/profile-green.svgprofile-3d-contrib/profile-season-animate.svgprofile-3d-contrib/profile-season.svgprofile-3d-contrib/profile-south-season-animate.svgprofile-3d-contrib/profile-south-season.svgprofile-3d-contrib/profile-night-view.svgprofile-3d-contrib/profile-night-green.svgprofile-3d-contrib/profile-night-rainbow.svgprofile-3d-contrib/profile-gitblock.svg 最后在 Markdown 里添加即可
picturesource media(prefers-color-scheme: dark) srcset/profile-3d-contrib/profile-night-rainbow.svg /source media(prefers-color-scheme: light) srcset/profile-3d-contrib/profile-gitblock.svg /img src/profile-night-rainbow.svg /
/picture报错解决
remote: Permission to mthsBelloni/mthsBelloni.git denied to github-actions[bot].
fatal: unable to access https://github.com/Taot-chen/Taot-chen/: The requested URL returned error: 403
Error: Process completed with exit code 128.大概率是因为没有配置 actions 的写权限导致无法写入 svg 文件。添加权限即可 效果 2.17 感谢参与者
每位开源项目的参与者都值得记录和感谢传统方式是手工编辑项目负责人一个一个地把参与者的名字记录到 README.md非常低效。
可以使用一种更高效、自动化的方式来添加项目贡献者。
项目地址allcontributors.org使用可以用命令行或者机器人的方式自动将项目的贡献者补充到项目文档中并且生成排版精美的表格。
