banner
codeacg

codeacg

额. 每天的事情 看番 + 写代码(学
github
telegram

Github美化日记 - 有菜又爱玩

Github 美化日记 - 又菜又爱玩#

咱就说#

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

1684562694.png

1684562765.png

1684562868.png

那就开始吧!#

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

1684562909.png

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

然后就变成了这样子:

1684562940.png

打开这个仓库,开始整活!#

点击上图那个红框框起来的那个,下面那个红框啦!

打开后,点击Edit README编辑这个README.md文件,就是下图啦。

1684562972.png

萌萌计数器#

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

1684563000.png

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

食用方法

白嫖大佬的

如果这个网址还在,请继续。

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

我食用的是rule34这个主题,因为这个会动。

1684563035.png

1684563064.png

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

自建

请参考大佬仓库写的食用手册。

贪吃蛇#

github-contribution-grid-snake

这可不是一个简单的贪吃蛇,会自动更新的哟!

配置 action#
  • 点击Action1684563096.png

  • 点击Configure配置 yml 文件

    1684563160.png

  • 改名,换代码,点击start commit,再点击commit new file

    1684563207.png

    name: Generate Snake
    
    on:
      schedule:
        - cron: "0 0 * * *"
      workflow_dispatch:
    
    jobs:
      build:
        runs-on: ubuntu-latest
    
        steps:
          - name: Checkout
            uses: actions/[email protected]
    
          - name: Generate Snake
            uses: Platane/snk@master
            id: snake-gif
            with:
              github_user_name: ${{ github.repository_owner }}
              gif_out_path: ./assets/github-contribution-grid-snake.gif
              svg_out_path: ./assets/github-contribution-grid-snake.svg
    
          - name: Push to GitHub
            uses: EndBug/[email protected]
            with:
              branch: main
              message: 'Generate Contribution Snake' 
    
  • 引入snake

    ![](https://raw.githubusercontent.com/codeacg/codeacg/main/assets/github-contribution-grid-snake.svg)
    

    另一种 cdn 链接国内访问更快

    ![snake](https://cdn.jsdelivr.net/gh/codeacg/codeacg@main/assets/github-contribution-grid-snake.svg)
    
  • 修改 Actions 读取仓库权限

    1684563255.png

  • run workflow

    1684563279.png

  • 查看是否成功

    1684563322.png

演示效果.

Readme Typing SVG(打字机)#

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

1684563356.png

⌨️ Readme Typing SVG:是一款打字机效果的好东西。

食用方法

张嘴就行,这是大佬的网站

1684563384.png

复制 Markdown 代码,放到这里:

1684563409.png

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

这是我的:

![](https://readme-typing-svg.demolab.com/?font=Fira+Code&pause=100&width=450&lines=System.out.println(%22Hello%2C%20World%22)%3B;)

Shields.io (小牌子)#

别说了,直接整吧!

1684563439.png

Shields.io:一种以 SVG 和光栅格式提供简洁、一致和易读徽章的服务,可以轻松地包含在 GitHub 自述文件或任何其他网页中。

食用方法(有两种):

静态小牌子

一个最简单的例子就是:image,这一请求可以渲染得到如下效果的小牌子。

https://img.shields.io/badge/codeacg-喵酱-E89AAA

简单定制小牌子非常方便,最最基础的语法规则就是:

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

动态小牌子

你可以参考少数派的这篇文章。然后借助大佬的网站「小牌子生成器」1684563484.png

GitHub Readme Stats(GitHub 统计卡片)#

看图吧!

1684563510.png

GitHub Readme Stats:在你的 README 中获取动态生成的 GitHub 统计信息。

食用方法

将这行代码复制到你的 markdown 文件中,就是如此简单!

更改 ?username= 的值为你的 GitHub 用户名。

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

下面是我的:

[![喵酱's Github Stats](https://github-readme-stats.vercel.app/api?username=codeacg&theme=calm&show_icons=true)](https://github.com/anuraghazra/github-readme-stats)

[![喵酱's Github Stats](https://github-readme-stats.vercel.app/api/top-langs/?username=codeacg&theme=calm&langs_count=6&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

效果 1 效果 2 等等。

Metrics(Github 统计信息图表)#

1684563542.png

Metrics:生成可以嵌入到任何地方的统计图标,包括您的 GitHub 配置文件自述文件!支持用户、组织,甚至存储库!

玩法有很多,感兴趣的同学可以深入研究。

食用方法

大佬的网站Metrics,打开网站之后,在左侧输入你的用户名,左边有很多选项供选择,也可以换模板等等,然后点击右侧的 markdown 按钮,复制代码即可。

1684563571.png

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

1684563595.png

![](https://metrics.lecoq.io/codeacg?template=classic&config.timezone=Asia%2FBeiJing)

1684563626.png

效果演示.

GitHub Profile Trophy(Github 奖杯)#

GitHub Profile Trophy:GitHub 简介奖杯,在README.md文件中添加动态生成的 GitHub Stat Trophies

食用方法

将以下代码添加到您的自述文件中。将代码粘贴到个人资料的自述文件中时,将 ?username= 后更改为 GitHub 的用户名。

[![trophy](https://github-profile-trophy.vercel.app/?username=codeacg)](https://github.com/ryo-ma/github-profile-trophy)

效果演示

visitor-badge(统计访问者数量)#

1684563859.png

visitor-badge:计算 GitHub 中 README.md、问题、PR 的访问者数量。

食用方法

page_id 是必需的,请使用唯一的字符串来最好地代表您的页面。跟上面萌萌计数器一样的那种。

![visitors](https://visitor-badge.glitch.me/badge?page_id=codeacg=green&right_color=red)

效果演示

Github Readme Activity Graph(Github 活动统计图)#

1684563890.png

Github Readme Activity Graph:动态生成的活动图,显示您过去 31 天的 GitHub 活动。

食用方法

只需将以下 URL 粘贴到您的个人资料自述文件中,您就可以开始了。

[![喵酱's github activity graph](https://github-readme-activity-graph.cyclic.app/graph?username=codeacg)

效果演示.

Github Readme Streak Stats(GitHub 连续打卡)#

1684563915.png

Github Readme Streak Stats:显示您的总贡献,当前连续几次,以及 GitHub 个人资料 README 文件中最长的连续记录

食用方法

将下面的 markdown 复制粘贴到你的 GitHub 配置文件 README 中,将 ?user= 后面的值替换为你的 GitHub 用户名
?user= 后面的值替换为你的 GitHub 用户名

[![GitHub Streak](https://streak-stats.demolab.com/?user=codeacg)](https://git.io/streak-stats)

效果演示.

stats-cards(网站数据卡片)#

1684563941.png

stats-cards:在 README 中展示网站数据,也可用于网站状态监控。

支持网站有:知乎,B 站,Leetcode,掘金,牛客,CSDN,Github 等。

食用方法

和上面一样。。。

![](https://stats.justsong.cn/api/github?id=codeacg)

效果演示.

其他大佬的#

黑心皮蛋

yumuing

Cactus

二丫讲梵

Licardo

案例仓库 1

案例仓库 2

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。