오픈소스 개발을 계속하세요

안녕하세요 여러분, 이번 릴리스 0.3에서는 두 가지 주요 작업에 집중하고 있습니다. 제가 해결하기로 선택한 첫 번째 Pull Request는 Dazzle-and-Delight 프로젝트를 위한 반응형 네비게이션 바 구현과 관련이 있습니다.

프로젝트 개요

Dazzle-and-Delight 저장소는 웹 기반 이벤트 관리 플랫폼을 호스팅합니다. 이 플랫폼을 통해 사용자는 과거 및 향후 이벤트에 대한 정보를 찾아볼 수 있습니다. 웹사이트는 JavaScript, HTML 및 CSS를 사용하여 구축되었으며 탐색 모음이 다양한 화면 크기에 걸쳐 완벽하게 반응하도록 업데이트가 필요한 약 7개의 페이지를 포함하고 있습니다.

업무 내용

프로젝트 자체는 비교적 간단하지만 이 작업에 필요한 작업 범위는 더 컸습니다. 특히 더 작은 화면 크기(예: 휴대폰 및 태블릿)에 맞게 조정되는 반응형 탐색 모음을 구현해야 했습니다.

이 문제를 해결하기 위해 클릭하면 탐색 섹션의 세로 목록이 표시되는 햄버거 메뉴를 도입했습니다. 이 메뉴는 너비가 768px 이하인 화면 크기에서만 표시됩니다. 구현에는 총 14개의 파일을 업데이트하는 작업이 포함되었습니다.

더 나은 코드 구성과 손쉬운 디버깅을 위해 메뉴 버튼에 대한 이벤트 리스너를 처리하는 navbar_menu.js라는 새 파일을 만들었습니다.

document.getElementById('menu-bar').addEventListener('click', function () {
  console.log('click');
  document.getElementById('section-list').style.display =
    document.getElementById('section-list').style.display === 'none'
      ? 'block'
      : 'none';
});

document.getElementById('close-menu-btn').addEventListener('click', function () {
  document.getElementById('section-list').style.display = 'none';
});

나의 PR: 탐색바를 반응형으로 만들기

각 HTML 파일의 구현 단계:

>를 사용하여 섹션 요소를 추가하세요.

스크립트를 포함합니다. 각 HTML 파일의 맨 아래에 있습니다. 이 스크립트는 사용자 상호 작용 시 수직 탐색 메뉴의 표시/숨기기 기능을 관리합니다.

결론:

프로젝트 자체가 지나치게 복잡하지는 않지만 이번 변경으로 인해 영향을 받는 파일 수가 상당히 많았습니다. 이 과정의 이전 Pull Request와 비교할 때 이 작업에는 더 광범위한 파일 수정이 필요했습니다. 제가 수행한 작업 중 기술적으로 가장 어려운 작업은 아닐 수도 있지만, 업데이트된 양을 보면 제가 오픈 소스에 기여하는 데 있어 진전이 있었음을 알 수 있습니다.

위 내용은 오픈소스 개발을 계속하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!