草庐IT

Github美化日记 - 又菜又爱玩

可乐酸奶冰淇淋 2023-04-11 原文

Github美化日记 - 又菜又爱玩

一.咱就说

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

![iShot_2023-04-05_18.58.32.min](https://pic.imgdb.cn/files/60499/202304051859337.png)

 

 

二.那就开始吧！

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。

     
     
     
     
     
     
     
    name: Generate Snake
    ​
    on:
      schedule:
        - cron: "0 0 * * *"
      workflow_dispatch:
    ​
    jobs:
      build:
        runs-on: ubuntu-latest
    ​
        steps:
          - name: Checkout
            uses: actions/checkout@v2.3.4
    ​
          - 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/add-and-commit@v7.2.1
            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读取仓库权限

  • run workflow

  • 查看是否成功

 

演示效果.

2.2 Readme Typing SVG（打字机）

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

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

食用方法：

张嘴就行，这是大佬的网站。

复制Markdown代码，放到这里：

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

这是我的：

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

2.3 Shields.io （小牌子）

别说了，直接整吧！

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

食用方法（有两种）：

静态小牌子

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

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

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

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

动态小牌子

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

2.4 GitHub Readme Stats（GitHub 统计卡片）

看图吧！

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 等等。

 

2.5 Metrics（Github统计信息图表）

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

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

食用方法：

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

 

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

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

效果演示.

2.6 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)

效果演示

2.7 visitor-badge（统计访问者数量）

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

食用方法：

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

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

效果演示。

2.8 Github Readme Activity Graph（Github活动统计图）

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

食用方法：

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

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

效果演示.

2.9 Github Readme Streak Stats（GitHub 连续打卡）

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)

效果演示.

2.10 stats-cards（网站数据卡片）

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

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

食用方法：

和上面一样。。。

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

效果演示.

三.其他大佬的

黑心皮蛋

yumuing

Cactus

二丫讲梵

Licardo

案例仓库1

案例仓库2

俺

Github美化quotspangt

有关Github美化日记 - 又菜又爱玩的更多相关文章

  1. 语法类似于 GitHub Flavored Markdown 的 Ruby markdown 解释器？ - 2

    我使用Jekyll运行博客，并认为我会解决RedcarpetMarkdown解释器，因为它是developedandusedbyGitHub.好吧，我只是碰巧遇到了一个错误，去检查问题，然后foundthis.Maintainersays,"Asyouprobablyhavenoticed(harharharhar)Idon'thavetimetomaintainRedcarpetanymore.It'snotapriorityforme(IfindMarkdownthoroughlyboring)andit'snotapriorityforGitHub,becausewenolong

  2. ruby - vagrant 从 github 安装插件 - 2

    我们正在使用Vagrant进行部署，我们最终希望将此集群部署在Rackspace上。vagrant-rackspace插件是一个自然的选择，但它有一些错误，这些错误未包含在最新的0.1.1版本中(notablythatvagrantprovisiondoesn'twork)。我已经在我的personalfork中解决了这个问题通过合并其他人的工作来对存储库进行改造。是否可以从github安装vagrant插件？显而易见的事情没有奏效:[unix]$vagrantplugininstallvagrant-rackspace--plugin-sourcehttps://github.com

  3. ruby - 如何让 GitHub 页面使用 master 分支？ - 2

    我有一个使用Jekyll托管在GitHub上的静态网站。问题是，我真的不需要master分支，因为存储库唯一包含的是网站。这样我就必须gitcheckoutgh-pages，然后gitmergemaster，然后gitpushorigingh-pages。有什么简单的方法可以摆脱gh-pages分支并直接从master推送？ 最佳答案 Theproblemis,Idon'treallyneedthemasterbranch,astheonlythingtherepositorycontainsisthewebsite.Isthere

  4. ruby - 警告 : PATH set to RVM ruby but GEM_HOME and/or GEM_PATH not set, 请参阅 : https://github. com/wayneeseguin/rvm/issues/3212 - 2

    我每次打开终端时都会收到这个错误:警告:PATH设置为RVMruby​​但未设置GEM_HOME和/或GEM_PATH，请参阅:https://github.com/wayneeseguin/rvm/issues/3212这是在我最近安装zsh(oh-my-zsh)后开始发生的我不知道如何设置GEM_HOME和/或GEM_PATH的路径。 最佳答案 我也面临同样的问题，更改.zshrc中的以下行，exportPATH="/usr/local/heroku/bin:.........."到exportPATH="$PATH:/usr/

  5. ruby - github api v3 创建问题消息未找到 - 2

    当我尝试创建一个github问题时，它给出消息未找到回复。以及如何发送身份验证header。因为创建问题需要用户登录或验证curl-XPOST-i-d'{"title":"my-new-repo","body":"mynewissuedescription"}'https://api.github.com/repos/barterli/barter.li/issuesHTTP/1.1404NotFoundServer:GitHub.comDate:Wed,19Feb201407:11:33GMTContent-Type:application/json;charset=utf-8Sta

  6. ruby - 如何在 github 操作中捆绑安装私有(private) gem - 2

    我想通过github操作在gem上运行rspec(称之为priv_gem_a)。priv_gem_a依赖于私有(private)存储库中的另一个gem(称之为priv_gem_b)。但是，由于权限无效，我无法捆绑安装priv_gem_b。错误:Fetchinggemmetadatafromhttps://rubygems.org/..........Fetchinggit@github.com:myorg/priv_gem_bHostkeyverificationfailed.fatal:Couldnotreadfromremoterepository.Pleasemakesureyo

  7. ruby - 如何使用 webhooks 从 Gitlab 推送到 Github - 2

    如果我只能找到正确的手册，我的Google-fu就会让我失望，因为这看起来很明显。我有一个由我们的托管服务提供商安装的Gitlab服务器Gitlab服务器有很多项目。对于其中一些项目，我希望Gitlab每次从本地客户端推送到Gitlab时自动推送到远程存储库(在本例中为Github)。像这样:客户端-->gitlab-->github任何标签和分支也应该被推送。AFAICT我有3个选择:用两个Remote配置本地客户端，同时推送到Gitlab和Github。我想避免这种情况，因为开发人员。在Gitlab服务器上的存储库中添加一个gitpost-receiveHook。这将是最灵活的(我

  8. ruby - 使用 overcommit 和 Github Desktop 时出错 - 2

    我在我的项目中使用过度使用gem(https://github.com/brigade/overcommit)，当我使用GithubDesktopforosx时，我得到这些错误:ThisrepositorycontainshooksinstalledbyOvercommit,buttheovercommitgemisnotinstalled.Installitwithgeminstallovercommit.(1)gem已安装，它可以在终端中运行。我想这是因为我使用rvm而GithubDesktop不知道rvm。有人知道如何解决这个问题吗？ 最佳答案

  9. ruby - Jekyll:如何在 GitHub 页面上使用自定义插件？ - 2

    事实证明，由于securityconcerns，自定义ruby​​插件在GitHub页面上不起作用。.我正在尝试将插件(thisone)添加到我的Jekyll项目的_plugins文件夹中，但是当我将它部署到GitHub时，它会被忽略。问题:有没有办法解决这个问题？有没有人找到解决办法？注意:显然我可以在本地生成html文件并将它们提交到我的存储库。但这不是我想要的。 最佳答案 如果你想让Jekyll站点像在本地一样运行，比如让自定义插件正常工作，这里有一种非常方便的方式来构建和部署Jekyll站点到GithubPages。?AGi

  10. ruby - git:从 bitbucket 导出并导入 github(带提交) - 2

    我在bitbucket上创建了一个私有(private)git存储库并提交了代码。现在我想导出所有(提交、代码、历史记录)并将其导入github上的gitrepo。有没有办法做到这一点？谢谢 最佳答案 在本地检查所有内容到您的计算机和gitpull。创建一个github存储库将此存储库添加为您的第二个远程(“使用gitremote添加githubURL”)推送到第二个Remote 关于ruby-git:从bitbucket导出并导入github(带提交)，我们在StackOverflow

随机推荐