使用 Livewire 在 Statamic 中进行过滤

Question

我是第一次使用 Livewire。我有一个 Statamic Livewire 组件，它显示博客文章的集合，默认限制为 9 项。但是，我注意到在移动设备（小于 768 像素）上，我必须将限制减少到 3 个项目。我正在尝试弄清楚如何根据屏幕尺寸动态调整限制。

这是我的代码：

<?php

namespace App\Livewire;

use Livewire\Component;
use Statamic\Facades\Collection;

class FilterCollection extends Component
{
    public $taxonomyField;
    public $taxonomySlug;
    public $collectionName;
    public $viewName = 'collection';
    public $offset = 0;
    public $limit = 9;
    public $q;
    public $defaultSortBy = 'desc';
    public $sortBy;
    public $cards = [
        'blog_articles' => '_blog-list-card',
    ];

    public function render()
    {
        $newEntries = Collection::find($this->collectionName)
        ->queryEntries()
        ->where('published', 1)
        ->orderBy('date', $this->defaultSortBy)
        ->offset($this->offset)
        ->limit($this->limit);

        if (!empty($this->taxonomySlug)) {
            $newEntries->whereTaxonomy($this->taxonomyField . '::' . $this->taxonomySlug);
        }
        if (!empty($this->q)) {
            $newEntries->where(function ($query) {
                $query->where('title', 'like', '%' . $this->q . '%')
                    ->orWhere('article_summary', 'like', '%' . $this->q . '%')
                    ->orWhere('page_builder', 'like', '%' . $this->q . '%');;
            });
        }

        return view('livewire.filter-' . $this->viewName, ['entries' => $newEntries]);
    }

    public function filterCollection($taxonomySlug)
    {
        $this->taxonomySlug = $taxonomySlug;
    }

    public function loadMore()
    {
        $this->limit += $this->limit;
    }

    public function mount($collectionName, $taxonomyField = 'articles_tags', $q = null)
    {
        $this->collectionName = $collectionName ?? 'articles';
        $this->taxonomyField = $taxonomyField;
        $this->q = $q;
    }

}

限制值为 9，但在移动设备屏幕上我需要将限制调整为 3。我该怎么做？我尝试过使用 Javascript 连接 Livewire，但无法连接。

Answer 1

我可能会尝试使用 CSS 媒体查询隐藏额外的项目，而不是在后端执行任何操作。

假设您正在使用鹿角，您可以对每个项目执行以下操作：

{{ entries }}
  <div {{ if index > 2 }} style="display: none" {{ /if }}>
    <h2>{{ title }}</h2>
    <!-- whatever other stuff you're doing... -->
  </div>
{{ /entries }}