README

Statamic-Component 是 Statamic 的一个插件，用于简化创建独立的组件，它结合了多个逻辑，如字段集和视图。

适用于喜欢DRY（Don't Repeat Yourself）原则的开发者。Statamic 中的文件夹结构通常很容易理解，但随着项目的增长，可能会变得有些混乱。使用此插件，您可以将其组件文件分组到一个单独的文件夹中。

功能

此插件的目标是使 Statamic 项目更清晰、更有组织。它通过将组件的所有文件分组到一个单独的文件夹中来实现这一点。这使得查找和编辑组件文件变得更容易。

组件文件夹可以包括

Antlers 或 Blade 模板
样式表
JavaScript
字段集

注意：样式表和 JavaScript 文件不包含在此插件中，因为它们可能属于您自己的构建过程的一部分。

如何安装

您可以在 Statamic 控制面板的 工具 > 插件 部分中搜索此插件，并点击安装，或者从项目根目录运行以下命令

composer require goldnead/statamic-component

如何使用

创建组件

要创建组件，只需在您的 resources/components 文件夹中创建一个文件夹。文件夹的名称将是组件的名称。

在文件夹内部，您可以添加以下任何文件/文件夹

views - 此文件夹可以包含任意数量的 Antlers 或 Blade 模板。如果您只有一个文件，可能希望将其命名为 _template.antlers.html 或 _template.blade.php。
fieldsets - 此文件夹可以包含任意数量的字段集。字段集会自动命名空间到组件名称。您可以在控制面板的 字段集 部分中找到和编辑它们，就像您处理常规字段集一样。
<Component-Name>.php - 此文件是主组件文件。它的名称必须与文件夹名称相同，并使用驼峰式命名。

使用组件

要使用组件，您可以像使用 {{ partial }} 标签一样使用 {{ component }} 标签。实际上，{{ component }} 标签只是 {{ partial }} 标签的扩展

{{ component:audio-player }} {{# this will use the view located in 'resources/components/AudioPlayer/views/_template.antlers.html' #}}

或者，您可以使用带有 src 参数的 {{ component }} 标签

{{ component src="audio-player" }}

说实话，就是这样。您可以像使用 {{ partial }} 标签一样使用 {{ component }} 标签。

配置

配置文件

您可以从项目根目录运行以下命令来发布配置文件

php please vendor:publish --tag=statamic-component

这将在您的 config/Statamic 文件夹中创建一个 statamic-component.php 文件。配置文件包含以下选项

components_path - 组件文件夹的路径。这是相对于项目根目录的相对路径。默认为 resources/components。您还有一个方便的 component_path() 辅助函数可以在 PHP 代码中使用。
component_namespace - 这是组件目录的命名空间。它用于自动加载组件，并且仅在您使用自定义组件类扩展组件类时使用。默认为 App\\Components。

字段集命名空间和字段集类型

命名空间

默认情况下，字段集被命名空间到组件名称。这意味着，如果您有一个名为 audio-player 的组件和一个名为 settings 的字段集，该字段集将被命名空间到 audio-player.settings。

字段集类型

字段集类型是一种动态使用字段集的方法，就像您在 Replicator 或 Bard 集合内部使用它们一样。

{{ article }}
  {{ component :src="type" }}
{{ /article }}

例如，如果您有一个名为 Audio 的组件，它有一个名为 track 和 playlist 的字段集，这两个字段集都绑定到不同的视图，您可以使用这种方法来避免将连接到视图的逻辑污染您的模板。您可以在您的 <Component-Name>.php 文件中配置此功能。

<?php

namespace App\Components;

use Goldnead\StatamicComponent\Component;

class Audio extends Component
{
    public $fieldsetTypes = [
        // connects the 'audio_track' fieldset to the 'player' view
        'audio_track' => 'player',
        // connects the 'audio_playlist' fieldset to the 'playlist' view
        'audio_playlist' => 'playlist',
    ];
}

这样，您可以定义您的文章字段集/蓝图如下

title: Article
fields:
  -
    handle: article
    field:
      ...
      sets:
        audio_playlist:
          display: 'Audio Playlist'
          fields:
            -
              import: 'audio::playlist' # use :: to tell statamic to look for a fieldset inside of specific namespace
        audio_track:
          display: 'Audio Track'
          fields:
            -
              import: 'audio::track'

前端构建

如前所述，此插件不包含任何样式表或 JavaScript 构建过程。这是因为您可能正在使用自己的构建过程。

但是，这里有一个快速示例，说明您如何使用此插件通过 vite 创建具有样式表和 JavaScript 文件的组件。

// resources/js/site.js
import * as AudioPlayer from "../components/Audio/Player";

document.addEventListener("DOMContentLoaded", () => {
  AudioPlayer.init();
});

// resources/components/Audio/Player.js

import "./styles/_player.scss";

export function init() {
  console.log("Audio Player initialized");
}

许可证

MIT 许可证

以下是对任何获得此软件及其相关文档副本（“软件”）的人的授权，免费使用该软件，不受限制，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，并允许向获得软件的人提供软件副本，前提是遵守以下条件

goldnead / statamic-component

维护者

详细信息