README

Hero 是一个用于创建英雄横幅的插件，它可以使用页面、幻灯片、视频、颜色面板和单张图片。它被构建来为 The Work of Others 上的英雄横幅提供动力。它有一些自己的看法，并且默认情况下需要其他几个插件

Webp 由 Hash&Salt
颜色选择器由 Tim Ötting
焦点裁剪由 *Flo Kosiol

它还围绕 Tiny Slider 构建。如果您使用不同的滑块或需要修改类或 HTML 标记，您可以通过覆盖片段来实现。CSS 由您自己决定，但提供了一个示例 SASS 文件，它依赖于 Tiny Slider。您可以在插件中的 css 文件夹中找到它。

设置

Composer 安装

composer require hashandsalt/kirby3-hero

手动安装

下载文件并将其放置在 site/plugins/kirby3-hero

使用插件

为了使插件正常工作，需要将其添加到您的蓝图、控制器和模板中。

添加到您的控制器

将其添加到您希望使用 Hero 的每个页面控制器。

<?php
return function ($page, $kirby, $site, $tag) {

$hero = $kirby->controller('hero', compact('page', 'site', 'kirby'));

  return $hero;
};

添加到您的蓝图

该插件设计为通过使用 extend 作为您现有蓝图中的选项卡使用

tabs:
	hero: tabs/hero

添加到您的模板

最后，将其添加到您的模板中

<?= snippet('hero/hero')?>

在构建过程中初始化 Tiny Slider

这是 Tiny Slider 的配置方式

// Tiny Slider
import {
  tns
} from 'tiny-slider/src/tiny-slider.js';

// HERO Slider
let heroslides = document.querySelectorAll('.hero-slider');

if (heroslides) {
[].forEach.call(heroslides , function(el) {
  tns({
    container: el,
    items: 1,
    slideBy: 'page',
    autoplay: true,
    mode: "gallery",
    controls: false,
    nav: false,
    speed: 500
  });
});
}

hashandsalt / hero

维护者

详细信息