skeleventy

열한 스타터 골격

Skeleventy는 빠르고 액세스 할 수있는 정적 웹 사이트를 구축 할 수있는 견고한 기초를 제공합니다. 데모 사이트를보십시오.

특징

• 자산 컴파일을위한 SCS 및 Laravel 믹스가있는 깨끗하고 최소한의 빌드 파이프 라인
• Gorko, 스마트 한 작은 sass 기반 유틸리티 클래스 생성기
• 사용되지 않은 CSS를 제거하는 Purgecs
• HTML 미니 파이어
• Babel 컴파일을 사용하여 ES2017 JavaScript를 지원합니다
• Open Graph 및 Twitter를 포함한 SEO 친화적 인 페이지 메타
• 이미지 게으른 하중
• 모바일 내비게이션
• XML 사이트 맵
• 카테고리 및 특집 이미지가있는 깨끗하고 간단한 블로그

시작하기

전제 조건

노드 v10+

설치

1. 레포 git clone https://github.com/josephdyer/skeleventy.git 복제하십시오
2. 프로젝트 폴더에 cd 하고 npm install 실행하십시오
3. npm run dev 팁 : Eleventy가 라이브 재 장전을 구축하여 로컬 개발 서버를 시작하십시오!

폴더 구조

고도

• site/ 에는 모든 글로벌 데이터, 템플릿 및 컨텐츠가 포함되어 있습니다
• utilities/ 에는 Eleventy Helper filters 및 transforms 포함되어 있습니다
• 각 페이지에는 index.md 파일이 포함 된 각 페이지가 있어야합니다.
• 그런 다음 각 페이지에 가장 적합한 레이아웃을 선택할 수 있습니다 (또는 필요한 경우 더 많이 만들 수 있음).
• 내비게이션은 공식 Eleventy Navigation 플러그인으로 구동됩니다.

자산

• css/ 컴파일 CSS 용
• js/ 편집 된 JavaScript 용
• images/ 사이트의 이미지, SVG 아이콘 스프라이트 및 메타 이미지 폴더 (OG, Twitter 등)가 포함되어 있습니다.

빌드 파이프 라인

Laravel Mix는 웹 팩 위에 멋진 API 레이어를 제공합니다. Skeleventy는 단순한 설정을 사용하지만 사용자 정의 웹 팩 구성, 코드 분할 및 PostCSS와 같은 플러그인으로 확장 할 수 있습니다.

resources/ 여기서 믹스가 이러한 디렉토리가 변경 사항에 대해이 디렉토리를 시청할 것입니다. 팁 : 새 부분이나 폴더를 생성 할 때 항상 서버를 다시 시작하는 것이 가장 좋습니다.

SCSS

• scss/ 의견이 많은 서브 폴더로 구성됩니다
• _config.scss 파일은 Gorko가 생성 한 사이트의 색상과 유틸리티 클래스를 변경할 수있는 곳입니다.
• 내가 개인적으로 가장 좋아하는 메이저 3 스케일을 사용하여 이미 타이포그래피 스케일이 설정되었습니다.
• 팁 : 더 많은 스케일을 보려면 유형 스케일을 확인하십시오

고르코

나는 단순성과 유지 보수 성 (특히 새로운 개발자에게)을 위해 Gorko에 유리하게 Tailwind를 제거하기로 결정했습니다. 시작하기가 너무 많고 필요한 것을 추가하지 않으면 더 간단하고 유지 관리 가능한 코드베이스가됩니다. Gorko를 사용하면 재사용 가능한 유틸리티 클래스의 뿌리를 추가하여 코드를 건조하게 유지할 수 있습니다. 이 편리한 작은 도구를 만드는 Andy Bell에게 신용

자바 스크립트

• utilities/ 에는 글로벌 유틸리티/ 도우미 기능이 포함되어 있습니다
• modules/ 사이트의 실제 JavaScript를 포함하여 각각의 모듈 식 하위 폴더 내에서 모두 깔끔하고 깔끔하게 유지
• import '@modules/example-module' 사용 하여이 서브 폴더를 main.js 로 가져올 수 있습니다.
• 팁 : webpack.mix.js 파일을 통해 선택적 가져 오기 별명을 설정할 수 있습니다.

반응 형 이미지에 대한 메모

Skeleventy에는 반응 형 이미지가 구워지지 않습니다. 주된 이유는 다음과 같습니다. CDN을 사용하는 것이 가장 좋습니다. Cloudinary를 사용하여 Eleventy 설정에 대한이 자습서를 확인하십시오.