【好玩】如何在github主页放一条贪吃蛇

迷南。 2024-05-11 09:08 50阅读 0赞

### 前言 ###

#### ?缘由 ####

##### github放小蛇，就问你烧不烧 #####

![在这里插入图片描述][bbb20fc7e9c64ac881b06ed7d0bfd0ef.png]  
起因看到**大佬github上**有一条**贪吃蛇**扭来扭去，觉得好玩，遂给大家分享一下本狗的**玩蛇历程**

--------------------

#### ?成果初展 ####

##### 贪吃蛇 #####

![请添加图片描述][e5ef655393a6954b3b519b63c922bb13.gif]

--------------------

#### ?主要目标 ####

##### 实现3大重点 #####

###### 1. github设置主页 ######

###### 2. github提交记录生成贪吃蛇动画 ######

###### 3. github中action使用及运行workflow ######

--------------------

### 正文 ###

#### ?前置条件 ####

##### 1.GitHub账号 #####

如果github都没有，那还玩什么蛇啊！

##### 2.GitHub项目提交记录 #####

如果没有提交记录蛇吃什么啊！

--------------------

#### ?步骤 ####

##### 1.github设置主页 #####

新建一个与你**GitHub用户名同名的仓库**。  
如本狗用户名为**javadog-net**，所以需要建一个仓库**javadog-net**

> https://github.com/javadog-net/javadog-net

![在这里插入图片描述][b7abc93ea17347e882b42b9f0563d985.png]

##### 2.进入action #####

在刚创建仓库中【点击】action

![在这里插入图片描述][4fcd836ae00c42b0a01e121253f6d242.png]

##### 3.创建workflow #####

1.  【点击】New workflow  
    ![在这里插入图片描述][64dae24e1444447c8ba6ccc040c1c98a.png]
2.  【新建】snake.yml  
    ![在这里插入图片描述][a74f03ef6cd54148a91af5dc93648932.png]
3.  【复制】如下生成小蛇内容  
    ![在这里插入图片描述][d89b74d2d14948609af7160ad156acf2.png]

name: generate animation
    
    on:
      # run automatically every 24 hours
      schedule:
        - cron: "0 */24 * * *" 
      
      # allows to manually run the job at any time
      workflow_dispatch:
      
      # run on every push on the master branch
      push:
        branches:
        - main
        
      
    
    jobs:
      generate:
        runs-on: ubuntu-latest
        timeout-minutes: 10
        
        steps:
          # 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.svg
            uses: Platane/snk/svg-only@v3
            with:
              github_user_name: ${
        {
         github.repository_owner }}
              outputs: |
                dist/github-contribution-grid-snake.svg
                dist/github-contribution-grid-snake-dark.svg?palette=github-dark
            env:
              GITHUB_TOKEN: ${
        {
         secrets.GITHUB_TOKEN }}
              
              
          # 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 branch
            uses: crazy-max/ghaction-github-pages@v3.1.0
            with:
              target_branch: output
              build_dir: dist
            env:
              GITHUB_TOKEN: ${
        {
         secrets.GITHUB_TOKEN }}

1.  【点击】Commit changes…  
    ![在这里插入图片描述][17dbcc6156e9406d927aa97bd6231704.png]

##### 4.运行workflow #####

【点击】Run workflow  
![在这里插入图片描述][9aa45a28aea64596a0a6d55d97ce4679.png]

##### 5.生成output分支 #####

运行上步后就会生成**output分支**，里面会有对应提交记录的贪吃蛇**svg图片**  
![在这里插入图片描述][dd727f35b3114f4aa661be03028f5a93.png]

##### 6.查看生成svg外链地址 #####

1.  进入output分支

![在这里插入图片描述][85ee963d539447f68a696ff7f67c4195.png]  
2. 点击生成的svg文件  
![在这里插入图片描述][db9a3a80c4cd46d3bf43688af67aa53b.png]  
3. 查看svg文件链接地址  
![在这里插入图片描述][074035a99de64ae680f8434f66136cde.png]  
4. 复制svg文件链接地址  
![在这里插入图片描述][9e4e788cce094e17b83b08390bdb010c.png]

##### 7.在仓库的README.md完善展示 #####

将上一步复制的svg地址，放置到README.md中，可以是markdown格式

![在这里插入图片描述][ef5756ca87644c7da906ad22d5b51e10.png]  
![在这里插入图片描述][f08992f2ec8f4212a099b9976d659b6a.png]

--------------------

#### ?补充 ####

本狗github主页其他的展示内容，如博友有兴趣参考，可复制即可

<div align="center">
      <a href="https://blog.sunguoqi.com/">
        <img src="https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=024EF7&width=435&lines=昨日之深渊,今日之浅谈;想的是你,放不下的还是你！&center=true&size=27" alt="Typing SVG" />
      </a>
    </div>
    
    ![](https://raw.githubusercontent.com/javadog-net/javadog-net/output/github-contribution-grid-snake.svg)
    
    ### 个人简介
    - ? 姓名: 胡东旭
    - ? 性别: 男
    - ? 年龄: 30
    - ? 现居: 山东青岛
    - ? 手机: 18306390693
    - ? 公众号: 【JavaDog程序狗】
    
    ### 仓库信息
    ![技术栈](https://github-readme-stats.vercel.app/api/top-langs/?username=javadog-net&layout=compact&theme=tokyonight)   
    
    ### 博客简介
    
    | JavaDog| 狗屋地址 |
    | :----:| :----: | 
    | 个人博客 | [https://www.javadog.net](https://www.javadog.net) | 
    | 公众号 | [JavaDog程序狗](https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw) | 
    | CSDN  | [https://blog.csdn.net/baidu_25986059](https://blog.csdn.net/baidu_25986059) | 
    | 掘金 | [https://juejin.cn/user/2172290706716775](https://juejin.cn/user/2172290706716775)| 
    | 知乎 | [https://www.zhihu.com/people/JavaDog](https://www.zhihu.com/people/JavaDog) | 
    | 简书| [https://www.jianshu.com/u/1ff9c6bdb916](https://www.jianshu.com/u/1ff9c6bdb916) | 
    | gitee|[https://gitee.com/javadog-net](https://gitee.com/javadog-net)  | 
    | GitHub|[https://github.com/javadog-net](https://github.com/javadog-net)| 
    
    ### 文章推荐
    
    [【苹果】SpringBoot监听Iphone15邮件提醒，Selenium+Python自动化抢购脚本](https://mp.weixin.qq.com/s?__biz=MzI0MTk1OTE0OA==&mid=2247485024&idx=1&sn=0b1955d34f8a997047e87eb003dc9257&chksm=e902efe3de7566f57c509465855e6ceb85ab21070f55e2fb9c2475c4576f7c51b0f22accbf69#rd)
    
    [【规范】SpringBoot接口返回结果及异常统一处理，这样封装才优雅](https://mp.weixin.qq.com/s?__biz=MzI0MTk1OTE0OA==&mid=2247484847&idx=1&sn=bfd60bed1aef8ddcf4c030f7882a9a6d&chksm=e902ec2cde75653a0ab9a89be0365ba8f5f86a1b4de21104ff2e67352fb311e52443cd9c4a9b#rd)
    
    [【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目](https://mp.weixin.qq.com/s/g7AZOWLgW5vcCahyJDEPKA)
    
    [【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序](https://mp.weixin.qq.com/s/t_qwF_HvkdW-6TI3sYUHrA)
    
    [【模块分层】还不会SpringBoot项目模块分层？来这手把手教你！](https://mp.weixin.qq.com/s/fpkiNR2tj832a6VxZozwDg)
    
    [【ChatGPT】手摸手，带你玩转ChatGPT](https://mp.weixin.qq.com/s/9wEelbTN6kaChkCQHmgJMQ)
    
    [【ChatGPT】SpringBoot+uniapp+uview2对接OpenAI，带你开发玩转ChatGPT](https://mp.weixin.qq.com/s/b19J36Eo3-ba7bHbWzoZYQ)

--------------------

### 总结 ###

本文通过**github主页加入提交记录贪吃蛇**为引，拓展分析了如何在**github设置主页**，并将提交记录生成贪吃蛇动画，以及**github中action**使用及如何运行**workflow**等。以小见大，希望这个奇淫技巧可以让博友一乐。

--------------------

#### ?猜你想问 ####

##### 如何与狗哥联系进行探讨 #####

###### 关注公众号【JavaDog程序狗】 ######

公众号回复【入群】或者【加入】，便可成为【程序员学习交流摸鱼群】的一员，问题随便问，牛逼随便吹。  
![在这里插入图片描述][e55c65b223664e6dbed5961ecea0d270.png]

**此群优势：**

1.  技术交流随时沟通
2.  任何私活资源免费分享
3.  实时科技动态抢先知晓
4.  CSDN资源免费下载
5.  本人一切源码均群内开源，可免费使用

###### 2.踩踩狗哥博客 ######

[javadog.net][]

> 大家可以在里面留言，随意发挥，有问必答

![b98f327f0a078f13b2b80f064914d622.png][]

--------------------

#### ?猜你喜欢 ####

##### 文章推荐 #####

[【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目][SpringBoot_uniapp_uview2_H5_APP]

[【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序][SpringBoot_uniapp_uview2]

[【模块分层】还不会SpringBoot项目模块分层？来这手把手教你！][SpringBoot]

[【ChatGPT】手摸手，带你玩转ChatGPT][ChatGPT_ChatGPT]

[【ChatGPT】SpringBoot+uniapp+uview2对接OpenAI，带你开发玩转ChatGPT][ChatGPT_SpringBoot_uniapp_uview2_OpenAI_ChatGPT]

--------------------

![在这里插入图片描述][e74f3636c05a430eab8819333fa004eb.jpeg]

[bbb20fc7e9c64ac881b06ed7d0bfd0ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/a8136202a63149b5834df32e7c32c98e.png
[e5ef655393a6954b3b519b63c922bb13.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/31ba655748934ca29c533c29c550ea1f.gif
[b7abc93ea17347e882b42b9f0563d985.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/0c4c3fd5f51b4b1e9de1f9ac7f3e39a9.png
[4fcd836ae00c42b0a01e121253f6d242.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/2ceead032da74408872eafa2ccc8d55b.png
[64dae24e1444447c8ba6ccc040c1c98a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/a3172d6a6f974d608f76d230c8b8c0e2.png
[a74f03ef6cd54148a91af5dc93648932.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/9c3f4cf968574fd094bea879cfd38ced.png
[d89b74d2d14948609af7160ad156acf2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/414eea4c66034991ae897a99fbcd14f9.png
[17dbcc6156e9406d927aa97bd6231704.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/105baab5d7e84129aecacdedd66ec02b.png
[9aa45a28aea64596a0a6d55d97ce4679.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/5e40d4272d3e43e5ac56ffdc360b58cc.png
[dd727f35b3114f4aa661be03028f5a93.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/3acdd2ce9da3474887f4eaf9f615980b.png
[85ee963d539447f68a696ff7f67c4195.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/096c7864940c4c75871f683819b1d9f6.png
[db9a3a80c4cd46d3bf43688af67aa53b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/83823d49139b4edc89f51acfbdaf908e.png
[074035a99de64ae680f8434f66136cde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/df9fb57ed58e4b06b480e5e2546b7802.png
[9e4e788cce094e17b83b08390bdb010c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/d382d9e441164cd4a263c49d9121b0fe.png
[ef5756ca87644c7da906ad22d5b51e10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/f82201c9b30649629236c89fab2cfc1b.png
[f08992f2ec8f4212a099b9976d659b6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/428e6d98ab2f40d084d51b5e26232ceb.png
[e55c65b223664e6dbed5961ecea0d270.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/284ec3d867b6460785f4f8daaf2d45d6.png
[javadog.net]: https://www.javadog.net/
[b98f327f0a078f13b2b80f064914d622.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/ec96835246b84370993080036e1024a4.png
[SpringBoot_uniapp_uview2_H5_APP]: https://mp.weixin.qq.com/s/g7AZOWLgW5vcCahyJDEPKA
[SpringBoot_uniapp_uview2]: https://mp.weixin.qq.com/s/t_qwF_HvkdW-6TI3sYUHrA
[SpringBoot]: https://mp.weixin.qq.com/s/fpkiNR2tj832a6VxZozwDg
[ChatGPT_ChatGPT]: https://mp.weixin.qq.com/s/9wEelbTN6kaChkCQHmgJMQ
[ChatGPT_SpringBoot_uniapp_uview2_OpenAI_ChatGPT]: https://mp.weixin.qq.com/s/b19J36Eo3-ba7bHbWzoZYQ
[e74f3636c05a430eab8819333fa004eb.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/c091bce17c654aa2ad33951ba1fb416c.jpeg