README

Neos CMS的Carbon.IncludeAssets包

使用此包，您可以通过几行代码在Settings.yaml中导入所有CSS和JavaScript资产。最佳实践是将carbon/includeassets包含到您的站点包的composer.json中。之后，您只需添加您的设置。除了文件名外，您还可以将所有必要的属性传递给标签。如果您无法提供文件扩展名，您可以通过在末尾添加(css)、(js)或(mjs)来强制类型。

您可以从多个包中定义多个文件。
您可以将文件名作为字符串（以逗号分隔）或作为数组（推荐）传递。
如果您想添加属性，请用方括号添加，例如Filename.js[async data-prop data-attr="true" class="-js-loader"]
如果您想将文件包含在内联中，请添加属性inline：例如Filename.css[inline]
您可以在一行中添加多个资源。例如：Slider.js,Main.css,Footer.css[async class="footer-styles"],Header[inline class="header-styles"],//ajax.googleapis.ac.cn/ajax/libs/webfont/1.6.26/webfont.js[async]
CSS也可以异步加载：添加属性async，例如Filename.css[async]
如果您想添加Google Fonts，可以按字体顺序写下它们，例如Lato|Open+Sans:400,700或Lato|Open+Sans:400,700[async]
对于内部文件，文件内容的哈希值会被附加。请注意，您必须从Neos中清除缓存以更新哈希值。这是为了在生产项目中添加缓存破坏者。
您还可以为浏览器提供一些资源提示：通过设置Carbon.IncludeAssets.ResourceHints全局地，或者通过在file条目末尾添加特殊类型（(preloadasset)、(preloadcss)、(preloadscript)或(modulepreload)）。
您还可以包含HTML文件的内容（例如Favicon.html）。这对于复制粘贴跟踪代码、favicons等很有用。HTML文件始终从内联路径读取并忽略所有属性。

设置的架构

在Carbon.IncludeAssets中，以下设置可用

包条目的架构

在Carbon.IncludeAssets.Packages中，您可以定义应输出资产的包。键首先按数字排序，然后按字符排序。这样，您可以定义包的加载顺序。单个条目可以有以下条目（默认值存储在Carbon.IncludeAssets.Default）

示例

这里有一个小示例

Carbon:
  IncludeAssets:
    LoadJSforCSSAsynchron: true
    ResourceHints:
      # Preconnect to these domains
      Preconnect:
        - "https://use.typekit.net"
        - "https://#"
        - "https://#"

    Packages:
      # The keys get sorted first by numbers, then by characters.
      aa_Theme:
        # Because no Package is defined, SitePackage from the default
        # will be used and will set to the site package.

        # Asset files which get loaded in live and backend view
        General:
          # These assets get loaded in the <head> (at the start)
          HeadStart:
            - Favicons.html

            # If a string starts with < and ends with an >, it get's inlucded as plain HTML
            - <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

          # These assets get loaded in the <head> (at the end)
          Head:
            # Preload this Javascript
            - JsForLaterUse.js(preloadscript)

            # Preload this asset
            - Logo.png[as="image"](preloadasset)

            # Load this CSS asynchronous
            - GeneralHead.css[async]

            # If a file has the attribute `inline`, the file gets
            # inlined. Also, a different path is used. This path is
            # set in under `Carbon.IncludeAssets.Default.Path.Inline.CSS`
            # and `Carbon.IncludeAssets.Default.Path.Inline.JS`
            - AboveTheFold.css[inline]

            # Run this javascript after to document is ready
            - GeneralHead.js[defer]

            # Add this javascript as a module
            - JavascriptModule.mjs

            # External files can also be defined.
            # It has to start with //, https:// or http://
            - //foo.bar/externalfile.js

            # If you can't provide a proper file extension you can force the type:
            - FileWithCustomFileExtension.ext(css)

            # This works also with external files
            - //foo.bar/externalfile.php[async](js)

          # This assets get loaded at the start of the <body>
          BodyStart:
            - NoscriptWarning.html

          # This assets get loaded at the end of the <body>
          Body:
            # You can also pass all attributes you want
            - GeneralBody.js[async class='-js-loader']

            # You can also pass further attributes if you use the inline attribute
            - AdditionSpecialFancyTracking.js[inline class="-js-tracking"]

        # Asset files which get loaded only in the backend
        Backend:
          # Arrays can also be defined like this
          Head: ["BackendHead.css", "BackendHead.js[inline]"]

        # Asset files which get loaded only in the live view
        Live:
          # You can set the value as a string, it will be automatically converted to an array
          Head: SingleLive.css
          Body: LiveBody.css,LiveBody.js[inline]

      # Example taken from Jonnitto.Plyr
      "zz_Jonnitto.Plyr":
        Package: "Jonnitto.Plyr"

        # The files get only included if the fusion prototype
        # Jonnitto.Plyr:IncludeCase` return a truthy value
        ConditionPrototype: "Jonnitto.Plyr:IncludeCase"

        # Ajust the paths for external files
        Path:
          File:
            CSS: "Public"
            JS: "Public"

        # Set the files
        General:
          Head:
            - plyr.min.js[defer]
            - plyr.css

查看Settings.yaml。在那里您可以看到所有可用的选项。

Fusion原型

基本上，您有两个包含 Fusion Prototypes 的文件夹：内部文件夹内部和外部文件夹外部。在 External 文件夹中，您可以找到一些原型，这些原型可以帮助您进行开发。

Carbon.IncludeAssets:Case

此原型是用于编写 ConditionPrototype 设置的原型的一个小助手。返回 true 或 false。

Carbon.IncludeAssets:Collection

此原型根据属性 collection 中定义的文件生成您的 script、style 和 link 标签。

Carbon.IncludeAssets:File

此包的核心。此原型生成一个 script、style 和 link 标签。您可以传递一个 file（带或不带路径）。请注意，您也可以传递上面描述的属性。要强制类型，您可以在 file 的末尾写上 (js)、(css)、(preloadasset)、(preloadcss)、(preloadscript) 或 (modulepreload)。

Carbon.IncludeAssets:ResourceHints

此原型渲染浏览器的资源提示。默认情况下，此原型读取 Settings.yaml。但您也可以传递 preloadNodes 或 prerenderNodes（数组、FlowQuery 或单个节点）以进行进一步优化。

与 Sandstorm.CookiePunch 的使用

如果您已安装 Sandstorm.CookiePunch，请在您的脚本条目中添加以下属性

- YourJSFile.js[data-never-block]

安装

大多数情况下，您需要对包进行一些小的调整（例如，Settings.yaml 中的配置）。因此，将相应的包添加到您的主题包的 composer 中很重要。通常，这是位于 Packages/Sites/ 下的站点包。要正确安装，转到您的主题包（例如 Packages/Sites/Foo.Bar）并运行以下命令

composer require carbon/includeassets --no-update

--no-update 命令可以防止自动更新依赖项。在将包添加到您的主题 composer.json 之后，返回 Neos 安装根目录并运行 composer update。好了！您想要的包现在已正确安装。

carbon / includeassets

维护者

详细信息