Hybris HAC：如何根据环境切换背景颜色？

嘿，这个需求简直是运维/开发人员的福音——一眼区分环境能避免太多误操作！我来分享几个在Hybris里实现HAC背景色按环境区分的靠谱方案，优先推荐不修改核心代码的扩展式实现：

方法一：自定义HAC主题（推荐，无核心代码修改） #

这个方案遵循Hybris的扩展机制，升级Hybris时不会丢失自定义配置，步骤如下：

1. 创建/使用自定义扩展

   • 如果你还没有自定义扩展，用Hybris的ant extgen命令生成一个（比如命名为customhac），或者直接用现有业务自定义扩展。
   • 将扩展添加到localextensions.xml中，确保Hybris启动时加载它。

2. 添加环境专属CSS
   在自定义扩展的resources目录下创建路径hac/css/，新建custom.css文件，写入环境对应的样式：

   /* 开发环境 - 蓝色 */
   .environment-dev .hac-header {
       background-color: #1E90FF !important;
       color: #fff !important; /* 可选：确保文字颜色对比明显 */
   }
   
   /* 测试环境 - 绿色 */
   .environment-test .hac-header {
       background-color: #32CD32 !important;
       color: #fff !important;
   }
   
   /* 生产环境 - 红色 */
   .environment-prod .hac-header {
       background-color: #DC143C !important;
       color: #fff !important;
   }
   

   !important是为了强制覆盖HAC默认的样式，确保自定义颜色生效。

3. 传递环境标识到页面

   • 在每个环境的local.properties文件中添加环境标识：

     # 开发环境
     environment=dev
     # 测试环境改成 environment=test，生产环境改成 environment=prod
     

   • 覆盖HAC的header模板：在自定义扩展的web/webroot/WEB-INF/views/hac/include/路径下新建header.jsp，复制HAC核心的header.jsp内容，修改<body>标签，添加环境类：

     <body class="hac-body environment-${environment}">
     

     这里的${environment}会自动读取local.properties中的配置值。

4. 加载自定义CSS
   在刚才修改的header.jsp中，添加自定义CSS的引入代码（放在默认CSS引入之后）：

   <link rel="stylesheet" href="${resourceUrl}/hac/css/custom.css" />
   

方法二：JavaScript动态修改样式（快速临时方案） #

如果不想折腾扩展，也可以用JS动态修改样式，适合快速验证：

1. 在每个环境的local.properties中添加环境标识（同方法一）。
2. 找到HAC的footer.jsp（或其他全局加载的JSP），添加以下脚本：

   document.addEventListener('DOMContentLoaded', function() {
       const env = "${systemProperties.environment}";
       const header = document.querySelector('.hac-header');
       if (!header) return;
   
       switch(env) {
           case 'dev':
               header.style.backgroundColor = '#1E90FF';
               header.style.color = '#fff';
               break;
           case 'test':
               header.style.backgroundColor = '#32CD32';
               header.style.color = '#fff';
               break;
           case 'prod':
               header.style.backgroundColor = '#DC143C';
               header.style.color = '#fff';
               break;
       }
   });
   

   这个脚本会在页面加载完成后，根据环境变量修改header的背景色。

注意事项 #

• 无论用哪种方法，都要确保每个环境的local.properties中environment配置正确，避免混淆。
• 方法一虽然步骤多，但长期维护更友好，升级Hybris时只需同步模板文件的变动即可。
• 除了背景色，还可以在header添加环境标签（比如<span class="env-tag">DEV</span>），结合CSS样式进一步强化区分。

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