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给我们发送电子邮件
