GitHub页面（实现贪吃蛇效果等）美化主页详细大全！

printf("☻");

已于 2024-08-04 13:51:31 修改

阅读量1.1k

点赞数 35

文章标签： github java python c++ c语言 git windows

于 2024-08-02 22:07:34 首次发布

本文链接：https://blog.csdn.net/m0_73399729/article/details/140807579

版权

1.引言

        😊Hello！！！首先感谢您访问我的博客！更希望您能一键三连转发并关注我！我会更新更多有价值的博客资讯！我的GitHub 雅丹昂（printfln（“Hello LJinY”）;) (github.com)

2.      💪GitHub不仅是开发者展示技能和项目的平台，更是个人品牌和专业形象的重要组成部分。通过精心设计和美化你的GitHub主页，你不仅能够吸引更多的目光，还能提升个人在开源社区中的影响力和认可度。

3.      😎  "GitHub作为开发者社区的中心，一个美化精美的个人主页不仅仅是展示你的代码，更是展示你专业形象的窗口，话不多说下面开始吧。"

创建GitHub账号：

美化GitHub主页的步骤

选择主题：推荐一些受欢迎的GitHub主页主题或模板

在您的 GitHub 个人资料自述文件中显示您最近播放的 Spotify 曲目

【点击】Commit changes…后当这个workflow执行成功后，可以在output分支看到这两个文件

创建GitHub账号：
- "首先，确保你拥有一个GitHub账号。如果还没有，可以前往github.com注册一个账号。这是建立你开发者身份的第一步。"
- 那么我们先去新建一个与你GitHub用户名同名的仓库。
  如我的用户名为yadanang，所以需要建一个仓库yadanang的同名仓库
- 首先这里找到我们的仓库-->进去后右上角有新建仓库去新建一个

注意⚠️这里新建一个与你GitHub用户名同名的仓库按照下面步骤！

第二步去书写我们的README文件的内容

创建好后仓库中下面的README文件就是我们主页中要去展示的内容了

就是开始去编辑输入一些特殊的内容了（如：图片，小卡片，美化插件的等...）
编写 README.md
README.md 中是有一段默认内容的，我们可以删除

美化GitHub主页的步骤

选择主题：推荐一些受欢迎的GitHub主页主题或模板
精选的超棒 Github 配置文件自述文件 里面提供了丰富的模板，可以根据个人喜好和需求进行选择。

可以将一些喜欢的复制粘贴直接在github页面编辑 README.md 即可，可以编辑和预览效果

自定义样式：介绍如何修改个人主页的颜色、布局和字体，以及如何添加自定义元素（如徽章、动态效果等）。

这里介绍第一项自述文件：键入 SVG

DenverCoder1/readme-typing-svg：⚡动态生成的、可自定义的 SVG，具有键入和删除文本的外观，以便在您的个人资料页面、存储库或网站上使用。 (github.com) 在这里，您可以使用实时预览轻松自定义您的打字 SVG。这个是模拟是实现打字键入过程的动图可以进行自定义！

可以进行多行输入添加，设置好后Copy To Clipboard的内容粘贴到自己主页的 README.md 即可，更多参数设置可以参考链接里内容介绍。

GitHub 统计信息卡

详细信息请点击-----> 统计仓库信息卡

可以在您的 README 中获取动态生成的 GitHub 统计信息

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&theme=dark&show_icons=true)

将其复制并粘贴到您的 Markdown 中，就是这样。简单！

将值更改为您的 GitHub 用户名。?username=

使用内置主题想要修改成自己喜欢的只需修改使用参数，如所示：?theme=THEME_NAME 把后面的值改成自己选的主题名称即可

Github活动统计图

将其复制并粘贴到您的 Markdown 中，就是这样。简单！其他参数修改也同上所示一样详细请访问链接有可以提供自定义

[![Ashutosh's github activity graph](https://github-readme-activity-graph.vercel.app/graph?username=Ashutosh00710&theme=dracula)](https://github.com/ashutosh00710/github-readme-activity-graph)

完成项目后难以创建自述文件，以便将其上传到平台或选择要使用的徽章，或者如何使您的自述文件在视觉上具有吸引力？我明白你的痛苦。痛苦终于结束了。我整理了一些最常用、最重要和最受欢迎的徽章，供您在 GitHub 个人资料或项目中使用。

徽章

📛 超棒徽章 - DEV Community

![]()

把链接放入括号内即可，有些改一下{username}改成自己的用户名

Static Badge | Shields.io

github markdown 表情符号标记的完整列表

🎁 Emoji cheat sheet for GitHub, Basecamp, Slack & more (webfx.com)

技术栈图标展示

tandpfun/skill-icons：轻松✨在 Github 自述文件或简历上展示您的技能

想要将自述文件中的图标居中 SVG 会自动调整大小，因此您可以按照通常居中图像的相同方式进行调整。

找到图标的完整列表修改成自己需要的。?i=js,html,css

<p align="center">
  <a href="https://skillicons.dev">
    <img src="https://skillicons.dev/icons?i=git,kubernetes,docker,c,vim" />
  </a>
</p>

徽章/盾牌：简洁、一致且易读的徽章，采用 SVG 和栅格格式 (github.com)

Naereen/badges： :p encil：许多小徽章的 Markdown 代码 :p ushpin：（shields.io， forthebadge.com etc）：sunglasses：.欢迎投稿！请添加您的！ (github.com)

Ileriayo/markdown-badges: Badges for your personal developer branding, profile, and projects. (github.com)

antonkomarev/github-profile-views-counter：它计算您的 GitHub 个人资料被查看的次数。免费的云微服务。

Devicon旨在收集代表开发语言和工具的所有徽标。每个图标都有多个版本：字体/SVG、原始/纯色/线条、有色/无色、文字商标/无文字商标。 Devicon 有 150+ 个图标。而且还在增长！

devicons/devicon: Set of icons representing programming languages, designing & development tools (github.com)

PiyushSuthar/github-readme-quotes：🔥将编程引用添加到您的 GitHub 自述文件

anmol098/waka-readme-stats：此 GitHub 操作有助于将很酷的开发指标添加到您的 github 配置文件自述文件中

GitHub 个人资料视图计数器

GHPVС项目是概念验证。该计数器旨在成为您的分析工具，但不适用于访问您的个人资料的人。它可以用来查看由于开发活动、写博客或参加会议而产生的个人资料视图动态。

它会计算您的 GitHub 个人资料被查看的次数，并将它们免费显示在您的个人资料中。

图标

Simple Icons

自述文件中的 GitHub 活动

使用用户最近的 GitHub 活动进行更新。

jamesgeorge007/github-activity-readme：使用用户最近的 GitHub 活动更新 README

GitHub 个人资料奖杯

sun0225SUN （孙国琦） (github.com)

可一键生成！！

GitHub 个人资料自述文件生成器 |GitHub 个人资料自述文件生成器 (rahuldkjain.github.io)

在您的 GitHub 个人资料自述文件中显示您最近播放的 Spotify 曲目

JeffreyCA/spotify-recently-played-readme：在您的 GitHub 个人资料 README 上显示您最近播放的 Spotify 曲目。

优秀大佬模板参考

在GitHub 主页实现一个贪吃蛇动画

这是我个人非常喜欢的一个项目，它可以从 github 用户贡献图生成贪吃蛇游戏，并将屏幕截图输出为动画 svg 或 gif！！！它还可以每天自动生成一个新图像

更多详细请访问这个大佬的GitHub主页

操作也是和前面操作大差不差，新建一个与你GitHub用户名同名的仓库，然后接下来再进行下面操作

1、新建一个 actions

如下图点击Actions按钮

然后去新建一个 `workflows`工作流

新建一个 `yaml` 配置脚本

修改配置文件

GitHub 默认会在 Actions 配置文件 `blank.yml` 中添加一个示例。我们只需修改这个文件的名称，并编写我们自己的即可。

下面readme文档就是来显示我们动图的，这段代码是一个 HTML 片段，在网页中展示不同主题模式下的 GitHub 贡献图，图片的来源是来自仓库里面的output分支

output分支不需要我们手动创建，再GitHub/workflows中有对应的对output分支的处理

这个 GitHub Actions 步骤使用 Platane/snk/svg-only Action 来生成两个 SVG 格式的贡献图，一个是默认配色方案的，一个是暗色模式配色方案的。生成的文件被保存到 dist 目录中，文件名分别为 github-contribution-grid-snake.svg 和 github-contribution-grid-snake-dark.svg。

这两个文件的名字要和readme文件中的名字相同，它会由枚举查询来决定是默认配色方案还是暗色模式配色方案

workflow第二步是把生成的文件推送到output分支将生成的 GitHub 贡献图推送到一个名为 output 的分支。

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:
    - master
    
  

jobs:
  generate:
    permissions: 
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 5
    
    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
          
          
      # 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 }}