elytre
1.0.0
Elytre는 카탈로그 파일의 검색 엔진을 사용하여 서버리스 온라인 서점을 구축하는 도구입니다.
Elytre는 아직 초기 개발 단계이므로 해당 단계에서 프로덕션에 사용하는 것은 현명하지 않습니다. 1.0이 출시될 때까지(2021년에) 주요 변경 사항, 이상한 버그, 손상된 테스트 및 문서 누락이 발생할 것으로 예상됩니다.
요구사항:
노드 v14.15+
방사
프로젝트를 위한 빈 디렉터리를 만듭니다.
원사 초기화: yarn init
Elytre 추가: yarn add --exact elytre
package.json에 start 및 build 스크립트를 모두 추가합니다.
{ "스크립트": {"시작": "elytre 시작","build": "elytre 빌드"
}
}elytre 사이트를 성공적으로 구축하려면 프로젝트 디렉터리에 최소한 세 개의 파일이 필요합니다.
사이트 정보 및 구성을 지정하는 site.yaml 파일(아래 사이트 구성 파일 사양 참조)
책 카탈로그를 설명하는 catalog.yaml 파일(아래 카탈로그 파일 사양 참조)
사이트 모양을 사용자 정의하기 위한 styles.css 스타일시트(아래 스타일시트 파일 사양 참조)
선택적으로 프로젝트 디렉터리에 다음을 추가할 수 있습니다.
빌드 디렉터리에 복사되고 styles.css 또는 site.yaml 파일에서 참조할 수 있는 자산이 포함된 public 디렉터리
표지 이미지가 포함된 covers 디렉토리. 이미지 파일 이름은 {ean}.jpg (예: 9781234567890.jpg ) 패턴과 일치해야 하며, 이미지 파일 이름의 ean은 카탈로그에 설명된 제품의 ean과 일치해야 합니다.
MDX 형식을 사용하는 사용자 정의 페이지가 포함된 pages 디렉토리입니다. 페이지 파일 이름은 {slug}.mdx 패턴과 일치해야 합니다. 여기서 slug 사용자 정의 페이지 URL에 사용됩니다. about.mdx 파일은 /pages/about 에서 사용할 수 있습니다. MDX는 JSX를 지원하고 React 구성 요소를 가져올 수 있는 마크다운 형식의 확장입니다.
프로젝트 디렉터리에 site.yaml 파일을 추가하여 사이트 구성을 맞춤설정하세요.
# 사이트 헤더와 브라우저 탭 제목에 표시되는 사이트 제목: Les Éditions Paronymie# 후행 슬래시가 없는 사이트의 기본 URL: https://paronymie.elytre.app# 사이트 메뉴 메뉴: # 메뉴 슬롯은 header, nav일 수 있습니다. 또는 바닥글 머리글: 바닥글: … nav:# 메뉴에는 라벨(텍스트) 및 링크(url)가 있는 항목 목록이 포함되어 있습니다. 라벨: 정보 링크: /pages/about- 라벨: 연락처 링크: /contact/
프로젝트 디렉터리에 catalog.yaml 파일을 추가하여 제품 카탈로그를 맞춤설정하세요.
global: # 전역 속성이 모든 제품에 적용됩니다.
buyLink: https://www.librairiepartenaire.com/buy/:eanproducts: # 제품
- ean: 9781234567890제목: Chaussons d'ours저자: Laetitia Manicontributors:
- 이름: Claude Monetrole: 표지 작가 # 또는 "저자" 또는 "번역가" 또는 "사진가" releaseDate: 2021-01-04pageCount: 641originalLanguage: en # 또는 "fr" 또는 "de"backCoverText: | # 마크다운 형식 *« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »* tortor nec cursus의 Vivamus pharetra. Proin Accumsan Sagittis Molestie. Suspendisse euismod dolor quis elit egestas vulputate. Maecenas et nisl nec dui ullamcorper aliquam nec at erat. Nunc Elit의 Praesent입니다. Nam metus ante, ultrices sit amet lacinia non, feugiat vitae ligula. Mauris sollicitudin rutrum justo egestas dignissim. Class aptent taciti socialsqu ad litora tornt per conubia nostra, per inceptos Himenaeos. Morbi euismod justo nec ipsum dapibus varius. Praesent ac auctor velit. Phasellus metus eros, dignissim eu ex consectetur, aliquam rutrum Massa. Ut pharetra Tellus tortor, eu dictum felis euismod ac. Nullam ut accumsan risus, sit amet consectetur leo. Nunc tristique posuere eros, sit amet condimentum neque consequat eu. Proin sollicitudin, lacus eleifend ullamcorper laoreet, turpis ante aliquet arcu, sit amet consectetur libero libero in dolor. Quisque Sodales ipsum eget lectus cursus pharetra. 남 eu eleifend ipsum. 추가 사항:
- 유형: youtube # 제품 페이지href에 YouTube 동영상 삽입 추가: https://www.youtube.com/watch?v=dQw4w9WgXcQreviews:
- 텍스트: Un très grandtalent de la littérature poire.author: Mélodiesource: Librairie L'Arbre à Nèfles – ParissourceUrl: https://www.arbreanefles.com
# 또 다른 제품
- ean: 9781234567811제목: Sous-sol작성자: Matt Yassenar 프로젝트 디렉토리에 styles.css 파일을 추가하여 사이트의 모양을 사용자 정의하세요.
.ElytreSite { /* 이것은 모든 사이트에 대한 전역 래퍼입니다. 여기에서 페이지 너비, 여백 등을 설정할 수 있습니다. */}
.Header { /* 사이트 헤더 표시 방법 */}
.Header .Menu { /* 헤더 메뉴 표시 방법 */}
.Header .Menu .MenuEntry { /* 헤더 메뉴에 단일 항목이 표시되는 방식 */}
.Product { /* 제품 표시 방법 */}
.Product .Product-cover-image { /* 제품 표지 이미지가 표시되는 방식 */}
.Product .Product-infos { /* 제품 정보(제목, 저자, 평균) 표시 방법 */}
.Product .Product-title { /* 제품 이름이 표시되는 방식 */}
.ProductList { /* 제품 목록 표시 방법 */}
.ProductList .Product { /* 제품 목록에 있을 때 제품이 표시되는 방식 */}
.HomeView .ProductList .Product { /* 홈 페이지 목록에 제품이 표시되는 방식 */}
.ProductView .Product { /* 단일 상품 페이지에 상품이 표시되는 방식 */}
.Error404View .Error404View-title { /* 404 오류 페이지에 제목이 표시되는 방식 */}
.Error404View .Error404View-reason { /* 404 오류 페이지에 제공된 경우 이유가 표시되는 방식 */}
.Footer { /* 사이트 바닥글 표시 방법 */}
.Footer-powered-by { /* 바닥글의 "Powered by Elytre" 텍스트를 숨기거나(하지 마세요!) 여기에서 더 눈에 띄지 않게 만들 수 있습니다 */}$ 원사 빌드
그러면 배포 준비가 완료된 build 디렉터리에 프로덕션용 웹 사이트가 구축됩니다. 웹 서버나 정적 웹 사이트 호스트를 사용하여 이 디렉터리를 제공할 수 있습니다.
$ 원사 시작
그러면 개발을 위해 로컬 웹 서버가 회전됩니다. http://localhost:1854/를 열어 브라우저에서 확인하세요. 프로젝트 디렉터리의 파일을 편집하면 페이지가 자동으로 다시 로드됩니다.
다음을 사용하여 이 저장소 내부의 린트 코드:
$ 원사 린트
다음을 사용하여 이 저장소 내에서 테스트를 실행하세요.
$ 원사 테스트
Elytre는 두 가지 주요 부분으로 구성됩니다.
template/src : 최종 elytre 사이트를 구축하기 위해 사용자의 사용자 정의 파일과 병합되는 템플릿 React 사이트
build/src : React 템플릿과 사용자 정의 파일을 사용하여 최종 elytre 사이트를 구축하는 노드 도구
둘 다 Typescript로 작성되었으며 사용하려면 먼저 트랜스파일해야 합니다.
$ 원사 빌드
패키지가 npm에 게시되기 전에 파일이 린트, 테스트 및 트랜스파일됩니다.
개발 중에 템플릿 파일이 변경되는 것을 확인하고 트랜스파일할 수 있습니다.
$ 원사 개발
