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

前言

🍊缘由

github放小蛇,就问你烧不烧

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


🥝成果初展

贪吃蛇

请添加图片描述


🎯主要目标

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

在这里插入图片描述

2.进入action

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

在这里插入图片描述

3.创建workflow
  1. 【点击】New workflow
    在这里插入图片描述
  2. 【新建】snake.yml
    在这里插入图片描述
  3. 【复制】如下生成小蛇内容
    在这里插入图片描述
name: generate animationon:# run automatically every 24 hoursschedule:- cron: "0 */24 * * *" # allows to manually run the job at any timeworkflow_dispatch:# run on every push on the master branchpush:branches:- mainjobs:generate:runs-on: ubuntu-latesttimeout-minutes: 10steps:# 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.svguses: Platane/snk/svg-only@v3with:github_user_name: ${{ github.repository_owner }}outputs: |dist/github-contribution-grid-snake.svgdist/github-contribution-grid-snake-dark.svg?palette=github-darkenv: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 branchuses: crazy-max/ghaction-github-pages@v3.1.0with:target_branch: outputbuild_dir: distenv:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
  1. 【点击】Commit changes…
    在这里插入图片描述
4.运行workflow

【点击】Run workflow
在这里插入图片描述

5.生成output分支

运行上步后就会生成output分支,里面会有对应提交记录的贪吃蛇svg图片
在这里插入图片描述

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

在这里插入图片描述
2. 点击生成的svg文件
在这里插入图片描述
3. 查看svg文件链接地址
在这里插入图片描述
4. 复制svg文件链接地址
在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述


🥝补充

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

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

此群优势:

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

javadog.net

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


🍯猜你喜欢

文章推荐

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

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

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

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

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


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/128071.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TCP VS UDP

程序员写网络程序&#xff0c;主要编写的应用层代码&#xff01; 真正要发这个数据&#xff0c;需要上层协议调用下层协议&#xff0c;应用层要调用传输层&#xff0c;则传输层给应用层提供一组api&#xff0c;统称为&#xff1a;soket api 基于UDP的api 基于TCP的api 这两个协…

京东数据接口|电商运营中数据分析的重要性

在电商运营中&#xff0c;数据分析是非常重要的一环&#xff0c;它可以帮助电商企业更好地了解市场、了解消费者、了解产品、了解销售渠道等各种信息&#xff0c;从而制定更为科学有效的运营策略&#xff0c;提高销售效益。 数据方面用户可以直接选择使用数据接口来获取&#…

Synchronized的实现和锁升级

1.JVM是如何处理和识别Synchronized的&#xff1f; 我们从字节码角度分析synchronized的实现&#xff1a; Synchronized(锁对象){}同步代码块底层实现方式是monitorenter和monitorexit指令。 修饰普通同步方法时底层实现方式是执行指令会检查方法是否设置ACC_SYNCHRONIZED&am…

Legion Y9000X IRH8 2023款(82Y3)原装出厂OEM预装Windows11系统

lenovo联想电脑笔记本拯救者原厂win11系统镜像 下载链接&#xff1a;https://pan.baidu.com/s/15G01j7ROVqOFOETccQSKHg?pwdt1ju 系统自带所有驱动、出厂主题壁纸、Office办公软件、联想电脑管家等预装程序 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;ISO…

Vue 3 学习 源码解读

该文章内容为以下视频的学习笔记&#xff1a; 前言_哔哩哔哩_bilibili前言是秋招解决方案&#xff1a;深入 Vue3 源码&#xff0c;带你彻底打通 Vue3 源码面试的第1集视频&#xff0c;该合集共计13集&#xff0c;视频收藏或关注UP主&#xff0c;及时了解更多相关视频内容。htt…

JVM上篇之虚拟机与java虚拟机介绍

目录 虚拟机 java虚拟机 简介 特点 作用 位置 整体结构 类装载子系统 运行时数据区 java执行引擎 Java代码执行流程 jvm架构模型 基于栈式架构 基于寄存器架构 总结 jvm的生命周期 1.启动 2.执行 3.退出 JVM的发展历程 虚拟机 所谓虚拟机&#xff0c;指的…

【微服务】RedisSearch 使用详解

目录 一、RedisJson介绍 1.1 RedisJson是什么 1.2 RedisJson特点 1.3 RedisJson使用场景 1.3.1 数据结构化存储 1.3.2 实时数据分析 1.3.3 事件存储和分析 1.3.4 文档存储和检索 二、当前使用中的问题 2.1 刚性数据库模式限制了敏捷性 2.2 基于磁盘的文档存储导致瓶…

数字三角形加强版题解(组合计数+快速幂+逆元)

Description 一个无限行的数字三角形&#xff0c;第 i 行有 i 个数。第一行的第一个数是 1 &#xff0c;其他的数满足如下关系&#xff1a;如果用 F[i][j] 表示第 i 行的第 j 个数&#xff0c;那么 F[i][j]A∗F[i−1][j]B∗F[i−1][j−1] &#xff08;不合法的下标的数为 0 &a…

Springboot项目log4j与logback的Jar包冲突问题

异常信息关键词&#xff1a; SLF4J: Class path contains multiple SLF4J bindings. ERROR in ch.qos.logback.core.joran.spi.Interpreter24:14 - no applicable action for [properties], current ElementPath is [[configuration][properties]] 详细异常信息&#xff1a…

水波纹文字效果动画

效果展示 CSS 知识点 text-shadow 属性绘制立体文字clip-path 属性来绘制水波纹 工具网站 CSS clip-path maker 效果编辑器 页面整体结构实现 使用多个 H2 标签来实现水波纹的效果实现&#xff0c;然后使用clip-path结合动画属性一起来进行波浪的起伏动画实现。 <div …

盒子模型的基础

盒子模型 边框&#xff08;border&#xff09; border可以设置元素的边框&#xff0c;边框分成三部分&#xff0c;边框的&#xff08;粗细&#xff09;边框的样式&#xff0c;边框的颜色 <style>div {width: 100px;height: 100px;border-width: 200;border-style: 边框…

应用层协议——DNS、DHCP、HTTP、FTP

目录 1、DNS 协议 1-1&#xff09;Hosts 文件 1-2&#xff09;DNS 系统 1-3&#xff09;域名的组成、分类和树状结构 1-4&#xff09;DNS 域名服务器类型 1-5&#xff09;DNS 查询方式 1-6&#xff09;DNS 域名解析的一般步骤 1-7&#xff09;对象类型与资源记录 2、D…