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

这篇具有很好参考价值的文章主要介绍了【好玩】如何在github主页放一条贪吃蛇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

🍊缘由

github放小蛇,就问你烧不烧

github 贪吃蛇,github,github,java,vue.js
起因看到大佬github上有一条贪吃蛇扭来扭去,觉得好玩,遂给大家分享一下本狗的玩蛇历程


🥝成果初展

贪吃蛇

github 贪吃蛇,github,github,java,vue.js


🎯主要目标

实现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

github 贪吃蛇,github,github,java,vue.js

2.进入action

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

github 贪吃蛇,github,github,java,vue.js

3.创建workflow
  1. 【点击】New workflow
    github 贪吃蛇,github,github,java,vue.js
  2. 【新建】snake.yml
    github 贪吃蛇,github,github,java,vue.js
  3. 【复制】如下生成小蛇内容
    github 贪吃蛇,github,github,java,vue.js
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…
    github 贪吃蛇,github,github,java,vue.js
4.运行workflow

【点击】Run workflow
github 贪吃蛇,github,github,java,vue.js

5.生成output分支

运行上步后就会生成output分支,里面会有对应提交记录的贪吃蛇svg图片
github 贪吃蛇,github,github,java,vue.js

6.查看生成svg外链地址
  1. 进入output分支

github 贪吃蛇,github,github,java,vue.js
2. 点击生成的svg文件
github 贪吃蛇,github,github,java,vue.js
3. 查看svg文件链接地址
github 贪吃蛇,github,github,java,vue.js
4. 复制svg文件链接地址
github 贪吃蛇,github,github,java,vue.js

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

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

github 贪吃蛇,github,github,java,vue.js
github 贪吃蛇,github,github,java,vue.js


🥝补充

本狗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程序狗】

公众号回复【入群】或者【加入】,便可成为【程序员学习交流摸鱼群】的一员,问题随便问,牛逼随便吹。
github 贪吃蛇,github,github,java,vue.js

此群优势:

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

javadog.net

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

github 贪吃蛇,github,github,java,vue.js


🍯猜你喜欢

文章推荐

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

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

【模块分层】还不会SpringBoot项目模块分层?来这手把手教你!

【ChatGPT】手摸手,带你玩转ChatGPT

【ChatGPT】SpringBoot+uniapp+uview2对接OpenAI,带你开发玩转ChatGPT


github 贪吃蛇,github,github,java,vue.js文章来源地址https://www.toymoban.com/news/detail-717237.html

到了这里,关于【好玩】如何在github主页放一条贪吃蛇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • GitHub美化主页设计(保姆教程)

    😎Hello,大家好,我是zhe,有时候我们在逛github的时候,发现为什么别人的仓库这么炫酷,其原理就是Markdown形式的展现,今天我们来学习如何美化自己的Github主页,开始学习吧! 作者github仓库(到时候有空再继续整这些花里胡哨的东西) 更多优秀页面展示 展示页面原链接

    2024年02月16日
    浏览(52)
  • 基于github制作个人学术网站(主页)

    首先找到一个学术模板,fork到远程仓库。academicpages,如果不是很清楚具体的步骤,可以参考保姆级教程。在github上对该网站代码修改不是很方便,肯定是在本地进行更新后push到远程仓库。 学会下载和安装就行,一路默认,可以先学习一下Git相关的原理及基础操作,可以参考

    2024年02月15日
    浏览(43)
  • 创建并美化Github主页(内含组件)

    目录 1、创建仓库 2、美化 1、包含多种  2、活动统计图  3、资料奖杯  4、文字的打字特效  5、中文网站卡片  6、贪吃蛇贡献图  7、可参考的页面 最近有想要写开源的打算了,计划了好久好久好久,不知道写啥(目前仍然不知道)…… 俗话说人活一张脸,写开源项目,首页是

    2024年02月02日
    浏览(39)
  • Github主页无法打开和Assets转圈

    1、cmd启动命令行 2、github.com打不开,多刷新几遍。等成功打开时,命令行输入 nslookup github.com ,把非权威应答下的IP地址复制到 C:WindowsSystem32driversetchosts 里,如查到的IP是192.30.255.112,则填写 3、命令行输入 ipconfig /flushdns ,此后每次都可以顺利打开github主页。如果遇到不能

    2024年02月07日
    浏览(29)
  • Texas Instruments 在 GitHub 的官方主页

    https://github.com/TexasInstruments TI is a global semiconductor design and manufacturing company. https://github.com/TexasInstruments/jacinto-ai-devkit Training Quantization Tools, Model Zoo Accuracy Benchmarks For Embedded AI Development. https://github.com/TexasInstruments/jacinto-ai-devkit/blob/master/README_OLD.md https://github.com/TexasInstruments/edg

    2024年02月20日
    浏览(34)
  • Github 添加贪吃蛇动画

    我们都知道,对于Github来说,当你选择你的账户时,可以看到自己的提交记录。 于是就有大神动脑筋了,这些commit记录都是一些豆,如果弄一条蛇来,不就可以搞个贪吃蛇了吗? 有道理有道理,本文就来讲一下如何弄一条蛇出来。   个人仓库是一个特殊的仓库,名字就是你

    2023年04月12日
    浏览(18)
  • 如何将github上的Vue项目在本地运行起来?

    今天在github逛的时候发现几个Vue博客前端模板,觉得挺好看的,就拉到本地上,启动项目发生报错,捣鼓一会儿,下面将介绍,如何成功地将项目运行起来。 1.打开package.json文件 如果显示serve,就在终端切换到项目,输入 npm run serve ,进行启动。若显示dev,就 npm run dev 原因:因为

    2024年02月13日
    浏览(33)
  • Vue实战第3章:主页设计之顶部导航栏

    主页设计之顶部导航栏 前言 本篇在讲什么 本篇文章主要来制作一个导航栏,具体效果就按照下图来处理吧 本篇适合什么 适合 初学Vue 的小白 想了解 建站 的同学 本篇需要什么 对 Html 语法有简单认知 对 CSS 语法有简单认知 对 Vue 有简单认知 依赖 VS Code 编辑器 本篇的特色 具

    2024年02月02日
    浏览(27)
  • 如何彻底删除hao123主页?

    我们在使用浏览器的时候,可能有时候会发现浏览器主页被hao123挟持了,成每一次浏览器打开便会默认设置发生hao123主页,非常烦人,有什么办法可以恢复浏览器原本的主页吗?下面小编就给大家分享详细的解决方法。 如何彻底删除hao123主页 1、当现hao123主页删掉不了的情况

    2024年02月16日
    浏览(83)
  • Vue+ELementUI主页布局----侧边栏布局(el-aside)

    第一节Login.vue登录表单知识:  Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客 具体Element-UI地址: Element - The world\\\'s most popular Vue UI framework   目录 一、布满整个页面 二、主页Header布局 三、主页左侧带单布局 四、axios请求拦截器添加token,保证拥有获取数据的权限 五、发

    2024年02月02日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包