开发预览更新于 2026-05-10

Link 链接

设计稿一致的链接样式，4 种 variant、3 种尺寸、自动识别外部链接、可禁用。

基础用法

最常见的两种 — 站内锚点跳转 / 外部网址。外部链接（href 以 http:// 或 https:// 开头）会自动加尾部小图标、rel="noopener noreferrer"。

<CfLink href="#getting-started">前往入门指南</CfLink>
<CfLink href="https://github.com/chenqi92/chufix">GitHub 仓库</CfLink>

<CfLink href="#getting-started">前往入门指南</CfLink>
<CfLink href="https://github.com/chenqi92/chufix">GitHub 仓库</CfLink>

4 种 variant

default — 主色，hover 出下划线
subtle — 跟随父级文字颜色，hover 才显示下划线（嵌入正文段落里很合适）
underline — 永久带下划线（特别强调可点击）
inverse — 反色面板（accent 背景）内使用，避免主色与背景冲突

default · 主色，hover 下划线 subtle · 跟随父级颜色，hover 显示下划线 underline · 永久带下划线

inverse · 反色面板内使用

<CfLink href="#" variant="default">default</CfLink>
<CfLink href="#" variant="subtle">subtle</CfLink>
<CfLink href="#" variant="underline">underline</CfLink>
<div style="background: var(--accent-1); color: var(--fg-on-accent); padding: 6px 10px;">
<CfLink href="#" variant="inverse">inverse</CfLink>
</div>

<CfLink href="#" variant="default">default</CfLink>
<CfLink href="#" variant="subtle">subtle</CfLink>
<CfLink href="#" variant="underline">underline</CfLink>
<div style={{ background: 'var(--accent-1)', color: 'var(--fg-on-accent)', padding: '6px 10px' }}>
<CfLink href="#" variant="inverse">inverse</CfLink>
</div>

外部链接

三种触发方式都会让组件认作外链 — 自动加尾部图标 + rel="noopener noreferrer"：

href 以 http:// / https:// 开头
显式 external prop
target="_blank"

自动识别（http / https 开头）显式标记 external 强制加图标 target=_blank（新窗口）

<CfLink href="https://github.com/chenqi92/chufix">自动识别</CfLink>
<CfLink href="/internal" external>显式 external</CfLink>
<CfLink href="#" target="_blank">target=_blank</CfLink>

<CfLink href="https://github.com/chenqi92/chufix">自动识别</CfLink>
<CfLink href="/internal" external>显式 external</CfLink>
<CfLink href="#" target="_blank">target=_blank</CfLink>

尺寸 / 禁用

size 控制字号；disabled 阻止点击并把光标置灰。

小号默认大号已禁用 — 阻止点击

<CfLink href="#" size="sm">小号</CfLink>
<CfLink href="#" size="md">默认</CfLink>
<CfLink href="#" size="lg">大号</CfLink>
<CfLink href="#" disabled>已禁用</CfLink>

<CfLink href="#" size="sm">小号</CfLink>
<CfLink href="#" size="md">默认</CfLink>
<CfLink href="#" size="lg">大号</CfLink>
<CfLink href="#" disabled>已禁用</CfLink>

API

属性	类型	默认值	说明
`href`	`string`	`—`	链接地址
`target`	`string`	`—`	同原生 `<a target>`
`rel`	`string`	自动	外链时自动写 `noopener noreferrer`
`external`	`boolean`	`false`	显式标记为外链；显示尾部图标
`variant`	`'default' \| 'subtle' \| 'inverse' \| 'underline'`	`'default'`	视觉模式
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字号
`disabled`	`boolean`	`false`	禁用