일부 에셋이 여전히 누락되어 있음을 보여주는 Chrome 개발자 도구. 다음 단계로 넘어가기 전에 이러한 종류의 오류를 모두 수정하세요.
맞춤 HTML 스킨 - 기존 사이트 디자인을 HTML 스킨으로 변환하기
이 문서는 자동으로 번역되었으며 부정확한 내용이 포함될 수 있습니다.
영어 원본 보기
이벤트를 진행 중이며 DPG 사이트의 스타일을 기존 사이트 디자인과 정확히 일치시키고 싶다면, 메인 사이트의 HTML을 복제하여 DPG에서 사용할 수 있는 스킨으로 만들 수 있습니다.
사용자 지정 스킨을 만드는 것은 전적으로 선택 사항입니다. 대부분의 사용자에게는 쉽게 사용자 지정할 수 있는 템플릿을 사용하는 것이 가장 좋습니다.
HTML 스킨은 전체 페이지 분량의 HTML 코드로 구성되며, 갤러리와 DPG에서 필요한 그 밖의 코드를 표시하려는 영역으로 가져오는 DPG insert가 추가됩니다.
많은 사람들이 메인 사이트의 코드를 바탕으로 DPG 사이트의 HTML 스킨을 직접 작성합니다. 하지만 이 튜토리얼에서는 기존 디자인을 DPG 스킨으로 변환하는 빠른 방법을 보여드리겠습니다.
이 가이드에서는 다음을 사용합니다:
팀에 개발자가 없지만 사용자 지정 HTML 스킨을 원하신다면, 추가 비용으로 이 서비스를 제공해 드릴 수 있습니다. 자세한 내용은 support@digitalphotogallery.com으로 문의하세요.
HTML을 로컬 디스크로 복제하기
Homebrew가 설치되어 있는지 확인한 다음, wget을 설치하는 명령을 실행하세요:
brew install wget
새 폴더를 만들고 cd로 해당 폴더로 이동한 다음, 통합하려는 웹사이트의 에셋을 복제하려면 다음 명령을 사용하세요:
wget -U firefox -p -k -H http://www.targetdomain.com/자체 서버 또는 CDN에 에셋 업로드하기
복제한 에셋을 온라인에서 접근할 수 있는 곳에 업로드하세요. 이 예시에서는 Transmit을 Amazon S3와 함께 사용합니다.
메인 사이트를 완전히 제어할 수 있고 에셋 위치를 예측할 수 있다면, 에셋을 복제하는 대신 해당 에셋에 링크할 수 있습니다.
모든 에셋 다시 링크하기
wget 명령을 실행하면 대상으로 지정한 페이지의 HTML이 다운로드됩니다. 로컬 디스크에서 해당 파일을 찾고, 코드에서 링크된 에셋을 모두 새 주소로 찾아 바꾸세요. 진행 상황을 확인하려면 브라우저에서 로컬 페이지를 주기적으로 테스트하세요.
에셋을 다시 링크하는 동안 사용하지 않는 추적 코드도 제거하는 것이 좋습니다.
더 이상 오류가 없으면 에셋이 제공되는 도메인을 확인하여 제어할 수 없는 주소에서 제공되는 에셋이 없는지 확인하세요.
이 단계의 예시 파일.
DPG 페이지 레이아웃 알아보기
현재 DPG insert 코드를 가져오는 방법과 HTML 코드를 DPG 갤러리에 적용하는 방법을 알아보려면 이 문서를 확인하세요.
다운로드한 HTML을 스킨으로 변환하기
이제 원본 페이지의 완벽한 사본이 있으므로, 이를 편집하여 DPG insert를 추가할 수 있습니다.
헤더에 대한 DPG insert를 추가하세요.
콘텐츠 HTML을 제거하고 DPG 콘텐츠 insert로 교체하세요.
페이지 끝에 insert를 추가하세요.
DPG에서 페이지 레이아웃을 만드세요.
단일 페이지에서 레이아웃을 테스트하세요. 올바르게 작동하는 것을 확인한 후 모든 페이지에 적용하세요.
이제 메인 웹사이트와 일치하는 완전히 작동하는 DPG 사이트가 완성되었습니다. 마지막으로, 메인 사이트에 새 사진 갤러리를 가리키는 링크를 추가하세요.
이 예시의 완성된 코드.