我制作了一个 Web 应用程序来展示你所有的 GitHub 项目😍✨

项目介绍

使用超级可定制的 Web 应用程序以时尚的方式展示您的所有项目！✨

Projects使用 GitHub API，在一个美观易搜索的网格中列出你所有的 GitHub 项目。
同时，它还使用 展示了漂亮的编程图标devicons。

灵感

需要一种方法来显示我的所有项目，并且应该从 GitHub 自动更新

获取项目

要获取项目，请按照以下步骤操作：

git clone https://github.com/2kabhishek/projects

cd projects

设置您自己的项目

您可以按照以下步骤为自己设置项目：

• 分叉仓库：https://github.com/2kabhishek/projects
• 本地克隆/在 GitHub Codespaces 中打开
• 打开script.js并将变量更新username为您的 GitHub 用户名。
• 打开index.html并更新title标签以使其成为您自己的。
• 您可能还想通过更新标签link来更新图标index.html
• 提交并推送您的更改
• 转到 GitHub 上的 repo 设置，Pages启用 GitHub Pages。
  • 选择“从分支部署”，并将分支main作为/根目录。
• 完毕！

该网站应该在https://<your-username>.github.io/projects

回购数量

显示的仓库数量随maxPages变量而变化，GitHub API 支持每页最多显示 100 个仓库。
如果仓库数量少于 100 个，则设置maxPages为 1；如果仓库数量超过 300 个，则设置为 3。

您还可以编辑获取查询以减少每页的 repo 数量。

没有分页，所有存储库都显示在同一页面上。

分叉存储库

显示分叉存储库hideForks = false设置script.js

已验证的请求

如果您在本地工作并注意到 API 没有发送数据，则可能是因为 GitHub API 请求的速率限制。

您可以等待一个小时，也可以在 GitHub 上设置个人访问令牌，并将其传递到获取请求中script.js

主题

默认带有深色和浅色主题，取决于您的系统和浏览器设置。

:root编辑下面的变量styles.css来改变配色方案。

编程语言图标

该项目使用Devicon添加语言图标，如果未
显示语言名称和图标，对于您的任何存储库，请更新devicons映射script.js。

它是如何建造的

我Projects使用HTML CSS JavaScriptNeovim构建

我学到了什么

• 在实现的过程中了解了 fetch API 的一些怪癖maxPages。
• 重新审视 Flex、box-shadow 和其他一些 CSS 技巧

如果您发现这有用，请点击❤️按钮。

项目回购