GatsbyJS Link的to属性如何使用反引号及动态JavaScript表达式？

嘿，这个问题我太熟悉啦！当然可以在Gatsby的Link组件的to属性里使用JavaScript表达式来生成动态slug，这恰恰是处理「最新文章」这类需要动态更新的链接的标准做法～

基础用法：模板字符串直接嵌入变量 #

你提到的反引号（模板字符串）其实就是实现动态路由的核心方式，可能之前没生效是因为变量绑定或者语法细节没处理对。举个简单例子：

假设你有一个存储最新文章信息的变量，比如latestArticle，它包含了文章的slug字段，写法应该是这样：

import { Link } from "gatsby"

// 假设这是你的最新文章数据，可能从API/GraphQL查询获取
const latestArticle = {
  slug: "2024-05-20-gatsby-dynamic-link",
  title: "我的最新文章"
}

function LatestPostLink() {
  return (
    <Link to={`/articles/${latestArticle.slug}`}>
      {latestArticle.title}
    </Link>
  )
}

export default LatestPostLink

这里用**模板字符串（反引号）**把静态路径部分和动态的slug变量拼接起来，to属性会自动解析这个表达式的结果。

结合GraphQL查询动态数据 #

因为你的「最新文章」是定期更新的，通常会通过Gatsby的GraphQL查询来获取最新的文章数据。比如在页面组件里用useStaticQuery：

import { Link, useStaticQuery, graphql } from "gatsby"

function LatestPostsSection() {
  // 查询最新的3篇文章
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark(sort: {frontmatter: {date: DESC}}, limit: 3) {
        nodes {
          frontmatter {
            title
            slug
          }
        }
      }
    }
  `)

  const latestPosts = data.allMarkdownRemark.nodes

  return (
    <div className="latest-posts">
      <h3>最新文章</h3>
      <ul>
        {latestPosts.map(post => (
          <li key={post.frontmatter.slug}>
            <Link to={`/posts/${post.frontmatter.slug}`}>
              {post.frontmatter.title}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default LatestPostsSection

这里通过GraphQL按日期倒序取最新的3篇文章，然后在map循环里用模板字符串动态生成每个文章的链接路径。

常见问题排查 #

如果之前反引号没生效，可以检查这几点：

• 确保变量名正确，没有拼写错误，且变量在当前作用域内可访问
• 模板字符串里的变量要正确用${}包裹，不要漏写符号
• 路径格式要符合Gatsby的路由规则，比如如果你的文章模板在src/templates/post.js，那路径应该和gatsby-node.js里创建的路由对应

内容的提问来源于stack exchange，提问作者user74843