在本文中,我想与您分享一个很酷的功能,我添加了我的Github项目画廊。现在,用户可以输入其github用户名,并查看自己的项目以及个人资料图片。这是个性化画廊并展示您的作品的好方法。让我们深入了解我如何实现此功能的细节。
如果您喜欢我的项目,我将感谢您对一颗星星的支持!
SchBenedikt / schbenedikt.github.io
我惊人的新态html&css网站使用GitHub API托管的GitHub
Neumorphism Website + Github API
This project showcases my GitHub repositories and allows you to explore the projects I've been working on. It uses the GitHub API to fetch the project data and displays it in a user-friendly format.
If you like my project, I would appreciate your support with a star
简介
欢迎来到我的GitHub项目展示柜!该项目强调了我一直在研究的存储库,并提供了一个视觉上吸引人且用户友好的界面来探索它们。它利用GitHub API获取项目数据并结合了各种设计效果以增强整体体验。
功能
获取github项目
getGitHubProjects(username)
函数利用github api的功率获取与给定username
相关的项目数据。它以JSON格式检索存储库及其详细信息,可以轻松整合和渲染。
创建项目卡
一旦项目数据
步骤1:创建HTML结构
首先,我首先是为项目库创建HTML结构。我添加了一个输入字段,用户可以在其中输入其github用户名。这将使我们能够使用github api获取他们的项目和个人资料图片。
步骤2:添加JavaScript功能
为了使魔术实现,我编写了一些JavaScript功能来处理用户输入并自动检索配置文件图片。这里的关键功能是updateUsername(),当用户单击“更新”按钮时,它会触发。在此功能中,我读取用户输入的用户名,对GitHub进行API调用,然后加载用户的个人资料图片。
步骤3:调整CSS样式
为了让项目库的外观,我对CSS样式进行了一些调整。我调整了现有的CSS规则,并添加了一些新规则以实现所需的外观。随时获得创造力并根据自己的口味自定义样式。
结论:
我对我的Github项目画廊的这一新功能感到非常兴奋。允许用户输入其github用户名并自动检索他们的个人资料图片,从而为画廊增添了个人风格。这是展示您的作品并让访客在更个人层面上与您联系的好方法。希望本文能够激发您在自己的项目中实现类似功能。
我在此功能上工作很有趣,我鼓励您尝试一下。愉快的编码和探索可能性!