DEV Community
·
停止使用框架特定的 组件。请改用这个...
💡
原文英文，约2100词，阅读约需8分钟。
📝
内容提要
许多JS框架提供<Link>组件，但CMS生成的HTML中的锚点不支持。SvelteKit允许直接使用<a>标签，简化实现。文章讨论了如何在Next.js中实现类似功能，包括事件监听、链接信息提取和预加载设置，并提供了代码示例和详细解释。
🎯
关键要点
- 许多JS框架提供<Link>组件，但CMS生成的HTML中的锚点不支持。
- SvelteKit允许直接使用<a>标签，简化实现。
- 文章讨论了如何在Next.js中实现类似功能，包括事件监听、链接信息提取和预加载设置。
- 实现的关键在于浏览器事件的冒泡，设置文档元素的点击事件监听器。
- 提供了代码示例，详细解释了如何处理锚点和链接信息。
- 支持通过data属性配置链接选项，类似于SvelteKit的实现。
- 需要在Next.js的<body>元素上添加data-linky-preload="hover"属性以支持预加载。
- 创建一个包装组件以应用特殊的数据属性，并全局配置预取功能。
➡️
