Docusaurus中index.html未读取config.js footer配置问题求助

问题根源 #

自定义首页src/pages/index.js时，若未使用主题提供的Layout组件包裹页面内容，会导致docusaurus.config.js中全局配置的Footer等组件无法加载，页面会 fallback 显示默认的Footer内容。

解决步骤 #

1. 在自定义首页中引入并使用Layout组件
   打开src/pages/index.js，导入@theme/Layout，并将所有页面内容包裹在该组件内，示例代码如下：

   import Layout from '@theme/Layout';
   
   function HomePage() {
     return (
       <Layout>
         {/* 这里放置你的首页所有内容 */}
         <h1>欢迎访问我的站点</h1>
         {/* 其他页面元素 */}
       </Layout>
     );
   }
   
   export default HomePage;
   

   这样Layout会自动读取docusaurus.config.js中themeConfig.footer的配置，替换默认Footer。

2. 确认footer配置的结构正确性
   检查docusaurus.config.js中的footer配置是否位于themeConfig节点下，完整结构示例：

   module.exports = {
     // 其他站点配置（如title、url等）
     themeConfig: {
       // 其他主题配置（如navbar等）
       footer: {
         // 若需要配置footer链接可添加links字段
         // links: [
         //   { title: '文档', items: [{ label: '指南', to: '/docs/intro' }] }
         // ],
         copyright: `<b>Unless otherwise noted, all files contained herein are X Company, Inc., Proprietary and Confidential Information.</b>
         <br/><br/>
         Copyright © ${new Date().getFullYear()} Company, Version 1.00`,
       },
     },
   };
   

   若footer配置不在themeConfig下，Docusaurus会无法识别并使用默认内容。

3. 清除缓存并重新构建
   完成上述修改后，执行以下命令清除缓存并重启开发服务器：

   npm run clear
   npm run start
   

   避免旧缓存导致配置不生效。

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