useThemeConfig讲解

useThemeConfig 是一个 React Hook，它提供了对当前主题配置的访问和控制。它可以在任何组件中使用，以获取或更改当前主题的配置。

使用 useThemeConfig 需要先安装和导入主题配置对象，例如：

import { useThemeConfig } from '@docusaurus/theme-common';
import themeConfig from '@theme/themeConfig';

然后，可以在组件中使用 useThemeConfig：

function MyComponent() {
  const { navbar: { title }, footer: { links } } = useThemeConfig();
  return (
    <div>
      <h1>{title}</h1>
      <ul>
        {links.map((link) => (
          <li key={link.label}>
            <a href={link.href}>{link.label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

在上面的例子中，我们使用了 useThemeConfig 来获取当前主题的 navbar.title 和 footer.links。这些值可以在任何组件中使用，以便根据主题配置自定义组件的外观和行为。

此外，useThemeConfig 还提供了一个 setConfig 方法，它可以用来更改当前主题的配置：

function MyComponent() {
  const { setConfig } = useThemeConfig();
  const handleClick = () => {
    setConfig({ navbar: { title: 'New Title' } });
  };
  return (
    <div>
      <button onClick={handleClick}>Change Title</button>
    </div>
  );
}

在上面的例子中，我们使用 setConfig 方法来更改当前主题的 navbar.title。这个方法可以用来在组件中动态地更改主题配置，以实现自定义的主题行为。