Spartacus 3.3 页面与组件自定义最佳入门方法咨询

一、从CMS识别首页及组件清单 #

• 首页标识：你本地已配置baseSite，默认对应CMS中label为/home的页面，可直接在CMS后台通过该label筛选到首页记录
• 快速获取首页组件清单：
  1. 打开本地Spartacus首页，在URL末尾添加参数?cmsdebug=true，开启CMS调试模式
  2. 页面所有CMS组件会显示悬浮调试标签，标注组件类型、UID、所属Slot信息，鼠标hover即可查看对应组件的基础属性
  3. 也可通过浏览器开发者工具的网络面板，筛选pages接口请求，返回结果中包含首页所有Content Slot、对应Slot下的所有组件列表及组件的CMS字段信息

二、页头、页脚、页面内容自定义最佳路径 #

Spartacus组件自定义核心逻辑为「CMS组件类型映射替换」，你熟练掌握Angular的前提下可按照以下路径实现：

通用自定义逻辑 #

• 仅调整样式：直接覆盖Spartacus全局CSS变量，或在样式文件中使用深度选择器修改指定组件样式，无需替换组件逻辑
• 调整结构/交互：
  1. 先通过上述调试模式确认你要修改的组件对应的CMS组件类型
  2. 新建自定义Angular组件，通过@Input() component接收CMS传入的组件数据，按照设计稿实现模板与交互逻辑
  3. 在根模块的ConfigModule配置中，将自定义组件和目标CMS组件类型绑定映射即可

各模块特殊说明 #

• 页头：默认归属CMS的HeaderSlot，可选择整体替换页头根组件，也可单独替换Slot下的logo、导航栏、搜索框、迷你购物车等子组件
• 页脚：默认归属CMS的FooterSlot，逻辑与页头一致，可按需整体或局部替换
• 首页内容：如需调整组件的排布顺序、增删组件，直接在CMS后台首页对应的Content Slot中操作即可，前端无需修改代码即可自动同步CMS配置

三、分步操作示例（以自定义首页Banner组件为例） #

1. 开启CMS调试模式，确认首页Banner对应的CMS组件类型为SimpleBannerComponent
2. 执行Angular CLI命令生成自定义组件：ng generate component components/custom-banner
3. 在custom-banner.component.ts中添加CMS数据接收参数：

import { Component, Input } from '@angular/core';
import { SimpleBannerComponentModel } from '@spartacus/core';

@Component({
  selector: 'app-custom-banner',
  templateUrl: './custom-banner.component.html',
  styleUrls: ['./custom-banner.component.scss']
})
export class CustomBannerComponent {
  @Input() component: SimpleBannerComponentModel;
}

4. 在custom-banner.component.html中按照设计稿编写模板，绑定component中的图片、链接、文本等字段
5. 在app.module.ts的imports数组中添加组件映射配置：

import { ConfigModule } from '@spartacus/core';

@NgModule({
  imports: [
    // 其他现有配置
    ConfigModule.withConfig({
      cmsComponents: {
        SimpleBannerComponent: {
          component: CustomBannerComponent
        }
      }
    })
  ],
  declarations: [CustomBannerComponent]
})
export class AppModule { }

6. 重启开发服务，访问首页即可看到默认Banner已替换为自定义实现

内容的提问来源于stack exchange，提问作者Madison B.