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

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。