alpine html bootstrap
Initial Release
對於以時尚為中心的在線商店，Alpine是一個反應迅速的Bootstrap 5電子商務模板，對主頁幻燈片，傾斜的橫幅和帶有Propout產品卡的自定義圖像橫幅具有“ Ken Burns”效果。類別頁面上的大型產品圖像為您提供了足夠的展示產品空間，同時在整個網站上提供了簡單的導航。對於任何時尚零售網站來說，這都是完美的起點，並且該模板的干淨和最小設計意味著與您的自定義電子商務應用程序集成在一起很容易修改和無痛。最重要的是，它是免費的。
查看演示|下載zip
如果您不打算使用模板源代碼（這意味著您不會對其進行編譯或運行WebPack Dev Server），則無需安裝任何內容。您可以簡單地導航到DIST文件夾並開始編輯文件。
大多數開發人員將編輯源代碼，還將運行WebPack以重新編譯模板文件。如果是這樣，請確保您已安裝了node.js。您可以從這裡下載
git clone https://github.com/PixelRocket-Shop/alpine-html-bootstrap.gitnpm install 。npm start啟動WebPack DevServer。npm run build 模板由5頁組成：
為了將代碼重複保持在最低限度，我們將Hannelbars.js用作模板引擎和部分，以快速在不同頁面中添加相同的代碼。我們還使用車把插件進行JSON數據 - 這使我們可以使用循環並輸出單個HTML代碼塊，而不是重複相同的HTML。
演示網址
請注意，這僅是HTML模板。它不會連接到數據庫，並且不會在內容管理系統（WordPress等）中自動工作。您需要將我們的代碼納入您的應用程序。
？ dist-模板的生成版本。如果您不想使用模板源代碼，請轉到此處。但是請注意：如果您直接在此文件夾中自定義任何內容，然後使用WebPack重新編譯模板，除非將DIST文件夾從模板中移出，則更改將被覆蓋。
？ NODE_MODULES - NPM安裝依賴項的目錄。在完成模板安裝之前，您將不會看到此文件夾。您無需創建此文件夾。
？ SRC-模板源代碼。轉到此處自定義模板。
？ SRC/資產 - 模板資產，例如CSS，JS，圖像等。
？ SRC/數據 - 模板JSON數據文件。我們使用這些JSON文件，使您的工作更易於將內容插入模板中。
？ SRC/HTML-模板頁面。在此處編輯現有頁面或添加新頁面。
？ SRC/部分 - 車把部分模板。
車把是一種模板引擎，它使我們能夠保持模板源代碼的組織和盡可能清潔。它削減了代碼重複並通過使用輔助功能，使模板開發人員可以很快以最小的代碼輸出大量數據。您可以在這裡閱讀更多有關它的信息。
我們使用車把有兩個主要原因：首先，使用車把部分的使用使我們可以在多個HTML文件中引用相同的文件，這意味著您只需要從單個源編輯代碼即可。如果您習慣於與React或Vue一起工作，則與引用組件相同。其次，將JSON數據用於我們的虛擬目錄數據可以使我們的模板代碼保持清潔。通過輸出基本的車把循環，我們可以在清單頁面上輕鬆輸出10個虛擬產品。
在我們的模板中打開以下文件：src/html/index.html。
在第46行周圍，您會看到以下代碼：
{{> swiper/swiper-hero-slideshow }}
那是一個車把部分。該代碼告訴車把在一個稱為Swiper（位於Partials文件夾中）的文件夾中，然後查找一個稱為Swiper-Hero-Slideshow的文件，然後在編譯時將其插入index.html文件中。
關於我們使用車把部分的一些重要說明：
讓我們看一下如何使用車把保持代碼庫清潔。打開類別頁面：src/html/catpory.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車把插件具有非常方便的實用程序，該實用程序使我們可以將JSON文件作為模板數據傳遞。
請導航到：SRC/數據。這是我們的模板數據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}}
關於模板數據的重要部分是類別products.entries。這意味著在我們的數據文件夾中，您會找到一個稱為“類別產品”的JSON文件。此類別products.json文件的“鍵”稱為“條目”。
模板的所有源CS/SASS文件都保存在模板的資產文件夾中。導航到SRC/Assets/SCSS。與您的編輯器打開theme.scss。
這是所有其他SASS/CSS文件的主要切入點。
要創建一個新頁面，請在代碼編輯器中導航至：SRC/HTML。為了使正確的HTML更容易，請克隆現有頁面。將新創建的文件重命名為您需要的任何URL。就是這樣。現在，您可以免費使用代碼編輯器打開新頁面，進行更改，然後保存文件。退出WebPack DevServer並重新啟動它以供頁面顯示。
Bootstrap已經擁有一個全面的文檔網站，它將指導您設置和使用所有默認的Bootstrap功能。 Bootstrap 5已完全集成到我們的模板的源代碼。有關任何默認的bootstrap功能，請先請參閱Bootstrap的Doc網站：訪問Bootstrap的Doc網站
引導程序
aos.js
Unplash
pexels
Pixabay
中Zoom.js
nouislider.js
SimpleBar.js
Swiper.js
您可以在此處找到我們的網站，也可以通過support@pixelrocket.store給我們發送電子郵件
