COMMON 文件使用滑块

Question

我的页面上有一个滑块，其中包含字段 bg_image、short_description、person_image、person_name、person_position

这是代码

blade.php

<div class="section">
  <div class="section-wrapper section-padding">
    <div class="container">
      <h2 class="section-title testimonials-title">What value our Clients set upon our Partnership</h2>

      <div id="navWrapper" class="testimonials-nav">
        <div id="prevArrow" class="testimonials-nav__arrow">
          <img src="/img/arrow-left.svg" alt="arrow left icon">
        </div>
        <div id="navText" class="testimonials-nav__text"></div>
        <div id="nextArrow" class="testimonials-nav__arrow">
          <img src="/img/arrow-right.svg" alt="arrow right icon">
        </div>
      </div>
    </div>

    <div class="testimonials-slider-wrapper">
      <div id="testimonialsSlider" class="testimonials-slider">
        <div id="testimonialsSliderRow" class="testimonials-slider-row">
          @foreach($testimonials as $testimonial)
          <div class="testimonial">

            <div class="testimonial-image d-none d-lg-block" style="background-image: url({{ $testimonial->bg_image }})"></div>
            <div class="testimonial-image d-lg-none" style="background-image: url({{ isset($testimonial->bg_image_mobile) ? $testimonial->bg_image_mobile : $testimonial->bg_image }})"></div>

            <div class="testimonial-text">{{ $testimonial->short_description }}</div>

            <div class="testimonial-person">
              <div class="testimonial-person__image">
                <img src="{{ $testimonial->person_image }}" alt="{{ $testimonial->image_alt }}" title="{{ $testimonial->image_title }}">
              </div>
              <div class="testimonial-person__name">{{ $testimonial->person_name }}</div>
              <div class="testimonial-person__position">{{ $testimonial->person_position }} - {{ $testimonial->person_location }}</div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</div>

实践中不需要js代码，但如果我需要添加，现在在另一个问题中

我需要在另一个页面上使用完全相同的滑块，唯一不同的是滑块中的字段，将有 bg_image、title、date, views 和滑块的标题，现在位于 testimonials-title class

我想创建一个单独的 blade.php 文件以对多个页面使用相同的滑块代码

我创建了这个文件（我没有编辑 classes 的名称以免混淆）

<div class="section">
  <div class="section-wrapper section-padding">
    <div class="container">
      <h2 class="section-title testimonials-title">What value our Clients set upon our Partnership</h2>

      <div id="navWrapper" class="testimonials-nav">
        <div id="prevArrow" class="testimonials-nav__arrow">
          <img src="/img/arrow-left.svg" alt="arrow left icon">
        </div>
        <div id="navText" class="testimonials-nav__text"></div>
        <div id="nextArrow" class="testimonials-nav__arrow">
          <img src="/img/arrow-right.svg" alt="arrow right icon">
        </div>
      </div>
    </div>

    <div class="testimonials-slider-wrapper">
      <div id="testimonialsSlider" class="testimonials-slider">
        <div id="testimonialsSliderRow" class="testimonials-slider-row">
          @foreach($testimonials as $testimonial)
          <div class="testimonial">

            <div class="testimonial-image d-none d-lg-block" style="background-image: url({{ $testimonial->bg_image }})"></div>
            <div class="testimonial-image d-lg-none" style="background-image: url({{ isset($testimonial->bg_image_mobile) ? $testimonial->bg_image_mobile : $testimonial->bg_image }})"></div>

            <div class="testimonial-text">{{ $testimonial->short_description }}</div>

            <div class="testimonial-person">
              <div class="testimonial-person__image">
                <img src="{{ $testimonial->person_image }}" alt="{{ $testimonial->image_alt }}" title="{{ $testimonial->image_title }}">
              </div>
              <div class="testimonial-person__name">{{ $testimonial->person_name }}</div>
              <div class="testimonial-person__position">{{ $testimonial->person_position }} - {{ $testimonial->person_location }}</div>
            </div>
          </div>
          @endforeach

          /*
          @foreach($article->article_recommendations as $article_recommend)
          <div class="article-recommend">

            <div class="article-recommend-image d-none d-lg-block" style="background-image: url({{ $article_recommend->image_list}})"></div>
            <div class="article-recommend-image d-lg-none" style="background-image: url({{ isset($article_recommend->image_list_mobile) ? $article_recommend->image_list_mobile: $article_recommend->image_list}})"></div>

            <div class="article-recommend-title">{{ $article_recommend->title }}</div>

            <div class="article-recommend-date">{{ date('d F Y', strtotime($article_recommend->published_at)) }}</div>

            <div class="article-recommend-views">{{ $article_recommend->getTotalViews() }} Views</div>
          </div>
          @endforeach
          */
        </div>
      </div>
    </div>
  </div>
</div>

同样的代码，我把另一个@foreach换成$article_recommend，我该怎么办？这就像检查推荐页面上是否有滑块，如果在文章页面上则有另一个滑块。或者制作一个普通滑块的最佳方法是什么？

Answer 1

我会给你两种实现方法，一种使用 include，另一种使用 view composer。将以下脚本添加到 resources/views/slider.blade.php:

Slider.blade.php

<div class="section">
    <div class="section-wrapper section-padding">
        <div class="container">
            <h2 class="section-title testimonials-title">What value our Clients set upon our Partnership</h2>

            <div id="navWrapper" class="testimonials-nav">
                <div id="prevArrow" class="testimonials-nav__arrow">
                    <img src="/img/arrow-left.svg" alt="arrow left icon">
                </div>
                <div id="navText" class="testimonials-nav__text"></div>
                <div id="nextArrow" class="testimonials-nav__arrow">
                    <img src="/img/arrow-right.svg" alt="arrow right icon">
                </div>
            </div>
        </div>

        <div class="testimonials-slider-wrapper">
            <div id="testimonialsSlider" class="testimonials-slider">
                <div id="testimonialsSliderRow" class="testimonials-slider-row">
                    @foreach($testimonials as $testimonial)
                        <div class="testimonial">

                            <div class="testimonial-image d-none d-lg-block" style="background-image: url({{ $testimonial->bg_image }})"></div>
                            <div class="testimonial-image d-lg-none" style="background-image: url({{ isset($testimonial->bg_image_mobile) ? $testimonial->bg_image_mobile : $testimonial->bg_image }})"></div>

                            <div class="testimonial-text">{{ $testimonial->short_description }}</div>

                            <div class="testimonial-person">
                                <div class="testimonial-person__image">
                                    <img src="{{ $testimonial->person_image }}" alt="{{ $testimonial->image_alt }}" title="{{ $testimonial->image_title }}">
                                </div>
                                <div class="testimonial-person__name">{{ $testimonial->person_name }}</div>
                                <div class="testimonial-person__position">{{ $testimonial->person_position }} - {{ $testimonial->person_location }}</div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
</div>

顺便说一下，如果你想让它更通用，请考虑将变量名称更改为更通用的名称。

使用 Blade 包含

您可以使用 blade 包含函数在多个页面上包含滑块，代码如下。现在的问题是您需要将数据映射到下面定义的结构：

@include('slider', [
    'testimonials'=>[
        (object) [
            'bg_image'=>'image1.jpg',
            'short_description'=>'test1',
            'person_image'=>'test.jpg',
            'image_alt'=>'test',
            'image_title'=>'test',
            'person_name'=>'Name',
            'person_position'=>'Test',
            'person_location'=>'test'
        ],
        (object) [
            'bg_image'=>'image2.jpg',
            'short_description'=>'test2',
            'person_image'=>'test.jpg',
            'image_alt'=>'test',
            'image_title'=>'test',
            'person_name'=>'Name',
            'person_position'=>'Test',
            'person_location'=>'test'
        ]
    ]
])

如果你的映射逻辑比较多，可以考虑通过View Composers加载。一般不建议你的视图中有很多逻辑，甚至不建议映射逻辑。所以在这种情况下最好使用视图作曲家。

使用 View Composer

将此添加到需要加载滑块的视图中（我将以welcome.blade.php为例）：

{!! $slider ?? '' !!}

视图编辑器 (MyViewComposer)

将其添加到 app/Http/ViewComposers 文件夹或您喜欢的任何位置（相应地更改命名空间）。现在映射逻辑移动到 class，如下所示：

<?php

namespace App\Http\ViewComposers;

use Illuminate\View\View;

class MyViewComposer
{
    public function compose(View $view)
    {
        $view->with('slider', view('slider', [
            'testimonials'=>[
                (object) [
                    'bg_image'=>'image.jpg',
                    'short_description'=>'test',
                    'person_image'=>'test.jpg',
                    'image_alt'=>'test',
                    'image_title'=>'test',
                    'person_name'=>'Name',
                    'person_position'=>'Test',
                    'person_location'=>'test'
                ],
                (object) [
                    'bg_image'=>'image.jpg',
                    'short_description'=>'test',
                    'person_image'=>'test.jpg',
                    'image_alt'=>'test',
                    'image_title'=>'test',
                    'person_name'=>'Name',
                    'person_position'=>'Test',
                    'person_location'=>'test'
                ]
            ]

        ]));
    }
}

这样做的好处是您可以将逻辑与视图隔离开来。您可以通过视图编辑器的构造函数加载您拥有的任何依赖项，并使用它来映射所需的数据。

为不同的滑块和视图添加多个视图编辑器

您现在可以为不同的滑块添加多个视图编辑器（您仍然只保留一个 blade 文件，您从视图编辑器中引用该文件）。你可以重构让我们说一个模板方法（或基础class）来删除视图作曲家中的重复代码。

注册视图 Composer

在 app/Providers 文件夹中创建一个 ServiceProvider (ViewComposerServiceProvider) 并将视图编辑器注册到 welcome.blade.php 视图。如果您有多个视图编辑器，请确保将它们绑定到您在此处拥有的不同视图。

<?php

namespace App\Providers;

use App\Http\ViewComposers\MyViewComposer;
use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;

class ViewComposerServiceProvider extends ServiceProvider
{
    /**
     * Register bindings in the container.
     *
     * @return void
     */
    public function boot()
    {
        // Here you can register all the bindings 
        View::composer(
            'welcome', MyViewComposer::class
        );
    }

    /**
     * Register the service provider.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

现在将服务提供商添加到您的配置中：

return [
    'providers'=>[
        //..
        \App\Providers\ViewComposerServiceProvider::class
    ]
];

滑块现在将加载到 welcome.blade.php 视图中。

COMMON 文件使用滑块

Сommon file to use the slider

html

php

laravel

laravel-blade