Docusaurus配置：版权上方添加带图标链接区块遇ValidationError报错求助

错误原因 #

你在docusaurus.config.js的footer配置中添加了linksWithIcon字段，但Docusaurus的footer配置规范里并没有这个合法属性，因此触发ValidationError。

修复步骤 #

1. 修正自定义组件的命名冲突问题 #

你的原始组件中，导入的@docusaurus/Link和自定义的Link组件重名，会导致代码逻辑错误，先重命名自定义组件：

import React from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';

const LinksList = [
  { icon: 'fab fa-facebook-f', link: 'https://www.facebook.com' },
  { icon: 'fab fa-twitter', link: 'https://twitter.com' }
];

// 重命名自定义组件为LinkItem，避免和导入的Link冲突
const LinkItem = ({ icon, link }) => (
    <div className="footer__link-item">
        {/* 添加target和rel属性，打开外部链接更规范 */}
        <Link to={useBaseUrl(link)} target="_blank" rel="noopener noreferrer">
            <div className="text--center">
                <i className={icon} style={{ fontSize: '1.5rem' }} />
            </div>
        </Link>
    </div>
);

const LinksSection = () => (
    <section className="footer__links">
        <h4 className="footer__title">Links</h4>
        <div className="footer__columns" style={{ justifyContent: 'center', gap: '2rem' }}>
            {LinksList.map((props, idx) => (
                <LinkItem key={idx} {...props} />
            ))}
        </div>
    </section>
);

export default LinksSection;

2. 正确自定义页脚的两种方式 #

方式一：通过Swizzle替换默认Footer组件（推荐）

Docusaurus支持通过swizzle命令导出默认主题的Footer组件，然后修改它：

1. 运行以下命令导出Footer组件：

npm run swizzle @docusaurus/theme-classic Footer -- --eject

执行后会在src/theme/Footer.js生成默认的Footer代码。

2. 打开src/theme/Footer.js，在版权信息的上方插入你的LinksSection组件：

import React from 'react';
import LinksSection from '../components/LinksSection'; // 导入你的链接组件
// 保留原有的导入内容...

function Footer({ ...props }) {
  // 保留原有的逻辑代码...

  return (
    <footer className={`footer footer--${style}`}>
      <div className="container footer__container">
        {/* 插入你的Links区块 */}
        <LinksSection />
        {/* 保留原有的其他内容（如果需要） */}
        {copyright && (
          <div className="footer__copyright">
            {copyright}
          </div>
        )}
      </div>
    </footer>
  );
}

export default Footer;

3. 移除docusaurus.config.js中错误的linksWithIcon字段，保留合法的footer配置：

footer: {
  style: "dark",
  links: [], // 可根据需求保留或修改
  copyright: `Copyright © ${new Date().getFullYear()} Your Project Name`
}

方式二：完全自定义Footer组件

如果你不需要保留默认Footer的结构，可以直接编写完整的自定义Footer：

1. 创建src/components/CustomFooter.js：

import React from 'react';
import { useThemeConfig } from '@docusaurus/theme-common';
import LinksSection from './LinksSection';

export default function CustomFooter() {
  const { footer } = useThemeConfig();
  const { copyright, style } = footer;

  return (
    <footer className={`footer footer--${style}`}>
      <div className="container footer__container">
        {/* 自定义Links区块 */}
        <LinksSection />
        {/* 版权信息 */}
        {copyright && (
          <div className="footer__copyright">
            {copyright}
          </div>
        )}
      </div>
    </footer>
  );
}

2. 在docusaurus.config.js中配置使用自定义Footer：

const config = {
  // ...其他配置
  themes: [
    [
      '@docusaurus/theme-classic',
      {
        customCss: require.resolve('./src/css/custom.css'),
        footer: false, // 禁用默认Footer
      },
    ],
  ],
  // 新建src/theme/Footer.js，内容为：
  // export { default } from '../components/CustomFooter';
};

最终效果 #

完成上述配置后，重启Docusaurus服务，页脚会在版权信息上方显示带有图标的Links区块，符合你的预期效果。

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