Docusaurus移动端自定义Logo：Swizzling实现及配置修改

一、自定义Navbar Logo组件的逻辑验证与重构 #

你通过Swizzling覆盖src/theme/Navbar/logo/index.js的思路完全可行，下面是验证过的稳定逻辑，同时附带重构优化建议：

1. 基础可行版组件代码 #

import React, { useMemo, useState, useEffect } from 'react';
import { useThemeContext } from '@docusaurus/theme-common';
import Logo from '@theme/Logo';

const CustomNavbarLogo = () => {
  const { isDarkTheme } = useThemeContext();
  const [isMobile, setIsMobile] = useState(false);
  const MOBILE_BREAKPOINT = 768; // 自定义移动端断点，可根据需求调整

  // 监听屏幕尺寸变化
  useEffect(() => {
    const checkScreenSize = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
    
    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  // 缓存Logo配置，避免不必要的重渲染
  const logoProps = useMemo(() => {
    if (isMobile) {
      return {
        src: isDarkTheme ? '/img/mobile-logo-dark.png' : '/img/mobile-logo-light.png',
        alt: 'Mobile Site Logo'
      };
    }
    // 非移动端复用原配置的Logo
    return {
      src: isDarkTheme ? '/img/logo-dark.png' : '/img/logo-light.png',
      alt: 'Site Logo'
    };
  }, [isMobile, isDarkTheme]);

  return <Logo {...logoProps} />;
};

export default CustomNavbarLogo;

2. 重构优化：使用Docusaurus内置断点钩子 #

Docusaurus自带useBreakpoint钩子，可以直接判断当前屏幕断点，无需手动监听resize事件，代码更简洁规范：

import React, { useMemo } from 'react';
import { useThemeContext, useBreakpoint } from '@docusaurus/theme-common';
import Logo from '@theme/Logo';

const CustomNavbarLogo = () => {
  const { isDarkTheme } = useThemeContext();
  const { isMobile } = useBreakpoint(); // 默认断点为996px，可通过themeConfig.customizeTheme调整

  const logoProps = useMemo(() => {
    if (isMobile) {
      return {
        src: isDarkTheme ? '/img/mobile-logo-dark.png' : '/img/mobile-logo-light.png',
        alt: 'Mobile Site Logo'
      };
    }
    return {
      src: isDarkTheme ? '/img/logo-dark.png' : '/img/logo-light.png',
      alt: 'Site Logo'
    };
  }, [isMobile, isDarkTheme]);

  return <Logo {...logoProps} />;
};

export default CustomNavbarLogo;

二、适配JSON格式的docusaurus.config.js #

由于JSON格式的配置文件无法写入逻辑，你可以按以下方式配置，兼顾静态配置与自定义组件的灵活性：

1. 保留原有深浅模式Logo的静态配置，作为非移动端的默认值：

{
  "themeConfig": {
    "navbar": {
      "logo": {
        "src": "/img/logo-light.png",
        "srcDark": "/img/logo-dark.png",
        "alt": "Site Logo"
      }
    }
  }
}

2. 在自定义Logo组件中复用配置文件里的路径，避免硬编码：

import React, { useMemo } from 'react';
import { useThemeContext, useBreakpoint, useThemeConfig } from '@docusaurus/theme-common';
import Logo from '@theme/Logo';

const CustomNavbarLogo = () => {
  const { isDarkTheme } = useThemeContext();
  const { isMobile } = useBreakpoint();
  const { navbar } = useThemeConfig();
  const defaultLogo = navbar.logo;

  const logoProps = useMemo(() => {
    if (isMobile) {
      return {
        src: isDarkTheme ? '/img/mobile-logo-dark.png' : '/img/mobile-logo-light.png',
        alt: 'Mobile Site Logo'
      };
    }
    // 复用config里的Logo路径
    return {
      src: isDarkTheme ? defaultLogo.srcDark : defaultLogo.src,
      alt: defaultLogo.alt
    };
  }, [isMobile, isDarkTheme, defaultLogo]);

  return <Logo {...logoProps} />;
};

export default CustomNavbarLogo;

这样后续修改config中的Logo路径时，组件会自动同步，无需手动修改组件代码。

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