모든 GitHub 프로젝트를 보여줄 웹 앱을 만들었습니다 😍✨
6268 단어 githubshowdevjavascriptwebdev
프로젝트 소개
매우 사용자 정의 가능한 웹 앱으로 모든 프로젝트를 멋지게 표현하세요! ✨
Projects
는 GitHub API를 사용하여 모든 GitHub 프로젝트를 검색 가능한 그리드에 나열합니다.또한
devicons
를 사용하여 예쁜 프로그래밍 아이콘을 표시합니다.영감
내 모든 프로젝트를 표시하는 방법이 필요했고 내 portfolio's project section를 영감으로 사용했습니다.
프로젝트 받기
프로젝트를 가져오려면 다음 단계를 따르세요.
git clone https://github.com/2kabhishek/projects
cd projects
나만의 프로젝트 설정
자신의 리포지토리를 표시하도록 프로젝트를 쉽게 설정할 수 있습니다.
script.js
를 열고 username
변수를 GitHub 사용자 이름으로 업데이트합니다. index.html
를 열고 title
태그를 업데이트하여 사용자 이름으로 만듭니다. link
에서 index.html
태그를 업데이트하세요.사이트가 라이브 상태여야 합니다
https://<your-username>.github.io/projects
.다음은 프로필입니다.
저장소 수
리포지토리 수는
maxPages
변수로 제어되며 GitHub API는 페이지당 최대 100개의 리포지토리를 지원합니다.저장소가 100개 미만인 경우
maxPages
를 1로 설정하고 300개인 경우 3으로 설정합니다.가져오기 쿼리를 편집하여 페이지당 저장소 수를 줄일 수도 있습니다.
There's no pagination, all repos are shown on the same page.
인증된 요청
로컬에서 작업 중이고 API가 데이터를 통해 전송하지 않는 것을 확인했다면 GitHub API 요청에 대한 속도 제한 때문일 수 있습니다.
한 시간 동안 기다리거나 GitHub에서 개인용 액세스 토큰을 설정하고
script.js
의 가져오기 요청에 전달할 수 있습니다.프로젝트 보기
즐겨 사용하는 브라우저에서
index.html
를 열거나 2kabhishek.github.io/projects을 방문하십시오.건축 방법
프로젝트는
HTML
CSS
& JavaScript
를 사용하여 구축되었습니다.Neovim과 Python http 서버를 기반으로 구축되었습니다.
데이터에는 GitHub API를 사용하고 아이콘 프로그래밍에는 Devicons를 사용합니다.
내가 배운 것
maxPages
의 구현에 대해 배웠습니다. 무엇 향후 계획
필요한 경우 장치 아이콘에 더 많은 언어를 추가하십시오.
이것이 유용하다고 생각되면 ⭐ 버튼을 누르십시오.
2KAbhishek / 프로젝트
모든 프로젝트를 보여주세요 🛍️🎇
프로젝트
모든 프로젝트를 보여주세요 🛍️🎇
프로젝트 스크린샷
프로젝트 소개
매우 사용자 정의 가능한 웹 앱으로 모든 프로젝트를 멋지게 표현하세요! ✨
Projects
는 GitHub API를 사용하여 모든 GitHub 프로젝트를 검색 가능한 그리드에 나열합니다.
또한 devicons
를 사용하여 예쁜 프로그래밍 아이콘을 표시합니다.
영감
내 모든 프로젝트를 표시하는 방법이 필요했고 내 portfolio's project section를 영감으로 사용했습니다.
프로젝트 받기
프로젝트를 가져오려면 다음 단계를 따르세요.
git clone https://github.com/2kabhishek/projects
cd projects
나만의 프로젝트 설정
자신의 리포지토리를 표시하도록 프로젝트를 쉽게 설정할 수 있습니다.
script.js
를 열고 username
변수를 GitHub 사용자 이름으로 업데이트합니다. index.html
를 열고 title
태그를 업데이트하여 사용자 이름으로 만듭니다. link
에서 index.html
태그를 업데이트하세요.…
View on GitHub
Reference
이 문제에 관하여(모든 GitHub 프로젝트를 보여줄 웹 앱을 만들었습니다 😍✨), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/2kabhishek/i-made-a-web-app-to-showcase-all-your-github-projects-le3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)