前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【好玩】如何在github主页放一条贪吃蛇

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

原创
作者头像
JavaDog程序狗
修改2024-10-05 10:13:47
修改2024-10-05 10:13:47
1870
举报
文章被收录于专栏:干货干货

前言

🍊缘由

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. 【复制】如下生成小蛇内容
代码语言:yaml
复制
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...
4.运行workflow

【点击】Run workflow

5.生成output分支

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

6.查看生成svg外链地址
  1. 进入output分支
  1. 点击生成的svg文件
  2. 查看svg文件链接地址
  3. 复制svg文件链接地址
7.在仓库的README.md完善展示

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

******

🥝补充

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

代码语言:js
复制
<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)

### 个人简介
- 🐕 姓名: xxx
- 👦 性别: 男
- 🧭 年龄: 30
- 🌏 现居: 山东青岛
- 📞 手机: xxx
- 🥑 公众号: 【JavaDog程序狗】

### 仓库信息
![技术栈](https://github-readme-stats.vercel.app/api/top-langs/?username=javadog-net&layout=compact&theme=tokyonight)   

******

总结

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

******

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 🍊缘由
      • github放小蛇,就问你烧不烧
    • 🥝成果初展
      • 贪吃蛇
    • 🎯主要目标
      • 实现3大重点
  • 正文
    • 🍋前置条件
      • 1.GitHub账号
      • 2.GitHub项目提交记录
    • 🌽步骤
      • 1.github设置主页
      • 2.进入action
      • 3.创建workflow
      • 4.运行workflow
      • 5.生成output分支
      • 6.查看生成svg外链地址
      • 7.在仓库的README.md完善展示
    • 🥝补充
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档