Github美化日记 - 又菜又爱玩

Github美化日记 - 又菜又爱玩

一.咱就说

无论是技术大牛, 或者是技术小菜, 都希望有一个好看的Github首页吧!（快说你想要！


 
 
二.那就开始吧！

1.所有的神秘皆来自一个特殊的仓库


上图的仓库名（Repository name）和自己的用户名（我的是codeacg）一致，这时候出现了一只黑色的喵咪！然后仓库要是public的（所有人皆可访问），勾选Add a README file，勾选创建仓库的时候会增加一个README.md文件，我们所有的操作都写于此文件。接着网页往下翻，点击Create repository。
然后就变成了这样子：

2.打开这个仓库，开始整活！

点击上图那个红框框起来的那个，下面那个红框啦！
打开后，点击Edit README编辑这个README.md文件，就是下图啦。

2.1 萌萌计数器

直接看，你就说你想要就完事了。

 
Moe-Counter：一款多种风格可选的萌萌计数器。Moe-counter 每被刷新一次，显示的数字便会 +1，借此达到计数的目的。
食用方法：

白嫖大佬的

如果这个网址还在，请继续。
打开这个网址后，在最下面Tool一栏中，可以看到一个链接：https://count.getloli.com/get/@:name?theme=asoul，凭借这个链接即可直接食用。其中 :name 是计数器的 ID，使用不同的 name 就可以生成不同的计数器。后面的 asoul 则是计数器的主题外观，Moe-counter 拥有多种风格可选，点击 asoul 便出现选择框可以选择其他主题外观，点击 Get 即可查看预览效果。
我食用的是rule34这个主题，因为这个会动。


点击Commit changes就行了，然后你打开你的主页就可以看到了，开心吧。

自建

请参考大佬仓库写的食用手册。
2.2 贪吃蛇


这可不是一个简单的贪吃蛇，会自动更新的哟！
2.2.1 配置action

• 点击Action
  
• 点击Configure配置yml文件
  
  
• 改名，换代码，点击start commit，再点击commit new file。
  
         
  1. name: Generate Snake

  复制代码
  1. ​

  复制代码
  1. on:

  复制代码
  1.   schedule:

  复制代码
  1.    - cron: "0 0 * * *"

  复制代码
  1.   workflow_dispatch:

  复制代码
  1. ​

  复制代码
  1. jobs:

  复制代码
  1.   build:

  复制代码
  1.    runs-on: ubuntu-latest

  复制代码
  1. ​

  复制代码
  1.    steps:

  复制代码
  1.      - name: Checkout

  复制代码
  1.        uses: actions/checkout@v2.3.4

  复制代码
  1. ​

  复制代码
  1.      - name: Generate Snake

  复制代码
  1.        uses: Platane/snk@master

  复制代码
  1.        id: snake-gif

  复制代码
  1.        with:

  复制代码
  1.          github_user_name: ${{ github.repository_owner }}

  复制代码
  1.          gif_out_path: ./assets/github-contribution-grid-snake.gif

  复制代码
  1.          svg_out_path: ./assets/github-contribution-grid-snake.svg

  复制代码
  1. ​

  复制代码
  1.      - name: Push to GitHub

  复制代码
  1.        uses: EndBug/add-and-commit@v7.2.1

  复制代码
  1.        with:

  复制代码
  1.          branch: main

  复制代码
  1.          message: 'Generate Contribution Snake'

  复制代码
   
  
• 引入snake
         
  1. 

  复制代码
   另一种cdn链接国内访问更快
         
  1. 

  复制代码
   
  
• 修改Actions读取仓库权限
  
  
• run workflow
  
  
• 查看是否成功
  
  

 
演示效果.
2.2 Readme Typing SVG（打字机）

直接看，你就说你想要就完事了。

⌨️ Readme Typing SVG：是一款打字机效果的好东西。
食用方法：
张嘴就行，这是大佬的网站。

复制Markdown代码，放到这里：

点击Commit changes就行了，然后你打开你的主页就可以看到了，开心吧。
这是我的：
       

1. %3B;)

复制代码

 2.3 Shields.io （小牌子）

别说了，直接整吧！

Shields.io：一种以 SVG 和光栅格式提供简洁、一致和易读徽章的服务，可以轻松地包含在 GitHub 自述文件或任何其他网页中。
食用方法（有两种）：

静态小牌子

一个最简单的例子就是：，这一请求可以渲染得到如下效果的小牌子。
https://img.shields.io/badge/codeacg-喵酱-E89AAA
简单定制小牌子非常方便，最最基础的语法规则就是：
       

1. https://img.shields.io/badge/{左半部分标签}-{右半部分标签}-{右半部分16进制颜色}

复制代码

 

动态小牌子

你可以参考少数派的这篇文章。然后借助大佬的网站「小牌子生成器」
2.4 GitHub Readme Stats（GitHub 统计卡片）

看图吧！

GitHub Readme Stats：在你的 README 中获取动态生成的 GitHub 统计信息。
食用方法：
将这行代码复制到你的 markdown 文件中，就是如此简单！
更改 ?username= 的值为你的 GitHub 用户名。
       

1. [](https://github.com/anuraghazra/github-readme-stats)

复制代码

 下面是我的：
       

1. [](https://github.com/anuraghazra/github-readme-stats)

复制代码

1. ​

复制代码

1. [](https://github.com/anuraghazra/github-readme-stats)

复制代码

 效果1 效果2 等等。
 
2.5 Metrics（Github统计信息图表）


Metrics：生成可以嵌入到任何地方的统计图标，包括您的 GitHub 配置文件自述文件！支持用户、组织，甚至存储库！
玩法有很多，感兴趣的同学可以深入研究。
食用方法：
大佬的网站Metrics，打开网站之后，在左侧输入你的用户名，左边有很多选项供选择，也可以换模板等等，然后点击右侧的markdown按钮，复制代码即可。

 
然后把复制的代码，放到我们的README.md文件中即可。

       

1. 

复制代码

 
效果演示.
2.6 GitHub Profile Trophy（Github奖杯）

GitHub Profile Trophy：GitHub 简介奖杯，在README.md文件中添加动态生成的 GitHub Stat Trophies
食用方法：
将以下代码添加到您的自述文件中。将代码粘贴到个人资料的自述文件中时，将 ?username= 后更改为 GitHub 的用户名。

1. [](https://github.com/ryo-ma/github-profile-trophy)

复制代码

效果演示
2.7 visitor-badge（统计访问者数量）


visitor-badge：计算 GitHub 中 README.md、问题、PR 的访问者数量。
食用方法：
page_id 是必需的，请使用唯一的字符串来最好地代表您的页面。跟上面萌萌计数器一样的那种。

1. 

复制代码

效果演示。
2.8 Github Readme Activity Graph（Github活动统计图）


Github Readme Activity Graph：动态生成的活动图，显示您过去 31 天的 GitHub 活动。
食用方法：
只需将以下 URL 粘贴到您的个人资料自述文件中，您就可以开始了。

1. [

复制代码

效果演示.
2.9 Github Readme Streak Stats（GitHub 连续打卡）


Github Readme Streak Stats：显示您的总贡献，当前连续几次，以及 GitHub 个人资料README文件中最长的连续记录
食用方法：
将下面的 markdown 复制粘贴到你的 GitHub 配置文件 README 中，将 ?user= 后面的值替换为你的 GitHub 用户名 将 ?user= 后面的值替换为你的 GitHub 用户名

1. [](https://git.io/streak-stats)

复制代码

效果演示.
2.10 stats-cards（网站数据卡片）


stats-cards：在 README 中展示网站数据，也可用于网站状态监控。
支持网站有：知乎，B站，Leetcode，掘金，牛客，CSDN，Github等。
食用方法：
和上面一样。。。

1. 

复制代码

效果演示.
三.其他大佬的

黑心皮蛋
yumuing
Cactus
二丫讲梵
Licardo
案例仓库1
案例仓库2
俺

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！