Laravel学习笔记（34）幻灯片模块（自定义Blade标签）

本文链接：https://blog.csdn.net/qj4865/article/details/104504529

这篇博客介绍了如何在Laravel中利用Swiper组件创建幻灯片，并详细讲解了如何自定义Blade标签来管理幻灯片图片数据，包括数据库表的设计以及在服务提供者中注册自定义标签的步骤。通过使用自定义的TapService和Blade定界符，可以方便地插入HTML并处理变量。在使用变量和类名时需要注意反斜杠的使用，以及在闭包中传递和使用变量的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Swiper幻灯片组件

将幻灯片图片地址保存到数据库中，表定义如下

 $table->increments('id');
 $table->timestamps();
 $table->string('title')->comment('标题|input');
 $table->string('url')->comment('链接|input');
 $table->text('pic')->comment('图片|image');
 $table->integer('click')->comment('查看次数|input');
 $table->tinyInteger('enable')->default(1)->comment('状态|radio|1:开启,2:关闭');

自定义Blade标签

在服务提供者的boot方法中使用自定义的TapService，用于对Blade标签进行注册

其中，TapService方法如下

<?php
namespace Modules\Artical\Services;

use Blade;
use function foo\func;

class TagService
{
	// boot中使用  (new TagService())->make()
    public function make()
    {
        $this->slide();
    }

    public function slide()
    {
        Blade::directive('slide', function ($expression) {
            $expression = $expression ?: '["height"=>"300px"]';
            $php = <<<php
<div class="swiper-container">
<div class="swiper-wrapper">
<?php
\$params = $expression;
\$data = \Modules\Artical\Entities\Slide::where('enable',1)->get();
foreach(\$data as \$field):
    echo '<div class="swiper-slide">
    <a href="'.\$field['url'].'"><img src="'.\$field['pic'].'"/></a>
</div>';
endforeach;
?>
</div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
<style>
                .swiper-container {
                    width: 100%;
                    height:<?php echo \$params['height'];?>px;
                }
                .swiper-container img{
                  width:100%;
                  height:<?php echo \$params['height'];?>px;
                }
            </style>
            <script>
                var mySwiper = new Swiper ('.swiper-container', {
                    loop: true,
                    autoplay:true,
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                })
            </script>
php;
            return $php;
        });
    }

}

使用了此定界符，方便插入html标签

 <<<php

 php;

当定界符中使用<?php ?>并在之中又使用了变量时
变量前需要追加反斜杠，以及引用的class也要反斜杠（全局声明）

\$data = \Modules\Artical\Entities\Slide::where('enable',1)->get();

闭包函数传递变量的时候，要先在PHP标签中把变量赋值给带斜杠的变量

\$params = $expression;

之后就可以直接使用自己定义的@slide标签了
当想创建@category @endcategory标签包裹html时，同样可以用这种方法，例如：

    public function category() {
    	// 定义循环开始标签
        Blade::directive('category', function ($expression) {
            $expression = $expression ?: '[]';
            $php = <<<php
<?php
    \$paraments = $expression;
    \$data = \Modules\Artical\Entities\Category::get()->toArray();
    \$data = (new \Houdunwang\Arr\Arr)->channelList(\$data, 0, "&nbsp;", 'id');
    foreach(\$data as \$field):
?>
php;
            return $php;
        });

    	// 定义循环结束标签
        Blade::directive('endcategory', function () {
            return '<?php endforeach; ?>';
        });
    }