umijs 配置meta

UmiJS 是一个基于 React 的前端框架，它提供了一套完整的构建工具和配置系统，其中管理元数据（如SEO相关的头部信息）是在`umi.config.js`文件中进行设置的。要配置 meta 标签，你可以关注以下几个部分：

1. **`export default {}`** - 打开 `umi.config.js` 文件，并找到根级的默认导出，添加一个名为 `page` 或 `routes` 的属性，用于全局配置每个页面的元数据。

// umi.config.js
export default {
  page: {
    // 这里可以配置每个页面的meta信息
    '/about': {
      title: '关于我们',
      meta: [
        { name: 'description', content: '这是一个关于我们团队的页面' },
        { property: 'og:title', content: '关于我们 - UMI 页面' },
      ],
    },
  },
};

2. **路径匹配** - 可以使用动态路径匹配来指定特定路由的元数据，例如：

'/:pathName': {
  // 如果 pathName 匹配 'about', 则这里的配置生效
  meta: {
    title: `${process.env.NODE_ENV === 'production' ? '关于' : 'About'} ${pathName}`,
    description: '这是关于页面的详细描述',
  },
},

3. **自定义函数** - 使用插件或者自定义 hook 动态生成元数据，如根据内容动态设置描述：

// 自定义 hook
const generateMeta = (content) => ({
  name: 'description',
  content,
});

function MyPage({ content }) {
  return <div>{content}</div>;
}

MyPage.getMeta = () => generateMeta('这是我的页面内容');

// 在 routes 中引用 MyPage
{
  path: '/mypage',
  component: () => import('@/components/MyPage'),
},