Sitecore NextJS：如何让React全宽横幅组件的Div背景图支持Experience Editor编辑？

1. Sitecore模板配置 #

• 在Sitecore中创建/编辑横幅组件的数据源模板，添加一个Image类型字段（例如命名为BannerBackgroundImage），设置允许上传图片、指定图片尺寸限制等规则。
• 将横幅组件的数据源关联到该模板，确保组件能读取到这个图片字段的数据。

2. Next.js组件实现 #

核心思路 #

通过Sitecore JSS提供的工具获取图片URL，将其设为容器的backgroundImage样式；同时添加编辑器识别属性，让Experience Editor能触发图片字段的编辑操作。

代码示例 #

import { useSitecoreContext } from '@sitecore-jss/sitecore-jss-react';
import { getImageUrl } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';

type BannerProps = ComponentProps & {
  fields: {
    BannerBackgroundImage: {
      value: {
        src: string;
        alt: string;
        width?: number;
        height?: number;
      };
    };
  };
};

const FullWidthBanner = ({ fields }: BannerProps) => {
  const { sitecoreContext } = useSitecoreContext();
  const isEditing = sitecoreContext?.pageEditing ?? false;

  // 获取图片URL，自动适配编辑模式预览地址
  const imageUrl = fields.BannerBackgroundImage?.value
    ? getImageUrl(fields.BannerBackgroundImage.value, {
        width: 1920, // 根据需求设置图片宽度，保证全宽显示效果
      })
    : '';

  // 横幅容器样式
  const bannerStyle = {
    width: '100%',
    minHeight: '400px',
    backgroundImage: imageUrl ? `url(${imageUrl})` : 'none',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  };

  return (
    <div
      style={bannerStyle}
      {/* 关键：添加编辑器识别属性，点击区域可触发图片字段编辑 */}
      {...(isEditing && {
        'data-sc-field': fields.BannerBackgroundImage?.fieldId,
        className: 'sc-editable-wrapper', // 编辑模式下添加标识样式，方便用户识别可编辑区域
      })}
    >
      {/* 可选：添加横幅文本/按钮等内容，使用Editable组件支持编辑 */}
      {/* <Editable field={fields.BannerTitle} /> */}
    </div>
  );
};

export default FullWidthBanner;

3. 关键细节说明 #

• getImageUrl工具函数：处理Sitecore图片的URL生成，支持添加缩放、格式转换等参数，同时自动适配编辑模式下的预览地址。
• data-sc-field属性：Experience Editor识别可编辑区域的核心标识，绑定图片字段的fieldId后，用户点击背景区域即可打开图片选择器。
• 编辑模式适配：通过sitecoreContext.pageEditing判断编辑状态，给容器添加专属样式，帮助用户快速定位可编辑区域。
• 背景图样式：backgroundSize: cover和backgroundPosition: center确保图片自适应容器，保持全宽且居中显示的效果。

4. 验证与测试 #

• 在Experience Editor中打开页面，点击横幅区域，应能触发图片字段的编辑弹窗，上传或更换图片后背景图实时更新。
• 正常访问模式下，图片以背景图形式渲染，保持全宽自适应的展示效果。

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