alpine html bootstrap
Initial Release
ファッションに焦点を当てたオンラインストアの場合、Alpineは、ホームページスライドショー、角度のあるバナー、ポップアウト製品カード付きのカスタムイメージホットスポットバナーに「Ken Burns」効果を備えたレスポンシブブートストラップ5 eコマーステンプレートです。カテゴリページの大規模な製品画像は、製品を紹介するための十分なスペースを提供し、同時にウェブサイト全体で簡単なナビゲーションを提供します。ファッション小売ウェブサイトにとって完璧な出発点であり、テンプレートのクリーンで最小限のデザインは、カスタムeコマースアプリケーションと統合するのが簡単で無痛であることを意味します。そして何よりも、それは無料です。
デモを表示| zipをダウンロードしてください
テンプレートソースコードを使用するつもりがない場合（つまり、コンパイルしたり、Webpack Devサーバーを実行したりしないことを意味します）。何もインストールする必要はありません。単にDISTフォルダーに移動して、ファイルの編集を開始できます。
ほとんどの開発者はソースコードを編集し、テンプレートファイルを再コンパイルするためにWebpackを実行します。その場合は、node.jsがインストールされていることを確認してください。ここからダウンロードできます
git clone https://github.com/PixelRocket-Shop/alpine-html-bootstrap.gitnpm install実行します。npm startを実行して、Webpack DevServerを開始します。npm run buildを実行しますテンプレートは5ページで構成されています。
コードの繰り返しを最小限に抑えるために、HandleBars.jsをテンプレートエンジンとして使用して、同じコードを異なるページにすばやく追加しました。また、JSONデータにハンドルバープラグインを使用します。これにより、ループを使用して、同じHTMLを繰り返す代わりに単一のHTMLコードブロックを出力できます。
デモURL
これはHTMLテンプレートのみであることに注意してください。データベースに接続せず、コンテンツ管理システム（WordPressなど）で自動的に動作しません。コードをアプリケーションに組み込む必要があります。
？ dist-テンプレートの生成バージョン。テンプレートソースコードを使用したくない場合は、こちらをご覧ください。ただし、注意してください。このフォルダーの何かを直接カスタマイズし、その後、テンプレートからDISTフォルダーを移動しない限り、Webパックを使用してテンプレートを再コンパイルする場合、変更はオーバーライドされます。
？ node_modules -npmが依存症をインストールするディレクトリ。テンプレートのインストールを完了するまで、このフォルダーは表示されません。このフォルダーを作成する必要はありません。
？ SRC-テンプレートソースコード。ここにアクセスしてテンプレートをカスタマイズしてください。
？ SRC/アセット - CSS、JS、画像などのテンプレートアセット。
？ SRC/データ - テンプレートJSONデータファイル。これらのJSONファイルを使用して、ジョブがテンプレートにコンテンツを挿入しやすくします。
？ SRC/HTML-テンプレートページ。既存のページを編集するか、新しいページを追加してください。
？ SRC/Partials -HandleBars Partial Templates。
ハンドルバーは、テンプレートソースコードを整理して可能な限りきれいに保つことができるテンプレートエンジンです。コードの複製を削減し、ヘルパー関数を使用することで、テンプレート開発者は最小限のコードで大量のデータを非常に迅速に出力できます。詳細については、こちらをご覧ください。
2つの主な理由でハンドルバーを使用します。まず、ハンドルバーのパートの使用により、複数のHTMLファイルで同じファイルを参照することができ、単一のソースからコードのみを編集する必要があることを意味します。 ReactまたはVueの作業に慣れている場合、これはコンポーネントを参照するのと同じです。第二に、ダミーカタログデータにJSONデータを使用すると、テンプレートコードがきれいになります。基本的なハンドルバーループを出力することにより、リストページに10個のダミー製品を簡単に出力できます。
テンプレートで次のファイルを開きます：SRC/HTML/index.html。
46行目の周りには、次のコードが表示されます。
{{> swiper/swiper-hero-slideshow }}
それは部分的なハンドルバーです。そのコードは、HandleBarsにSwiper（Partialsフォルダーにある）というフォルダー内を見るように指示し、その後、Swiper-Hero-Slideshowというファイルを見つけて、コンパイルされたときにindex.htmlファイルに挿入します。
ハンドルバーのパートの使用に関する重要なメモがいくつかあります。
ハンドルバーを使用してコードベースをきれいに保つ方法を見てみましょう。カテゴリページを開きます：src/html/category.html。
56行目の周りに、このコードがあります。
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
そして、それがカテゴリページのループです。 JSONデータをハンドルバーループに渡し、ループ内でハンドルバーを部分的に参照し、各ループアイテムのデータを渡します。
{{> listing-cards/listing-card this }}
使用するWebPack HandleBarsプラグインには、非常に便利なユーティリティが付属しており、JSONファイルをテンプレートデータとして渡すことができます。
src/dataに移動してください。ここで、JSONファイルが存在するテンプレートデータです。このフォルダーに独自の編集、削除、または追加できます。
繰り返しますが、カテゴリページループを参照する場合：
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
テンプレートデータに関してここで重要な部分は、カテゴリ製品です。エントリです。これが意味することは、データフォルダー内に「カテゴリプロダクト」と呼ばれるJSONファイルが見つかるということです。このカテゴリProducts.jsonファイルには、「エントリ」と呼ばれる「キー」があります。
すべてのテンプレートのソースCSS/SASSファイルは、テンプレートのアセットフォルダー内に保持されます。 SRC/Assets/SCSSに移動します。編集者と一緒にtheme.scssを開きます。
これは、他のすべてのSASS/CSSファイルの主なエントリポイントです。
新しいページを作成するには、コードエディターでSRC/HTMLに移動します。正しいHTMLを所定の位置に取得しやすくするには、既存のページをクローンします。新しく作成されたファイルの名前を、必要なURLに変更します。そしてそれだけです。これで、コードエディターで新しいページを無料で開き、変更を加えてからファイルを保存できます。 Webpack DevServerを終了し、ページが表示されるように再起動します。
Bootstrapには、すべてのデフォルトのブートストラップ機能のセットアップと使用を導く包括的なドキュメントサイトが既にあります。 Bootstrap 5は、テンプレートのソースコードに完全に統合されています。デフォルトのブートストラップ機能については、Bootstrapのドキュメントサイトを最初に参照してください：Bootstrapのドキュメントサイトにアクセスしてください
ブートストラップ
aos.js
解釈
ペクセル
ピクサベイ
Mediumzoom.js
nouislider.js
SimpleBar.js
Swiper.js
ここで当社のウェブサイトを見つけるか、support@pixelrocket.storeまでメールでお問い合わせください
