悠悠楠杉
网站页面
NuxtContent中禁用Markdown标题自动锚点链接的教程
11/30
Markdown 标题自动添加锚点链接（anchor links）。虽然这一功能对长文档的导航非常友好，但在某些设计风格统一、追求简洁排版的项目中，这些自动生成的锚点图标反而显得多余，甚至破坏了视觉平衡。
@nuxt/content 自动注入的 remark-slug 和 remark-autolink-headings 插件驱动。前者为每个标题生成唯一的 id 属性，后者则在此基础上插入可点击的链接图标。因此，要禁用锚点，关键在于移除或配置这两个插件的行为。
字段。如果不存在，可以手动添加。我们的目标是覆盖默认的 remarkPlugins 和 rehypePlugins 设置，从而阻止锚点相关插件的加载。
ts
export default defineNuxtConfig({
content: {
markdown: {
remarkPlugins: [
// 可以在这里保留其他需要的 remark 插件
// 注意：不要引入 remark-slug 或 remark-autolink-headings
],
rehypePlugins: {
// 同样，避免加载可能影响锚点的 rehype 插件
}
}
}
})
但这里有一个陷阱：完全清空 remarkPlugins 可能会导致其他基础功能丢失，比如代码高亮或表格样式。更稳妥的做法是继承默认插件列表，仅剔除锚点相关部分。
Nuxt Content 并未直接暴露默认插件列表，但我们可以通过查阅其源码或社区实践得知，remark-autolink-headings 正是锚点图标的来源。因此，我们可以显式地将其排除，并手动控制是否启用 remark-slug。
如果你仍希望保留标题的 id（用于页面内跳转），但不想显示链接图标，可以只禁用 autolink 部分：
ts
export default defineNuxtConfig({
content: {
markdown: {
remarkPlugins: [
'remark-slug', // 保留 id 生成
// 不引入 autolink 插件
],
rehypePlugins: []
}
}
})
这样，所有 h1 到 h6 标签仍会有 id="your-title"，但不会出现悬浮的 # 链接图标。
另一种更彻底的方式是完全关闭 remark-slug，这样连 id 都不会生成，真正实现“纯净标题”。适用于不需要页面内锚点跳转的场景：
ts
export default defineNuxtConfig({
content: {
markdown: {
remarkPlugins: [] // 完全自定义，不启用 slug 或 autolink
}
}
})
完成配置后，重启开发服务器，刷新页面，你会发现原本出现在标题右侧的小锚点符号已经消失不见。此时再检查 HTML 结构，会发现 <h2> 等标签不再包含嵌套的 <a> 元素，页面更加干净。
此外，若你使用了自定义组件渲染内容（如通过 <ContentRenderer>），也可以结合 CSS 进一步确保无残留样式：
css
/* 防止旧样式残留 */
.prose h1 a, .prose h2 a, .prose h3 a {
display: none !important;
}
不过这种方式属于“补救措施”，最佳实践仍是通过配置层面从根本上解决问题。
