Umi3.5用Helmet

芋圆社区 > 编程 > UmiJS > Umi3.5用Helmet

1021

2023-07-01

2023-07-05

Hey、小怪兽

• 版本：umi：3.5.0
• umi是有配置文件配置HTML的文档标签的，比如标题，描述，图标等
• 但是！这种配置的方法不大灵活，也不好搞SEO，所以这里采用umi整合的插件Helmet来配置
• 官方也给出了很简单的使用例子：

import React from 'react';
import { Helmet } from 'umi';

const Application = () => {
 return (
    <div className="application">
      <Helmet>
        <meta charSet="utf-8" />
        <title>My Title</title>
        <link rel="canonical" href="http://mysite.com/example" />
      </Helmet>
    </div>
  );
}

export default Application;

• 下面是我自己的使用方法：
1. 首先先引入Helmet和获取文档信息的接口（后端提供的），一些react的hook

import React, { useState, useEffect } from 'react';
import { Helmet } from 'umi';
import { getLogo } from '@/api/system';

2. 用useState定义

const [helmetConfig, setHelmetConfig] = useState({
  title: '',
  image: ''
});

3. 方法写在useEffect里，也就是页面加载后就请求接口，然后把数据存入localStorage，因为我这个是登录页，只要到登录页一般都需要请求这个接口的，如果在其他的页面，就在最上级的页面先localStorage.getItem('title')看看是不是null再判断要不要请求接口

useEffect(() => {
  getLogo().then((res) => {
    localStorage.setItem('title', res.data.title);
    localStorage.setItem('image', res.data.image);
    setHelmetConfig({
      title: res.data.title,
      image: res.data.image
    })
  });
}, []);

4. 接着在return里面写Helmet的标签就行了

return (
  <>
    <Helmet encodeSpecialCharacters={false}>
      <title>{helmetConfig.title}</title>
      <link rel="shortcut icon" href={`data:image/png;base64,${helmetConfig.image}`} />
    </Helmet>
    ....其他的代码
  </>
}

• 这里注意，为什么不写：

<link rel="shortcut icon" href={helmetConfig.image} />

• 如果这样写的话，是会报431的，Request Header Fields Too Large：
• 其实是这样的，后端给我的是Base64：

iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA...省略

• 如果直接拿这个赋值给href的话，走的是http URI scheme（我猜测），这样就报了431，只需要改成Data URI scheme的方式就可以了：

// 文本数据
data: text/plain,
// HTML代码
data: text/html,
// base64编码的HTML代码
data: text/html;base64,
// CSS代码
data: text/css,
// base64编码的CSS代码
data: text/css;base64,
// Javascript代码
data: text/javascript,
// base64编码的Javascript代码
data: text/javascript;base64,
// base64编码的gif图片数据
data: image/gif;base64,
// base64编码的png图片数据
data: image/png;base64,
// base64编码的jpeg图片数据
data: image/jpeg;base64,
// base64编码的icon图片数据
data: image/x-icon;base64,

• 官方文档还给了一些小拓展：
• 这个配置在根目录的.umirc.js里配置，每个人的架构应该都不一样，仅供参考：

import { defineConfig } from 'umi';

......

export default defineConfig({
  title: false,
  favicon: false,
  ......
});

• 至于encodeSpecialCharacters，我的理解是Helmet组件会对所提供的内容进行HTML实体编码：内容被编码意味着特殊字符（如 <, >, &, ', " 等）将被转换为它们对应的HTML实体表示形式（例如 <, >, &, ', "）。这样做是为了确保在HTML中正确渲染和显示这些标签和字符，以避免可能引起的安全问题和显示问题，关闭内容被编码可能会引入安全风险
• 比如：想要在<title>标签中显示文本"This is a <title> tag"，如果直接写成<title>This is a <title> tag</title>，浏览器会将第二个<title>解析为新的嵌套标签，从而导致显示错误，为了避免这个问题，我们使用<title>来替代<title>，再把encodeSpecialCharacters设置成false来避免转义成标签，还是以文本呈现，这样浏览器就能正确解析并显示<title>这个文本

<Helmet encodeSpecialCharacters={false}>
  <title>This is a &lt;title&gt; tag</title>
</Helmet>

• Helmet使用完整代码：

import React, { useState, useEffect } from 'react';
import { Helmet } from 'umi';
import { getLogo } from '@/api/system';

export default function (props) {
  const [helmetConfig, setHelmetConfig] = useState({
    title: '',
    image: ''
  });

  useEffect(() => {
    getLogo().then((res) => {
      localStorage.setItem('title', res.data.title);
      localStorage.setItem('image', res.data.image);
      setHelmetConfig({
        title: res.data.title,
        image: res.data.image
      })
    });
  }, []);

  return (
    <>
      <Helmet encodeSpecialCharacters={false}>
        <title>{helmetConfig.title}</title>
        <link rel="shortcut icon" href={`data:image/png;base64,${helmetConfig.image}`} />
      </Helmet>
      ...其他代码
    </>
  );
}

上一篇：Umi3.5国际化

Umi3.5用Helmet

回复