Drupal 9特定页面JS部署及锚点触发FAQ展开实现问询

1. 是否应通过libraries.yml添加新JS文件？ #

分两种场景选择：

• 如果你的现有架构是main.js作为统一入口加载所有模块，可以在js/modules下新增一个如faq-anchor.js的文件，然后在main.js里导入这个模块，适配现有代码结构。
• 但如果这个锚点展开功能仅针对FAQ页面，更推荐单独在*.libraries.yml里注册一个新库，示例配置：

faq_anchor:
  js:
    js/modules/faq-anchor.js: {}
  dependencies:
    - core/jquery
    - core/drupal.behaviors

之后仅在FAQ页面加载这个库，避免全局冗余加载，更高效。

2. 需否使用Drupal.behaviors的attach方法编写代码？ #

必须用，这是Drupal前端开发的标准规范：

• Drupal支持动态内容加载（比如AJAX刷新、区块异步加载），Drupal.behaviors的attach方法会在DOM首次就绪，以及后续内容更新时自动触发，确保代码能正确作用于目标元素。
• 不要用原生$(document).ready()，它仅执行一次，页面动态更新后代码不会重新运行，无法适配Drupal的动态特性。

3. 如何让JS仅作用于该特定FAQ页面？是否需通过UI编辑HTML并使用jQuery选择对应id？ #

不需要手动编辑HTML，有两种更优雅的实现方式：

方式一：通过页面专属类判断

Drupal会自动给<body>标签添加页面相关类，比如FAQ是节点的话，body会有page-node-[节点ID]类；如果是自定义路径页面，会有page-path-faq（假设路径为/faq）类。在JS里先判断类存在，再执行逻辑：

(function ($, Drupal) {
  Drupal.behaviors.faqAnchorAutoExpand = {
    attach: function (context, settings) {
      // 仅在FAQ页面执行
      if (!$('body').hasClass('page-path-faq')) return;

      const hash = window.location.hash;
      // 匹配FAQ锚点格式
      if (hash.startsWith('#faq-')) {
        const $target = $(hash, context);
        if ($target.length && $target.closest('.list--faq').length) {
          // 替换成你的折叠面板展开逻辑，比如添加激活类、显示内容
          $target.addClass('active').find('.faq-content').show();
        }
      }
    }
  };
})(jQuery, Drupal);

方式二：仅在FAQ页面加载专属库

如果FAQ是自定义节点类型，可在对应模板文件（如node--faq.html.twig）里添加库：

{{ attach_library('your_theme/faq_anchor') }}

也可以在Drupal后台通过页面布局/区块设置，给FAQ页面附加这个库。这样JS只会在该页面加载，从根源上限制作用范围，无需在JS内额外判断。

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