如何在KeystoneJS后台管理端添加可点击跳转链接？

我当初也碰到过和你一模一样的问题——想在KeystoneJS的后台管理界面加个能直接点击跳转的链接，试了String类型和Types.Url类型的字段：

link: { type: String },
url: { type: Types.Url }

结果这俩在后台都只显示成普通的文本输入框，根本没法直接点击打开网页，更别说在新标签页打开了。

后来我在KeystoneJS的官方GitHub Issues里找到了可行的解决办法，核心思路是自定义字段的后台渲染组件，让Url字段在后台展示为可点击的链接，并且支持新标签页打开。

具体实现步骤如下：

• 先写一个自定义的React组件，用来渲染Url字段为可点击的链接，记得加上target="_blank"和rel="noopener noreferrer"属性（这俩属性是为了安全和规范）
• 在你的列表配置里，把这个自定义组件绑定到对应的Url字段上

给你一个参考代码示例：

// 自定义Url链接渲染组件
const CustomUrlDisplay = ({ field }) => {
  if (!field.value) return null;
  return (
    <a
      href={field.value}
      target="_blank"
      rel="noopener noreferrer"
      style={{ color: '#0070f3', textDecoration: 'underline' }}
    >
      {field.value}
    </a>
  );
};

// 在你的列表配置中使用这个自定义组件
Keystone.createList('YourTargetList', {
  fields: {
    externalUrl: {
      type: Types.Url,
      adminConfig: {
        component: CustomUrlDisplay,
      },
      label: '外部链接',
    },
  },
});

这样配置之后，后台管理界面里的这个externalUrl字段就会显示成可点击的链接，点击后直接在新标签页打开对应的网页，完美解决了文本框不能跳转的问题。

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