为什么每次我点击其中一个链接时，我的 TOC 组件都会在其链接中添加 `{"-" + 1}`？

Question

我按照本教程在我的网站上实现了一个目录组件。

它有效，但每次我点击一个 TOC 的链接时，TOC 中的所有链接（包括点击的链接）都会附加{"-" + 1} 。 因此，如果我单击一个链接，所有这些链接 go 从#first-heading 、 #second-heading等到 # #first-heading-1 、 #second-heading-1等。如果我再次单击其中一个链接，他们都会得到#first-heading-2 、 #second-heading-2等等。 这种行为当然是有问题的，因为它会破坏链接。

这是什么原因造成的？ 我如何解决它？

我注意到教程使用 remark-slug插件作为标题，而我使用 gatsby-autolink-headers插件。 这可能是问题的根源吗？ 我无法使用前者进行测试，因为我在尝试安装它时遇到错误。

编辑：我试过这两个插件。 同样的问题。

TableOfContents.js

import React from "react"
import Slugger from "github-slugger"
import { Link } from "gatsby"

const slugger = new Slugger()

export default ({ headings }) => (
  <div className="table-of-contents">
    <h3>On this page</h3>
    <ol>
      {headings
        .filter(heading => heading.depth !== 1)
        .map(heading => (
          <li key={heading.value}>
            <Link
              to={"#" + slugger.slug(heading.value)}
            >
              {heading.value}
            </Link>
          </li>
        ))}
    </ol>
  </div>
)

post-template.js

import * as React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "../components/layout.js"
import Seo from "../components/seo.js"

const PostTemplate = ({ data, location }) => {
  let post = data.mdx

  return (
    <Layout location={location}>
      <Seo
        title={post.frontmatter.title}
        description={post.frontmatter.lead}
        date={post.frontmatter.computerDate}
      />
      <article className="article">
        <h1 itemprop="headline">{post.frontmatter.title}</h1>
        <p
          className="lead"
          itemprop="introduction"
        >
          {post.frontmatter.lead}
        </p>
        <MDXRenderer headings={post.headings}>
          {post.body}
        </MDXRenderer>
      </article>
    </Layout>
  )
}

export default PostTemplate

export const pageQuery = graphql`
  query PostBySlug($id: String!) {
    site {
      siteMetadata {
        title
      }
    }
    mdx(id: {eq: $id}) {
      id
      excerpt(pruneLength: 160)
      body
      frontmatter {
        title
        computerDate: date(formatString: "YYYY-MM-DD")
        humanDate: date(formatString: "DD MMMM YYYY")
        lead
      }
      headings {
        depth
        value
      }
    }
  }
`

index.mdx

---
/* frontmatter */
---

<!-- component imported as shortcode in `layout.js` -->

<TableOfContents headings={props.headings} />

layout.js （摘录）

import TableOfContents from "./article-components/TableOfContents"

const shortcodes = {
  TableOfContents
}

export default function Layout({ children }) {
  return (
    <div className="layout-wrapper">
      <Header />
      <main>
        <MDXProvider components={shortcodes}>
          {children}
        </MDXProvider>
      </main>
    </div>
  )
}

Answer 1

是因为slugger 。 在他们的文档中：

 slugger.slug('foo') // returns 'foo' slugger.slug('foo') // returns 'foo-1' slugger.slug('bar') // returns 'bar' slugger.slug('foo') // returns 'foo-2'

因为它确保链接是唯一的（就像 GitHub 那样），所以它附加了-1 、 -2等。

只要你使用你gatsby-autolink-headers插件就可以摆脱slugger的实现。 如果需要，您可以使用普通链接值 ( heading.value )、 slug字段（如果提供），或使用自定义 function 对其进行清理，例如：

function slugify (text) {
  return text
    .toString()
    .toLowerCase()
    .normalize(`NFD`)
    .trim()
    .replace(/\s+/g, `-`)
    .replace(/[^\w-]+/g, ``)
    .replace(/--+/g, `-`);
};

<Link to={"#" + slugify(heading.value)}>