如何使用单个Wix动态页适配站点菜单下多类条目展示

你当前的多页复制维护问题不需要依赖Wix原生动态页的固定数据集绑定能力，通过自定义路由参数+通用查询逻辑就能用1个页面覆盖所有分类、艺术家维度的展示需求，原有功能代码可以90%以上复用。

前置准备 #

• 已上线草稿站点：wingspan.info
• 现有菜单结构参考：
  
• 提前备份现有单页的所有UI组件、功能代码，避免调整过程中丢失配置

具体实现步骤 #

• 新建通用动态页
  在Wix编辑器中新建1个空白动态页，路由前缀统一设为/gallery，不需要绑定固定的作品数据集，直接把之前调试好的画廊组件、展览板块组件、样式交互全部复制到这个新页面上，确保单页基础展示效果和原有页面完全一致。
• 改造数据查询逻辑
  把原有代码中写死的作者、分类筛选条件，替换为从URL路径读取动态参数的逻辑，核心实现代码参考：

  import wixData from 'wix-data';
  import wixLocation from 'wix-location';
  
  $w.onReady(async function () {
    // 解析URL路径拿到筛选维度
    const path = wixLocation.path;
    // 路由规则约定：/gallery/[作品分类]/[艺术家名]
    const currentCategory = path[1];
    const currentArtist = path[2];
  
    // 拼接查询条件
    let artworkQuery = wixData.query("你的作品数据集表名");
    // 非全部分类时加分类筛选
    if (currentCategory && currentCategory !== 'all') {
      artworkQuery = artworkQuery.eq("分类字段名", currentCategory);
    }
    // 非全部艺术家时加作者筛选
    if (currentArtist && currentArtist !== 'all') {
      artworkQuery = artworkQuery.eq("作者字段名", currentArtist);
    }
    // 查询数据绑定到画廊组件
    const artworkRes = await artworkQuery.find();
    $w("#画廊组件ID").data = artworkRes.items;
  
    // 展览板块用同样逻辑，根据当前艺术家参数拉取对应参展数据即可
  });
  

• 批量修改菜单跳转规则
  保留现有菜单的层级、文字完全不变，只需要把每个菜单项原来指向12个独立复制页的跳转地址，替换为带对应参数的动态页地址即可：
  • Andrew名下的绘画分类菜单，跳转地址设为/gallery/painting/andrew
  • Helen名下的iPad艺术分类菜单，跳转地址设为/gallery/ipad-art/helen
  • 雕塑全作者展示入口，跳转地址设为/gallery/sculpture/all
    调整后URL路径可以和原来的路径完全一致，不会影响已有的访问入口，也不需要额外做跳转适配。
• 兜底兼容配置
  给页面加简单的参数校验：如果URL传入的分类、艺术家参数不存在，默认加载全量作品数据，避免出现空白页；同时可以根据当前读取到的分类、艺术家参数，动态修改页面标题、面包屑文案，保证SEO和访问体验和原来的多页模式无差异。

维护效率说明 #

改造完成后所有设计调整、功能迭代只需要修改这1个动态页，所有分类、艺术家维度的页面展示会自动同步更新；后续非技术背景的维护人员只需要在后台数据集里新增/修改作品、展览信息即可，完全不需要接触页面代码或配置。

注：Wix官方原生动态页默认是绑定单数据集单字段路由的，本身就不支持多维度筛选的单页多场景适配，不需要找对应官方文档，上述自定义参数的实现方式是这类场景的通用解法。

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