elytre
1.0.0
Elytre は、カタログ ファイルから検索エンジンを備えたサーバーレス オンライン書店を構築するツールです。
Elytre はまだ開発の初期段階にあり、その段階で本番環境で使用するのは賢明ではありません。 1.0 がリリースされるまで (できれば 2021 年に)、重大な変更、奇妙なバグ、壊れたテスト、ドキュメントの欠落が予想されます。
要件：
ノードv14.15以降
糸
プロジェクト用に空のディレクトリを作成します
糸の初期化: yarn init
エリトレの追加: yarn add --exact elytre
startスクリプトとbuildスクリプトの両方を package.json に追加します。
{ "スクリプト": {"開始": "エリトレ開始","ビルド": "エリトレビルド"
}
}elytre サイトを正常に構築するには、プロジェクト ディレクトリに少なくとも 3 つのファイルが必要です。
サイトの情報と構成を指定する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 (末尾のスラッシュなし)baseUrl: https://paronymie.elytre.app# サイトのmenusmenus: # メニューのスロットはヘッダー、ナビゲーションにすることができますまたはフッター ヘッダー: フッター: … nav:# メニューには、ラベル (テキスト) とリンク (URL) を持つエントリのリストが含まれます- ラベル: 概要リンク: /pages/about- ラベル: 連絡先リンク: /contact/
製品カタログをカスタマイズするには、プロジェクトのディレクトリにcatalog.yamlファイルを追加します。
global: # グローバル プロパティはすべての製品に適用されます
buyLink: https://www.librairiepartenaire.com/buy/:eanproducts: # 製品
- ean: 9781234567890title: Chaussons d'ours著者: Laetitia Mani貢献者:
- 名前: クロード・モネロール: カバー アーティスト # または "著者" または "翻訳者" または "写真家" releaseDate: 2021-01-04pageCount: 641originalLanguage: en # または "fr" または "de"backCoverText: | # マークダウン形式 *« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »* トルトル・ネク・クルススのヴィバムス・ファレトラ。プロインアカムサンサジティス痴漢。サスペンスは、エリートの感情を揺さぶります。 Maecenas と nisl nec dui ullamcorper aliquam nec aterat。ヌンクエリートでのプレゼント。 Nam metus ante、ultrices sit amet lacinia non、feugeat vitae ligula。 Mauris sollicitudin rutrum justo egestas dignissim。クラスの適性は、conubia nostra、inceptos himenaeos ごとに、暗黙の社会的アドリトラトルクントです。モルビ euismod justo nec ipsum dapibus varius。 Praesent AC オークション ヴェリット。 Phasellus metus eros、dignissim eu ex consectetur、aliquam rutrum Massa。 Ut pharetra Tellus tortor、eu dictum felis euismod ac。 Nullam ut accumsan risus、座って、レオを見つめてください。 Nunc tristique posuere eros, sit amet condimentum neque consequat eu. プロイン ソリシトゥジン、ラクス エレフェンド ウラムコーパー ラオレート、ターピス アンテ アリケ アーク、座って、悲しみの中でコンセクテトゥール リベロ リベロを座ってください。 Quisque sodales ipsum eget lectus cursus pharetra。ナム・エウ・エイレイフェン・イプサム。 追加物:
- type: youtube # 製品の pagehref に埋め込み YouTube ビデオを追加します: https://www.youtube.com/watch?v=dQw4w9WgXcQreviews:
- テキスト: Un très grand才能 de la littérature poire.author: Mélodiesource: Librairie L'Arbre à Nèfles – ParissourceUrl: https://www.arbreanefles.com
#別の製品
- ean: 9781234567811title: Sous-solauthor: 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ディレクトリに実稼働用の Web サイトが構築され、展開の準備が整います。このディレクトリは、任意の Web サーバーまたは静的 Web サイト ホストを使用して提供できます。
$糸スタート
これにより、開発用にローカル Web サーバーが起動されます。 http://localhost:1854/ を開いてブラウザで表示します。プロジェクトのディレクトリ内のファイルを編集すると、ページが自動的にリロードされます。
このリポジトリ内のコードを次のように lint します。
$糸くず
このリポジトリ内でテストを実行するには、次のコマンドを使用します。
$糸テスト
Elytre は 2 つの主要な部分で構成されています。
template/src : 最終的な elytre サイトを構築するためにユーザーのカスタマイズ ファイルとマージされるテンプレート React サイト
build/src : React テンプレートとユーザーのカスタマイズ ファイルを使用して最終的な elytre サイトを構築するノード ツール
どちらも Typescript で書かれているため、使用する前にトランスパイルする必要があります。
$糸ビルド
パッケージが npm に公開される前に、ファイルは lint され、テストされ、トランスパイルされます。
開発中に、テンプレート ファイルを監視し、変更に応じてトランスパイルすることができます。
$ 糸開発
