如何引入JS文件操作HTML，仿照assets.yml加载styles.css方法无效怎么办

先排查assets.yml引入失败的问题 #

支持assets.yml资源管理的框架（如Jekyll、Middleman等）对CSS和JS的配置规则存在差异，大概率是你仿照CSS配置时用错了字段，正确的JS引入配置示例如下：

javascripts:
  - path: /js/your-custom-script.js
    load: defer # 可选配置项，控制JS加载时机，避免阻塞DOM渲染

配置完成后需要在HTML模板的对应位置插入框架要求的资源引用锚点（比如Jekyll的{% javascript_asset_tag %}），这一步容易遗漏，漏加会导致JS不会被自动插入到HTML中。

其他通用可行的实现方式 #

• 直接在HTML中硬编码引入（兼容性最好） #

  直接在HTML文件的对应位置写入<script>标签即可：

  • 放在<body>标签末尾（优先推荐）：保证JS执行时页面DOM已经完全加载，不会出现找不到DOM节点的问题

    <body>
      <!-- 所有页面HTML内容 -->
      <script src="./your-script.js"></script>
    </body>
    

  • 放在<head>标签中：如果必须放在头部，需要加defer或async属性避免阻塞页面渲染

    <head>
      <!-- 其他头部配置 -->
      <script src="./your-script.js" defer></script>
    </head>
    

• 前端工程化工具引入 #

  如果你使用Vite、Webpack等工程化工具开发，无需手动修改HTML，直接在入口JS文件（通常为main.js/index.js）中导入即可：

  import './your-script.js'
  

  打包工具会自动处理依赖关系，将JS文件注入到最终生成的HTML中。

• 动态按需引入 #

  如果需要在特定触发条件下才加载JS，可以通过JS动态创建<script>标签插入DOM：

  const customScript = document.createElement('script')
  customScript.src = './your-script.js'
  customScript.onload = () => {
    // JS加载完成后执行的逻辑
  }
  document.body.appendChild(customScript)
  

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