apollo html bootstrap

Apollo - Bootstrap 5 HTML 반응형 관리 템플릿

개요

Apollo는 깔끔하고 최소한의 반응성을 보이는 Bootstrap 5 관리 템플릿입니다.

데모 보기 | 우편번호 다운로드

목차

• 요구사항
• 빠른 시작
• 템플릿 페이지
• 데모 링크
• 템플릿 주요 기능
• 템플릿 파일 구조
• 핸들바
• 템플릿 JSON 데이터
• 템플릿 스타일 사용자 정의
• 새 페이지 만들기
• 부트스트랩 문서
• 크레딧
• 문의하기

요구사항

템플릿 소스 코드로 작업할 의도가 없다면(즉, 템플릿 소스 코드를 컴파일하거나 Webpack 개발 서버를 실행하지 않을 것임을 의미함) 아무것도 설치할 필요가 없습니다. 간단히 dist 폴더로 이동하여 파일 편집을 시작할 수 있습니다.

대부분의 개발자는 소스 코드를 편집하고 Webpack을 실행하여 템플릿 파일을 다시 컴파일할 것입니다. 그렇다면 Node.js가 설치되어 있는지 확인하세요. 여기에서 다운로드할 수 있습니다.

빠른 시작

• 최신 릴리스를 다운로드하거나 저장소를 복제하십시오: git clone https://github.com/PixelRocket-Shop/apollo-html-bootstrap.git
• 시스템에 Node.js가 아직 없으면 설치하세요.
• 명령줄에서 프로젝트 루트를 엽니다.
• 명령줄에서 npm install 실행하세요.
• npm start 실행하여 Webpack 개발 서버를 시작하세요.
• dist 폴더로 출력되는 템플릿 파일을 다시 컴파일하려면 npm run build 실행하세요.

템플릿 페이지

템플릿은 다음 페이지로 구성됩니다.

• 계기반
• 사용자 관리 페이지
• 차트 예시 페이지
• 로그인 페이지
• 등록 페이지
• 비밀번호 분실 페이지
• 404 페이지
• 빈 페이지

다음 위젯도 포함됩니다:

• 사용자 설정 드롭다운
• 사용자 활동 드롭다운
• 사용자 메시지 드롭다운
• 사용자 알림 드롭다운
• 다양한 Chart.js 위젯
• 국가별 방문자
• OS 시스템 별 방문자

코드 반복을 최소화하기 위해 Handlebars.js를 템플릿 엔진으로 사용하고 부분적으로 동일한 코드를 다른 페이지에 빠르게 추가했습니다. 또한 JSON 데이터에 핸들바 플러그인을 사용합니다. 이를 통해 동일한 HTML을 반복하는 대신 루프를 사용하고 단일 HTML 코드 블록을 출력할 수 있습니다.

데모 링크

데모 URL

이는 HTML 템플릿에만 해당됩니다. 데이터베이스에 연결되지 않으며 콘텐츠 관리 시스템(Wordpress 등)에서 자동으로 작동하지 않습니다. 귀하의 애플리케이션에 우리 코드를 통합해야 합니다.

템플릿 주요 기능

• 3가지 다른 차트 유형과 Chart.js 통합
• Bootstrap 5로 구축
• 완벽하게 반응
• 최신 주문 구성요소
• 축소 가능한 사이드바(브라우저 크기 조정 시 자동으로 축소됨)
• 알림 구성요소
• 아바타 구성요소
• 로그인/등록 구성 요소

템플릿 파일 구조

? dist - 템플릿의 생성된 버전입니다. 템플릿 소스 코드로 작업하지 않으려면 여기로 이동하세요. 하지만 주의하세요. 이 폴더의 항목을 직접 사용자 정의한 다음 나중에 webpack을 사용하여 템플릿을 다시 컴파일하면 dist 폴더를 템플릿 밖으로 이동하지 않는 한 변경 사항이 재정의됩니다.

? node_modules - NPM이 종속성을 설치하는 디렉터리입니다. 템플릿 설치를 완료할 때까지 이 폴더는 표시되지 않습니다. 이 폴더를 만들 필요는 없습니다.

? src - 템플릿 소스 코드입니다. 템플릿을 맞춤설정하려면 여기로 이동하세요.

? src/assets - CSS, JS, 이미지 등과 같은 템플릿 자산입니다.

? src/data - 템플릿 JSON 데이터 파일입니다. 우리는 이러한 JSON 파일을 사용하여 귀하의 작업이 템플릿에 콘텐츠를 더 쉽게 삽입할 수 있도록 합니다.

? src/html - 템플릿 페이지. 기존 페이지를 편집하거나 새 페이지를 추가하려면 여기로 이동하세요.

? src/partials - 핸들바 부분 템플릿입니다.

핸들바

핸들바는 템플릿 소스 코드를 최대한 체계적이고 깔끔하게 유지할 수 있게 해주는 템플릿 엔진입니다. 코드 중복을 줄이고 도우미 기능을 사용하여 템플릿 개발자는 최소한의 코드로 많은 양의 데이터를 매우 빠르게 출력할 수 있습니다. 여기에서 자세한 내용을 읽을 수 있습니다.

핸들바 부분 예시

템플릿에서 다음 파일을 엽니다: src/html/index.html.

21번째 줄 부근에 다음 코드가 표시됩니다.

 {{> content/breadcrumbs }}

핸들바 부분입니다. 이 코드는 Handlebars에게 content라는 폴더(partials 폴더에 있음) 내부를 살펴본 다음 breadcrumbs라는 파일을 찾아서 컴파일될 때 index.html 파일에 삽입하도록 지시합니다.

핸들바 부분 사용에 대한 몇 가지 중요한 참고 사항이 있습니다.

• 모든 부분 부분은 src/partials 안에 저장됩니다. 다른 곳에 부분을 배치하지 마십시오.
• 우리는 부분 파일 확장자로 .html을 사용합니다. 또한 유효한 부분 파일 확장자로 .svg를 추가했습니다.
• 부분 폴더 내의 폴더 내에 폴더가 있는 경우 부분이 있는 폴더만 참조하십시오. 따라서 "partials/header/navbars/navbar.html"은 "navbars/navbar"로 참조됩니다.
• 부분 파일 확장자를 포함하지 마십시오. 위의 예에서는 "breadcrumbs.html"이 아닌 "breadcrumbs"가 출력된다는 점에 유의하세요.

템플릿 JSON 데이터

우리가 사용하는 Webpack Handlebars 플러그인에는 JSON 파일을 템플릿 데이터로 전달할 수 있는 매우 편리한 유틸리티가 함께 제공됩니다.

src/data로 이동하세요. 여기에 템플릿 데이터 JSON 파일이 있습니다. 이 폴더에 직접 편집, 제거 또는 추가할 수 있습니다.

템플릿 스타일 사용자 정의

템플릿의 모든 소스 CSS/SASS 파일은 템플릿의 자산 폴더 내에 보관됩니다. src/assets/scss로 이동합니다. 편집기로 theme.scss를 엽니다.

이는 다른 모든 SASS/CSS 파일의 기본 진입점입니다.

새 페이지 만들기

새 페이지를 만들려면 코드 편집기에서 src/html로 이동하세요. 올바른 HTML을 더 쉽게 가져오려면 기존 페이지를 복제하세요. 새로 생성된 파일의 이름을 필요한 URL로 바꿉니다. 그리고 그게 다입니다. 이제 코드 편집기를 사용하여 자유롭게 새 페이지를 열고 변경한 다음 파일을 저장할 수 있습니다. Webpack devserver를 종료하고 다시 시작하면 페이지가 표시됩니다.

부트스트랩 문서

Bootstrap에는 모든 기본 Bootstrap 기능을 설정하고 사용하는 방법을 안내하는 포괄적인 문서 사이트가 이미 있습니다. Bootstrap 5는 템플릿의 소스 코드에 완전히 통합되어 있습니다. 기본 Bootstrap 기능에 대해서는 먼저 Bootstrap의 문서 사이트를 참조하십시오. Bootstrap의 문서 사이트를 방문하십시오.

크레딧

부트스트랩

차트.js

언스플래쉬

펙셀

Pixabay

Simplebar.js

문의하기

여기에서 당사 웹사이트를 찾거나 [email protected]로 이메일을 보내실 수 있습니다.