(盖茨比)自动链接标题，但使整个标题成为锚

Question

我正在使用gatsby-remark-autolink-headers插件为标题创建带有锚标记的自动ID。

但是，我希望我的整个标题都是可点击的。我不想在它之前或之后有一个可点击的锚标签。

我想要的示例：

<h2 id="innsatsen-for-mikroplasten"><a href="#innsatsen-for-mikroplasten">Innsatsen før mikroplasten</a></h2>

这可以通过插件实现吗？

Answer 1

这可以通过插件实现吗？

不使用插件。所有的风格都类似于GitHub，在页眉之后或之前有一个可点击的锚标记，所以我担心你应该使用markdown-to-jsx这样的解析器找到一个自定义实现，在那里你可以覆盖任何自定义HTML表示：

const YourAutolinkTitle= ({ children, ...props }) => (
<div {...props} onClick={()=>yourFunc(children)}><h1>{children}</h1></div>
);
const yourFunc=(title)=>{
console.log(title)
}
return(
<Markdown
options={{
overrides: {
h1: {
component: YourAutolinkTitle,
props: {
className: 'foo',
},
},
},
}}
>
# Hello world!
</Markdown>,
);

其中包装div是在yourFunc函数中自定义点击URL的元素。