Neos CMS的Fusion文件AFX语法内script脚本不生效问题求助

你遇到的AFX忽略script脚本的问题是Neos Fusion AFX的默认特性导致的：直接写在AFX模板内的原生<script>标签不会被正常解析输出到最终页面，需要用标准的Neos资源注入方式处理。

解决方案 #

• 方案1：全局注入脚本（最推荐）
  不要在组件的renderer内直接引入脚本，将依赖脚本注册到Neos页面的全局脚本集合中，避免重复加载，示例配置：

  # 放在你的站点根Page配置里
  page = Neos.Neos:Page {
    footerJavaScripts {
      jquery = Neos.Fusion:Tag {
        tagName = 'script'
        attributes.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'
        attributes.async = false
      }
      counterup = Neos.Fusion:Tag {
        tagName = 'script'
        attributes.src = 'https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js'
        depends = 'jquery'
      }
      waypoints = Neos.Fusion:Tag {
        tagName = 'script'
        attributes.src = 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js'
        depends = 'jquery'
      }
      customFunction = Neos.Fusion:Tag {
        tagName = 'script'
        # 用官方资源方法生成路径，避免路径错误
        attributes.src = Neos.Flow:Resource.resource('Example.ExampleTwo', 'Public/ExampleThree/function.js')
        depends = 'counterup'
      }
    }
  }
  

• 方案2：组件内局部注入脚本
  如果你只需要在当前组件加载对应脚本，可以用Neos.Fusion:Tag手动渲染script标签，替换你原来直接写的<script>标签即可，示例：

  renderer = afx`
    <div id="serviceFour" class="container">
        <!-- 此处保留你原来的所有HTML结构 -->
    </div>
  
    <Neos.Fusion:Tag tagName="script" attributes.src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />
    <Neos.Fusion:Tag tagName="script" attributes.src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js" />
    <Neos.Fusion:Tag tagName="script" attributes.src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js" />
    <Neos.Fusion:Tag tagName="script" attributes.src={Neos.Flow:Resource.resource(package: 'Example.ExampleTwo', path: 'Public/ExampleThree/function.js')} />
  `
  

• 额外注意事项
  你的动画初始化代码需要确保DOM加载完成后执行，把function.js里的计数器初始化逻辑包裹在$(document).ready(function() { /* 你的初始化代码 */ })中，避免元素还没渲染就执行脚本导致失效。如果站点其他位置已经加载过jQuery，要删除重复的jQuery引入，避免版本冲突。

内容的提问来源于stack exchange，提问作者marekus