如何基于关联页面字段配置动态锚点选项字段？

核心思路 #

把原有的单一关联字段拆分为页面选择和锚点选择两个独立字段，通过客户端动态查询实现：选完页面后仅加载该页面关联的锚点选项，避免全局锚点干扰，同时让非技术编辑无需手动输入slug。

具体配置代码 #

假设你的CTA字段属于某个文档类型（比如cta），更新字段配置如下：

// CTA字段组
{
  title: '页面锚点链接',
  name: 'pageAnchorLink',
  type: 'object',
  fields: [
    // 1. 页面选择字段
    {
      title: '关联页面',
      name: 'linkedPage',
      type: 'reference',
      to: [{ type: 'basicPage' }],
      weak: true,
      options: {
        disableNew: true,
      },
    },
    // 2. 动态锚点选择字段
    {
      title: '页面内锚点',
      name: 'selectedAnchor',
      type: 'string',
      // 未选页面时隐藏锚点字段
      hidden: ({ document }) => !document?.pageAnchorLink?.linkedPage,
      options: {
        // 动态加载选中页面的锚点选项
        list: async ({ document, client }) => {
          const selectedPage = document?.pageAnchorLink?.linkedPage;
          if (!selectedPage) return [];

          // 查询选中页面的锚点数据（根据你的实际结构调整GROQ）
          // 情况1：锚点是basicPage文档内的数组字段（推荐）
          const pageData = await client.fetch(`
            *[_id == $pageId][0]{anchors}
          `, { pageId: selectedPage._ref });

          // 情况2：锚点是独立的anchor文档，关联到basicPage
          // const anchors = await client.fetch(`
          //   *[_type == "anchor" && page._ref == $pageId]{title, slug}
          // `, { pageId: selectedPage._ref });

          // 生成选项列表，包含“不选锚点”选项
          const anchorOptions = pageData?.anchors?.map(anchor => ({
            title: anchor.title || anchor.slug.current,
            value: anchor.slug.current
          })) || [];

          return [
            { title: '不选择锚点', value: '' },
            ...anchorOptions
          ];
        },
      },
    },
  ],
}

前提配置（根据你的锚点存储方式调整） #

如果锚点是存在basicPage内的数组字段，需要确保basicPage有如下字段配置：

{
  title: '页面锚点',
  name: 'anchors',
  type: 'array',
  of: [
    {
      type: 'object',
      fields: [
        { title: '锚点显示名称', name: 'title', type: 'string' },
        { title: '锚点Slug', name: 'slug', type: 'slug', options: { source: 'title' } }
      ]
    }
  ]
}

方案优势 #

• 编辑体验友好：无需手动输入锚点slug，全下拉选择，降低出错概率
• 逻辑清晰：先选页面再选对应锚点，避免全局锚点的混乱
• 灵活性高：支持锚点存储在页面内或独立文档两种结构，适配不同项目需求
• 可扩展性：后续可轻松添加锚点的其他属性（如描述），不影响现有逻辑

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