README

主模板是大多数网站默认模板。包含丰富的灵活组件。

前端包管理器

此模板使用Composer管理一些关键的前端包，例如jQuery和Bootstrap。

但是，在编译时，您必须指定包含sass文件的供应商文件夹，如下所示：sass -I ./vendor/npm-asset content/styles/main.scss:assets/main.css

定制

此模板利用变量定制 bootstrap 4。您可以在 assets/styles/vars 下查看可以覆盖的变量类型。

图标

默认情况下，图标由 Fontawesome 提供。

灯箱

灯箱由 Lightbox for Bootstrap 提供。默认情况下，只需将 [data-toggle="lightbox"] 添加到链接元素，即可触发灯箱。

布局/网格

提供了一个方便的网格类系统，用于轻松创建网格。类似于Bootstrap约定，只需将 grid 类添加到容器，其子元素将以网格的形式显示。要修改列数和断点，添加一个修饰类，例如 grid--md-4。这将在 md 断点处显示4列的网格。

导航

要滚动到页面的一部分，请将 data-scroll-to="#sectionID" 属性添加到您的链接中。这对于单页模板很有用，可以在 layouts/onepager.blade.php 中找到其用法。

JavaScript 函数

• data-toggle-class="element:class" 这将定位元素并在其上切换一个类。
  • 例如) 使用按钮切换侧边栏菜单： <button data-toggle-class="body:sidebar-active">显示Sidekick</button>

画廊

画廊组件附带一些酷炫的过滤器。

调用方式如下

@component("components.gallery-filter", ['site' => $site, 'filters' => ['country', 'city'] ])
	<input class="search" placeholder="Search"/>
	<button class="sort" data-sort="country">Sort by Country</button>
	<button class="sort" data-sort="city">Sort by City</button>
	<button data-filter="country">Canada</button>
	<button data-filter="city">Montreal</button>
	<button data-filter="reset">All</button>

	<ul class="list">
		<li data-id="1">
			<div class="card-body">
				<h4 class="card-title country">Canada</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</li>
		...
	</ul>
@endcomponent