keystone ssg
1.0.0
Keystone은 요즘 구식으로 보입니다. 대신 Astro나 Vite를 살펴보는 것이 좋습니다.
Keystone은 소규모 웹사이트를 빠르게 구축하는 데 이상적인 정적 사이트 생성기입니다. 설정이 필요하지 않으며 편리한 기능 모음이 기본적으로 활성화되어 있습니다.
/public 만 업로드하면 바로 사용할 수 있습니다.새 디렉터리를 만들고 다음 명령을 실행하여 Keystone, package.json 및 git을 설정합니다. 노드 14.xx가 필요합니다.
$ npm install keystone-ssg
좋습니다. 설치되었습니다!
Keystone 개발 서버를 시작한 다음 http://localhost:8080으로 이동하여 예제 웹사이트를 확인하세요.
$ npm run dev
명령을 실행한 후 프로젝트가 /public 폴더 내에 빌드되어 업로드할 준비가 됩니다.
$ npm run build
Keystone 프로젝트에는 각각 고유한 목적을 가진 6개의 중요한 디렉터리가 있습니다.
페이지 폴더의 모든 HTML .html 및 markdown .md 파일은 웹 사이트의 페이지에 해당합니다. 여기 예제 프로젝트에는 두 개의 파일이 있습니다. index.html 열어보세요. 자동 라우팅은 다음과 같이 npm run build 실행할 때 파일을 /public 폴더에 묶습니다.
/pages/index.html -> /public/index.html
/pages/example.md -> /public/example/index.html
index.html 에는 <_template basic.html /> 태그가 있음을 알 수 있습니다. 그러면 index.html 의 내용이 /templates/basic.html 의 슬롯 템플릿 파일 안에 배치됩니다. 이 사용자 정의 HTML 태그 형식은 .md 파일 내에서도 작동합니다.
템플릿을 /pages 와 함께 사용하여 페이지에 미리 만들어진 프레임워크를 제공할 수 있습니다. 콘텐츠에 대한 진입점을 제공하려면 템플릿 파일 내에서 <_slot /> 태그를 사용하세요. /templates/basic.html 열고 다음을 찾으세요.
< _var title default="Keystone default title" /> 이는 선택적 기본값이 있는 템플릿 파일의 title 이라는 변수 슬롯입니다.
/pages 내에서 다음을 템플릿 태그로 사용하면 콘텐츠 페이지에서 템플릿에 사용자 정의 값을 입력할 수 있습니다.
< _template basic.html title="A custom title" /> /components 폴더는 단순히 재사용 가능한 구성 요소에 사용됩니다. <_import> 태그는 구성요소를 다른 HTML 파일로 가져오는 데 사용됩니다. 그 예는 /templates/basic.html 안에 있습니다.
< _import header.html /> <_import> 태그는 소스를 먼저 번들링한 후 다른 종류의 파일(JS, SCSS 등)의 내용을 가져오는 데에도 사용할 수 있습니다.
Javascript 파일을 /src 폴더에 넣습니다. 다음 태그는 일반 <script> 가져오기 태그로 변환되어 /src/main.js 파일에 연결됩니다.
< _script main.js />ES6 가져오기는 완벽하게 지원되며 결과 파일은 Babel로 트랜스파일되고 Rollup과 함께 번들로 제공되며 축소됩니다.
/styles 폴더는 CSS/SCSS에 사용됩니다. 다음 태그는 일반 <link> CSS 가져오기 태그로 변환되어 컴파일된 /styles/main.scss 파일에 연결됩니다.
< _style main.scss /> @import 포함하여 모든 node-sass 기능이 완벽하게 지원됩니다.
글꼴, 이미지, 아이콘 등의 정적 자산이 여기에 배치됩니다. 여기에 있는 모든 내용은 루트 디렉터리의 해당 폴더로 전송됩니다. 예를 들면 다음과 같습니다.
/assets/favicon.ico -> /public/favicon.ico
/assets/fonts/fontname.ttf -> /public/fonts/fontname.ttf
<_template src='myfolder/myfile.html' /> .package.json 포함하는 폴더를 기준으로 합니다. 프로젝트 외부의 파일에 액세스하려는 경우가 아니면 초기 슬래시를 사용하지 마세요..keystone-page-loading 클래스가 display: block 으로 설정됩니다. CSS에서 클래스가 display: none 으로 설정된 경우 로딩 표시기를 만드는 데 사용할 수 있습니다.search.json 파일을 생성합니다. 이는 각 페이지에 대한 개체를 포함하고 페이지의 텍스트 콘텐츠, 제목 및 경로를 나열하는 JSON 배열입니다.public 폴더는 Git에서 무시됩니다. Git에 커밋하는 데 사용하려면 .gitignore 에서 public 줄을 제거하세요. package.json 의 버전 번호를 업데이트하려는 버전으로 바꾸고 npm install keystone-ssg 실행하세요.| 꼬리표 | 설명 | 속성 |
|---|---|---|
<_template> | 현재 파일을 템플릿 파일 내의 <_slot> 으로 가져옵니다. | [파일명], [변수명], src |
<_slot> | 가져온 파일의 진입점으로 템플릿 파일 내에서 사용됩니다. | 없음 |
<_var> | <_template> 에서 가져온 변수로 대체될 템플릿 파일 내에서 사용됩니다. | [변수 이름], 기본값 |
<_import> | 구성요소를 가져옵니다. | [파일 이름], src |
<_script> | 번들 스크립트에 연결되는 <script> 태그를 생성합니다. | [파일 이름], src |
<_style> | 번들 CSS 파일에 연결되는 <link> 태그를 생성합니다. | [파일 이름], src |
| 명령 | 설명 | 출력 차이 |
|---|---|---|
npm run dev | 개발용 웹사이트를 구축한 후 Keystone 개발 서버를 시작합니다. |
|
npm run build | 제작을 위한 웹사이트를 구축합니다. |
|
구성 파일은 keystone.config.js 입니다.
| 옵션 | 설명 | 기본 |
|---|---|---|
| 동적링크 | Keystone 웹사이트에서 동적으로 로드된 로컬 링크를 활성화하며 새로 고칠 필요가 없습니다. | 진실 |
| 검색파일 | 루트 디렉터리에 search.json 생성합니다. | 진실 |
| indexPath | 웹사이트의 루트 디렉토리 | '/' |
| 포트 | 개발 서버 포트, localhost: 8080 | 8080 |
| 포트 | 개발 서버에 사용되는 두 번째 포트 | 8081 |
| devServerIp | 개발 서버의 위치는 localhost :8080입니다. 로컬 장치의 개발 서버를 보려면 장치의 로컬 IP로 바꾸세요(예: '192.168.1.103'). | '로컬호스트' |
| 시청했다 | 파일이 편집될 때 재컴파일 및 페이지 새로 고침을 강제하는 Keystone 개발 서버에서 감시하는 디렉터리 | ['템플릿', '페이지', '자산', '구성요소', 'src', '스타일'] |
| 짓다 | 콘텐츠 페이지 디렉토리 | '페이지' |
| 봉사 | 생성된 웹사이트가 포함된 디렉터리 | '공공의' |
| 전체재컴파일 | 개발 모드에서 파일이 변경될 때마다 모든 파일을 강제로 전체 재컴파일합니다. | 거짓 |
| empty-keystone-project
--| .git/
--| assets/
--| components/
--| pages/
--| src/
--| styles/
--| templates/
--| keystone.config.js
--| package.json
--| package-lock.json
예제를 설치하고 실행한 후 PLUGIN_ERROR가 발생하는 경우 이는 Babel 문제이므로 다음 명령을 실행하여 문제를 해결하세요.
npm install @babel/core @babel/preset-env --save-dev
