README

安装

使用 composer 安装

composer require lyrasoft/banner

然后将文件复制到项目中

php windwalker pkg:install lyrasoft/banner -t routes -t lang -t migrations -t seeders

种子文件

• 将 contact-seeder.php 添加到 resources/seeders/main.php
• 将 banner 类型添加到 category-seeder.php

语言

如果您不想复制语言文件，请从安装命令中移除 -t lang

然后添加此行到管理后台和前端中间件

$this->lang->loadAllFromVendor(\Lyrasoft\Banner\BannerPackage::class, 'ini');

使用类型或分类

您有两个选择来结构横幅，使用 type 或 category

类型

分类

默认将使用 category 模式。如果您想使用 type 模式，您必须创建一个 BannerType 枚举，例如

class BannerType extends Enum implements EnumTranslatableInterface
{
    use EnumTranslatableTrait;

    #[Title('Home Banner')]
    public const HOME = 'home';

    #[Title('Works')]
    public const WORKS = 'works';

    // ...
}

然后注册枚举类到配置文件

return [
    'banner' => [
        // ...
        
        'type_enum' => \App\Enum\BannerType::class,

        // ...

该包将自动切换到 type 模式。

注册管理菜单

编辑 resources/menu/admin/sidemenu.menu.php

使用类型模式

// Banner
$menu->link('橫幅管理')
    ->to($nav->to('banner_list'))
    ->icon('fal fa-gallery-thumbnails');

使用分类模式

// Category
$menu->link('橫幅分類')
    ->to($nav->to('category_list', ['type' => 'banner']))
    ->icon('fal fa-sitemap');

// Banner
$menu->link('橫幅管理')
    ->to($nav->to('banner_list'))
    ->icon('fal fa-images');

添加小部件

将其添加到 packages/widget.php

return [
    'widget' => [
        'types' => [
            // ...
            'banner' => \Lyrasoft\Banner\Widget\Banner\BannerWidget::class
        ],
        // ...
    ]
];

安装 Swiper 和 youtube-background

安装完包后，它将自动将 swiper 作为节点模块重新要求根 package.json。

如果您需要使用视频和 YouTube，您必须手动安装 youtube-background

yarn add youtube-background

• Swiper
  • 入门：https://swiper.js.cn/get-started
  • 演示：https://swiper.js.cn/demos
• YouTube 背景
  • Github: https://github.com/stamat/youtube-background

前端使用

使用 BannerRepository 获取横幅

$repo = $app->service(BannerRepository::class);

/** @var Banner[] $banners */
$banners = $repo->getBannersByType('home')->all();
$banners = $repo->getBannersByCategoryAlias('category-alias')->all();
$banners = $repo->getBannersByCategoryId(5)->all();

然后在 Edge 中使用组件

<x-swiper-banners :banners="$banners"></x-swiper-banners>

您可以添加一些参数

<x-swiper-banners :banners="$banners"
    link-target="_blank"
    :pagination="true"
    height="400px"
></x-swiper-banners>

参数

示例

按类型加载

<x-swiper-banners :type="$type"
    link-target="_blank"
    :pagination="true"
    height="400px"
></x-swiper-banners>

按分类别名加载

<x-swiper-banners :category-alias="$categoryAlias"
    link-target="_blank"
    :pagination="true"
    height="400px"
></x-swiper-banners>

按分类 ID 加载

<x-swiper-banners :category-id="$category->getId()"
    link-target="_blank"
    :pagination="true"
    height="400px"
></x-swiper-banners>

横幅项槽

使用 item 槽与 @scope()，您将获得 Banner 实体和索引 $i。

然后只需构建您自己的 HTML。

<x-swiper-banners :banners="$banners"
>
    <x-slot name="item">
        @scope($banner, $i)
        
        <div class="c-banner-item"
            style="background-image: url({{ $banner->getImage()) }})">
            <h2>
                {{ $banner->getTitle() }}
            </h2>
        </div>
    </x-slot>
</x-swiper-banners>

使用横幅项组件

您可以使用 x-banner-item 组件，它包含默认的 RWD 和视频切换功能。

<x-swiper-banners :banners="$banners"
>
    <x-slot name="item">
        @scope($banner, $i)
        
        <x-banner-item :banner="$banner">
            <h2>
                {{ $banner->getTitle() }}
            </h2>
        </x-banner-item>
    </x-slot>
</x-swiper-banners>

参数

大小设置。

打开 etc/packages/banner.php，您将看到

return [
    'banner' => [
        // ...
        
        'types' => [
            '_default' => [
                'desktop' => [
                    'width' => 1920,
                    'height' => 800,
                    'crop' => true,
                    'ajax' => false,
                    'profile' => 'image',
                ],
                'mobile' => [
                    'width' => 720,
                    'height' => 720,
                    'crop' => true,
                    'ajax' => false,
                    'profile' => 'image',
                ]
            ]
        ]
    ]
];

_default 类型有两个大小设置，desktop 和 mobile，这意味着管理员上传的图像将使用此大小

您可以在这里更改所有上传设置。

为类型或分类别名自定义大小

如果您有一个具有别名（promote）的分类，您可以为 promote 添加具有不同大小的大小设置。

return [
    'banner' => [
        // ...
        'types' => [
            '_default' => [
                // ...
            ],
            'promote' => [
                'desktop' => [
                    'width' => 800,
                    'height' => 400,
                    'crop' => true,
                    'ajax' => false,
                    'profile' => 'image',
                ],
                'mobile' => [
                    'width' => 200,
                    'height' => 200,
                    'crop' => true,
                    'ajax' => false,
                    'profile' => 'image',
                ]
            ],
        ]
    ]
];

确保您的分类别名相同

然后此分类中的横幅将使用新的大小

创建默认分类/类型

如果您使用分类模式，您可能希望在迁移中创建一些默认分类

$catMapper = $orm->mapper(Category::class);
$catMapper->createOne(
    [
        'title' => '首頁作品',
        'alias' => 'works',
        'parent_id' => 1
    ]
);

如果您使用类型模式，只需更改 BannerType 枚举案例

横幅脚本

直接使用 Swiper 或 YouTube 背景

use Lyrasoft\Banner\Script\BannerScript;

$app->service(BannerScript::class)->swiper('#swiper', $options);

$app->service(BannerScript::class)->youtubeBackground();

小部件

如果您曾经将 BannerWidget::class 添加到 widget.php，您将在管理中看到此小部件

添加此小部件并保存后。使用此代码来渲染位置，例如（demo 位置）

<?php
$widgetService = $app->service(WidgetService::class);
?>
@if ($widgetService->hasWidgets('demo'))
    <div class="l-demo-position">
        @foreach ($widgetService->loadWidgets('demo') as $widget)
        <div class="l-demo-position__widget mb-3">
            <x-widget :widget="$widget"></x-widget>
        </div>
        @endforeach
    </div>
@endif