README

Statamic 工具，只包含一次 css/js 源代码。当您想要包含特定部分/集的专用文件，这些文件在模板中通常会多次包含时，这可能很有用。

假设一个基本的 Statamic 蓝图，具有一个复制器字段 pagebuilder，该字段在模板中堆叠集合

<!-- page-template.antlers.html -->

{{ pagebuilder }}
    {{ partial:if_exists src="sets/{type}" }}
{{ /pagebuilder }}

进一步假设存在一个 'image' 和一个 'gallery' 集合，这两个集合都需要专门的 JavaScript 源代码文件

<!-- sets/image.antlers.html -->

<img src"…" class="lightbox">

{{ once }}
    {{ push:scripts }}
        {{ vite src="resources/js/lightbox.js" }}
    {{ /push:scripts }}
{{ /once }}

<!-- sets/gallery.antlers.html -->

<ul class="gallery">
    …
</ul>

{{ once }}
    {{ push:scripts }}
        {{ vite src="resources/js/lightbox.js|resources/js/slider.js" }}
    {{ /push:scripts }}
{{ /once }}

通过使用 once 标签，我们尝试确保只包含每个源一次。将 scripts 堆叠渲染在布局中。

但是，如果您在一个页面上添加了图像和画廊，则 lightbox.js 脚本文件将被添加两次。堆叠没有方法来确定文件是否已被添加。

这就是 SourceStack 发挥作用的地方。

如何安装

从您的项目根目录运行以下命令

composer require visuellverstehen/statamic-sourcestack

如何使用

让我们修改上述 Statamic 设置。我们不是使用 scripts 堆叠来处理我们的 js 源代码，而是使用此包中包含的 sourcestack 标签

<!-- sets/image.antlers.html -->

<img src"…" class="lightbox">

{{ sourcestack src="resources/js/lightbox.js" }}

该标签收集模板中的所有源代码，确保每个源代码只添加一次。最终，sourcestack:render 标签将所有收集到的源代码渲染为一个 vite 源代码标签。

<!-- layout.antlers.html -->
<!-- … -->

<body>
    <main>
        {{ template_content }}
    </main>
    
    {{ sourcestack:render }}
</body>

您还可以使用标签别名 srcstk。可以通过 src、source 或 file 参数添加源。输出可以通过 render 或 vite 生成。

{{ srcstk src="lightbox.js" }}
{{ srcstk:vite }}

就像在 vite 标签中一样，您可以一次添加多个源。文件必须通过逗号 (,) 或竖线 (|) 分隔。

{{ srcstk src="lightbox.js|gallery.js" }}

专用堆叠

如果您需要为不同的源定义多个堆叠，您可以在配置文件中定义专用堆叠

'stacks' => [
    'css' => [
        'base_dir' => 'resources/css/',
        'extension' => 'css',
    ]
],

对于每个堆叠，您可以可选地定义基本目录和文件扩展名。假设上面的示例，标签将像这样使用

{{ sourcestack:css src="gallery" }}
{{ sourcestack:render stack="css" }}

请注意，堆叠不能命名为 render 或任何解析为 Sourcestack 标签类公共函数名称的字符串。

注意事项

SourceStack 当前构建的方式要求输出在收集所有源代码之后调用。但是，您可以使用 Statamics 部分和 yield 逻辑将例如包含 css 文件的堆叠移动到 <head> 元素中

<head>
    <!-- … -->
    
    {{ yield:css-sources }}
</head>
<body>
    <!-- … -->
    
    {{ section:css-sources }}
        {{ sourcestack:render stack="css" }}
    {{ /section:css-sources }}
</body>

配置

除了专用堆叠（见上文）之外，您还可以在 config/sourcestack.php 中配置用于所有常规源文件路径的默认基本目录。

关于我们

www.visuellverstehen.de

许可证

MIT 许可证（MIT）。请参阅许可证文件获取更多信息。

visuellverstehen / statamic-sourcestack

维护者

详细信息