alpine html bootstrap
Initial Release
Fashion Focused Online Store의 경우 Alpine은 홈페이지 슬라이드 쇼, 앵글 링 배너 및 팝 아웃 제품 카드가있는 사용자 정의 이미지 핫스팟 배너에 "Ken Burns"효과가있는 반응 형 부트 스트랩 5 전자 상거래 템플릿입니다. 카테고리 페이지의 대형 제품 이미지를 사용하면 웹 사이트 전체에서 쉽게 내비게이션을 제공하는 동시에 제품을 선보일 수있는 충분한 공간을 제공합니다. 모든 패션 소매 웹 사이트의 완벽한 출발점이며 템플릿의 깨끗하고 최소한의 디자인은 사용자 정의 전자 상거래 애플리케이션과 통합하기 쉽고 통합 할 수 있습니다. 그리고 무엇보다도 무료입니다.
데모보기 | zip 다운로드
템플릿 소스 코드로 작업하지 않으려는 경우 (이는 컴파일을 컴파일하거나 Webpack Dev 서버를 실행하지 않음을 의미하는 경우) 아무것도 설치할 필요가 없습니다. 단순히 Dist 폴더로 이동하여 파일 편집을 시작할 수 있습니다.
대부분의 개발자는 소스 코드를 편집 할 것이며 템플릿 파일을 다시 컴파일하기 위해 웹 팩을 실행할 것입니다. 이 경우 Node.js가 설치되어 있는지 확인하십시오. 여기에서 다운로드 할 수 있습니다
git clone https://github.com/PixelRocket-Shop/alpine-html-bootstrap.gitnpm install 실행하십시오.npm start Webpack Devserver를 시작하십시오.npm run build 실행하십시오. 템플릿은 5 페이지로 구성됩니다.
코드 반복을 최소로 유지하기 위해 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.
46 행 주위에 다음 코드가 표시됩니다.
{{> swiper/swiper-hero-slideshow }}
그것은 부분적인 핸들 바입니다. 이 코드는 핸들 바에 Swiper (부분 폴더에 위치)라는 폴더 내부를보고 Swiper-Hero-Slidshow라는 파일을 찾아 컴파일 된 경우 index.html 파일에 삽입하도록 지시합니다.
핸들 바 부분의 사용에 대한 몇 가지 중요한 메모가 있습니다.
핸들 바를 사용하여 코드베이스를 깨끗하게 유지하는 방법을 살펴 보겠습니다. 카테고리 페이지를여십시오 : SRC/HTML/CATEDORY.HTML.
56 행 주위에는이 코드가 있습니다.
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
그리고 그것은 카테고리 페이지의 루프입니다. 우리는 JSON 데이터를 핸들 바 루프로 전달한 다음 루프 내부에서 핸들 바를 부분적으로 참조하고 각 루프 항목에 대한 데이터를 전달합니다.
{{> listing-cards/listing-card this }}
우리가 사용하는 Webpack Handlebar 플러그인에는 JSON 파일을 템플릿 데이터로 전달할 수있는 매우 편리한 유틸리티가 제공됩니다.
SRC/DATA로 이동하십시오. 다음은 템플릿 데이터 JSON 파일이 상주하는 곳입니다. 이 폴더에 자신의 직접 편집, 제거 또는 추가 할 수 있습니다.
다시 말하지만, 카테고리 페이지 루프를 참조하면 :
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-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]로 이메일을 보내주십시오.
