README

想学习 Statamic 吗？

访问我的最新项目 Statamictutorials.com。许多教程是免费的。

描述

Statamic 的第三方 Laravel Livewire 集成。

如果你使用 Statamic，开始使用 Livewire 非常简单。

安装

使用 composer 引入 Livewire 包

composer require jonassiewertsen/statamic-livewire

手动包含 Livewire 的前端资源

默认情况下，Livewire 将其所需的 JavaScript 和 CSS 资产注入到包含 Livewire 组件的每个页面中。如果您想对此行为有更多控制，可以使用以下 Antlers 标签或 Blade 指令在页面上手动包含资源

<html>
    <head>
        <!-- If using Antlers -->
        {{ livewire:styles }}

        <!-- If using Blade -->
        @livewireStyles
    </head>
    <body>

        ...
        <!-- If using Antlers -->
        {{ livewire:scripts }}

        <!-- Blade -->
        @livewireScripts
    </body>
</html>

手动打包 Livewire 和 Alpine

如果您需要包含一些自定义 Alpine 插件，您需要手动打包 Livewire 和 Alpine 资源并使用以下 Antlers 标签或 Blade 指令禁用自动注入。别忘了包含 Livewire 样式。

<html>
    <head>
        <!-- If using Antlers -->
        {{ livewire:styles }}

        <!-- If using Blade -->
        @livewireStyles
    </head>
    <body>

        ...
        <!-- If using Antlers -->
        {{ livewire:scriptConfig }}

        <!-- Blade -->
        @livewireScriptConfig
    </body>
</html>

静态缓存

此插件添加了一个 AssetsReplacer 类，使 Livewire 与半静态缓存和全静态缓存兼容。您可以在该插件的配置中自定义替换器

'replacers' => [
    \Jonassiewertsen\Livewire\Replacers\AssetsReplacer::class,
],

如果您正在使用全量静态缓存，并且您已按上述说明手动打包 Livewire 和 Alpine，请确保在 CSRF 令牌被替换后才启动 Livewire。

if (window.livewireScriptConfig?.csrf === 'STATAMIC_CSRF_TOKEN') {
    document.addEventListener('statamic:nocache.replaced', () => Livewire.start());
} else {
    Livewire.start();
}

升级

如果您正在更新到 Statamic Livewire 3，请务必阅读 Livewire 升级指南，因为有一些破坏性更改：[https://livewire.laravel.net.cn/docs/upgrading](https://livewire.laravel.net.cn/docs/upgrading)

通用文档

Livewire 文档

包含组件

您可以根据通用文档中的说明创建 Livewire 组件。要包含您的 Livewire 组件

<body>
    <!-- If using Antlers -->
    {{ livewire:your-component-name }}

    <!-- If using Blade -->
    <livewire:your-component-name />
</body>

如果您想从动态变量中包含组件，可以使用 livewire:component 标签

<body>
    <!-- If using Antlers -->
    {{ livewire:component :name="variable" }}

    <!-- If using Blade -->
    <livewire:component name="$variable" />
</body>

@script 和 @assets

提供 Antlers 版本的 @script 和 @assets

<body>
    {{ livewire:script }}
	<script>console.log('hello')</script>
    {{ /livewire:script }}
</body>

<body>
    {{ livewire:assets }}
	<script src="some-javascript-library.js"></script>
    {{ /livewire:assets }}
</body>

Blade 或 Antlers？都是！

如果创建 Livewire 组件，您需要渲染模板文件

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public function render()
    {
        return view('livewire.counter');
    }
}

更多信息：[https://livewire.laravel.net.cn/docs/components](https://livewire.laravel.net.cn/docs/components)

通常情况下，您的模板文件将是一个blade文件，命名为counter.blade.php。很好，那么Antlers呢？将您的模板重命名为counter.antlers.html，使用Antlers语法，想做什么就做什么。不需要在组件控制器内部做任何改变。这有多酷？

传递初始参数

您可以通过传递额外的参数将数据传递到组件中

<!-- If using Antlers -->
{{ livewire:your-component-name :contact="contact" }}

<!-- If using Blade -->
<livewire:your-component-name :contact="$contact">

要拦截这些参数，请将它们挂载并存储为公共属性。

use Livewire\Component;

class ShowContact extends Component
{
    public $name;
    public $email;

    public function mount($contact)
    {
        $this->name = $contact->name;
        $this->email = $contact->email;
    }

    ...
}

官方Livewire文档提供了更多信息。

组件键值

Livewire组件默认会自动键值。如果您想手动键值一个组件，可以使用key属性。

<!-- If using Antlers -->
{{ contacts }}
    {{ livewire:your-component-name :key="id" }}
{{ /contacts }}

<!-- If using Blade -->
@foreach ($contacts as $contact)
    <livewire:your-component-name :key="$contact->id" />
@endforeach

官方Livewire文档提供了更多信息。

多站点

在多站点环境中使用Livewire时，当前站点会在请求之间丢失。有一个特性（\Jonassiewertsen\Livewire\RestoreCurrentSite）可以解决这个问题。只需将其包含在组件中，并像通常一样使用Site::current()即可。

class ShowArticles extends Component
{
    use \Jonassiewertsen\Livewire\RestoreCurrentSite;

    protected function entries()
    {
        return Entry::query()
            ->where('collection', 'articles')
            ->where('site', Site::current())
            ->get();
    }

    public function render()
    {
        return view('livewire.blog-entries', $this->entries());
    }
}

分页数据

您可以使用WithPagination特性来分页结果。

Blade

要使用Blade进行分页，请使用Livewire文档中描述的Livewire\WithPagination命名空间。

Antlers

使用Antlers进行分页的工作方式类似。确保在处理Antlers时使用Jonassiewertsen\Livewire\WithPagination命名空间。

在您的Livewire组件视图中

{{ entries }}
    ...
{{ /entries }}

{{ links }}

use Jonassiewertsen\Livewire\WithPagination;

class ShowArticles extends Component
{
    use WithPagination;

    protected function entries()
    {
        $entries = Entry::query()
            ->where('collection', 'articles')
            ->paginate(3);

        return $this->withPagination('entries', $entries);
    }

    public function render()
    {
        return view('livewire.blog-entries', $this->entries());
    }
}

实验性：Statamic支持

作为一个小小的实验，已经添加了对条目或条目集合的支持，因此您可以将条目或条目集合简单地作为一个公共属性，它就会正常工作。

支持类型

Statamic\Entries\EntryCollection;
Statamic\Entries\Entry;

namespace App\Livewire;

use Livewire\Component;
use Statamic\Entries\EntryCollection;
use Statamic\Entries\Entry;

class Foo extends Component
{
    public EntryCollection $entries;
    public Entry $entry;

    // normal livewire stuff
}

要使其生效，您需要首先启用该功能。

php artisan vendor:publish
在列表中选择statamic-livewire
启用合成器

Entangle: 在Livewire和Alpine之间共享状态

如果您想在Livewire和Alpine之间共享状态，有一个叫做@entangle的Blade指令。为了与Antlers一起使用，我们提供了一个专门的标签

<!-- With Antlers -->
<div x-data="{ open: {{ livewire:entangle property='showDropdown' modifier='live' }} }">

<!-- With Blade -->
<div x-data="{ open: @entangle('showDropdown').live }">

值得注意的是，由于Livewire v3现在建立在Alpine之上，所以@entangle指令不再被记录。相反，可以通过$wire对象来绑定数据。

<div x-data="{ open: $wire.entangle('showDropdown', true) }">

这个：访问Livewire组件

您可以通过这种方式访问并执行Livewire组件的操作

<script>
    document.addEventListener('livewire:initialized', function () {
        // With Antlers
        {{ livewire:this set="('name', 'Jack')" }}

        // With Blade
        @this.set('name', 'Jack')
    })
</script>

值得注意的是，由于Livewire v3现在建立在Alpine之上，所以@this指令不再广泛使用。相反，可以通过JavaScript / $wire对象直接访问和操作状态。

<script>
    document.addEventListener('livewire:initialized', function () {
        // `{{ livewire:this }}` returns the instance of the current component
        {{ livewire:this }}.set('name', 'Jack')
    })
</script>

懒加载组件

Livewire允许您懒加载组件，否则这些组件会减慢初始页面加载速度。为此，您只需将lazy="true"作为参数传递给组件标签即可。

<!-- With Antlers -->
{{ livewire:your-component-name :contact="contact" lazy="true" }}

其他Statamic Livewire包

如果您使用Livewire，以下这些包也可能对您感兴趣

我遗漏了链接吗？告诉我！

致谢

感谢

Marco Rieser帮助维护此包
Caleb 及社区共同构建 Livewire
Austenc 为 Statamic 市场预览图

要求

PHP 8.1
Laravel 10 或 11
Statamic 4 或 5

支持

我很乐意与社区分享。然而，这需要大量的工作、时间和努力。

在 GitHub 上赞助我以支持我的工作及此插件的支持。

许可证

此插件在 MIT 许可下发布。请随意使用，并记得传递爱心。

jonassiewertsen / statamic-livewire

维护者

详细信息