oldskool html bootstrap
Initial Release
OldSkool은 카테고리 페이지에 사용자 정의 가능한 카드 목록과 개별 제품 페이지의 우수한 제품 디스플레이가있는 현대적이고 유연한 반응 형 HTML Bootstrap 5 템플릿입니다. 모든 패션 소매 웹 사이트의 완벽한 출발점이며 템플릿의 깨끗하고 최소한의 디자인은 사용자 정의 전자 상거래 애플리케이션과 통합하기 쉽고 통합 할 수 있습니다. 그리고 무엇보다도, 그것은 무료입니다!
데모보기 | zip 다운로드
템플릿 소스 코드로 작업하지 않으려는 경우 (이는 컴파일을 컴파일하거나 Webpack Dev 서버를 실행하지 않음을 의미하는 경우) 아무것도 설치할 필요가 없습니다. 단순히 Dist 폴더로 이동하여 파일 편집을 시작할 수 있습니다.
대부분의 개발자는 소스 코드를 편집 할 것이며 템플릿 파일을 다시 컴파일하기 위해 웹 팩을 실행할 것입니다. 이 경우 Node.js가 설치되어 있는지 확인하십시오. 여기에서 다운로드 할 수 있습니다
git clone https://github.com/PixelRocket-Shop/oldskool-html-bootstrap.gitnpm install 실행하십시오.npm start Webpack Devserver를 시작하십시오.npm run build 실행하십시오. 템플릿은 10 페이지로 구성됩니다.
코드 반복을 최소로 유지하기 위해 handlebars.js를 템플릿 엔진으로 사용하고 부분적으로 다른 페이지에 동일한 코드를 빠르게 추가했습니다. 또한 JSON 데이터 용 핸들 바 플러그인을 사용합니다.이를 통해 동일한 HTML을 반복하는 대신 루프를 사용하고 단일 HTML 코드 블록을 출력 할 수 있습니다.
데모 URL
이것은 HTML 템플릿 전용입니다. 데이터베이스에 연결되지 않으며 컨텐츠 관리 시스템 (WordPress 등)에서 자동으로 작동하지 않습니다. 우리의 코드를 응용 프로그램에 통합해야합니다.
? DIST- 생성 된 템플릿의 버전. 템플릿 소스 코드로 작업하지 않으려면 여기로 이동하십시오. 그러나 경고해야합니다.이 폴더에서 직접 사용자 정의 한 다음 나중에 템플릿에서 Dist 폴더를 이동하지 않는 한 Webpack을 사용하여 템플릿을 다시 컴파일하면 변경 사항이 재정의됩니다.
? node_modules- NPM이 종속성을 설치하는 디렉토리. 템플릿 설치를 완료 할 때 까지이 폴더가 표시되지 않습니다. 이 폴더를 만들 필요는 없습니다.
? SRC- 템플릿 소스 코드. 템플릿을 사용자 정의하려면 여기로 이동하십시오.
? SRC/자산 - CSS, JS, 이미지 등과 같은 템플릿 자산
? src/data- 템플릿 JSON 데이터 파일. 우리는이 JSON 파일을 사용하여 작업을보다 쉽게 템플릿에 삽입 할 수 있도록합니다.
? SRC/HTML- 템플릿 페이지. 기존 페이지를 편집하거나 새 페이지를 추가하십시오.
? SRC/부분 - 핸들 바 부분 템플릿.
핸들 바는 템플릿 소스 코드를 가능한 한 정리하고 깨끗하게 유지할 수있는 템플릿 엔진입니다. 코드 복제를 줄이고 도우미 기능을 사용하여 템플릿 개발자가 최소한의 코드로 많은 양의 데이터를 매우 빠르게 출력 할 수 있습니다. 당신은 그것에 대해 더 읽을 수 있습니다.
우리는 두 가지 주요 이유로 핸들 바를 사용합니다. 첫째, 핸들 바 부분을 사용하면 여러 HTML 파일에서 동일한 파일을 참조 할 수 있으며 단일 소스에서 코드를 편집하면됩니다. React 또는 VUE로 작업하는 데 익숙한 경우 구성 요소를 참조하는 것과 동일합니다. 둘째, 더미 카탈로그 데이터에 JSON 데이터를 사용하면 템플릿 코드가 깨끗하게 유지됩니다. 기본 핸들 바 루프를 출력하여 목록 페이지에서 10 개의 더미 제품을 쉽게 출력 할 수 있습니다.
당사의 템플릿에서 다음 파일을여십시오 : src/html/index.html.
21 행 주위에 다음 코드가 표시됩니다.
{{> swiper/swiper-homepage-hero }}
그것은 부분적인 핸들 바입니다. 이 코드는 핸들 바에 Swiper (부분 폴더에 위치)라는 폴더 내부를보고 Swiper-HomePage-Hero라는 파일을 찾아 컴파일 될 때 index.html 파일에 삽입하도록 지시합니다.
핸들 바 부분의 사용에 대한 몇 가지 중요한 메모가 있습니다.
핸들 바를 사용하여 코드베이스를 깨끗하게 유지하는 방법을 살펴 보겠습니다. 카테고리 페이지를여십시오 : SRC/HTML/CATEDORY.HTML.
40 행 주위 에이 코드를 찾을 수 있습니다.
{{#if (config category-products)}}
{{#each category-products.entries}}
<div class="col-12 col-sm-6 col-lg-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
그리고 그것은 카테고리 페이지의 루프입니다. 우리는 JSON 데이터를 핸들 바 루프로 전달한 다음 루프 내부에서 핸들 바를 부분적으로 참조하고 각 루프 항목에 대한 데이터를 전달합니다.
{{> listing-cards/listing-card-one this }}
우리가 사용하는 Webpack Handlebar 플러그인에는 JSON 파일을 템플릿 데이터로 전달할 수있는 매우 편리한 유틸리티가 제공됩니다.
SRC/DATA로 이동하십시오. 다음은 템플릿 데이터 JSON 파일이 상주하는 곳입니다. 이 폴더에 자신의 직접 편집, 제거 또는 추가 할 수 있습니다.
다시 말하지만, 카테고리 페이지 루프를 참조하면 :
{{#if (config category-products)}}
{{#each category-products.entries}}
<div class="col-12 col-sm-6 col-lg-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
템플릿 데이터와 관련하여 여기서 중요한 부분은 카테고리 프로듀스입니다. 이것이 의미하는 바는 데이터 폴더 내부에서 "카테고리 제품"이라는 JSON 파일을 찾을 수 있다는 것입니다. 이 category-products.json 파일에는 "entries"라는 "키"가 있습니다.
모든 템플릿의 소스 CSS/SASS 파일은 템플릿의 자산 폴더 내부에 보관됩니다. SRC/ASSETS/SCSS로 이동하십시오. 편집자와 함께 Theme.scs를 열십시오.
이것은 다른 모든 SASS/CSS 파일의 주요 진입 점입니다.
새 페이지를 만들려면 코드 편집기에서 SRC/HTML로 이동하십시오. 올바른 HTML을 쉽게 얻을 수 있도록 기존 페이지를 복제하십시오. 새로 만들어진 파일의 이름을 필요로하는 URL로 이름을 바꿉니다. 그리고 그게 다야. 이제 코드 편집기로 새 페이지를 열고 변경 한 다음 파일을 저장할 수 있습니다. Webpack Devserver를 종료하고 페이지가 표시되도록 다시 시작하십시오.
Bootstrap에는 이미 모든 기본 부트 스트랩 기능을 설정하고 사용하는 데 도움이되는 포괄적 인 문서 사이트가 있습니다. Bootstrap 5는 템플릿의 소스 코드에 완전히 통합되었습니다. 기본 부트 스트랩 기능에 대해서는 먼저 Bootstrap의 DOC 사이트를 참조하십시오 : Bootstrap의 DOC 사이트 방문
부트 스트랩
aos.js
Unsplash
Pexels
Pixabay
mediumzoom.js
nouislider.js
Simplebar.js
Swiper.js
여기에서 당사 웹 사이트를 찾을 수 있거나 [email protected]로 이메일을 보내주십시오.
