如何修改Docusaurus落地页的背景图片？

以下是2种低门槛实现方案，不需要复杂的CSS/JS基础即可完成：

方案1：仅修改自定义CSS（最推荐，无需修改JS代码） #

这是操作最简单的方案，全程只需要动2个文件：

• 把你准备好的背景图放入项目的static/img目录，比如命名为home-hero-bg.png
• 打开项目路径下的src/css/custom.css，在文件末尾添加如下代码：

/* 覆盖默认Hero区块的绿色背景 */
.hero {
  /* 路径对应static目录下的图片位置，无需加static前缀 */
  background: url("/img/home-hero-bg.png") center/cover no-repeat !important;
  /* 可自定义图片加载失败时的兜底背景色，替换色值即可 */
  background-color: #自定义兜底色值 !important;
}

/* 可选配置：背景更换后如果标题/副标题文字看不清，可自定义文字颜色 */
.hero .hero__title,
.hero .hero__subtitle {
  color: #ffffff;
}

• 重启本地开发服务，或重新打包部署即可生效。

方案2：修改首页组件配置 #

如果你的落地页是Docusaurus默认生成的，也可以直接修改首页组件的配置实现：

• 打开项目路径下的src/pages/index.js
• 找到Hero组件的代码块，新增style属性即可，原有其他配置不需要改动：

<Hero
  // 原有配置（如title、tagline、buttonText等）保持不变
  style={{
    backgroundImage: 'url(/img/home-hero-bg.png)',
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  }}
>

• 保存后刷新页面即可看到效果。

说明：以上方案默认适配Docusaurus官方经典主题@docusaurus/preset-classic，99%的默认安装场景均可直接生效。

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