如何让Docusaurus V2中HomepageFeatures.js的三面板可点击？

要让HomepageFeatures里的面板元素（图片、标题、描述）点击跳转到对应页面，按以下步骤操作：

1. 导入Docusaurus的Link组件 #

在HomepageFeatures.js文件顶部添加Link组件的导入，Docusaurus推荐用这个组件做内部路由跳转，避免页面刷新：

import Link from '@docusaurus/Link';

2. 给FeatureList添加跳转路径 #

修改你的FeatureList数组，给每个面板项新增url字段，填写目标页面的路径（比如教程页的路径/tutorials）：

const FeatureList = [
  {
    title: "Tutorials",
    Svg: require("../../static/img/Pyetrosyan_awesome.svg").default,
    description: (
      <>
        In these tutorials, you will find detailed instructions on how to install and set up 
        the software, as well as information on its various features and functions. We have 
        also included troubleshooting tips and best practices to help you get the greatest value 
        from the software.
      </>
    ),
    url: '/tutorials', // 新增跳转路径
  },
  // 其他面板项同理添加url字段
];

3. 选择跳转实现方式 #

根据需求选择以下任意一种方式包裹可点击元素：

方式一：整个面板（图片+标题+描述）可点击 #

把整个面板容器用Link包裹，用户点击面板任意区域都会跳转：

{FeatureList.map(({title, Svg, description, url}) => (
  <Link key={title} to={url} className="feature-panel-link">
    <div className="feature">
      <Svg className="featureSvg" alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  </Link>
))}

可以添加CSS样式优化交互体验（比如悬停阴影、移除链接下划线）：

.feature-panel-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.feature-panel-link:hover .feature {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

方式二：单独让图片、标题、描述可点击 #

分别用Link包裹每个需要跳转的元素，实现单独点击跳转：

{FeatureList.map(({title, Svg, description, url}) => (
  <div className="feature" key={title}>
    <Link to={url}>
      <Svg className="featureSvg" alt={title} />
    </Link>
    <Link to={url}>
      <h3>{title}</h3>
    </Link>
    <Link to={url}>
      <p>{description}</p>
    </Link>
  </div>
))}

方式三：仅标题可点击 #

只对标题做跳转包裹，其他元素保持静态：

{FeatureList.map(({title, Svg, description, url}) => (
  <div className="feature" key={title}>
    <Svg className="featureSvg" alt={title} />
    <Link to={url}>
      <h3>{title}</h3>
    </Link>
    <p>{description}</p>
  </div>
))}

注意事项 #

• 确保url字段填写的路径和你的页面路由一致，比如文档页路径通常是/docs/xxx，自定义页面路径是/xxx；
• 如果是跳转到外部网站，改用原生<a>标签并添加target="_blank" rel="noopener noreferrer"属性；

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