keystone ssg
1.0.0
Keystone は最近時代遅れに見えます。代わりに Astro または Vite を検討することをお勧めします。
Keystone は、小規模な Web サイトを迅速に構築するのに最適な静的サイト ジェネレーターです。セットアップは必要なく、一連の便利な機能がデフォルトで有効になっています。
/publicアップロードするだけで準備完了新しいディレクトリを作成し、次のコマンドを実行して Keystone、package.json、git をセットアップします。ノード 14.xx が必要です。
$ npm install keystone-ssg
無事、インストールされました！
Keystone 開発サーバーを起動し、http://localhost:8080 に移動してサンプル Web サイトを表示します。
$ npm run dev
コマンドの実行後、プロジェクトが/publicフォルダー内にビルドされ、アップロードできるようになります。
$ npm run build
Keystone プロジェクト内には 6 つの重要なディレクトリがあり、それぞれに独自の目的があります。
ページ フォルダー内のすべての HTML .htmlおよびマークダウン.mdファイルは、Web サイト上のページに対応します。ここのサンプル プロジェクトには 2 つのファイルがあります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> import タグに変換され、ファイル/src/main.jsにリンクされます。
< _script main.js />ES6 インポートは完全にサポートされており、結果のファイルは Babel でトランスパイルされ、Rollup にバンドルされて、縮小されます。
/stylesフォルダーは CSS/SCSS に使用されます。次のタグは通常の<link> css import タグに変換され、コンパイルされた/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> | コンポーネントをインポートします | [ファイル名]、ソース |
<_script> | バンドルされたスクリプトにリンクする<script>タグを作成します | [ファイル名]、ソース |
<_style> | バンドルされた CSS ファイルにリンクする<link>タグを作成します | [ファイル名]、ソース |
| 指示 | 説明 | 出力の違い |
|---|---|---|
npm run dev | 開発用の Web サイトを構築し、Keystone 開発サーバーを起動します。 |
|
npm run build | 本番用のWebサイトを構築します。 |
|
設定ファイルはkeystone.config.jsです
| オプション | 説明 | デフォルト |
|---|---|---|
| ダイナミックリンク | Keystone Web サイトに動的にロードされるローカル リンクを有効にし、更新する必要はありません | 真実 |
| 検索ファイル | ルートディレクトリにsearch.json生成します。 | 真実 |
| インデックスパス | Web サイトのルート ディレクトリ | '/' |
| ポート | 開発サーバーのポート、ローカルホスト: 8080 | 8080 |
| ポートW | 開発サーバーに使用される 2 番目のポート | 8081 |
| 開発サーバーIp | 開発サーバーの場所、 localhost :8080。ローカル デバイス上の開発サーバーを表示するには、デバイスのローカル IP に置き換えます (例: '192.168.1.103')。 | 「ローカルホスト」 |
| 見た | Keystone 開発サーバーによって監視されるディレクトリ。ファイルの編集時に再コンパイルとページの更新が強制されます。 | ['テンプレート'、'ページ'、'アセット'、'コンポーネント'、'ソース'、'スタイル'] |
| 建てる | コンテンツページのディレクトリ | 「ページ」 |
| 提供されました | 生成された Web サイトが含まれるディレクトリ | '公共' |
| フルリコンパイル | 開発モードでファイルを変更するたびに、すべてのファイルの完全な再コンパイルを強制します。 | 間違い |
| 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
