Drupal视图分类术语列添加Show more/less展开收起按钮实现方法

你遇到的问题核心是Drupal视图自带的截断功能是基于字符长度切割，无法识别多值引用字段的项边界，所以没法精准控制分类术语的展示个数，可通过以下两种方式实现需求：

方案1：无需自定义代码，使用专用模块快速配置 #

使用专门处理多值字段拆分的视图扩展模块实现，全程在视图后台配置即可：

1. 安装Views Field Split模块，启用后清除站点缓存
2. 编辑对应视图的Category分类字段，找到字段配置区新增的Split Settings选项卡
3. 按需求配置参数：
   • 将Initial visible items（初始可见项数量）设置为2
   • 开启Enable toggle（启用折叠/展开切换）选项
   • 分别把展开状态按钮文本设为show more，折叠状态按钮文本设为show less
   • 保存字段配置和视图即可
     该模块是按多值字段的项索引做拆分，不会出现截断单个分类术语内容的问题，输出结构和你预期的效果完全一致。

方案2：自定义模板+轻量JS实现（无模块依赖，灵活度最高） #

如果不想安装额外模块，可以通过覆写字段模板+少量原生JS实现，逻辑完全可控：

1. 调整字段基础配置
   编辑视图中的Category字段：
   • 关闭所有Trim截断相关配置
   • 在*Multiple field settings（多字段设置）*中设置好你需要的术语分隔符（比如逗号+空格），确保所有关联的分类术语都能完整输出，不丢内容
2. 覆写该字段的输出模板
   • 点开字段配置中的「Theme information（主题信息）」，复制该字段对应粒度最细的模板建议文件，放到你自定义主题的templates目录下
   • 在模板中拆分术语数组，将前2个术语和剩余术语分开渲染，参考代码结构：

     <div class="category-term-wrapper">
       {# 渲染前2个默认可见的术语 #}
       <span class="terms-default">{{ 拼接渲染前2个术语项，使用配置好的分隔符 }}</span>
       {% if 剩余术语数组不为空 %}
         {# 剩余术语默认隐藏 #}
         <span class="terms-remaining" style="display: none;">, {{ 拼接渲染剩余术语项 }}</span>
         <button type="button" class="term-toggle-btn">show more</button>
       {% endif %}
     </div>
     

3. 添加切换逻辑JS
   将以下原生JS代码加入主题的全局脚本文件，实现按钮的展开/折叠切换：

   document.addEventListener('click', function(e) {
     const toggleBtn = e.target.closest('.term-toggle-btn');
     if (!toggleBtn) return;
     const remainingBlock = toggleBtn.previousElementSibling;
     if (remainingBlock.style.display === 'none') {
       remainingBlock.style.display = 'inline';
       toggleBtn.textContent = 'show less';
     } else {
       remainingBlock.style.display = 'none';
       toggleBtn.textContent = 'show more';
     }
   });
   

配置完成后清除主题缓存和站点缓存即可生效。

之前尝试的方案为什么无效 #

• 系统自带的Trim（截断）功能是基于文本字符长度切割，无法识别多值引用字段的单个项边界，要么不支持引用字段，要么会把单个分类术语的内容截断
• 「多字段设置+重写结果」的组合本质还是对渲染后的文本字符串做处理，没有基于多值项的数组索引拆分，自然无法精准控制展示的术语个数

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