부끄러워하지 마세요. Picture Network
사용방법
? 방법 1
직접 접속: https://iuroc.github.io/haixiu/.
? 방법 2
이 프로젝트를 포크한 다음 Github 페이지를 사용하여 /docs 디렉터리를 배포하세요.
프로젝트 기능
- 순수한 정적 웹사이트는 Github 페이지를 사용하여 직접 배포 가능
- 데이터 페이징 및 태그별 표시를 지원하고, 하단으로 스크롤하여 다음 페이지 내용을 자동으로 추가하도록 지원합니다.
- PhotoSwipe 기반의 고품질 사진 뷰어 구현
- 사진 뷰어가 사진을 전환하면 썸네일 목록이 스크롤되어 보이는 곳 어디든 따라갑니다.
- 사진 뷰어가 마지막 사진에 도달하면 검색을 중단하지 않고 데이터의 다음 페이지가 자동으로 추가됩니다.
- 위치 해시를 기반으로 구현에서는 사진 뷰어를 닫는 History.back()을 지원하고 모바일 뒤로 키와 호환됩니다.
- 사진 뷰어를 열고 자동으로 마지막 위치를 복원하기 위한 History.forward()를 지원하기 위해 위치 해시를 기반으로 구현되었습니다.
- 해시를 통해 이미지 뷰어를 닫을 때 애니메이션 중단을 지원하는데 이는 훌륭한 경험입니다.
- 스크롤 막대의 위치를 자동으로 기록하고 HashChange 이벤트가 스크롤 막대에 미치는 영향을 제거합니다.
관련 기술
- Node.js Fetch API 크롤러 사용
- 데이터를 크롤링한 후 페이지는 여러 JSON 파일에 저장되며, 파일 이름에 페이지 번호와 태그 정보가 표시됩니다.
- 프런트 엔드는 Van.js 프레임워크를 사용하여 반응형 UI를 구축합니다.
- 프런트 엔드는 Fetch를 통해 정적 JSON 파일을 직접 요청하여 페이징 요청을 구현합니다.
- PhotoSwipe 라이브러리를 사용하여 이미지 뷰어 구현
리소스 업데이트
이 문서를 확인하십시오: 이미지 수집 프로그램 README
