README

此扩展向 Fluid 模板添加了 ViewHelpers，以便动态地将 CSS、JS 和 SVG 文件以及 CSS 内联字符串添加到 HTML 文档中。此外，还包括通过注册表添加的 JS 文件，只需添加一次，也可以通过 TypoScript 实现。

与 TYPO3 核心功能相比，主要优势在于 AssetCollector API 是一种简单的方法，使集成者不必担心重复添加资产条目，只需包含必要的资产。这样，集成者可以构建内容类型或插件，并将必要的资源附加到单个内容类型上，即使它被任何编辑多次添加。

安装与需求

使用 composer req b13/assetcollector 或通过使用扩展密钥 assetcollector 从 TYPO3 扩展存储库的扩展管理器安装它。

要使用此扩展，您需要 TYPO3 v9 或更高版本。

JavaScript 包含

当通过 TypoScript 或基于内容元素的 Fluid 模板添加 JavaScript 文件时很有用。与 TYPO3 核心相比，以下功能是可用的

JavaScript 资源可以多次添加，但只会添加一次。
通过具有灵活的 API，可以直接添加“async”或“amp”等额外属性。

所有 JavaScript 数据始终添加在“head”标签内。

如果通过 TypoScript 添加，则适用以下语法

page.jsFiles {
    analytics = https://analytics.b13.com/track.js
    analytics.async = 1
    analytics.data-myattribute = true
}

CSS 内联器

当需要添加基于编辑器添加到页面的内容的“above the fold”内容的目标内联 CSS 时很有用，或者添加为特定断点（媒体查询可以在 html head 中使用，而不是使用 style 属性在特定元素中使用的内联样式）添加背景图像的内联样式时很有用。

示例

在您的 Fluid 模板中使用 ViewHelper 将 CSS 文件或内联 CSS 代码添加到使用此模板文件的任何页面的头部

<ac:css file="EXT:myext/Resources/Public/Css/myCssFile.css"/>

将 myCssFile.css 的内容内联为 HTML 文档头部的 style 块。

<ac:css>.b_example { color: red; }</ac:css>

将字符串 .b_example { color: red; } 添加到 HTML 文档头部的内联样式块中。

请记住在您的 Fluid 模板中添加 Fluid 命名空间（或全局进行此操作，见下文）

<html 
    xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    xmlns:ac="http://typo3.org/ns/B13/Assetcollector/ViewHelpers"
    data-namespace-typo3-fluid="true"
>

CSS 文件包含

包含选项对于将 CSS 文件作为基于页面内容的引用的外部文件很有用。根据 CSS 的大小以及使用内联 CSS 的页面数量，将 CSS 内联到页面可能不是最佳选择。在您的安装的所有页面上包含 CSS 文件可能会导致一些内容页包含过多的 CSS。

可以使用包含 CSS 的 ViewHelper 在您的 Fluid 模板中将 CSS 文件作为外部文件包含，通过添加 external="1"。这会将 CSS 文件引用添加到您的 <html> 文档的 <head> 部分

<ac:css file="EXT:myext/Resources/Public/Css/myCssFile.css" external="1" />

这将向您的文档 <head> 中添加以下代码

<link rel="stylesheet" type="text/css" href="/typo3conf/ext/myext/Resources/Public/Css/myCssFile.css" media="all">

您还可以为 media 参数指定一个值

<ac:css file="EXT:myext/Resources/Public/Css/myCssFile.css" external="1" media="print" />

SVG 地图内联

使用视图助手将 SVG 文件作为内联地图添加。可以使用文件路径或 TypoScript 设置中设置的图标名称添加文件。

这仅包含在给定页面上需要的图标，作为 svg 地图中的一个内联 SVG 符号。

示例

使用文件路径

<ac:svg file="EXT:myext/Resources/Public/Svg/myIconFile.svg" class="b_myIconClass"/>

这会将 svg 内联代码添加到您的模板输出中

<svg><use xlink:href="#icon-myIconFile"></use></svg>

并将来自 myIconFile.svg 的符号添加到页面的内联 SVG 地图中。文件名应该是唯一的，并用于在 <use> 标签中识别图标。相同的文件名多次使用将导致图标仅正确地包含一次（在 SVG 地图中）。

使用在您的 TypoScript 设置中设置的名字/标识符

plugin.tx_assetcollector.icons {
  iconName = EXT:myext/Resources/Public/Svg/myIconFile.svg
}

<ac:svg name="iconName" class="b_myIconClass" />

这将使用 iconName 作为标识符，将 svg 内联代码添加到您的模板输出中。

关于 svg 地图自动渲染的说明

svg 文件被解析，第一个 <svg> 标签的所有子元素都包含在 svg 地图中的一个 <symbol> 部分中。符号的 id 将是 icon-<filename>，并且原始 <svg> 标签的 viewBox 将作为属性添加到 <symbol> 标签中。所有 <symbol> 部分都将被包装

<svg aria-hidden="true" style="display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol></symbol>
    <symbol></symbol> 	
  </defs>
</svg>

全局注册 Fluid 命名空间

如果您想全局注册 fluid 命名空间，请将以下内容添加到您的站点扩展 ext_localconf.php

$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['ac'][] = 'B13\Assetcollector\ViewHelpers';

许可证

此扩展根据 GPL v2+ 许可，与 TYPO3 内核相同。有关详细信息，请参阅此存储库中的 LICENSE 文件。

开放问题

如果您发现任何问题，请随时在 GitHub 上创建问题或拉取请求。

鸣谢

此扩展由 David Steeb 在 2019 年为 b13 GmbH 创建。

查找我们开发的更多 TYPO3 扩展，这些扩展有助于我们在客户项目中提供价值。作为我们工作的一部分，我们专注于测试和最佳实践，以确保我们所有代码的长期性能、可靠性和结果。

b13/assetcollector

维护者

详细信息