如何使用Handlebars隐藏Patternlab中变体的排序索引？

我来帮你搞定这个Pattern Lab里的小麻烦～首先明确一点：你用数字前缀（比如01-header.hbs）给Pattern排序的操作完全没问题，这正是官方推荐的方式，索引显示在渲染页面里是默认行为，不是你操作出错啦。下面给你几个解决思路：

一、隐藏索引的方法 #

1. 用配置自动清理前缀（最简单） #

Pattern Lab自带了清理排序前缀的配置，你只需要修改项目根目录的patternlab-config.json文件，找到（或者添加）cleanPatternNames项并设置为true：

{
  "cleanPatternNames": true,
  // 其他原有配置...
}

保存后重启Pattern Lab的开发服务，渲染后的页面里就不会再显示那些数字索引前缀了。

2. Handlebars模板层面手动处理 #

如果配置方法不生效（比如你的版本比较旧），可以在Handlebars模板里手动去除前缀。首先确保你的项目里有字符串替换的helper，要是没有的话可以自己注册一个，然后在显示pattern名称的地方用替换逻辑：

{{replace patternName '^\\d+-' ''}}

这个正则表达式会把开头的数字加横线前缀去掉，只保留后面的pattern名称。

二、Handlebars的替代方案 #

Pattern Lab支持多种模板引擎，比如Twig、Mustache、Nunjucks都是不错的选择。切换引擎需要修改patternlab-config.json里的templateEngine配置项，然后把你的.hbs文件改成对应引擎的后缀（比如.twig、.njk）。不过要注意，不管用哪种引擎，排序前缀显示的问题解决思路都是类似的——要么靠配置自动清理，要么在模板里做字符串处理。

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