如何让HomepageFeatures.js的三面板内容可点击？

Question

在 Docusaurus V2 中，我正在编辑三个面板的 HomepageFeatures.js。我想做的是让它们可点击，以便它们链接到相关部分。

在此处的图像中，这意味着第一张图片或标题（教程），甚至文本段落，将链接到教程页面。

有什么想法如何做到这一点吗？

代码部分是：

`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.
      </>
    ),
  },`

Answer 1

我弄清楚了如何链接 Docusaurus 3.2 的主页功能图像、标题和文本，但我认为类似的策略也适用于您的版本。 您的文件名和扩展名可能不同，但功能是相同的。

只需很少的编码：

在 Homepagefeatures index.tsx 文件中，添加新的 FeatureItem 字符串类型 (thingy) 来存储 href 值：

type FeatureItem = {
  title: string;
  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
  description: JSX.Element;
  thingy: string; // <--- new attr 
};

然后按如下方式配置您的FeatureList数组：

const FeatureList: FeatureItem[] = [
  {
    title: 'Your Feature Item Header',
    Svg: require('@site/static/img/digital-media.svg').default,
    // ---- Set your item URL  here ----
    thingy: '/docs/category/digital-media', 
    description: (
      <>
        blah blah blah..  
      </>
    ),
  },
  {
    title: 'Next Feature Item Header',

...

那么你的特征函数将如下所示：

// Added thingy arg
function Feature({title, Svg, description, thingy}: FeatureItem) {
  return (
    <div className={clsx('col col--4')}>
        // Put href here to make img, title and text to be links
        <a href={thingy}> <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <Heading as="h3" style={{color: '#ffffff'}}>{title}</Heading>
        <p style={{color: '#ffffff'}}>{description}</p>
      </div></a>
    </div>
  );
}

接下来的问题是找出如何将标题和文本颜色重置回其预期颜色，而不是链接颜色。特别是如果您允许用户确定的主题选择。

HTH